React の Editor ライブラリを調べる

[spring1018]

WYSIWYG のものが対象。 https://github.com/JefMari/awesome-wysiwyg-editors?tab=readme-ov-file#for-react https://zenn.dev/tns_00/articles/wysiwyg-for-react

調査結果: https://github.com/spring1018/react-ui/issues/95#issuecomment-2272644573

[spring1018]

リッチテキストでいくなら、Slate.js が良さそう。 画像なども対応可能。

[spring1018]

Tiptap が良さそう https://tiptap.dev/docs/

[spring1018]

現段階の整理

要件

優先度高い順？

• Markdown で書ける
• テキストをコピーしたときにフォーマットが維持される
• 画像挿入できる
  • ペーストか Toolbar 経由かは問わない
• Toolbar ライクな機能がある
• Tab でインデント・アンインデントができる

評価

• Plate
  • https://github.com/udecode/plate
• Slate.js
  • https://www.slatejs.org/examples/markdown-shortcuts
  • tab indent ができない (プラグインが必要？)
  • またバージョン0
• Editor.js
  • トップページのコンポーネントはハイフン入力で変換が起きなかった
  • プラグイン任せ？
  • https://github.com/codex-team/editor.js/discussions/1870
    • ↑の処理はまだ実現できていない？
• Quill
• Tiptap
  • コピーしたときに書式が維持されない (Export 機能が Pro であるので、標準機能はおそらくない)
  • https://github.com/spring1018/react-ui/issues/116
• Milkdown
  • https://github.com/spring1018/react-ui/issues/117
  • Tab のインデントができない (アンインデントはできる)
  • Menu が動かない
  • ドキュメントがわかりにくい
  • React にそこまで力を入れていない？
• Toast UI
  • エディタ以外のライブラリも含む
  • React 向けではない？
  • WYSIWIG モードでは Toolbar 経由での変換しかできない？
• Material Tailwind
  • UI ライブラリ
  • tiptap ベース
• BlockNote
  • https://github.com/spring1018/react-ui/issues/118
  • https://www.blocknotejs.org/
  • 無料でできる範囲が十分広い

[spring1018]

BlockNote が良さそう

• [ ] BlockNote を調べる