Dear Team,
I am using CodeMirror v6, and I’ve encountered an issue where, when starting Japanese input on a new line, the characters being typed (IME candidates) appear at the top-left corner of the browser (coordinates 0,0). This issue occurs not only in my environment but also in the official demo and CodeSandbox.
Details of the Issue
When starting Japanese input on a new line, the input characters (IME candidates) are displayed at the top-left corner of the browser. The issue occurs in the following environment:
Environment
- OS: macOS Sequoia 15.1 / Apple M3
- Browser: Chrome
- IME: Google Japanese Input
- Framework: Next.js 14.2.4
- Related Library Versions:
@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
Reproduction Links
CodeSandbox:
https://codesandbox.io/p/devbox/jwln87?file=%2Fapp%2Fpage.tsx
Official Demo:
https://codemirror.net/try/
Attempted Solutions
- Changed the version of CodeMirror
- Disabled all CSS
- Migrated a working sample from CodeSandbox to my local environment
- The issue occurs across multiple browsers (e.g., Chrome, Brave).
- It also persists in incognito mode and with all extensions disabled.
Unfortunately, none of these attempts resolved the issue.
Reproduction Code Sample
The issue can be reproduced using the following code sample (with Next.js 14.2.4):
"use client";
import React, { useState } from "react";
import CodeMirror from "@uiw/react-codemirror";
import { markdown } from "@codemirror/lang-markdown";
export default function App() {
const onChange = React.useCallback((value: any, viewUpdate: any) => {
console.log("value:", value);
}, []);
return (
<div className="relative overflow-visible">
<CodeMirror
value=""
height="200px"
theme="dark"
extensions={[markdown()]}
onChange={onChange}
/>
</div>
);
}
I would greatly appreciate it if you could provide any advice or suggestions on the possible cause or a solution to this issue.
Thank you for your time and support.