react-codemirror 1. When I type and hit enter, the text itself is deleted

Question

I am using react-codemirror.

As you can see in the picture, I want to allow spaces in the 1. 2. 3. 4. list like that,

Right now, typing 1. and pressing enter deletes the text.

I want to make it work like the video above. I made my own customMarkdownKeymap and mapped it, but it doesn’t work. how can i solve it? help!

import ReactCodeMirror from "@uiw/react-codemirror";
import classes from "./EditorBox.module.css";
import createTheme from "@uiw/codemirror-themes";
import {
  markdown,
  insertNewlineContinueMarkup,
  markdownLanguage,
  markdownKeymap,
  deleteMarkupBackward,
} from "@codemirror/lang-markdown";
import { languages } from "@codemirror/language-data";
import { EditorView } from "@codemirror/view";
import { javascript } from "@codemirror/lang-javascript";
import { tags as t } from "@lezer/highlight";
import { keymap, KeyBinding } from "@codemirror/view";
import { insertNewline } from "@codemirror/commands";
import * as events from "@uiw/codemirror-extensions-events";
import { EditorState } from "@codemirror/state";
import { basicSetup } from "@codemirror/basic-setup";

type ContentType = {
  content: string;
  contentHandler: () => void;
};

const customMarkdownKeymap: readonly KeyBinding[] = [
  {
    key: "Enter",
    run: (view) => {
      const { state } = view;
      const cursorPos = state.selection.main.head;
      const lineText = state.doc.lineAt(cursorPos).text;

      if (lineText.match(/^\d+\. $/) && cursorPos === lineText.length) {
        view.dispatch({ changes: { insert: "\n", from: cursorPos } });
        return true;
      }

      return insertNewline(view);
    },
  },
  { key: "Backspace", run: deleteMarkupBackward },
];

const markdownStyles = [
  { tag: t.heading1, fontWeight: "bold", fontSize: "2.5rem" },
  { tag: t.heading2, fontWeight: "bold", fontSize: "2rem" },
  { tag: t.heading3, fontWeight: "bold", fontSize: "1.17em" },
  { tag: t.heading4, fontWeight: "bold", fontSize: "1em" },
  { tag: t.heading5, fontWeight: "bold", fontSize: ".83em" },
  { tag: t.heading6, fontWeight: "bold", fontSize: ".67em" },
  { tag: t.strong, fontWeight: "bold" },
];

const myTheme = createTheme({
  theme: "dark",
  settings: {
    background: "#171717",
    foreground: "#ffffff",
    caret: "#ffffff",
    selection: "#036dd626",
    selectionMatch: "#036dd626",
    lineHighlight: "#8a91991a",
    gutterBackground: "#fff",
    gutterForeground: "#8a919966",
  },
  styles: [
    { tag: t.comment, color: "#787b8099" },
    { tag: t.variableName, color: "#0080ff" },
    { tag: [t.string, t.special(t.brace)], color: "#5c6166" },
    { tag: t.number, color: "#5c6166" },
    { tag: t.bool, color: "#5c6166" },
    { tag: t.null, color: "#5c6166" },
    { tag: t.keyword, color: "#5c6166" },
    { tag: t.operator, color: "#5c6166" },
    { tag: t.className, color: "#5c6166" },
    { tag: t.definition(t.typeName), color: "#5c6166" },
    { tag: t.typeName, color: "#5c6166" },
    { tag: t.angleBracket, color: "#5c6166" },
    { tag: t.tagName, color: "#5c6166" },
    { tag: t.attributeName, color: "#5c6166" },
    ...markdownStyles,
  ],
});

export default function EditorBox({ content, contentHandler }: ContentType) {
  return (
    <>
      <div className={classes.editorBox_container}>
        <ReactCodeMirror
          className={classes.code_mirror}
          theme={myTheme}
          value={content}
          onChange={contentHandler}
          height="100vh"
          basicSetup={{
            foldGutter: false,
            lineNumbers: false,
            highlightActiveLine: false,
          }}
          extensions={[
            markdown({ base: markdownLanguage, codeLanguages: languages }),
            EditorView.lineWrapping,
            javascript({ jsx: true }),
            keymap.of(customMarkdownKeymap),
          ]}
        />
      </div>
    </>
  );
}

here is my whole codes thanks