Remirrorでうちの犬の画像をいい感じの位置に挿入する

Remirrorのエディタで画像を挿入する時に試行錯誤したメモ。Remirrorの大元のProseMirrorにも共通する話かも。

画像の挿入時にinsertImageコマンドを使用しているのだけども、文末にフォーカスがあたっている状態で普通にinsertImageをすると、

このようになってしまう。
「あああああ」というテキストの後ろに画像がくっつく。

ChatGPTに解消方法を相談したところ、insertTextしてからinsertImageをすればいいと言われたので、

  const { insertImage, insertText } = useCommands()

  const addImage = (file) => {
    insertText('\n\n')
    insertImage({
        //略
    })

こうしてみた。

すると、期待通りに「あああああ」の下に画像を挿入することができた。

が、別の問題が発生。
画像の上にフォーカスして文字を入力しようとすると

上にフォーカスしたのに、なぜか画像の左側に文字が入力されてしまう。

前後のremirrorのnodeを比較して確認したところ、画像の上の改行部分にフォーカスして文字を入力すると、テキスト（改行コード）をテキスト「あ」に書き換えることになり、改行コードが消滅してしまうらしい。

同じ位置にタイプのnodeが入力されたらそりゃあ置き換わりますよねという話で、つまるところ改行をテキストで表現して挿入していることが問題の模様。

ドキュメントを見ていたらinsertHardBreakというコマンドがあるっぽかったので、改行コードはやめてinsertHardBreakでbrを挿入する形に変更した。

  const { insertImage, insertHardBreak } = useCommands()

  const addImage = (file) => {
    insertHardBreak()
    insertImage({
        //略
    })

このようにして、画像挿入後に上に文字を入力したところ、

無事に期待通りの位置に表示されるようになった。