CodeMirror v6 で Google 日本語入力の位置がおかしくなる問題

公式にも質問した内容をこちらで共有します。CodeMirror v6 を使っていると、新しい行で日本語入力をするときに IME の候補がブラウザの左上、つまり (0,0) 座標に表示されるという不可解な現象が起きました。

開発者に問い合わせたところ、Chromium（クロミウム）のエラーであるという回答を得ることができました。そして、ついに原因が判明。

回避策

Chromium（クロミウム）の EditContext API が原因なので、EditContext を無効化するとよいです。

この調整によって、エディターが従来の contenteditable モードを使用するようになり、日本語 IME 入力の位置の問題が解消されます。

もしくは、@codemirror/view のバージョンが 6.26.4 以上であれば 6.26.3 以下にダウングレードすることで解決します。

ただ、これは一時的な解決法で、Chromium の開発者もこのバグが修正されていないことに気づいてないので、以下の Chromium issue で、「いいね」を増やして、開発者に気づいてもらう必要があります。

ブラウザの左上（0,0 座標）に表示される現象

どういった不具合が出ていたのか、書いておきます。

具体的には、新しい行で日本語入力を開始すると、変換候補などの IME ウィンドウがブラウザの左上に移動してしまいます。

この問題が発生している環境は以下の通りです。

発生している環境

• OS: macOS Sequoia 15.1 / Apple M3
• ブラウザ: Chrome
• IME: Google 日本語入力
• フレームワーク: Next.js 14.2.4
• 関連ライブラリのバージョン:
  • @codemirror/autocomplete: ^6.18.0
  • @codemirror/lang-markdown: ^6.2.5
  • @codemirror/language-data: ^6.5.1
  • @codemirror/state: ^6.4.1
  • @codemirror/view: ^6.33.0

特に Chrome で発生することが確認されており、Brave などの Chromium ベースのブラウザでも同様の挙動が見られました。

公式のデモサイトでもズレが発生。

• 公式デモサイト

日本語入力を試してみると同じように左上に変換候補が表示されてしまいます。しかし、上述した方法で不具合を回避することができました。