エディタライブラリの変更について
こんにちは！
テイラーワークス プロダクトチームの谷本です。
前回に引き続き、自社プロダクトで使用しているWYSIWYGエディタのライブラリを変更した際の話をまとめていきます。
本記事は連載構成になっております。
本連載の構成
#1：概要
#2：エディタライブラリ比較、選定 ←本記事です📝
#3：エディタコンポーネント実装（UIカスタマイズと機能拡張）
#4：旧エディタとの互換性対応、まとめ
今回は、ライブラリ比較から選定までの話をまとめます！
ライブラリ選定
ライブラリ比較検討
前提条件
1.Next.js+TypeScript対応していること
2.機能拡張できること
3.HTMLで保存できること
ライブラリ比較（各情報は2023年2月時点）
| ライブラリ | UI提供 | 導入しやすさ | 拡張性 | 日本語対応 | メモ |
|---|---|---|---|---|---|
| Lexical | ☓ | △ | ◎ | ○ | Meta製 Draft.jsの後進だが、 Draft.jsと違い特定のビューライブラリやフレームワークに依存なし 2022年リリースなので、 破壊的変更の可能性あり |
| Tiptap | ☓ | △ | ◎ | ○ | 公式の拡張機能充実 拡張機能の開発は頻繁に行われている |
| Slate | ☓ | △ | ○ | ☓ | Beta版のため、 プロダクト導入は非推奨 |
| Draft.js | ☓ | △ | ◎ | ○ | Facebook製 メジャーだが、LexicalのOSS化によりアーカイブ化が決定 |
| Remirror | ○ | △ | ◎ | ☓ | ReactベースのPromiseMirror（※）ラッパー 日本語の参考文献は少ない |
| TinyMCE | ○ | ◎ | △ | ○ | 有料（料金プラン参照） サポートは充実しているが独自実装は△ |
| Mantine | ○ | ◎ | ◎ | ○ | Tiptapベース ツールバーのUI提供もあり、 アイコンやTooltipテキストのカスタマイズも可能 |
| Plate | ○ | ○ | ○ | ☓ | Plateベース 一部TS対応が不十分な箇所があるため 対応必要 |
| TOAST UI | ○ | ◎ | ☓ | ☓ | ツールバーのUI提供もあり 独自実装はできない |
※PromiseMirror
リッチテキストエディターを構築するためのツールキット。
カスタマイズ性に富んでいるが学習コストは高い。
Mantineに決定
ライブラリ比較検討の結果、MantineのRichTextEditorを導入しました。
選定理由１：ツールバーまでUI提供あり導入コストが低い
Mantineの提供するUIコンポーネントはツールバーもあり、ControlGroupの編集により自由にカスタマイズ可能です。
導入例
Mantineの提供しているRichTextEditorコンポーネントをimportし、TiptapのuseEditorhooksに使用したい機能を渡すことで機能実装することができます。
import { RichTextEditor } from '@mantine/tiptap'
import { useEditor } from '@tiptap/react';
import TextAlign from '@tiptap/extension-text-align'
import Underline from '@tiptap/extension-underline'
type Props = {
content: string
}
export const Editor = ({ content }: Props) => {
const editor = useEditor({
extensions: [
StarterKit,
Underline,
TextAlign.configure({ types: ['heading', 'paragraph'] }),
],
content: content ?? '',
})
return (
<RichTextEditor editor={editor}>
<RichTextEditor.Toolbar sticky stickyOffset={60}>
<RichTextEditor.ControlsGroup>
<RichTextEditor.Bold />
<RichTextEditor.Underline />
</RichTextEditor.ControlsGroup>
<RichTextEditor.ControlsGroup>
<RichTextEditor.H1 />
<RichTextEditor.H2 />
<RichTextEditor.H3 />
</RichTextEditor.ControlsGroup>
<RichTextEditor.ControlsGroup>
<RichTextEditor.Blockquote />
<RichTextEditor.BulletList />
<RichTextEditor.OrderedList />
</RichTextEditor.ControlsGroup>
<RichTextEditor.ControlsGroup>
<RichTextEditor.AlignLeft />
<RichTextEditor.AlignCenter />
<RichTextEditor.AlignRight />
</RichTextEditor.ControlsGroup>
</RichTextEditor.Toolbar>
<RichTextEditor.Content />
</RichTextEditor>
)
}
RichTextEditor.ToolbarのControlGroupは任意で変更できるので、順番を入れ替えたりControlGroup内の機能を変更することで簡単にツールバーを実装できます。
選定理由２：Tiptapベースなので機能拡張実装しやすい
上記導入手順にも記載したとおり、TiptapのuseEditorを使用しているので、Tiptapで提供されている拡張機能はTiptapからインストールして追加することができます。
また、Tiptap公式ドキュメントのCustom extensionsを参考に、独自で機能実装し、エディタに追加することもできます。（公式提供の機能の拡張もできる＆１から実装もできる）
上記の導入コストの低さと拡張性のバランスの良さから、Mantineを使用し新しくエディタコンポーネントを作成することとしました。
まとめ
今回は、新しいライブラリの選定までをまとめました！
エディタに限らず、ライブラリはいろんな種類があるので選定が難しいですね...
次回は、エディタコンポーネント実装についてまとめていきます。
また、テイラーワークスでは、エンジニア採用強化中です！
フロントエンドに限らず、バックエンド・インフラ・デザイナーなど全領域で絶賛募集中です。
▼ 少しでも興味をお持ちいただけましたら、採用ページもチェックしてみてください ▼
Discussion