はじめに
Lexical はモダン JavaScript (JS) テキストエディターフレームワークです。 拡張性と高パフォーマンスを実現するように設計されています。 リアクティブ状態モデルが採用されており、更新の最適化と動作の予測可能性が確保されています。 さらに柔軟なデータモデルとしてのノードも備えています。
Lexical はオープンソースプロジェクトです。Draft.js の後継と考えられています。 開発の主体は Meta 社 で MIT ライセンスで提供 されています。 React 用途に限定されていません。Vanilla JS もサポートされています。 柔軟性が高いので Svelte や Vue のような他の JS ライブラリとも統合できます。
本投稿では Bun 駆動の Vite プロジェクトにこのエディターを搭載して、Vanilla JS で取扱う流れを説明します。
環境
- Web エディター: Lexical 0.24
- ビルダー / バンドラー: Vite 6.1.0
- JavaScript ランタイム: Bun 1.2.2
- OS: CathyOS (Linux ディストリビューション)
チュートリアル
1. Viteプロジェクト作成
まず次のコマンドを実行します:
$ bun run create vite lexical-example
いくつか質問されます。一例として私の回答を以下に示します:
✔ Select a framework: › Vanilla
✔ Select a variant: › TypeScript
Scaffolding project in /(...)/lexical-example...
Done. Now run:
cd lexical-example
bun install
bun run dev
中に入りましょう:
$ cd lexical-example
$ bun install
2. エディターフレームワークのインストール
依存関係を追加します:
$ bun add lexical
私の場合 installed [email protected] と出力されました。
3. アプリへ埋込み
src/main.ts を以下のように更新します:
import { createEditor, type LexicalEditor } from 'lexical'
document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
<div id="myeditor" contenteditable></div>
`
let editor: LexicalEditor
document.addEventListener('DOMContentLoaded', () => {
const editorElement = document.getElementById('myeditor')
editor = createEditor()
editor.setRootElement(editorElement)
})
ポイントは 3 つです:
contenteidtableである<div>を準備する。LexicalEditorを create する。- エディタのルート要素に
<div>をセットする。
4. テスト そして失敗
http://localhost:5173/ をブラウザで開きます。
入力しても何も更新されないはずです…😂
5. エディターの実装
この失敗の原因は、LexicalEditor インスタンスは存在するけれど、有効なエディターが存在しないことです。
プレーンテキストエディタ などのパッケージを登録することで修正できます。 必須ではありませんが、入力履歴管理に便利な history モジュールも利用できます。
$ bun add @lexical/plain-text @lexical/history
src/main.ts を以下のように編集します:
import { createEditor, type LexicalEditor } from "lexical"
+ import { createEmptyHistoryState, registerHistory } from '@lexical/history'
+ import { registerPlainText } from '@lexical/plain-text'
(...)
document.addEventListener("DOMContentLoaded", () => {
(...)
+ registerPlainText(editor)
+ registerHistory(editor, createEmptyHistoryState(), 300)
})
src/main.ts 完成形
import { createEditor, type LexicalEditor } from "lexical"
import { createEmptyHistoryState, registerHistory } from '@lexical/history';
import { registerPlainText } from "@lexical/plain-text";
document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
<div id="myeditor" contenteditable></div>
`
let editor: LexicalEditor;
document.addEventListener("DOMContentLoaded", () => {
const editorElement = document.getElementById("myeditor")
editor = createEditor()
editor.setRootElement(editorElement)
registerPlainText(editor)
registerHistory(editor, createEmptyHistoryState(), 300);
})
6. Test it to succeed
さあこれで入力ができます !!!
おわりに
Lexical は、スピード / 信頼性 / 柔軟性を重視して設計されたオープンソースのテキストエディターフレームワークです。 利用者は、プレーンテキストエディターだけでなく、リッチテキストエディターや WYSIWYG エディターも作成できます。 構造化されたコンテンツ / プラグイン / 共同作業機能も利用できます。
幸せな開発を :)