Bug: Insert Mode Multi-Key Mappings Delete Character Before Cursor

[m4dd0c]

Problem

any multi-key insert mode mapping (e.g., Vim.map("jk", "<C-o>A", "insert")) causes the character before the cursor to be deleted when the mapping is triggered.

Example:

$ represents the cursor.

Cursor is after h: th$is is a line If you type jk, you get: tis is a line$ The h disappears.

Steps to Reproduce

1. Add a mapping: Vim.map("jk", "<C-o>A", "insert")
2. In insert mode, place the cursor after a character (e.g., th$is is a line)
3. Type "jk"

Expected

Mapped action runs, buffer remains unchanged except for the intended command.

Actual

The character before the cursor is deleted before the mapped action runs.

Note

Vim.map("g", "<C-o>A", "insert") works as expected. Since 'g' is a single character, It works.

Code

import { useEffect, useRef } from "react";
import { EditorView, basicSetup } from "codemirror";
import { Vim, vim } from "@replit/codemirror-vim";

function App() {
  const editorRef = useRef(null);
  const viewRef = useRef(null); // Store the EditorView instance

  Vim.map("jj", "<Esc>", "insert");
  Vim.map("kk", "<C-o>l", "insert");

  useEffect(() => {
    if (editorRef.current && !viewRef.current) {
      viewRef.current = new EditorView({
        doc: "",
        extensions: [
          vim(), // Vim keymap support
          basicSetup, // Default setup (includes line numbers, history, etc.)
        ],
        parent: editorRef.current, // Mount the editor here
      });
    }

    // Optional cleanup if needed
    return () => {
      if (viewRef.current) {
        viewRef.current.destroy();
        viewRef.current = null;
      }
    };
  }, []);

  return (
    <div className="bg-neutral-900 h-screen grid place-items-center">
      <div
        ref={editorRef}
        className="w-full max-w-3xl h-[500px] bg-white rounded-md shadow-lg"
      />
    </div>
  );
}

export default App;