Lexicalエディタ実装 #124
Description
やること
Lexicalを使用したWYSIWYGエディタを実装し、記事作成・編集画面に組み込む。
目的
- マークダウンではなく、リッチテキストエディタで記事を執筆できるようにする
- プレビュー機能で公開前に見た目を確認できるようにする
方針
パッケージ
以下のLexical関連パッケージを導入:
lexical@lexical/react@lexical/markdown@lexical/html@lexical/headless@lexical/rich-text@lexical/list@lexical/link@lexical/code
実装内容
Lexical設定（src/lib/lexical/config.ts）
- エディタのノード定義（見出し、リスト、リンク、コードブロックなど）
- テーマ設定（Tailwind CSSと連携）
プラグイン（src/components/console/ArticleEditor/EditorPlugins.tsx）
- HistoryPlugin（Undo/Redo）
- MarkdownShortcutPlugin（Markdown記法対応）
- ListPlugin（リスト）
- LinkPlugin（リンク）
- CodeHighlightPlugin（シンタックスハイライト）
エディタコンポーネント（src/components/console/ArticleEditor/ArticleEditor.tsx）
- Lexicalエディタ本体
- ツールバー（太字、斜体、見出し、リスト、リンク、コードブロック）
- 編集/プレビュー切り替え
プレビューコンポーネント（src/components/console/ArticlePreview.tsx）
- Lexical JSONをHTMLにレンダリングして表示
- 既存の記事詳細ページと同じスタイル適用
HTML生成（src/lib/lexical/render.ts）
- Lexical JSONからHTMLを生成
- シンタックスハイライト対応（shiki使用）
- 記事保存時に
content_htmlカラムに保存
タスク
- Lexical関連パッケージのインストール
- Lexical設定ファイル作成（
src/lib/lexical/config.ts） - エディタコンポーネント実装
- ツールバーUI実装
- プラグイン設定
- プレビュー機能実装
- HTML生成機能実装（shiki連携）
- 記事フォームへの組み込み（textareaをLexicalに置き換え）
- 読了時間の自動計算実装