Zenn
Open5

lexicalを使いたい

ねづすけねづすけ

何やらmetaからすごいwysiwygエディタが出たと聞いたので触ってみたい

ねづすけねづすけ

普段の業務に取り入れることを想定し、angularで触る

所感

  • 公式ページをみてチュートリアルを終えるも何も出てこず、何も入力できなくて驚いた
  • なんかおかしいと思い、色々調べるとなるほど最初は何もなく自分で組み立てていく方式とのこと（これは前身的ライブラリDraft.js由来らしい）
  • あとeditorを付与するdiv要素にはcontentible="true"をつけないといけないらしい（それはREADMEに書いてよぉ…）
    • <div #plainTextEditor contenteditable="true"></div>
ねづすけねづすけ

初期状態だと何もないから、キャレットすら表示されないけど、あらかじめ用意されているプリセットを使えばそれなりのテキストエリアになる（ex. command+bで太字になる的な）

// シンプル
npm install @lexical/plain-text @lexical/utils @lexical/selection @lexical/clipboard
// リッチ
npm install @lexical/rich-text @lexical/utils @lexical/selection @lexical/clipboard
ねづすけねづすけ

データの流れとかcommandの作成方法とかを勉強すれば、色々とカスタマイズできそう？
ex. :+1:って入力したら絵文字に変換するとか

ねづすけねづすけ

react有するmetaだけあってreactには既に完成されたコンポーネントが多く供給されているが、それ以外のフレームワークだと既製品のコンポーネントはあまり期待できなさそう？
結構コストは高そう