From 8b92021b1a324488fba723fb43e73c646003e4ec Mon Sep 17 00:00:00 2001
From: Stephen Zhou <hi@hyoban.cc>
Date: Tue, 7 Feb 2023 23:31:43 +0800
Subject: [PATCH] fix: editor cursor not in view after smart editing (#1043)

---
 web/src/components/Editor/Editor.tsx | 5 +++++
 web/src/components/MemoEditor.tsx    | 9 +++++++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/web/src/components/Editor/Editor.tsx b/web/src/components/Editor/Editor.tsx
index 5228fbf1..7ab91cc9 100644
--- a/web/src/components/Editor/Editor.tsx
+++ b/web/src/components/Editor/Editor.tsx
@@ -3,6 +3,7 @@ import "../../less/editor.less";
 
 export interface EditorRefActions {
   focus: FunctionType;
+  scrollToCursor: FunctionType;
   insertText: (text: string, prefix?: string, suffix?: string) => void;
   removeText: (start: number, length: number) => void;
   setContent: (text: string) => void;
@@ -52,6 +53,10 @@ const Editor = forwardRef(function Editor(props: Props, ref: React.ForwardedRef<
       focus: () => {
         editorRef.current?.focus();
       },
+      scrollToCursor: () => {
+        editorRef.current?.blur();
+        editorRef.current?.focus();
+      },
       insertText: (content = "", prefix = "", suffix = "") => {
         if (!editorRef.current) {
           return;
diff --git a/web/src/components/MemoEditor.tsx b/web/src/components/MemoEditor.tsx
index 05987604..b8b02fe9 100644
--- a/web/src/components/MemoEditor.tsx
+++ b/web/src/components/MemoEditor.tsx
@@ -402,6 +402,7 @@ const MemoEditor = () => {
     } else {
       editorRef.current?.insertText("", "\n- [ ] ");
     }
+    editorRef.current?.scrollToCursor();
   };
 
   const handleCodeBlockBtnClick = () => {
@@ -416,6 +417,7 @@ const MemoEditor = () => {
     } else {
       editorRef.current?.insertText("", "\n```\n", "\n```");
     }
+    editorRef.current?.scrollToCursor();
   };
 
   const handleUploadFileBtnClick = () => {
@@ -438,7 +440,7 @@ const MemoEditor = () => {
   const handleTagSelectorClick = useCallback((event: React.MouseEvent) => {
     if (tagSelectorRef.current !== event.target && tagSelectorRef.current?.contains(event.target as Node)) {
       editorRef.current?.insertText(`#${(event.target as HTMLElement).textContent} ` ?? "");
-      handleEditorFocus();
+      editorRef.current?.scrollToCursor();
     }
   }, []);
 
@@ -481,7 +483,10 @@ const MemoEditor = () => {
     <div
       className={`memo-editor-container ${isEditing ? "edit-ing" : ""} ${state.fullscreen ? "fullscreen" : ""}`}
       tabIndex={0}
-      onKeyDown={handleKeyDown}
+      onKeyDown={(e) => {
+        handleKeyDown(e);
+        editorRef.current?.scrollToCursor();
+      }}
       onDrop={handleDropEvent}
       onFocus={handleEditorFocus}
       onBlur={handleEditorBlur}