create onPressEnter function for keymaps

packages/editor/src/components/CodeMirrorEditor/CodeMirrorEditor.tsx

@@ -8,7 +8,7 @@ import type { ReactCodeMirrorProps } from '@uiw/react-codemirror';
 
 import { GlobalCodeMirrorEditorKey, AcceptedUploadFileType } from '../../consts';
 import { useFileDropzone, FileDropzoneOverlay } from '../../services';
-import { newlineAndIndentContinueMarkdownList } from '../../services/list-util/markdown-list-util';
+// import { newlineAndIndentContinueMarkdownList } from '../../services/list-util/markdown-list-util';
 import { useCodeMirrorEditorIsolated } from '../../stores';
 
 import { Toolbar } from './Toolbar';
@@ -47,24 +47,24 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
   }, [onChange]);
   const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(editorKey, containerRef.current, cmProps);
 
-  useEffect(() => {
-    const handleEnterKey = (event: KeyboardEvent) => {
-      if (event.key === 'Enter') {
-        event.preventDefault();
-        const editor = codeMirrorEditor?.view;
-        if (editor == null) {
-          return;
-        }
-        newlineAndIndentContinueMarkdownList(editor);
-      }
-    };
-
-    codeMirrorEditor?.view?.dom.addEventListener('keydown', handleEnterKey);
-
-    return () => {
-      codeMirrorEditor?.view?.dom.removeEventListener('keydown', handleEnterKey);
-    };
-  }, [codeMirrorEditor]);
+  // useEffect(() => {
+  //   const handleEnterKey = (event: KeyboardEvent) => {
+  //     if (event.key === 'Enter') {
+  //       event.preventDefault();
+  //       const editor = codeMirrorEditor?.view;
+  //       if (editor == null) {
+  //         return;
+  //       }
+  //       newlineAndIndentContinueMarkdownList(editor);
+  //     }
+  //   };
+
+  //   codeMirrorEditor?.view?.dom.addEventListener('keydown', handleEnterKey);
+
+  //   return () => {
+  //     codeMirrorEditor?.view?.dom.removeEventListener('keydown', handleEnterKey);
+  //   };
+  // }, [codeMirrorEditor]);
 
   useEffect(() => {
     if (indentSize == null) {

packages/editor/src/services/codemirror-editor/use-codemirror-editor/use-codemirror-editor.ts

@@ -1,11 +1,15 @@
 import { useMemo } from 'react';
 
 import { indentWithTab, defaultKeymap } from '@codemirror/commands';
-import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
+import {
+  markdown, markdownLanguage, insertNewlineContinueMarkup, deleteMarkupBackward,
+} from '@codemirror/lang-markdown';
 import { syntaxHighlighting, HighlightStyle, defaultHighlightStyle } from '@codemirror/language';
 import { languages } from '@codemirror/language-data';
-import { EditorState, Prec, type Extension } from '@codemirror/state';
-import { keymap, EditorView } from '@codemirror/view';
+import {
+  EditorState, Prec, StateCommand, type Extension,
+} from '@codemirror/state';
+import { keymap, EditorView, KeyBinding } from '@codemirror/view';
 import { tags } from '@lezer/highlight';
 import { useCodeMirror, type UseCodeMirror } from '@uiw/react-codemirror';
 import deepmerge from 'ts-deepmerge';
@@ -32,6 +36,18 @@ const markdownHighlighting = HighlightStyle.define([
   { tag: tags.heading6, class: 'cm-header-6 cm-header' },
 ]);
 
+const onPressEnter: StateCommand = ({ state, dispatch }) => {
+  const insertBool = insertNewlineContinueMarkup({ state, dispatch });
+  // ここにrenumber的な処理を書く
+
+  return insertBool;
+};
+
+const markdownKeymap: KeyBinding[] = [
+  { key: 'Enter', run: onPressEnter },
+  { key: 'Backspace', run: deleteMarkupBackward },
+];
+
 type UseCodeMirrorEditorUtils = {
   initDoc: InitDoc,
   appendExtensions: AppendExtensions,
@@ -52,7 +68,8 @@ export type UseCodeMirrorEditor = {
 
 const defaultExtensions: Extension[] = [
   EditorView.lineWrapping,
-  markdown({ base: markdownLanguage, codeLanguages: languages }),
+  keymap.of(markdownKeymap),
+  markdown({ base: markdownLanguage, codeLanguages: languages, addKeymap: false }),
   keymap.of([indentWithTab]),
   Prec.lowest(keymap.of(defaultKeymap)),
   syntaxHighlighting(markdownHighlighting),