Common insertText

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

@@ -10,7 +10,7 @@ import { GlobalCodeMirrorEditorKey, AcceptedUploadFileType } from '../../consts'
 import { useFileDropzone, FileDropzoneOverlay } from '../../services';
 import {
   getLineToCursor, adjustPasteData,
-  newlineAndIndentContinueMarkdownList,
+  useNewlineAndIndentContinueMarkdownList,
 } from '../../services/list-util/markdown-list-util';
 import { useCodeMirrorEditorIsolated } from '../../stores';
 
@@ -53,8 +53,11 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
   }, [onChange]);
   const { data: codeMirrorEditor } = useCodeMirrorEditorIsolated(editorKey, containerRef.current, cmProps);
 
+  const editor = codeMirrorEditor?.view;
+
+  const newlineAndIndentContinueMarkdownList = useNewlineAndIndentContinueMarkdownList(editor);
+
   useEffect(() => {
-    const editor = codeMirrorEditor?.view;
 
     const handleEnterKey = (event: KeyboardEvent) => {
       if (event.key === 'Enter') {
@@ -63,7 +66,7 @@ export const CodeMirrorEditor = (props: Props): JSX.Element => {
         if (editor == null) {
           return;
         }
-        newlineAndIndentContinueMarkdownList(editor);
+        newlineAndIndentContinueMarkdownList();
       }
     };
 

packages/editor/src/services/codemirror-editor/use-codemirror-editor/utils/insert-text.ts

@@ -2,23 +2,22 @@ import { useCallback } from 'react';
 
 import { EditorView } from '@codemirror/view';
 
-export type InsertText = (text: string) => void;
+export type InsertText = (text: string, from?: number, to?: number) => void;
 
-export const useInsertText = (view?: EditorView): InsertText => {
 
-  return useCallback((text) => {
-    if (view == null) {
-      return;
-    }
-    const insertPos = view.state.selection.main.head;
+export const useInsertText = (view: EditorView): InsertText => {
+  const insertPos = view.state.selection.main.head;
+
+  return useCallback((text, from = insertPos, to = insertPos) => {
+
     view.dispatch({
       changes: {
-        from: insertPos,
-        to: insertPos,
+        from,
+        to,
         insert: text,
       },
-      selection: { anchor: insertPos },
+      selection: { anchor: from },
     });
-  }, [view]);
+  }, [insertPos, view]);
 
 };

packages/editor/src/services/list-util/markdown-list-util.ts

@@ -1,4 +1,11 @@
-import type { EditorView } from '@codemirror/view';
+import { useCallback } from 'react';
+
+import { EditorView } from '@codemirror/view';
+
+import { useInsertText } from '../codemirror-editor/use-codemirror-editor/utils/insert-text';
+
+
+export type NewlineAndIndentContinueMarkdownList = () => void;
 
 // https://regex101.com/r/7BN2fR/5
 const indentAndMarkRE = /^(\s*)(>[> ]*|[*+-] \[[x ]\]\s|[*+-]\s|(\d+)([.)]))(\s*)/;
@@ -14,27 +21,37 @@ export const getLineToCursor = (editor: EditorView, lineNumBeforeCursor = 0): st
   return editor.state.sliceDoc(firstLineToGet, curPos);
 };
 
-const insertText = (editor: EditorView, text: string) => {
+
+// const insertText = (editor: EditorView, text: string) => {
+//   const curPos = editor.state.selection.main.head;
+//   const line = editor.state.doc.lineAt(curPos).from;
+//   editor.dispatch({
+//     changes: {
+//       from: line,
+//       to: curPos,
+//       insert: text,
+//     },
+//   });
+// };
+
+export const useNewlineAndIndentContinueMarkdownList = (editor: EditorView): NewlineAndIndentContinueMarkdownList => {
+  const insertText = useInsertText(editor);
+
   const curPos = editor.state.selection.main.head;
   const line = editor.state.doc.lineAt(curPos).from;
-  editor.dispatch({
-    changes: {
-      from: line,
-      to: curPos,
-      insert: text,
-    },
-  });
-};
 
-export const newlineAndIndentContinueMarkdownList = (editor: EditorView): void => {
-  const getStrFromAboveLine = getLineToCursor(editor, 1);
+  return useCallback(() => {
 
-  const matchResult = getStrFromAboveLine.match(indentAndMarkRE);
+    const getStrFromAboveLine = getLineToCursor(editor, 1);
+
+    const matchResult = getStrFromAboveLine.match(indentAndMarkRE);
+
+    if (matchResult != null) {
+      const indentAndMark = matchResult[0];
+      insertText(indentAndMark, line, curPos);
+    }
+  }, [curPos, editor, insertText, line]);
 
-  if (matchResult != null) {
-    const indentAndMark = matchResult[0];
-    insertText(editor, indentAndMark);
-  }
 };
 
 export const adjustPasteData = (indentAndMark: string, text: string): string => {