Lexical Playgroundの中を覗く
hajimism公式ドキュメントを読んだりちょっと触ってみたりした。仕組みの概要は掴めたしちょっと触っただけで大体はいい感じになることがわかったけれど、イマイチうまくいかない部分がある。しかし公式ドキュメントはまだ充実してない。公式Playgroundがドキュメント代わりに用意されているので、そちらを読んでいく。
hajimismまずはPlaygroundそのものを触って、どんな機能があるか確かめていく。
hajimism@-mention
hajimismhashtag
ここらへんはなんとなく把握してた
hajimismSelectionと同時にメニューが出る
hajimismspeech to text
Dragonなんとかだよね。
hajimismBlock Editorになってるな
hajimismLinkはこんな感じ
hajimism画像の貼り付けも簡単
hajimism[] でcheckboxでるわ
hajimismtextはcolorもfont-familyもsizeもいじれる。alignも変えられる。
hajimism「```」でcode block出てくるわけではないな。
hajimisminsertめっちゃあるな
hajimismおーFigma埋めれる。これは作りたいものに欲しいやつかも。
hajimismHorizontal Ruleは横線だけども---で出現するわけではない
hajimismそういえばindentできてるな
hajimismセル結合など見た目の調整がいろいろできるテーブル
hajimismExperimentalなtableもあるけどこっちは期待通りに動かない
hajimismSticky note。すごいけどいらん。
hajimismtoggle。これは嬉しいね。
hajimism
hajimism数式も
hajimism
Exicaldrawすごいな！任意のお絵かきが画像として貼り付けられる
hajimismそういえば下の方にtree構造が
embedとか入れたら単純なmdでデータ永続化するのは難しそうな気もするけど...
例えばFigmaだったら とかでいいのかな。
hajimismそういえばZennは@[service](link)だな
hajimism特に気になるのはここらへんかな〜
- list系の挙動
- imageの処理
- @-mention（
/でコマンドパレット出現みたいなことができそうだから） - embeded Figma
- toggle
- Exicaldraw
hajimism見ていくかー
hajimismとりま本体
ざっと気になるのはここらへんかな？
- DragDropPaste
- MentionsPlugin
- ImagesPlugin
- FigmaPlugin
- LexicalClickableLinkPlugin
- TabIndentationPlugin
- CollapsiblePlugin
hajimism公式提供っぽいのでTabIndentationPluginを手元で試したらこうなった。これはふつうにstylingの問題っぽい。
hajimism該当スタイルはここらへん。
hajimismlist-insideを追加したら難しいことになった...
hajimism
ふつうにこれで対処した。themeにて。
listitem: "[&:has(ul)]:list-none",
olも対処するとこうか
[&:has(:is(ol,ul))]:list-none
ネストしたら白丸にするとかabcにするとかしようと思ったら複雑そうだな
hajimismためしにNotion覗いたらこれさえもdivだったしなんならulとかliとか使わずに全部divだった。完全にBlockをfrom scratchで定義しているんだな。これは真似できんわ。
hajimismとりあえずいい感じになったからいいや
hajimismこうなるとListMaxIndentLevelPluginも欲しくなるのでPlaygroundのやつをコピペする
hajimismさあさあ、画像見ていきますか
hajimismそもそもnodeから定義しなくてはいけない
hajimismほんでもってImageそのものがこれ
hajimismImageNodeがDecoratorNodeを継承して定義されていて、その中のdecorateメソッドでImageComponentが使われている。
ImagePluginの方で、コマンドの登録を行って
DragDropPasteなどでコマンドが呼ばれているって寸法かな
hajimismちなみにPasteなどのイベントはここらへんでコマンドとして登録されているらしい。本体。
hajimismDRAG_DROP_PASTEはそこらへん色々まとめてるのか、しかもこれはrich-textから出てるし。複雑だな〜。
hajimismとりあえず大まかな構造は理解した...
肝心のimage urlどこで管理しているの問題がまだ
hajimismここでマジックが起きているように見える？何かしらでsrcが作られているはずなんだけど...
hajimismうーんわからん、なんでこのpayloadにもろもろの情報が入っている？
contenteditableにimageをpasteしたときにはそうなる？
hajimismあー、なんか、よしなにやってくれるな
<div contentEditable>Hello</div>
Paste後
hajimismbase64でエンコードされてるね
hajimismなのでdecoratorの中でこいつをどっかのstrageにuploadする処理を書けば良いのかな。decoratorが返すのはあくまでもにしておいて、この形式が来たら画像として表示するようなTransformerを書く。
hajimism（だ、だり〜）
hajimismそういえばLexicalさん、decoraterでJSX.Elementを返せばそのまま描画してくれるんだな。
hajimismplaygroudの方では.lexicalっていう独自のファイルでimport/exportができるようになってて、その際に画像も普通に保存されてるな。
これをサーバーに保存しても良いのかな...。
でもtext fileの方が圧倒的にサイズ小さいよなー
hajimismエンコードというかFileReader使ってたの普通にここにあったわ。
ImagePluginからの責務はあくまでsrcを受け取ってImageNodeを作るところで、fileを変換するのはDragDropPasteの責務らしい。ここでuploadすれば大丈夫。
hajimismこいつは今度Vercel Blobと併せて試す
hajimismImageが難しいので簡単そうなやついこーおもてCollapsible（toggle）を見に行った。
ふつうにdetails要素を返しているっぽい。
hajimismimport LexicalClickableLinkPlugin from "@lexical/react/LexicalClickableLinkPlugin";
こいつを入れたらリンクがクリックできるようになった
hajimismMentionsPluginを見てる。本体はLexicalTypeaheadMenuPluginとかいうやつだった。
hajimismそいつはここにあるんだけど、結構ごついからあまり深追いしないほうが良い気がする。
hajimismかわりにinterfaceとMentionsPluginでの使い方を見て分析する。
hajimismざっくりいうと、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的なものが提供されているっぽい。
hajimismuseBasicTypeaheadTriggerMatchで検索かけたらEmoji入力が実装されているのも見つけたわ。
hajimismEmojiもいいね、あとで覗こう
hajimismぼくが本当に実装したいものはこっちにあった
hajimismさっきと構造は大体同じなんだけど、一部メニューが選択されたときにモーダルが出てくるようにしてあるのでModalの状態管理もここで行っている。
hajimismただのオブジェクト生成したいときにclass多用しているな。同時にInterfaceにもなって便利なのか。
hajimismいやすごいな、dynamicにoption生成もしてる
hajimismoption本体としては、queryStringがあるときは引っかかるやつを、そうでないときはbaseOption全部を返すようにしている。
hajimismこういう用途だとメモ化は重要だろうな
hajimism寄り道にはなるけどこのuseModalの実装が汎用的でおもしろい
menuRenderFnでも見かけたReactDOM.createPortal()初めてみたけどめちゃ重要だな。Renderの場所を指定できるらしい。モーダルなど、親要素のスタイリングに縛られたくないものをbody直下にRenderしたいときとかに便利。
実際にLexicalのModalも、どこから呼ばれてもbody直下にRenderされるようにしてる。
hajimismうわ〜、Reactの新しい公式ドキュメントじっくり読むのもやりたくなってきた〜
hajimismとりまComponentPickerMenuPluginは単調だけど見た目は派手なので自前実装してみるの良さそう！
hajimism一応FigmaPluginも覗いておしまいにするか〜。
本体の実装はNodeの登録だけになっててシンプル。
問題はNodeですよね〜
hajimismDnDはここみたい。今は深追いしないけどメモ。
hajimism今後の展望：色々自前で実装してみる
- TogglePlugin
- SlashManuPlugin
- EmojiShortcutPlugin
- ImagePlugin（w/ Vercel Blob）