LexicalのDecorator NodeをSSRでレンダリングする
Lexical: https://lexical.dev/
LexicalのDecoratorNodeを継承したカスタムNodeをJSONシリアライズして保存、デシリアライズする分には問題とならなかったが、https://lexical.dev/docs/packages/lexical-headlessを利用してDOM操作を行うためにはDOM関連のメソッドも正しくoverrideする必要がある。
const html = $generateHtmlFromNodes(editor, null);のように$generateHtmlFromNodesを用いてHTMLを生成するケースを考える。
$generateHtmlFromNodes内では、$appendNodesToHTMLを各LexicalNodeに対して呼びだしている。
$appendNodesToHTML内ではLexicalNodeのexportDOMメソッドを呼び出して各LexicalNodeごとのDOMを得ているため、正しく設定する必要がある。
例えば画像を扱うLexicalNodeであればこんな感じ。client sideでのeditor利用時にはdecorate()関数によってそれぞれのフレームワークに応じたDOMに差し替えられているがgenerateHtmlFromNodesではdecorete()関数は参照されないためexportDOMを適切に設定する必要がある。
exportDOM(): DOMExportOutput {
const element = document.createElement("img");
element.setAttribute("src", this.__src);
element.setAttribute("width", this.__width.toString());
element.setAttribute("height", this.__height.toString());
return { element };
}