📝

RemirrorのRichTextEditorで末尾に要素を追加する

2025/02/18に公開

ハマったポイント

文末に署名を挿入する時など、エディタ内の末尾に要素を追加したいことがあると思います。

Remirrorで実現する場合は

chained.focus("end").insertNode(additionalNode).run();

というように、末尾にフォーカスしてinsertをするというコマンドを実装すると思いますが、普通にこれを実行すると

既存の
コンテンツ
${additionalNode}

こうなってほしいのに

既存の
コンテンツ${additionalNode}

この位置に要素が追加されてしまいます。
additionalNodeの先頭に改行を追加しても無駄で、この位置からは逃れられません。

足りないのはエクステンションでした

Remirrorに関する情報は少ないのでネットで調べてもChatGPTに聞いても何もわからなかったんですが、ドキュメントを片っ端から読み漁ったところ、TrailingNodeExtensionなるものがあることがわかりました。

https://www.remirror.io/docs/extensions/trailing-node-extension

原理はよくわかりませんが、TrailingNodeExtensionは末尾の段落を確保してくれる存在みたいです。

通常だと末尾に要素を追加しようとしても段落が崩れないように既存の段落の内側の最後にしか要素を追加させてくれないんですが、TrailingNodeExtensionを使うと要素の追加にあわせて段落のスペースを確保してくれるらしい。

Remirrorはダウンロード数多いのにノウハウが全然ネットに公開されていないのでとても困る。

Discussion