環境

Rails6 (6.0.1)
ruby 2.7.0

参考

有名ブログサービスのMediumで使われているWYSIWYGエディターです。

※RailsにMediumEditorを導入する際はこちらの記事を参考にしました。

インデントが適用されたpタグ内でテキストを入力し文字確定でEnterを押すとなぜかカーソル位置がpタグ内の先頭に移動してしまうバグが発生。このバグを解消させるために、元の位置にカーソルを戻す方法がないか調べた結果、カーソル位置を指定の場所に移動させる方法があったので、この記事にまとめました。

MediumEditor.selectionが持つmoveCursor()メソッドを使うことで実現できた。

MediumEditor.selection.moveCursor(document, node, offset);

node: カーソルの移動先となるノード
offset: カーソルの位置（ノード内の文字列の先頭から〜番目）

今回の場合は文字確定時のカーソルがあるノードを取得する必要があったので
getSelection()メソッドのfocusNodeオプションを利用しました。

target_node = document.getSelection().focusNode;

あとはoffsetを指定することで任意の場所にカーソルを移動させることができます。

テキストノードの先頭にカーソルを移動させる

target_node = document.getSelection().focusNode;
MediumEditor.selection.moveCursor(document, target_node, 0);

テキストノードの先頭からn番目にカーソルを移動させる
5番目に移動させる場合

target_node = document.getSelection().focusNode;
MediumEditor.selection.moveCursor(document, target_node, 5);

今回のバグ対応は、文字確定時のカーソル位置に再びカーソルを戻すという特殊な対応だったので、getSelection()メソッドのfocusOffsetオプションでノードの先頭を基準に現在のカーソル位置を取得しました。

offset = document.getSelection().focusOffset;

上記の方法でnodeとoffsetを取得できたので、カーソル位置が変わってしまった後に下記の処理を走らせることで無事バグの解消はできました。

MediumEditor.selection.moveCursor(document, target_node, offset);