feat: optimize the logic of the checkbox button. (#2227)

web/src/components/MemoEditor/Editor/index.tsx

@@ -12,6 +12,9 @@ export interface EditorRefActions {
   getSelectedContent: () => string;
   getCursorPosition: () => number;
   setCursorPosition: (startPos: number, endPos?: number) => void;
+  getCursorLineNumber: () => number;
+  getLine: (lineNumber: number) => string;
+  setLine: (lineNumber: number, text: string) => void;
 }
 
 interface Props {
@@ -115,6 +118,24 @@ const Editor = forwardRef(function Editor(props: Props, ref: React.ForwardedRef<
         const _endPos = isNaN(endPos as number) ? startPos : (endPos as number);
         editorRef.current?.setSelectionRange(startPos, _endPos);
       },
+      getCursorLineNumber: () => {
+        const cursorPosition = editorRef.current?.selectionStart ?? 0;
+        const lines = editorRef.current?.value.slice(0, cursorPosition).split("\n") ?? [];
+        return lines.length - 1;
+      },
+      getLine: (lineNumber: number) => {
+        return editorRef.current?.value.split("\n")[lineNumber] ?? "";
+      },
+      setLine: (lineNumber: number, text: string) => {
+        const lines = editorRef.current?.value.split("\n") ?? [];
+        lines[lineNumber] = text;
+        if (editorRef.current) {
+          editorRef.current.value = lines.join("\n");
+          editorRef.current.focus();
+          handleContentChangeCallback(editorRef.current.value);
+          updateEditorHeight();
+        }
+      },
     }),
     []
   );

web/src/components/MemoEditor/index.tsx

@@ -322,14 +322,24 @@ const MemoEditor = (props: Props) => {
     if (!editorRef.current) {
       return;
     }
-
-    const cursorPosition = editorRef.current.getCursorPosition();
-    const prevValue = editorRef.current.getContent().slice(0, cursorPosition);
-    if (prevValue === "" || prevValue.endsWith("\n")) {
-      editorRef.current?.insertText("", "- [ ] ");
+    const currentPosition = editorRef.current?.getCursorPosition();
+    const currentLineNumber = editorRef.current?.getCursorLineNumber();
+    const currentLine = editorRef.current?.getLine(currentLineNumber);
+    let newLine = "";
+    let cursorChange = 0;
+    if (/^- \[( |x|X)\] /.test(currentLine)) {
+      newLine = currentLine.replace(/^- \[( |x|X)\] /, "");
+      cursorChange = -6;
+    } else if (/^\d+\. |- /.test(currentLine)) {
+      const match = currentLine.match(/^\d+\. |- /) ?? [""];
+      newLine = currentLine.replace(/^\d+\. |- /, "- [ ] ");
+      cursorChange = -match[0].length + 6;
     } else {
-      editorRef.current?.insertText("", "\n- [ ] ");
+      newLine = "- [ ] " + currentLine;
+      cursorChange = 6;
     }
+    editorRef.current?.setLine(currentLineNumber, newLine);
+    editorRef.current.setCursorPosition(currentPosition + cursorChange);
     editorRef.current?.scrollToCursor();
   };