リッチテキストエディタフレームワークLexicalの実践的な使い方 - バイセル Tech Blog

はじめに Lexicalで開発する上で躓いたこと カスタムNodeの作成 Custom Nodeの作成 (ParagraphStyleNode) ステップ１ 背景色をNodeに持たせる ステップ２ DOMへの出力設定を追加 ステップ3 エディタで操作するために必要な設定を追加 ステップ4 HTMLに変換するための設定を追加 エディタにNodeを挿入するためのCommandの作成 Selectionで置換可能かを判断 ParagraphStyleNodeに変換 priorityを付ける Nodeを挿入できるボタンUIの作成 エディタに作成したNodeを登録 ParagraphStyleNodeの完成コード 自動リンクプラグインAutoLinkの作成 Commandを使って改行を検知 リンクに変換しない条件 リンクに変換する HTMLへの変換 まとめ はじめに こんにちは。開発2部の富山です。