rme 0.2.5-alpha.21 → 0.2.5-alpha.23

package/dist/index.mjs

@@ -1829,13 +1829,13 @@ function computeChange(oldVal, newVal) {
 
 // src/editor/components/Editor.tsx
 import { prosemirrorNodeToHtml } from "@rme-sdk/main";
-import { forwardRef as forwardRef2, memo as memo9, useImperativeHandle as useImperativeHandle2, useMemo as useMemo6, useState as useState8 } from "react";
+import { forwardRef as forwardRef2, memo as memo9, useImperativeHandle as useImperativeHandle2, useMemo as useMemo6, useState as useState9 } from "react";
 
 // src/editor/components/SourceEditor/index.tsx
 import { ProsemirrorDevTools } from "@rme-sdk/dev";
 import { Remirror } from "@rme-sdk/react";
 import { createContextState } from "create-context-state";
-import { memo as memo5, useCallback as useCallback4, useMemo as useMemo2 } from "react";
+import { memo as memo6, useCallback as useCallback4, useMemo as useMemo2 } from "react";
 
 // src/editor/components/ErrorBoundary.tsx
 import React from "react";
@@ -2648,90 +2648,6 @@ function createElement(tagName, attributes, ...children) {
   }
   return element;
 }
-function deepCloneElement(element, important = false) {
-  const clonedElement = element.cloneNode(true);
-  const style = deepCopyStyles(element, clonedElement, important);
-  return [clonedElement, style];
-}
-function deepCopyStyles(source, target, important) {
-  const sources = [source];
-  const targets = [target];
-  const styles = [];
-  while (sources.length > 0 && sources.length === targets.length) {
-    const source2 = sources.shift();
-    const target2 = targets.shift();
-    if (!source2 || !target2) {
-      break;
-    }
-    const style = copyStyles(source2, target2, important);
-    if (style) {
-      styles.push(style);
-    }
-    sources.push(...Array.from(source2.children));
-    targets.push(...Array.from(target2.children));
-  }
-  return styles.join("\n");
-}
-function copyStyles(source, target, important) {
-  if (!source || !target) {
-    return "";
-  }
-  const view = source.ownerDocument?.defaultView;
-  if (!view) {
-    return "";
-  }
-  const sourceStyle = view.getComputedStyle(source);
-  const targetStyle = target.style;
-  if (!sourceStyle || !targetStyle) {
-    return "";
-  }
-  for (const key2 of sourceStyle) {
-    targetStyle.setProperty(
-      key2,
-      sourceStyle.getPropertyValue(key2),
-      // Enforce important to avoid the style being overridden when the element
-      // is connected to the page.
-      // See https://github.com/prosekit/prosekit/issues/1185 for more details.
-      important ? "important" : sourceStyle.getPropertyPriority(key2) || ""
-    );
-  }
-  const styles = [];
-  for (const pseudoSelector of [":before", ":after"]) {
-    const sourcePseudoStyle = view.getComputedStyle(source, pseudoSelector);
-    const targetPseudoStyle = view.getComputedStyle(target, pseudoSelector);
-    if (!sourcePseudoStyle) {
-      continue;
-    }
-    const content = sourcePseudoStyle.getPropertyValue("content");
-    const hasPseudoElement = content && content !== "none" && content !== "normal";
-    if (!hasPseudoElement) {
-      continue;
-    }
-    const cssProps = [];
-    for (const property of sourcePseudoStyle) {
-      const sourceValue = sourcePseudoStyle.getPropertyValue(property);
-      const sourcePriority = sourcePseudoStyle.getPropertyPriority(property);
-      const targetValue = targetPseudoStyle.getPropertyValue(property);
-      const targetPriority = targetPseudoStyle.getPropertyPriority(property);
-      if (sourceValue !== targetValue || sourcePriority !== targetPriority) {
-        cssProps.push(`${property}: ${sourceValue}${sourcePriority ? " !important" : ""};`);
-      }
-    }
-    const uniqueClassName = `clone-pseudo-element-${getId()}`;
-    target.classList.add(uniqueClassName);
-    styles.push(`.${uniqueClassName}${pseudoSelector} { ${cssProps.join(" ")} }`);
-  }
-  return styles.join("\n");
-}
-function injectStyle(container, styleText) {
-  if (!styleText) {
-    return;
-  }
-  const document2 = getDocument(container);
-  const style = document2.createElement("style");
-  style.textContent = styleText;
-  container.appendChild(style);
-}
 
 // src/editor/extensions/Table/table-utils.ts
 import { findParentNodeOfType as findParentNodeOfType2 } from "@rme-sdk/core";
@@ -9574,13 +9490,197 @@ MermaidBlockExtension = __decorateClass([
 ], MermaidBlockExtension);
 
 // src/editor/extensions/NodeIndicator/node-indicator-extension.tsx
-import { isHTMLElement as isHTMLElement3 } from "@ocavue/utils";
+import { isHTMLElement as isHTMLElement5 } from "@ocavue/utils";
 import { PlainExtension as PlainExtension7 } from "@rme-sdk/core";
-import { NodeSelection as NodeSelection2, TextSelection as TextSelection11 } from "@rme-sdk/pm/state";
+import { NodeSelection as NodeSelection4, TextSelection as TextSelection11 } from "@rme-sdk/pm/state";
 
-// src/editor/extensions/NodeIndicator/drop-target.ts
+// src/editor/toolbar/BlockHandler/index.tsx
+import { isHTMLElement as isHTMLElement2 } from "@ocavue/utils";
+import { NodeSelection as NodeSelection2 } from "@rme-sdk/pm/state";
+import { useExtension, useRemirrorContext as useRemirrorContext2 } from "@rme-sdk/react-core";
+import { memo as memo5, useEffect as useEffect5, useState as useState6 } from "react";
+import styled10 from "styled-components";
+
+// src/editor/extensions/NodeIndicator/drag-preview.ts
 import { isHTMLElement } from "@ocavue/utils";
+import { Fragment as Fragment6, Slice as Slice3 } from "@rme-sdk/pm";
 import { NodeSelection } from "@rme-sdk/pm/state";
+
+// src/editor/utils/get-client-rect.ts
+function getClientRect(element) {
+  const rect = element.getBoundingClientRect();
+  if (rect.width === 0 && rect.height === 0 && rect.x === 0 && rect.y === 0) {
+    if (element.getClientRects().length === 0) {
+      const children = Array.from(element.children);
+      const rects = children.map((child) => getClientRect(child));
+      if (rects.length === 0) {
+        return rect;
+      }
+      if (rects.length === 1) {
+        return rects[0];
+      }
+      let { top, bottom, left, right } = rects[0];
+      for (let i = 1; i < rects.length; i++) {
+        const r = rects[i];
+        if (r.top < top) top = r.top;
+        if (r.bottom > bottom) bottom = r.bottom;
+        if (r.left < left) left = r.left;
+        if (r.right > right) right = r.right;
+      }
+      return { top, bottom, left, right };
+    }
+  }
+  return rect;
+}
+
+// src/editor/extensions/NodeIndicator/drag-preview.ts
+function setViewDragging(view, hoverState) {
+  const { node, pos } = hoverState;
+  const dragging = {
+    slice: new Slice3(Fragment6.from(node), 0, 0),
+    move: true,
+    node: NodeSelection.create(view.state.doc, pos)
+  };
+  view.dragging = dragging;
+}
+
+// src/editor/toolbar/BlockHandler/index.tsx
+import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
+var nodeTypeIconMap = {
+  "heading-1": "ri-h-1",
+  "heading-2": "ri-h-2",
+  "heading-3": "ri-h-3",
+  "heading-4": "ri-h-4",
+  "heading-5": "ri-h-5",
+  "heading-6": "ri-h-6",
+  paragraph: "ri-paragraph",
+  "list-bullet": "ri-list-unordered",
+  "list-ordered": "ri-list-ordered",
+  "list-task": "ri-list-check-3",
+  codeMirror: "ri-code-box-line",
+  table: "ri-table-line",
+  html_block: "ri-html5-line",
+  math_block: "ri-formula"
+};
+var watchers = {};
+var draggingRef = { current: false };
+var addDraggingRefWatcher = (key2, watcher) => {
+  watchers[key2] = watcher;
+};
+var setDraggingRef = (value) => {
+  draggingRef.current = value;
+  Object.values(watchers).forEach((watcher) => watcher(value));
+};
+var BlockHandler = memo5(() => {
+  const { view: editorView } = useRemirrorContext2({ autoUpdate: true });
+  const [isDragging, setIsDragging] = useState6(false);
+  const nodeIndicatorExtension = useExtension(NodeIndicatorExtension);
+  const state = nodeIndicatorExtension.getPluginState();
+  useEffect5(() => {
+    addDraggingRefWatcher("blockHandler", setIsDragging);
+    return () => {
+      delete watchers["blockHandler"];
+    };
+  }, []);
+  const handleClick = () => {
+    if (editorView && nodeIndicatorExtension) {
+      const state2 = nodeIndicatorExtension.getPluginState();
+      if (state2 && state2.pos !== null && state2.node) {
+        const tr = editorView.state.tr;
+        tr.setSelection(NodeSelection2.create(tr.doc, state2.pos));
+        editorView.dispatch(tr);
+      }
+    }
+  };
+  const handleDragStart = (event2) => {
+    console.log("handleDragStart - Tauri\u62D6\u62FD\u5F00\u59CB");
+    setDraggingRef(true);
+    if (editorView && nodeIndicatorExtension) {
+      const state2 = nodeIndicatorExtension.getPluginState();
+      if (state2 && state2.pos !== null && state2.node && state2.node.isBlock) {
+        let tr = editorView.state.tr;
+        tr = tr.setSelection(NodeSelection2.create(tr.doc, state2.pos));
+        editorView.dispatch(tr);
+        const dom = editorView.nodeDOM(state2.pos);
+        if (dom && isHTMLElement2(dom)) {
+          if (event2.dataTransfer) {
+            event2.dataTransfer.effectAllowed = "move";
+          }
+          setViewDragging(editorView, state2);
+        }
+      }
+    }
+  };
+  const handleDragEnd = (e) => {
+    console.log("handleDragEnd", e);
+  };
+  if (!editorView || !state?.node) {
+    return null;
+  }
+  const renderIcon = () => {
+    let key2 = state?.node?.type?.name || "";
+    if (state?.node?.type?.name === "heading") {
+      key2 = `heading-${state?.node?.attrs?.level}`;
+    }
+    if (state?.node?.type?.name === "list") {
+      key2 = `list-${state?.node?.attrs?.kind}`;
+    }
+    const iconName = nodeTypeIconMap[key2 || ""];
+    if (iconName) {
+      return /* @__PURE__ */ jsx16("i", { className: iconName });
+    }
+    return null;
+  };
+  return /* @__PURE__ */ jsxs7(
+    Container3,
+    {
+      className: "rme-block-handler",
+      draggable: "true",
+      onClick: handleClick,
+      onDragStart: handleDragStart,
+      onDragEnd: handleDragEnd,
+      "data-dragging": isDragging,
+      style: {
+        position: "fixed",
+        left: `${state?.rect?.left ? state.rect.left - 38 : 0}px`,
+        top: `${state?.rect?.top || 0}px`
+      },
+      children: [
+        renderIcon(),
+        /* @__PURE__ */ jsx16("div", { className: "rme-draggable-handler", children: /* @__PURE__ */ jsx16("i", { className: "ri-draggable" }) })
+      ]
+    },
+    "rme-block-handler"
+  );
+});
+var Container3 = styled10.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 2px;
+  border: 1px solid ${(props) => props.theme.borderColor};
+  border-radius: 4px;
+  font-size: 14px;
+  z-index: 1000;
+
+  .rme-draggable-handler {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 18px;
+    width: 18px;
+    border-radius: 4px;
+    cursor: grab;
+
+    &:hover {
+      background-color: ${(props) => props.theme.hoverColor};
+    }
+  }
+`;
+
+// src/editor/extensions/NodeIndicator/drop-target.ts
+import { isHTMLElement as isHTMLElement3 } from "@ocavue/utils";
+import { NodeSelection as NodeSelection3 } from "@rme-sdk/pm/state";
 function getTargetsByView(view) {
   let stack = [[-1, view.state.doc]];
   let targets = [];
@@ -9588,7 +9688,7 @@ function getTargetsByView(view) {
     const [pos, node] = stack.pop();
     if (pos >= 0) {
       let dom = view.nodeDOM(pos);
-      if (dom && isHTMLElement(dom)) {
+      if (dom && isHTMLElement3(dom)) {
         let rect = dom.getBoundingClientRect();
         let { top, bottom, left: x1, right: x2 } = rect;
         targets.push(
@@ -9672,7 +9772,7 @@ function isDraggingToItself(view, pos) {
   const { move } = dragging;
   if (!move) return;
   const selection = view.state.selection;
-  if (!(selection instanceof NodeSelection)) return;
+  if (!(selection instanceof NodeSelection3)) return;
   const { from, to } = selection;
   return from <= pos && pos <= to;
 }
@@ -9686,35 +9786,6 @@ import {
   isElement,
   isTextNode
 } from "@ocavue/utils";
-
-// src/editor/utils/get-client-rect.ts
-function getClientRect(element) {
-  const rect = element.getBoundingClientRect();
-  if (rect.width === 0 && rect.height === 0 && rect.x === 0 && rect.y === 0) {
-    if (element.getClientRects().length === 0) {
-      const children = Array.from(element.children);
-      const rects = children.map((child) => getClientRect(child));
-      if (rects.length === 0) {
-        return rect;
-      }
-      if (rects.length === 1) {
-        return rects[0];
-      }
-      let { top, bottom, left, right } = rects[0];
-      for (let i = 1; i < rects.length; i++) {
-        const r = rects[i];
-        if (r.top < top) top = r.top;
-        if (r.bottom > bottom) bottom = r.bottom;
-        if (r.left < left) left = r.left;
-        if (r.right > right) right = r.right;
-      }
-      return { top, bottom, left, right };
-    }
-  }
-  return rect;
-}
-
-// src/editor/extensions/NodeIndicator/node-target.ts
 function findBlockByCoords(view, x, y) {
   const rect = getClientRect(view.dom);
   if (!isWithinRect(rect, x, y)) {
@@ -9847,7 +9918,6 @@ var NodeIndicatorExtension = class extends PlainExtension7 {
     const initialState = {
       node: null,
       pos: null,
-      isDragging: false,
       rect: null
     };
     return {
@@ -9861,10 +9931,7 @@ var NodeIndicatorExtension = class extends PlainExtension7 {
             return { ...value, ...meta };
           }
           if (tr.docChanged) {
-            if (!value.isDragging) {
-              return { node: null, pos: null, isDragging: false };
-            }
-            return { ...value, isDragging: false };
+            return { ...value };
           }
           return value;
         }
@@ -9875,15 +9942,17 @@ var NodeIndicatorExtension = class extends PlainExtension7 {
       },
       props: {
         handleDrop: (view, event2, slice, move) => {
-          console.log("handleDrop - \u5F00\u59CB\u5904\u7406\u653E\u7F6E\u64CD\u4F5C", { move, hasSlice: !!slice, eventType: event2.type });
+          console.log("handleDrop - \u5F00\u59CB\u5904\u7406\u653E\u7F6E\u64CD\u4F5C", {
+            move,
+            hasSlice: !!slice,
+            eventType: event2.type
+          });
           if (!getTarget) {
             console.log("handleDrop - getTarget\u672A\u5B9A\u4E49");
             return false;
           }
           const target = getTarget([event2.clientX, event2.clientY], event2);
-          console.log("handleDrop - \u8BA1\u7B97\u7684\u653E\u7F6E\u76EE\u6807:", target);
           if (!target) {
-            console.log("handleDrop - \u672A\u627E\u5230\u6709\u6548\u653E\u7F6E\u76EE\u6807");
             return false;
           }
           event2.preventDefault();
@@ -9906,8 +9975,8 @@ var NodeIndicatorExtension = class extends PlainExtension7 {
             return true;
           }
           let $pos = tr.doc.resolve(pos);
-          if (isNode && NodeSelection2.isSelectable(slice.content.firstChild) && $pos.nodeAfter && $pos.nodeAfter.sameMarkup(slice.content.firstChild)) {
-            tr.setSelection(new NodeSelection2($pos));
+          if (isNode && NodeSelection4.isSelectable(slice.content.firstChild) && $pos.nodeAfter && $pos.nodeAfter.sameMarkup(slice.content.firstChild)) {
+            tr.setSelection(new NodeSelection4($pos));
           } else {
             let end = tr.mapping.map(insertPos);
             tr.mapping.maps[tr.mapping.maps.length - 1].forEach(
@@ -9917,6 +9986,7 @@ var NodeIndicatorExtension = class extends PlainExtension7 {
           }
           view.focus();
           view.dispatch(tr.setMeta("uiEvent", "drop"));
+          setDraggingRef(false);
           return true;
         },
         handleDOMEvents: {
@@ -9924,17 +9994,13 @@ var NodeIndicatorExtension = class extends PlainExtension7 {
             const { x, y } = event2;
             const block = findBlockByCoords(view, x, y);
             if (!block) {
-              view.dispatch(
-                view.state.tr.setMeta(pluginKey, { node: null, pos: null, isDragging: false })
-              );
+              view.dispatch(view.state.tr.setMeta(pluginKey, { node: null, pos: null }));
               return;
             }
             const { node, pos } = block;
             const element = view.nodeDOM(pos);
-            if (!element || !isHTMLElement3(element)) {
-              view.dispatch(
-                view.state.tr.setMeta(pluginKey, { node: null, pos: null, isDragging: false })
-              );
+            if (!element || !isHTMLElement5(element)) {
+              view.dispatch(view.state.tr.setMeta(pluginKey, { node: null, pos: null }));
               return;
             }
             const $pos = view.state.doc.resolve(pos);
@@ -10921,7 +10987,7 @@ var createSourceCodeDelegate = (options) => {
 };
 
 // src/editor/components/SourceEditor/index.tsx
-import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
 var [SourceEditorProvider, useSourceCodeEditor] = createContextState(
   ({ props }) => {
     return {
@@ -10929,7 +10995,7 @@ var [SourceEditorProvider, useSourceCodeEditor] = createContextState(
     };
   }
 );
-var SourceCodeEditorCore = memo5(
+var SourceCodeEditorCore = memo6(
   (props) => {
     const { markdownToolBar, styleToken, textContainerProps = {} } = props;
     const { content, markText, hooks, isTesting, editable } = useSourceCodeEditor();
@@ -10937,9 +11003,9 @@ var SourceCodeEditorCore = memo5(
     try {
       initialCntent = markText.stringToDoc(content);
     } catch (error) {
-      return /* @__PURE__ */ jsx16(ErrorBoundary_default, { hasError: true, error, ...props.errorHandler || {} });
+      return /* @__PURE__ */ jsx17(ErrorBoundary_default, { hasError: true, error, ...props.errorHandler || {} });
     }
-    return /* @__PURE__ */ jsx16(ErrorBoundary_default, { ...props.errorHandler || {}, children: /* @__PURE__ */ jsx16(SourceCodeThemeWrapper, { ...styleToken, children: /* @__PURE__ */ jsxs7(
+    return /* @__PURE__ */ jsx17(ErrorBoundary_default, { ...props.errorHandler || {}, children: /* @__PURE__ */ jsx17(SourceCodeThemeWrapper, { ...styleToken, children: /* @__PURE__ */ jsxs8(
       Remirror,
       {
         manager: markText.manager,
@@ -10948,9 +11014,9 @@ var SourceCodeEditorCore = memo5(
         editable,
         onChange: props.onChange,
         children: [
-          /* @__PURE__ */ jsx16(Text_default, { ...textContainerProps }),
+          /* @__PURE__ */ jsx17(Text_default, { ...textContainerProps }),
           markdownToolBar || null,
-          isTesting ? /* @__PURE__ */ jsx16(ProsemirrorDevTools, {}) : null
+          isTesting ? /* @__PURE__ */ jsx17(ProsemirrorDevTools, {}) : null
         ]
       }
     ) }) });
@@ -10977,14 +11043,14 @@ var SourceEditor = (props) => {
     },
     [editorDelegate, props]
   );
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     SourceEditorProvider,
     {
       content,
       isTesting,
       markText: editorDelegate,
       hooks,
-      children: /* @__PURE__ */ jsx16(
+      children: /* @__PURE__ */ jsx17(
         SourceCodeEditorCore,
         {
           styleToken,
@@ -10997,14 +11063,14 @@ var SourceEditor = (props) => {
     }
   );
 };
-var SourceEditor_default = memo5(SourceEditor);
+var SourceEditor_default = memo6(SourceEditor);
 
 // src/editor/components/useContextMounted.tsx
-import { useRemirrorContext as useRemirrorContext2 } from "@rme-sdk/react-core";
-import { useEffect as useEffect5 } from "react";
+import { useRemirrorContext as useRemirrorContext3 } from "@rme-sdk/react-core";
+import { useEffect as useEffect6 } from "react";
 var useContextMounted = (onContextMounted) => {
-  const remirrorContext = useRemirrorContext2();
-  useEffect5(() => {
+  const remirrorContext = useRemirrorContext3();
+  useEffect6(() => {
     if (onContextMounted) {
       onContextMounted(remirrorContext);
     }
@@ -11014,269 +11080,11 @@ var useContextMounted = (onContextMounted) => {
 // src/editor/components/WysiwygEditor/index.tsx
 import { ProsemirrorDevTools as ProsemirrorDevTools2 } from "@rme-sdk/dev";
 import { Remirror as Remirror2 } from "@rme-sdk/react";
-import { memo as memo8, useCallback as useCallback19, useEffect as useEffect8, useMemo as useMemo5 } from "react";
-
-// src/editor/toolbar/BlockHandler/index.tsx
-import { isHTMLElement as isHTMLElement5 } from "@ocavue/utils";
-import { NodeSelection as NodeSelection4 } from "@rme-sdk/pm/state";
-import { useExtension, useRemirrorContext as useRemirrorContext3 } from "@rme-sdk/react-core";
-import { memo as memo6 } from "react";
-import styled10 from "styled-components";
-
-// src/editor/extensions/NodeIndicator/drag-preview.ts
-import { isHTMLElement as isHTMLElement4 } from "@ocavue/utils";
-import { Fragment as Fragment6, Slice as Slice3 } from "@rme-sdk/pm";
-import { NodeSelection as NodeSelection3 } from "@rme-sdk/pm/state";
-
-// src/editor/utils/get-box-element.ts
-function getBoxElement(element) {
-  const window2 = element.ownerDocument.defaultView;
-  if (!window2) {
-    return;
-  }
-  const style = window2.getComputedStyle(element);
-  const display = style.display;
-  if (display === "contents" && element.childElementCount === 1) {
-    return element.firstElementChild;
-  } else if (display === "none") {
-    return;
-  }
-  return element;
-}
-
-// src/editor/extensions/NodeIndicator/set-drag-preview.ts
-function setDragPreview(event2, element) {
-  const { top, bottom, left, right } = getClientRect(element);
-  const width = right - left;
-  const height = bottom - top;
-  const elementX = left;
-  const elementY = top;
-  const { clientX, clientY } = event2;
-  const document2 = element.ownerDocument;
-  const container = document2.createElement("div");
-  const outsideX = Math.round(elementX - clientX);
-  const outsideY = Math.round(elementY - clientY);
-  const borderX = Math.max(outsideX, 0);
-  const borderY = Math.max(outsideY, 0);
-  Object.assign(container.style, {
-    // Ensuring we don't cause reflow when adding the element to the page using
-    // `position:fixed` rather than `position:absolute` so we are positioned on
-    // the current viewport. `position:fixed` also creates a new stacking
-    // context, so we don't need to do that here.
-    // https://github.com/atlassian/pragmatic-drag-and-drop/blob/56276552/packages/core/src/public-utils/element/custom-native-drag-preview/set-custom-native-drag-preview.ts#L60
-    position: "fixed",
-    // The element is positioned off-screen to avoid capturing the content of
-    // the page on Safari when the dragging element has a transparent background
-    // on Safari. See https://github.com/prosekit/prosekit/issues/1153 for more
-    // details.
-    top: "-1000vh",
-    left: "-1000vw",
-    // The element should not be interactive.
-    pointerEvents: "none",
-    // The element should be on top of everything else.
-    zIndex: "2147483647",
-    // Only reliable cross browser technique found to push a drag preview away
-    // from the cursor is to use transparent borders on the container.
-    // https://github.com/atlassian/pragmatic-drag-and-drop/blob/56276552/packages/core/src/public-utils/element/custom-native-drag-preview/pointer-outside-of-preview.ts#L13-L18
-    borderLeft: `${borderX}px solid transparent`,
-    borderTop: `${borderY}px solid transparent`,
-    boxSizing: "border-box",
-    width: `${width + borderX}px`,
-    height: `${height + borderY}px`
-  });
-  const [clonedElement, styleText] = deepCloneElement(element, true);
-  clonedElement.style.setProperty("opacity", "0.7", "important");
-  clonedElement.style.setProperty("margin", "0", "important");
-  clonedElement.style.setProperty("outline-color", "transparent", "important");
-  document2.body.appendChild(container);
-  container.appendChild(clonedElement);
-  injectStyle(container, styleText);
-  event2.dataTransfer?.setDragImage(container, Math.max(-outsideX, 0), Math.max(-outsideY, 0));
-  setTimeout(() => {
-    if (document2.body.contains(container)) {
-      document2.body.removeChild(container);
-    }
-  }, 100);
-  const cleanupHandler = () => {
-    if (document2.body.contains(container)) {
-      document2.body.removeChild(container);
-    }
-    document2.removeEventListener("dragend", cleanupHandler);
-  };
-  document2.addEventListener("dragend", cleanupHandler, { once: true });
-}
-
-// src/editor/extensions/NodeIndicator/drag-preview.ts
-function createDraggingPreview(view, hoverState, event2) {
-  if (!event2.dataTransfer) {
-    return;
-  }
-  const { pos } = hoverState;
-  if (pos == null) {
-    return;
-  }
-  const element = view.nodeDOM(pos);
-  if (!element || !isHTMLElement4(element)) {
-    return;
-  }
-  const boxElement = getBoxElement(element);
-  if (!boxElement || !isHTMLElement4(boxElement)) {
-    return;
-  }
-  event2.dataTransfer.clearData();
-  event2.dataTransfer.setData("text/html", boxElement.outerHTML);
-  event2.dataTransfer.effectAllowed = "copyMove";
-  setDragPreview(event2, boxElement);
-  return;
-}
-function setViewDragging(view, hoverState) {
-  const { node, pos } = hoverState;
-  const dragging = {
-    slice: new Slice3(Fragment6.from(node), 0, 0),
-    move: true,
-    node: NodeSelection3.create(view.state.doc, pos)
-  };
-  view.dragging = dragging;
-}
-
-// src/editor/toolbar/BlockHandler/index.tsx
-import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
-var nodeTypeIconMap = {
-  "heading-1": "ri-h-1",
-  "heading-2": "ri-h-2",
-  "heading-3": "ri-h-3",
-  "heading-4": "ri-h-4",
-  "heading-5": "ri-h-5",
-  "heading-6": "ri-h-6",
-  paragraph: "ri-paragraph",
-  "list-bullet": "ri-list-unordered",
-  "list-ordered": "ri-list-ordered",
-  "list-task": "ri-list-check-3",
-  codeMirror: "ri-code-box-line",
-  table: "ri-table-line",
-  html_block: "ri-html5-line",
-  math_block: "ri-formula"
-};
-var BlockHandler = memo6(() => {
-  const { view: editorView } = useRemirrorContext3({ autoUpdate: true });
-  const nodeIndicatorExtension = useExtension(NodeIndicatorExtension);
-  const state = nodeIndicatorExtension.getPluginState();
-  const handleClick = () => {
-    if (editorView && nodeIndicatorExtension) {
-      const state2 = nodeIndicatorExtension.getPluginState();
-      if (state2 && state2.pos !== null && state2.node) {
-        const tr = editorView.state.tr;
-        tr.setSelection(NodeSelection4.create(tr.doc, state2.pos));
-        editorView.dispatch(tr);
-      }
-    }
-  };
-  const handleDragStart = (event2) => {
-    console.log("handleDragStart - Tauri\u62D6\u62FD\u5F00\u59CB");
-    if (editorView && nodeIndicatorExtension) {
-      const state2 = nodeIndicatorExtension.getPluginState();
-      if (state2 && state2.pos !== null && state2.node && state2.node.isBlock) {
-        const tr = editorView.state.tr;
-        tr.setSelection(NodeSelection4.create(tr.doc, state2.pos));
-        tr.setMeta(nodeIndicatorExtension.pluginKey, { isDragging: true });
-        editorView.dispatch(tr);
-        const dom = editorView.nodeDOM(state2.pos);
-        if (dom && isHTMLElement5(dom)) {
-          if (event2.dataTransfer) {
-            event2.dataTransfer.effectAllowed = "move";
-            event2.dataTransfer.setData("text/plain", state2.node.textContent);
-            event2.dataTransfer.setData("application/x-node-position", String(state2.pos));
-          }
-          createDraggingPreview(editorView, state2, event2);
-          setViewDragging(editorView, state2);
-        }
-      }
-    }
-  };
-  const handleDragOver = (event2) => {
-    console.log("handleDragOver - Tauri\u62D6\u62FD\u60AC\u505C");
-    event2.preventDefault();
-    event2.dataTransfer.dropEffect = "move";
-  };
-  const handleDragEnd = (event2) => {
-    console.log("handleDragEnd - Tauri\u62D6\u62FD\u7ED3\u675F");
-    if (editorView && nodeIndicatorExtension) {
-      const tr = editorView.state.tr;
-      tr.setMeta(nodeIndicatorExtension.pluginKey, { isDragging: false });
-      editorView.dispatch(tr);
-    }
-  };
-  const handleDragLeave = (event2) => {
-    console.log("handleDragLeave - Tauri\u62D6\u62FD\u79BB\u5F00");
-  };
-  if (!editorView || !state?.node) {
-    return null;
-  }
-  const renderIcon = () => {
-    let key2 = state?.node?.type?.name || "";
-    if (state?.node?.type?.name === "heading") {
-      key2 = `heading-${state?.node?.attrs?.level}`;
-    }
-    if (state?.node?.type?.name === "list") {
-      key2 = `list-${state?.node?.attrs?.kind}`;
-    }
-    const iconName = nodeTypeIconMap[key2 || ""];
-    if (iconName) {
-      return /* @__PURE__ */ jsx17("i", { className: iconName });
-    }
-    return null;
-  };
-  return /* @__PURE__ */ jsxs8(
-    Container3,
-    {
-      className: "rme-block-handler",
-      draggable: "true",
-      onClick: handleClick,
-      onDragStart: handleDragStart,
-      onDragOver: handleDragOver,
-      onDragEnd: handleDragEnd,
-      onDragLeave: handleDragLeave,
-      style: {
-        position: "fixed",
-        left: `${state?.rect?.left ? state.rect.left - 38 : 0}px`,
-        top: `${state?.rect?.top || 0}px`
-      },
-      children: [
-        renderIcon(),
-        /* @__PURE__ */ jsx17("div", { className: "rme-draggable-handler", children: /* @__PURE__ */ jsx17("i", { className: "ri-draggable" }) })
-      ]
-    },
-    "rme-block-handler"
-  );
-});
-var Container3 = styled10.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 2px;
-  border: 1px solid ${(props) => props.theme.borderColor};
-  border-radius: 4px;
-  font-size: 14px;
-  z-index: 1000;
-
-  .rme-draggable-handler {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 18px;
-    width: 18px;
-    border-radius: 4px;
-    cursor: grab;
-
-    &:hover {
-      background-color: ${(props) => props.theme.hoverColor};
-    }
-  }
-`;
+import { memo as memo8, useCallback as useCallback19, useEffect as useEffect9, useMemo as useMemo5 } from "react";
 
 // src/editor/toolbar/SlashMenu/index.tsx
 import { useExtension as useExtension2, useRemirrorContext as useRemirrorContext4 } from "@rme-sdk/react-core";
-import { useCallback as useCallback5, useEffect as useEffect6, useMemo as useMemo3, useRef as useRef6, useState as useState6 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect7, useMemo as useMemo3, useRef as useRef6, useState as useState7 } from "react";
 import { usePopper } from "react-popper";
 import styled11 from "styled-components";
 import { Fragment as Fragment7, jsx as jsx18 } from "react/jsx-runtime";
@@ -11289,7 +11097,7 @@ var SlashMenu = () => {
   const slashMenuExtension = useExtension2(SlashMenuExtension);
   const menuState = slashMenuExtension.getPluginState();
   const rootRef = useRef6(null);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!rootRef) return;
     const outsideClickHandler = (event2) => {
       if (rootRef.current && (!event2.target || !(event2.target instanceof Node) || !rootRef.current.contains(event2?.target))) {
@@ -11303,7 +11111,7 @@ var SlashMenu = () => {
       document.removeEventListener("mousedown", outsideClickHandler);
     };
   }, [editorView, rootRef, slashMenuExtension.pluginKey]);
-  const [popperElement, setPopperElement] = useState6(null);
+  const [popperElement, setPopperElement] = useState7(null);
   const virtualReference = useMemo3(() => {
     const domNode = editorView.domAtPos(editorState.selection.to)?.node;
     const cursorPosition = editorView.state.selection.to;
@@ -11379,7 +11187,7 @@ var Container4 = styled11.div`
 
 // src/editor/toolbar/TableToolbar/index.tsx
 import { PositionerPortal, useCommands as useCommands3, useMultiPositioner } from "@rme-sdk/react";
-import { useEffect as useEffect7 } from "react";
+import { useEffect as useEffect8 } from "react";
 
 // src/editor/toolbar/TableToolbar/ActiveCellMenu.tsx
 import {
@@ -11392,7 +11200,7 @@ import {
   Popper
 } from "@mui/material";
 import { useCommands } from "@rme-sdk/react";
-import { useRef as useRef7, useState as useState7 } from "react";
+import { useRef as useRef7, useState as useState8 } from "react";
 import { useTranslation as useTranslation2 } from "react-i18next";
 import styled12 from "styled-components";
 import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
@@ -11406,7 +11214,7 @@ var Container5 = styled12.div`
 var ActiveCellMenu = (props) => {
   const { positioner } = props;
   const commands = useCommands();
-  const [open, setOpen] = useState7(false);
+  const [open, setOpen] = useState8(false);
   const anchorRef = useRef7(null);
   const { t: t19 } = useTranslation2();
   const options = [
@@ -11627,7 +11435,7 @@ import { Fragment as Fragment8, jsx as jsx21 } from "react/jsx-runtime";
 var MultiPositionerIllustration = ({ positioner }) => {
   const positioners = useMultiPositioner(positioner, []);
   const { forceUpdatePositioners } = useCommands3();
-  useEffect7(() => {
+  useEffect8(() => {
     forceUpdatePositioners();
   }, [forceUpdatePositioners]);
   if (positioners.length === 0) return null;
@@ -12264,7 +12072,7 @@ var WysiwygEditor = (props) => {
     },
     [editorDelegate, props]
   );
-  useEffect8(() => {
+  useEffect9(() => {
     const ext = editorDelegate.manager.getExtension(TransformerExtension);
     if (ext) {
       editorDelegate?.manager?.view?.dispatch(
@@ -12315,7 +12123,7 @@ var Editor = memo9(
       onContextMounted,
       ...otherProps
     } = props;
-    const [type, setType] = useState8(initialType);
+    const [type, setType] = useState9(initialType);
     useImperativeHandle2(ref, () => ({
       getType: () => type,
       toggleType: (targetType) => {
@@ -12378,7 +12186,7 @@ var defaultStyleToken = {
 
 // src/editor/components/ThemeProvider.tsx
 import { ThemeProvider as ScThemeProvider } from "styled-components";
-import { memo as memo10, useEffect as useEffect9 } from "react";
+import { memo as memo10, useEffect as useEffect10 } from "react";
 
 // src/editor/i18n/index.ts
 import i18next from "i18next";
@@ -12461,7 +12269,7 @@ var ThemeProvider = memo10(({ theme, i18n, children }) => {
   const mode = theme?.mode || "light";
   const defaultThemeToken = mode === "dark" ? darkTheme.styledConstants : lightTheme.styledConstants;
   const themeToken = theme?.token ? { ...defaultThemeToken, ...theme.token } : defaultThemeToken;
-  useEffect9(() => {
+  useEffect10(() => {
     if (i18n?.locales) {
       i18nInit(i18n.locales).then(() => {
         if (i18n?.language) {
@@ -12470,7 +12278,7 @@ var ThemeProvider = memo10(({ theme, i18n, children }) => {
       });
     }
   }, [i18n]);
-  useEffect9(() => {
+  useEffect10(() => {
     const codemirrorTheme = theme?.codemirrorTheme || mode === "dark" ? darkTheme.codemirrorTheme : lightTheme.codemirrorTheme;
     changeTheme(codemirrorTheme);
     mermaid2.initialize({
@@ -12482,7 +12290,7 @@ var ThemeProvider = memo10(({ theme, i18n, children }) => {
 });
 
 // src/editor/components/Preview/preview.tsx
-import { useEffect as useEffect10, useState as useState9 } from "react";
+import { useEffect as useEffect11, useState as useState10 } from "react";
 import { Icon } from "zens";
 
 // src/editor/utils/prosemirrorNodeToHtml.ts
@@ -12565,12 +12373,12 @@ var rmeProsemirrorNodeToHtml = async (doc, delegateOptions) => {
 import { jsx as jsx41 } from "react/jsx-runtime";
 var Preview = (props) => {
   const { doc, delegateOptions } = props;
-  const [processedHtml, setProcessedHtml] = useState9("");
+  const [processedHtml, setProcessedHtml] = useState10("");
   let targetDoc = doc;
   if (typeof targetDoc === "string") {
     targetDoc = createWysiwygDelegate(delegateOptions).stringToDoc(targetDoc);
   }
-  useEffect10(() => {
+  useEffect11(() => {
     rmeProsemirrorNodeToHtml(targetDoc, delegateOptions).then((html2) => {
       setProcessedHtml(html2);
     }).catch((e) => {