Meta の新しいリッチテキストエディターフレームワーク Lexical を調べる

Brand-new Rich Text Editor Framework! 先日 Meta から新しいリッチテキストエディターのフレームワーク Lexical の OSS 化が発表されました。 一方で、 Meta が開発していた既存の React 用リッチテキストエディターフレームワーク Draft.js はアーカイブが決定されました。 実は自分は業務で Draft.js をめちゃくちゃ使っていて、発展に期待しつつウォッチしていたので開発が終了してしまうのが非常に残念ではあるのですが、代わりにより高度に抽象化されたフレームワークが公開されたのでこれはマスターするしかありません。 ということで調べたことをまとめていこうと思います。 執筆時点(2022 年 4 月)では正式リリースされていないので、本稿のサンプルコードは参考にならなくなる可能性があります。 概要 エディターを作るためのフレーム

[yarumato]

“共同編集可能なテキストエディターが開発可能になる。React専用ではなく、VueでもVanillaJSでも使える。見た目は何もなく、ツールボタンやエディターのスタイリング等は自作の必要。動くサンプル例を載せました”

[uehaj]

ReactではStateから仮想 DOM を組み立ててReactに渡すと最も効率の良い手順で実DOMを更新してくれますが、それと同様にLexicalがEditorStateの差分からDOM更新を最適な手段でやってくれるのでcontentEditableなDOMを扱う辛みを吸収

[aktkro]

ほへー

[kagehiens]

バニラJSでも動くの素晴らしいな。

[Derabon]

とても参考になりました！すばらしい。