Closed2023/05/04にクローズ80

Lexical Playgroundの中を覗く

公式ドキュメントを読んだりちょっと触ってみたりした。仕組みの概要は掴めたしちょっと触っただけで大体はいい感じになることがわかったけれど、イマイチうまくいかない部分がある。しかし公式ドキュメントはまだ充実してない。公式Playgroundがドキュメント代わりに用意されているので、そちらを読んでいく。
https://playground.lexical.dev/

まずはPlaygroundそのものを触って、どんな機能があるか確かめていく。

@-mention

hashtag

ここらへんはなんとなく把握してた

Selectionと同時にメニューが出る

speech to text
Dragonなんとかだよね。

Block Editorになってるな

Linkはこんな感じ

画像の貼り付けも簡単

[] でcheckboxでるわ

textはcolorもfont-familyもsizeもいじれる。alignも変えられる。

「```」でcode block出てくるわけではないな。

insertめっちゃあるな

おーFigma埋めれる。これは作りたいものに欲しいやつかも。

Horizontal Ruleは横線だけども---で出現するわけではない

そういえばindentできてるな

セル結合など見た目の調整がいろいろできるテーブル

Experimentalなtableもあるけどこっちは期待通りに動かない

Sticky note。すごいけどいらん。

toggle。これは嬉しいね。

数式も

Exicaldrawすごいな！任意のお絵かきが画像として貼り付けられる

そういえば下の方にtree構造が

embedとか入れたら単純なmdでデータ永続化するのは難しそうな気もするけど...
例えばFigmaだったら ![figma](figma link)とかでいいのかな。

そういえばZennは@[service](link)だな

特に気になるのはここらへんかな〜

list系の挙動
imageの処理
@-mention（/でコマンドパレット出現みたいなことができそうだから）
embeded Figma
toggle
Exicaldraw

見ていくかー

とりま本体

ざっと気になるのはここらへんかな？

DragDropPaste
MentionsPlugin
ImagesPlugin
FigmaPlugin
LexicalClickableLinkPlugin
TabIndentationPlugin
CollapsiblePlugin

公式提供っぽいのでTabIndentationPluginを手元で試したらこうなった。これはふつうにstylingの問題っぽい。

該当スタイルはここらへん。

list-insideを追加したら難しいことになった...

ふつうにこれで対処した。themeにて。

    listitem: "[&:has(ul)]:list-none",

olも対処するとこうか

[&:has(:is(ol,ul))]:list-none

ネストしたら白丸にするとかabcにするとかしようと思ったら複雑そうだな

ためしにNotion覗いたらこれさえもdivだったしなんならulとかliとか使わずに全部divだった。完全にBlockをfrom scratchで定義しているんだな。これは真似できんわ。

とりあえずいい感じになったからいいや

こうなるとListMaxIndentLevelPluginも欲しくなるのでPlaygroundのやつをコピペする

さあさあ、画像見ていきますか

そもそもnodeから定義しなくてはいけない

ほんでもってImageそのものがこれ

ImageNodeがDecoratorNodeを継承して定義されていて、その中のdecorateメソッドでImageComponentが使われている。

ImagePluginの方で、コマンドの登録を行って

DragDropPasteなどでコマンドが呼ばれているって寸法かな

ちなみにPasteなどのイベントはここらへんでコマンドとして登録されているらしい。本体。

DRAG_DROP_PASTEはそこらへん色々まとめてるのか、しかもこれはrich-textから出てるし。複雑だな〜。

とりあえず大まかな構造は理解した...
肝心のimage urlどこで管理しているの問題がまだ

ここでマジックが起きているように見える？何かしらでsrcが作られているはずなんだけど...

うーんわからん、なんでこのpayloadにもろもろの情報が入っている？

contenteditableにimageをpasteしたときにはそうなる？

あー、なんか、よしなにやってくれるな

      <div contentEditable>Hello</div>

Paste後

base64でエンコードされてるね

なのでdecoratorの中でこいつをどっかのstrageにuploadする処理を書けば良いのかな。decoratorが返すのはあくまでも![image](link)にしておいて、この形式が来たら画像として表示するようなTransformerを書く。

（だ、だり〜）

そういえばLexicalさん、decoraterでJSX.Elementを返せばそのまま描画してくれるんだな。

playgroudの方では.lexicalっていう独自のファイルでimport/exportができるようになってて、その際に画像も普通に保存されてるな。
これをサーバーに保存しても良いのかな...。
でもtext fileの方が圧倒的にサイズ小さいよなー

エンコードというかFileReader使ってたの普通にここにあったわ。
ImagePluginからの責務はあくまでsrcを受け取ってImageNodeを作るところで、fileを変換するのはDragDropPasteの責務らしい。ここでuploadすれば大丈夫。

こいつは今度Vercel Blobと併せて試す

Imageが難しいので簡単そうなやついこーおもてCollapsible（toggle）を見に行った。
ふつうにdetails要素を返しているっぽい。

ん、でもContentの方はsummaryではなくてdivだな

details>div>p,p,p....みたいになっちゃうってことかな？

ちげえわ、Titleってのが別で定義されていた

Transformを駆使していい感じに要素を並べているっぽい、すぐには読めないが

stylingのやり方もdom生成時にclassNameつけてCSS読み込んでいるだけなので割と簡単に導入できそう

import LexicalClickableLinkPlugin from "@lexical/react/LexicalClickableLinkPlugin";

こいつを入れたらリンクがクリックできるようになった

MentionsPluginを見てる。本体はLexicalTypeaheadMenuPluginとかいうやつだった。

そいつはここにあるんだけど、結構ごついからあまり深追いしないほうが良い気がする。

かわりにinterfaceとMentionsPluginでの使い方を見て分析する。

ざっくりいうと、onQueryChangeにsetStateを渡せば適当なStateで入力を管理できて、

  const [queryString, setQueryString] = useState<string | null>(null);
...
   onQueryChange={setQueryString}

そいつをもとに計算したoptionsを渡しつつ、menuRenderFnで表示の方法を制御できるらしい。

      options={options}
      menuRenderFn={(
        anchorElementRef,
        {selectedIndex, selectOptionAndCleanUp, setHighlightedIndex},
      ) =>
        anchorElementRef.current && results.length
          ? ReactDOM.createPortal(
              <div className="typeahead-popover mentions-menu">
                <ul>
                  {options.map((option, i: number) => (
                    <MentionsTypeaheadMenuItem
                      index={i}
                      isSelected={selectedIndex === i}
                      onClick={() => {
                        setHighlightedIndex(i);
                        selectOptionAndCleanUp(option);
                      }}
                      onMouseEnter={() => {
                        setHighlightedIndex(i);
                      }}
                      key={option.key}
                      option={option}
                    />
                  ))}
                </ul>
              </div>,
              anchorElementRef.current,
            )
          : null
      }

そいつが発動するのはtriggerFnがQueryMatchを返したときらしい。triggerFnにはユーザーの入力が全部細切れに渡されているってことなのかな。

function getPossibleQueryMatch(text: string): QueryMatch | null {

コード読んでて気がついたけれど、/でmenuでるのもう実装されているな。

ほんでTriggerFnを返すutil的なものが提供されているっぽい。

useBasicTypeaheadTriggerMatchで検索かけたらEmoji入力が実装されているのも見つけたわ。

Emojiもいいね、あとで覗こう

ぼくが本当に実装したいものはこっちにあった

さっきと構造は大体同じなんだけど、一部メニューが選択されたときにモーダルが出てくるようにしてあるのでModalの状態管理もここで行っている。

ただのオブジェクト生成したいときにclass多用しているな。同時にInterfaceにもなって便利なのか。

いやすごいな、dynamicにoption生成もしてる

option本体としては、queryStringがあるときは引っかかるやつを、そうでないときはbaseOption全部を返すようにしている。

こういう用途だとメモ化は重要だろうな

寄り道にはなるけどこのuseModalの実装が汎用的でおもしろい

menuRenderFnでも見かけたReactDOM.createPortal()初めてみたけどめちゃ重要だな。Renderの場所を指定できるらしい。モーダルなど、親要素のスタイリングに縛られたくないものをbody直下にRenderしたいときとかに便利。

実際にLexicalのModalも、どこから呼ばれてもbody直下にRenderされるようにしてる。

うわ〜、Reactの新しい公式ドキュメントじっくり読むのもやりたくなってきた〜

とりまComponentPickerMenuPluginは単調だけど見た目は派手なので自前実装してみるの良さそう！

一応FigmaPluginも覗いておしまいにするか〜。
本体の実装はNodeの登録だけになっててシンプル。

問題はNodeですよね〜

おろ？Nodeも結構シンプルだな。iframeに全部任せか、そりゃそうか。

でもこのNodeは初めて見た気がするな...

まあ、Figmaを埋め込めることにどれだけの価値があるかはわからんのであんま深追いせんとこ

DnDはここみたい。今は深追いしないけどメモ。

今後の展望：色々自前で実装してみる

TogglePlugin
SlashManuPlugin
EmojiShortcutPlugin
ImagePlugin（w/ Vercel Blob）

このスクラップは2023/05/04にクローズされました