Lexical 0.24 with Vanilla JS: 始め方

はじめに

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 lexical@0.24.0 と出力されました。

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 エディターも作成できます。
構造化されたコンテンツ / プラグイン / 共同作業機能も利用できます。

幸せな開発を :)