The @replit/codemirror-vim extension does not handle IME input correctly in Vim command mode. After I switch from insert mode to command mode with IME enabled, codemirror-vim messes up the input. To address this issue, I have made the following modifications to the code, but I’m unsure if they are correct for codemirror:
- Dynamically configure the editable extension using Compartment:
const editableCompartment = new Compartment();
const state = EditorState.create({
doc: '',
extensions: [
vim(),
basicSetup,
markdown(),
EditorView.lineWrapping,
editableCompartment.of(EditorView.editable.of(false))
]
})
- Add tabindex=“-1” to editor.contentDOM to make it focusable even when contenteditable=“false”:
editor.contentDOM.tabIndex=-1;
- Disable IME input by setting editable to false when entering command mode:
CodeMirror.on(editor.cm, 'vim-mode-change', (e) => {
if (e.mode === 'insert' || e.mode === 'replace') {
queueMicrotask(() => {
editor.dispatch({effects: editableCompartment.reconfigure(EditorView.editable.of(true))});
});
} else {
queueMicrotask(() => {
editor.dispatch({effects: editableCompartment.reconfigure(EditorView.editable.of(false))});
});
}
})
This solution works perfectly for my use case, but I’m uncertain about whether it’s appropriate to set editor.contentDOM.tabIndex=-1
.