Facebook製エディタLexicalを試してみたよ！

話題になっていたFacebook製のエディタライブラリLexicalを試してみました！

先に言っちゃうと、試してみた感想は 「今後の発展に期待？」 です。
・公式サイトのドキュメントが未完成
・デフォルトのスタイル/テーマが無い？

最小の構成

Editor.tsx

import type { NextPage } from 'next'
import LexicalComposer from '@lexical/react/LexicalComposer'
import LexicalRichTextPlugin from '@lexical/react/LexicalRichTextPlugin'
import LexicalContentEditable from '@lexical/react/LexicalContentEditable'

// エラーハンドラ
function onError(error: Error) {
  console.error(error)
}

const Editor: NextPage = () => {  
  // エディタ設定
  const initialConfig = {
    onError,
  }
  
  return (
    <>
      <LexicalComposer initialConfig={initialConfig}>
        <LexicalRichTextPlugin
            contentEditable={<LexicalContentEditable />}
            placeholder={null}
          />
	  {/* ここにプラグイン(機能)を詰め込んでいく */}
      </LexicalComposer>
    </>
  )
}

export default Editor

たぶんこれが最小構成。
LexicalComposer がエディタの親で、この中にいろいろなエディタ機能に対応するプラグインを詰め込んでいく。

エディタ本体もプラグインになっていて、LexicalPlainTextPlugin か LexicalRichTextPlugin を選ぶ。

スタイルが無い？！

リッチテキストを選んだら、公式サイトのPlaygroundみたいなツールバーが表示されると思ったんだけど何も出てこない。

↑こういうのを期待してたのに
↓こうなった

スタイルがまったく無い。
あまりに真っ白なのでプレースホルダを設定してみたら、プレースホルダに position:absolute が無いのでエディタに重なってすらくれない。

わたしが何か間違えたのかとドキュメントを見返してリポジトリを追ったりしたんだけど、たぶんそもそも、Lexicalというライブラリ自体にスタイルが含まれていないのだと思いました。
（自信ないので違ったら指摘してください）

リポに含まれているplaygroundから取ってくるか、リポで紹介されている sandboxから拝借してくる必要がありそう。

sandboxを見た感じだと、たぶんツールバーのUIを表示するようなプラグインは用意されていなくて、ツールバーを設置したければ、sandbox等から拝借するか、自分で作る必要があるみたい。
sandboxのToolbarPluginを読めば、だいたいの使い方がわかるのかなあと見込んでます。

テーマの使い方

公式のドキュメントに「Theming」についてはしっかり記載がありました。

Editor.tsx

// テーマオブジェクト
const theme = {
  placeholder: 'editor-placeholder',
  paragraph: 'editor-paragraph',
}
// エラーハンドラ
function onError(error: Error) {
  console.error(error)
}

const Editor: NextPage = () => {  
  // エディタ設定
  const initialConfig = {
    theme,
    onError,
  };

テーマオブジェクト を作って、エディタ設定に theme キーで指定すれば反映されます。

どうやら、このテーマオブジェクトで指定するのはスタイルではなくクラス名だけのようです。
上記の例だと、エディタ中のパラグラフ（pタグ）に editor-paragraph というクラスが付けられます。
ここで指定するのはクラス名だけなので、スタイルは別で作る必要があります。

テーマオブジェクトに指定できるキーはサイトに一覧がありました。

ちょっと困ったのが、placeholder だけは反映させる方法が分かりませんでした。テーマオブジェクトで指定したクラス名が対応した要素に反映される、という理解は間違いないと思うんですが・・・

sandboxでもプレースホルダだけはclassNameで直接指定してますし、テーマオブジェクトの指定は効かないのかな？

function Placeholder() {
  return <div className="editor-placeholder">Enter some rich text...</div>;
}

もしかすると、また別のプレースホルダの指定方法があるのかもしれません。

今後の発展に期待？

まだ表面的なところを見ただけなのでLexicalのポテンシャルはよく分かりませんでしたが、カスタマイズ性が特徴らしいので、複雑な機能を持ったエディタには適しているのかもしれません。

でも「ポンと置くだけでリッチなエディタを使いたい」という用途には向いてないのかなーと思いました。
少なくともデフォルトテーマが用意されるまでは待機ですかね。

わたしはQuillを使ったプロジェクトに関わっていたので、Quillの代わりになる可能性を探るためにLexicalを触ってみたんですが、まだ既存のエディタライブラリを置き換えるほどには届いていないかなーという印象です。

けど新しいライブラリだからあっという間に機能充実するかもしれないので、期待しながら経過観察です。

https://lexical.dev/
https://github.com/facebook/lexical

追記

機能追加にも挑戦してみました！
https://zenn.dev/haruru/articles/12206977dc0c48