Revert "编辑器自动聚焦、移除不必要代码"

This reverts commit 9b66e83.
fgt1t5y · Oct 2, 2024 · 2cfd488 · 2cfd488
1 parent 9b66e83
commit 2cfd488
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 17 deletions.
diff --git a/src/components/editor/Editor.vue b/src/components/editor/Editor.vue
@@ -18,7 +18,7 @@ import { schema } from "@/components/editor/schema";
 import { toolbar } from "./toolbar";
 import { placeholder } from "./placeholder";
 import { tools, extraKeymap } from "./tools";
-import { onMounted, ref } from "vue";
+import { onMounted, ref, watch } from "vue";
 import { useXScroll } from "@/utils/useXScroll";
 import { bubbleMenu } from "./bubblemenu";
 import { getHTMLFromFragment, createNodeFromContent } from "./helper";
@@ -48,10 +48,6 @@ const dispatchTransaction = (tr: Transaction) => {
   syncHTML();
 };
 
-const focus = () => {
-  if (view) view.focus();
-};
-
 const destroy = () => {
   if (view) view.destroy();
 };
@@ -83,6 +79,7 @@ onMounted(() => {
             dragHandleWidth: 30,
             scrollTreshold: 10,
             excludedTags: [],
+            pluginKey: "2",
           }),
         ],
         doc: createNodeFromContent(html.value, schema),
@@ -95,10 +92,8 @@ onMounted(() => {
 
   syncHTML();
 
-  view.focus();
-
   useXScroll(toolbarRef.value!);
 });
 
-defineExpose({ focus, destroy });
+defineExpose({ destroy });
 </script>
diff --git a/src/components/editor/draghandle.ts b/src/components/editor/draghandle.ts
@@ -2,6 +2,7 @@
 import {
   NodeSelection,
   Plugin,
+  PluginKey,
   TextSelection,
 } from "prosemirror-state";
 import { Fragment, Slice, Node } from "prosemirror-model";
@@ -73,7 +74,7 @@ function calcNodePos(pos: number, view: EditorView) {
 }
 
 export function dragHandle(
-  options: GlobalDragHandleOptions
+  options: GlobalDragHandleOptions & { pluginKey: string }
 ) {
   let listType = "";
   function handleDragStart(event: DragEvent, view: EditorView) {
@@ -176,7 +177,18 @@ export function dragHandle(
     }
   }
 
+  function hideHandleOnEditorOut(event: MouseEvent) {
+    if (event.target instanceof Element) {
+      const isInsideEditor = !!event.target.closest(".ProseMirror");
+      const isHandle =
+        !!event.target.attributes.getNamedItem("data-drag-handle");
+      if (isInsideEditor || isHandle) return;
+    }
+    hideDragHandle();
+  }
+
   return new Plugin({
+    key: new PluginKey(options.pluginKey),
     view: (view) => {
       dragHandleElement = document.createElement("div");
       dragHandleElement.draggable = true;
@@ -193,9 +205,9 @@ export function dragHandle(
         hideDragHandle();
         let scrollY = window.scrollY;
         if (e.clientY < options.scrollTreshold) {
-          window.scrollTo({ top: scrollY - 50, behavior: "smooth" });
+          window.scrollTo({ top: scrollY - 30, behavior: "smooth" });
         } else if (window.innerHeight - e.clientY < options.scrollTreshold) {
-          window.scrollTo({ top: scrollY + 50, behavior: "smooth" });
+          window.scrollTo({ top: scrollY + 30, behavior: "smooth" });
         }
       }
 
@@ -205,6 +217,11 @@ export function dragHandle(
 
       view.dom.parentElement?.appendChild(dragHandleElement);
 
+      view.dom.parentElement?.addEventListener(
+        "mouseout",
+        hideHandleOnEditorOut
+      );
+
       return {
         destroy: () => {
           dragHandleElement?.remove?.();
@@ -214,6 +231,10 @@ export function dragHandle(
             onDragHandleDragStart
           );
           dragHandleElement = null;
+          view.dom.parentElement?.removeEventListener(
+            "mouseout",
+            hideHandleOnEditorOut
+          );
         },
       };
     },
@@ -257,9 +278,9 @@ export function dragHandle(
           rect.top += (lineHeight - 24) / 2;
           rect.top += paddingTop;
           // Li markers
-          // if (node.matches("ul:not([data-type=taskList]) li, ol li")) {
-          //   rect.left -= options.dragHandleWidth;
-          // }
+          if (node.matches("ul:not([data-type=taskList]) li, ol li")) {
+            rect.left -= options.dragHandleWidth;
+          }
           rect.width = options.dragHandleWidth;
 
           if (!dragHandleElement) return;
@@ -308,9 +329,6 @@ export function dragHandle(
             view.dragging = { slice, move: event.ctrlKey };
           }
         },
-        mouseleave() {
-          hideDragHandle();
-        },
       },
     },
   });