LexicalのCollapsibleを読む
hajimismLexicalでToggle要素を実装する → LexicalのCollapsibleを読む
最初は自前実装するつもりだったけど結局ほぼコピペなのでタイトルを変えた
hajimism文脈
hajimismやりたいことは大体これなのでしっかり読んでいく
hajimism全体像としてはuseEffectのcleanupの中でmergeRegisterを書いているだけって感じ。
hajimismmergeRegisterの中身を覗いてみると、まずTransformerでNodeの構造を管理しているところが見える。ご丁寧にコメント書いてある。
Structure enforcing transformers for each node type. In case nesting structure is not "Container > Title + Content" it'll unwrap nodes and convert it back to regular content.
hajimismその次は予期せぬDeleteに対応しているらしい？
たしかに挙動を確かめたら、コメントの通り「閉じてるときに隣の（弟？）NodeからDeleteが走ったら中身を消すのではなくてただ開くようにする」みたいな感じになってた。
hajimismtoggle blockが最上（下）部にあったときに上（下）キーを押すとParagraphNodeが挿入されるようになっている。
hajimism試しに素のdetails/summaryタグを色々触ってみていて、summaryタグの三角と文字の間の空白をどうやって空けるのかわからなかったから実装を見たら、結構滅茶苦茶やってた。たぶん透明なボーダーで距離を稼いでいる。
hajimismspace keyでtoggleしちゃったり、summaryでEnterおしてもcontentの方にカーソルが移動しなかったりと、結構面倒なんだな
hajimism手元のcontentEditableなsummaryでキャレットが出ないな...
hajimism純粋なdetails/summaryは色々難しいことがわかったので、各Nodeの実装を見ていこう
hajimismまずはtitle
hajimism全体像
hajimism一番上は単純なutilぽい
export function convertSummaryElement(
domNode: HTMLElement,
): DOMConversionOutput | null {
const node = $createCollapsibleTitleNode();
return {
node,
};
}
Nodeは割と基本的な構成だが、下2つのメソッドが気になるな
hajimismちなみにDomそのものはこうらしい
createDOM(config: EditorConfig, editor: LexicalEditor): HTMLElement {
const dom = document.createElement('summary');
dom.classList.add('Collapsible__title');
return dom;
}
insertNewAfter
- 閉じてるとき：detailsの次にpを挿入
- 開いているとき
- Elementがあればそちらにカーソルが移動
- なければpを挿入
hajimismAPI 仕様書、もうちょい各メソッドの説明入れてほしい。
hajimism順序おかしいけど次container
hajimism全体像
Nodeの型にopenの拡張があるのが印象的
hajimismDOMはここ
createDOM(config: EditorConfig, editor: LexicalEditor): HTMLElement {
const dom = document.createElement('details');
dom.classList.add('Collapsible__container');
dom.open = this.__open;
dom.addEventListener('toggle', () => {
const open = editor.getEditorState().read(() => this.getOpen());
if (open !== dom.open) {
editor.update(() => this.toggleOpen());
}
});
return dom;
}
状態管理のためのメソッドが生えてる
setOpen(open: boolean): void {
const writable = this.getWritable();
writable.__open = open;
}
getOpen(): boolean {
return this.getLatest().__open;
}
toggleOpen(): void {
this.setOpen(!this.getOpen());
}
それ以上はなさそう。
次content
hajimismDOM
createDOM(config: EditorConfig): HTMLElement {
const dom = document.createElement('div');
dom.classList.add('Collapsible__content');
return dom;
}
はじめましてのメソッドが生えてた
isShadowRoot(): boolean {
return true;
}
implはここ
A shadow root is a Node that behaves like RootNode. The shadow root (and RootNode) mark the end of the hiercharchy, most implementations should treat it as there's nothing (upwards) beyond this point. For example, node.getTopLevelElement(), when performed inside a TableCellNode will return the immediate first child underneath TableCellNode instead of RootNode.
たしかにtoggle内のcontentはshadowRootか
hajimismうーん、結局コピペになりそう
スタイルだけちょっと変えるか、くらい
hajimismコピペしたけど変な挙動発見
titleが空のときにDelete押すとこうなる
hajimismうーんわからん、本家のPlaygroundではtitleが空のときにDelete押すと全体が消える
contentの中身があるときはその中身だけ残る、完璧な挙動
hajimismInspectしてみると、detailsはあるけどsummaryが無い状態みたい
hajimismそれはこいつが機能していたら起きないはずなのだが
hajimism結局わからん
一旦飽きたのでクローズする。のちのち解決策が判明したら追記する。
hajimism完璧にぼくのミスだった。たぶんNodeの登録だけやってPluginを使うの忘れてた。改めてちゃんとしたらなおった。