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('#app')!.innerHTML = ` ` let editor: LexicalEditor document.addEventListener('DOMContentLoaded', () => { const editorElement = document.getElementById('myeditor') editor = createEditor() editor.setRootElement(editorElement) }) ポイントは 3 つです: contenteidtable であるを準備する。 LexicalEditor を create する。エディタのルート要素にをセットする。 4. テストそして失敗 http://localhost:5173/ をブラウザで開きます。入力しても何も更新されないはずです…

Feb 24, 2025 - 14:00

はじめに

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 = `
  
`

let editor: LexicalEditor

document.addEventListener('DOMContentLoaded', () => {
  const editorElement = document.getElementById('myeditor')
  editor = createEditor()
  editor.setRootElement(editorElement)
})

ポイントは 3 つです:

contenteidtable である
を準備する。
LexicalEditor を create する。
エディタのルート要素に
をセットする。

4. テストそして失敗

http://localhost:5173/ をブラウザで開きます。
入力しても何も更新されないはずです…