🐛 修复VEditor的markdown编辑器输入时失去焦点的问题

Author: Littlefean

app/src/pages/_vditor_panel.tsx

@@ -15,6 +15,7 @@ export default function MarkdownEditor({
   className?: string;
   options?: Omit<IOptions, "after" | "input">;
 }) {
+  // console.log("veditor render");
   const [vd, setVd] = useState<Vditor>();
   const el = useRef<HTMLDivElement>(null);
 
@@ -24,7 +25,8 @@ export default function MarkdownEditor({
         vditor.setValue(defaultValue);
         setVd(vditor);
       },
-      input: (value: string) => {
+      // input 有问题，只要一输入内容停下来的时候就被迫失去焦点了。
+      blur: (value: string) => {
         onChange(value);
       },
       theme: "dark",
@@ -42,8 +44,18 @@ export default function MarkdownEditor({
 
     return () => {
       vd?.destroy();
+      setVd(undefined);
+      // console.log("veditor unmount");
     };
   }, [defaultValue]);
 
-  return <div ref={el} id={id} className={className} onKeyDown={(e) => e.stopPropagation()} />;
+  return (
+    <div
+      ref={el}
+      id={id}
+      className={className}
+      onKeyDown={(e) => e.stopPropagation()}
+      onKeyUp={(e) => e.stopPropagation()}
+    />
+  );
 }

app/src/pages/test.tsx

@@ -1,58 +1,86 @@
 import { useEffect, useState } from "react";
 import Button from "../components/Button";
-import { Vector } from "../core/dataStruct/Vector";
-import { Renderer } from "../core/render/canvas2d/renderer";
-import { InputElement } from "../core/render/domElement/inputElement";
-import { StageStyleManager } from "../core/service/feedbackService/stageStyle/StageStyleManager";
-import { Camera } from "../core/stage/Camera";
 import { Settings } from "../core/service/Settings";
 import tipsJson from "../assets/projectGraphTips.json";
+// import DetailsEditSidePanel from "./_details_edit_side_panel";
+// import MarkdownEditor from "./_vditor_panel";
+// import Vditor from "vditor";
+import "vditor/dist/index.css";
+import MarkdownEditor from "./_vditor_panel";
 
 export default function TestPage() {
   useEffect(() => {
     // InputElement.textarea(new Vector(300, 300), "hello world");
   });
 
-  function testInput() {
-    InputElement.input(new Vector(300, 300), "hello world", () => {}, {
-      fontSize: Renderer.FONT_SIZE * Camera.currentScale + "px",
-      backgroundColor: "transparent",
-      color: StageStyleManager.currentStyle.StageObjectBorderColor.toString(),
-      outline: "solid 1px white",
-      marginTop: -8 * Camera.currentScale + "px",
-      width: "100vw",
-    });
-  }
-
-  function testTextarea() {
-    InputElement.textarea(new Vector(300, 300), "hello world", () => {}, {
-      fontSize: Renderer.FONT_SIZE * Camera.currentScale + "px",
-      backgroundColor: "transparent",
-      color: StageStyleManager.currentStyle.StageObjectBorderColor.toString(),
-      outline: "solid 1px white",
-      marginTop: -8 * Camera.currentScale + "px",
-    });
-  }
-
   const [theme, setTheme] = useState("light");
+  // const [vd, setVd] = useState<Vditor>();
   useEffect(() => {
     Settings.watch("uiTheme", (value) => {
       setTheme(value);
       document.documentElement.setAttribute("data-theme", value);
     });
+    return () => {
+      // vd?.destroy();
+      // setVd(undefined);
+    };
   }, []);
 
+  const [inputCurrentDetails, setInputCurrentDetails] = useState("");
+  const setInputCurrentDetailsHandler = (value?: string | undefined) => {
+    if (value !== undefined) {
+      setInputCurrentDetails(value);
+    }
+  };
   return (
     <>
       <div className="p-4">
         <h1> Test Page </h1>
-        <Button onClick={testInput}>TestInput</Button>
-        <Button onClick={testTextarea}>TestTextarea</Button>
         <Button onClick={() => console.log(tipsJson)}>test json</Button>
         <div className="h-16 bg-gray-800" />
         <p>当前主题: {theme}</p>
         <div className="bg-test-bg h-64 w-64 outline-2"></div>
         <div className="bg-test-bg h-64 w-64 outline-2 hover:cursor-pointer"></div>
+        <MarkdownEditor
+          id="details-editor"
+          className="fixed bottom-4 right-4 top-20 z-50 overflow-hidden rounded-xl"
+          onChange={setInputCurrentDetailsHandler}
+          defaultValue={inputCurrentDetails}
+          options={{
+            width: "50%",
+            toolbar: [
+              // {
+              //   name: "confirm",
+              //   tip: "确认",
+              //   tipPosition: "n",
+              //   icon: '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 1024 1024"><path fill="currentColor" d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5L207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8"/></svg>',
+              //   click: handleConfirmDetailsEdit,
+              // },
+              "fullscreen",
+              "|",
+              "headings",
+              "bold",
+              "italic",
+              "strike",
+              "link",
+              "|",
+              "list",
+              "ordered-list",
+              "check",
+              "outdent",
+              "indent",
+              "|",
+              "quote",
+              "line",
+              "code",
+              "inline-code",
+              "table",
+              "|",
+              "undo",
+              "redo",
+            ],
+          }}
+        />
       </div>
     </>
   );