From 462f10ab601d1f916316779bfdf4b4f8c097ffda Mon Sep 17 00:00:00 2001 From: Zeng1998 Date: Mon, 18 Sep 2023 20:37:28 +0800 Subject: [PATCH] feat: optimize the logic of the checkbox button. (#2227) --- .../components/MemoEditor/Editor/index.tsx | 21 ++++++++++++++++++ web/src/components/MemoEditor/index.tsx | 22 ++++++++++++++----- 2 files changed, 37 insertions(+), 6 deletions(-) diff --git a/web/src/components/MemoEditor/Editor/index.tsx b/web/src/components/MemoEditor/Editor/index.tsx index db634da3..ea92bef0 100644 --- a/web/src/components/MemoEditor/Editor/index.tsx +++ b/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(); + } + }, }), [] ); diff --git a/web/src/components/MemoEditor/index.tsx b/web/src/components/MemoEditor/index.tsx index 93fb3844..e5a23205 100644 --- a/web/src/components/MemoEditor/index.tsx +++ b/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(); };