perf:优化代码块得删除和聚焦

yaklang · Jan 8, 2025 · 357afd8 · 357afd8
1 parent d25b154
commit 357afd8
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 27 deletions.
diff --git a/app/renderer/src/main/src/components/MilkdownEditor/CodeBlock/CodeBlock.tsx b/app/renderer/src/main/src/components/MilkdownEditor/CodeBlock/CodeBlock.tsx
@@ -3,6 +3,9 @@ import {IMonacoEditor} from "@/utils/editors"
 import {useNodeViewContext} from "@prosemirror-adapter/react"
 import {useInViewport, useMemoizedFn} from "ahooks"
 import React, {useState, useEffect, useRef} from "react"
+import {TextSelection} from "@milkdown/kit/prose/state"
+import {useInstance} from "@milkdown/react"
+import {paragraphSchema} from "@milkdown/kit/preset/commonmark"
 
 export const CustomCodeComponent: React.FC = () => {
     const {node, view, getPos} = useNodeViewContext()
@@ -11,31 +14,38 @@ export const CustomCodeComponent: React.FC = () => {
 
     const codeRef = useRef<HTMLDivElement>(null)
     const [inViewport = true] = useInViewport(codeRef)
+    const isFocusRef = useRef<boolean>(false) // 是否已经初次聚焦
 
     useEffect(() => {
         if (!editor) return
-        if (!inViewport) return
-        editor.focus()
-    }, [editor, inViewport])
+        if (!isFocusRef.current) {
+            editor.focus()
+            isFocusRef.current = true
+        }
+    }, [editor])
 
     const updateEditorContent = useMemoizedFn((newContent) => {
-        if (!inViewport) return
-        const {state, dispatch} = view
-        if (newContent) {
-            const updatedContent = state.schema.nodes.code_block.create(
-                null, // 不带任何属性
-                state.schema.text(newContent)
-            )
-            const tr = state.tr.replaceWith(getPos() || 0, (getPos() || 0) + node.nodeSize, updatedContent) // 用新内容替换节点内容
-            dispatch(tr) // 提交事务更新内容
-        } else {
-            const updatedContent = state.schema.nodes.paragraph.create(
-                null, // 不带任何属性
-                state.schema.text(" ")
-            )
-            const tr = state.tr.replaceWith(getPos() || 0, (getPos() || 0) + node.nodeSize, updatedContent) // 用新内容替换节点内容
-            dispatch(tr) // 提交事务更新内容
-        }
+        try {
+            if (!inViewport) return
+            const {state, dispatch} = view
+            const start = getPos() || 0
+            const end = start + node.nodeSize
+            if (newContent) {
+                const updatedContent = state.schema.nodes.code_block.create(
+                    null, // 不带任何属性
+                    state.schema.text(newContent)
+                )
+                const tr = state.tr.replaceWith(start, end, updatedContent) // 用新内容替换节点内容
+                dispatch(tr) // 提交事务更新内容
+            } else {
+                const updatedContent = state.schema.nodes.paragraph.create()
+                let tr = state.tr.deleteRange(start, end).insert(start, updatedContent)
+                const selection = TextSelection.near(tr.doc.resolve(start))
+                tr.setSelection(selection)
+                dispatch(tr)
+                view.focus()
+            }
+        } catch (error) {}
     })
     return (
         <div style={{height: 200, marginBottom: 20}} ref={codeRef}>

diff --git a/app/renderer/src/main/src/components/MilkdownEditor/MilkdownEditor.tsx b/app/renderer/src/main/src/components/MilkdownEditor/MilkdownEditor.tsx
@@ -78,7 +78,7 @@ import {isBoolean} from "lodash"
 import {notepadSaveStatus} from "./WebsocketProvider/constants"
 import {toAddNotepad, toEditNotepad} from "@/pages/notepadManage/notepadManage/NotepadManage"
 import {API} from "@/services/swagger/resposeType"
-import {apiSaveNotepadList} from "@/pages/notepadManage/notepadManage/utils"
+import {apiSaveNotepad} from "@/pages/notepadManage/notepadManage/utils"
 
 const markdown1 = `
 
@@ -645,7 +645,7 @@ const CustomMilkdown: React.FC<CustomMilkdownProps> = React.memo((props) => {
                         title: title,
                         content: markdownContent
                     }
-                    apiSaveNotepadList(params).then((hash) => {
+                    apiSaveNotepad(params).then((hash) => {
                         toEditNotepad({notepadHash: hash})
                         onCloseCurrentPage()
                         s.destroy()

diff --git a/app/renderer/src/main/src/pages/notepadManage/modifyNotepad/ModifyNotepad.tsx b/app/renderer/src/main/src/pages/notepadManage/modifyNotepad/ModifyNotepad.tsx
@@ -39,7 +39,7 @@ import {
     SaveDialogResponse,
     apiDeleteNotepadDetail,
     apiGetNotepadDetail,
-    apiSaveNotepadList,
+    apiSaveNotepad,
     onBaseNotepadDown,
     onOpenLocalFileByPath
 } from "../notepadManage/utils"
@@ -153,7 +153,7 @@ const ModifyNotepad: React.FC<ModifyNotepadProps> = React.memo((props) => {
             }
             perTabName.current = params.title
             setNotepadLoading(true)
-            apiSaveNotepadList(params)
+            apiSaveNotepad(params)
                 .then((hash) => {
                     setNotepadDetail({
                         ...(notepadDetail || {}),
@@ -186,7 +186,7 @@ const ModifyNotepad: React.FC<ModifyNotepadProps> = React.memo((props) => {
                 title: tabName || perTabName.current,
                 content: markdownContent || ""
             }
-            apiSaveNotepadList(params)
+            apiSaveNotepad(params)
         }
     })
 
@@ -230,7 +230,7 @@ const ModifyNotepad: React.FC<ModifyNotepadProps> = React.memo((props) => {
             content: notepadContentRef.current
         }
         setDownItemLoading(true)
-        apiSaveNotepadList(params).then(() => {
+        apiSaveNotepad(params).then(() => {
             const downParams: API.NotepadDownloadRequest = {
                 hash: notepadDetail.hash
             }

diff --git a/app/renderer/src/main/src/pages/notepadManage/notepadManage/utils.ts b/app/renderer/src/main/src/pages/notepadManage/notepadManage/utils.ts
@@ -69,7 +69,7 @@ export const apiGetNotepadList: APIFunc<GetNotepadRequestProps, API.GetNotepadRe
  * @param hiddenError
  * @returns
  */
-export const apiSaveNotepadList: APIFunc<API.PostNotepadRequest, string> = (params, hiddenError) => {
+export const apiSaveNotepad: APIFunc<API.PostNotepadRequest, string> = (params, hiddenError) => {
     return new Promise((resolve, reject) => {
         NetWorkApi<API.PostNotepadRequest, string>({
             method: "post",