@maketribe/ms-app 3.2.42 → 3.2.43

package/dist/esm/components/basic/lexical-editor/plugins/CheckListPlugin.js

@@ -0,0 +1,212 @@
+import { COMMAND_PRIORITY_LOW, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_UP_COMMAND, KEY_ESCAPE_COMMAND, KEY_SPACE_COMMAND, $getNearestNodeFromDOMNode, KEY_ARROW_LEFT_COMMAND, $getSelection, $isRangeSelection, $isElementNode } from "lexical";
+import { INSERT_CHECK_LIST_COMMAND, insertList, $isListItemNode, $isListNode } from "@lexical/list";
+import { mergeRegister, $findMatchingParent } from "@lexical/utils";
+import "@lexical/overflow";
+import "@lexical/text";
+import "vue";
+import { registerClickAndPointerListeners } from "../composables/listenerManager.js";
+import "@lexical/selection";
+import "@lexical/link";
+import "@lexical/rich-text";
+import { registerEditorPlugin } from "../composables/lexicalEditor.js";
+import "../utils/html.js";
+import "@maketribe/dm";
+import "element-plus";
+import "../utils/image.js";
+import "@element-plus/icons-vue";
+import "../composables/useElementBlockSelection.js";
+function listenPointerDown() {
+  return registerClickAndPointerListeners(() => {
+    document.addEventListener("click", handleClick);
+    document.addEventListener("pointerdown", handlePointerDown);
+  }, () => {
+    document.removeEventListener("click", handleClick);
+    document.removeEventListener("pointerdown", handlePointerDown);
+  });
+}
+function handleCheckItemEvent(event, callback) {
+  const target = event.target;
+  if (!(target instanceof HTMLElement))
+    return;
+  const firstChild = target.firstChild;
+  if (firstChild != null && (firstChild.tagName === "UL" || firstChild.tagName === "OL")) {
+    return;
+  }
+  const parentNode = target.parentNode;
+  if (!parentNode || parentNode.__lexicalListType !== "check")
+    return;
+  const pageX = event.pageX;
+  const rect = target.getBoundingClientRect();
+  if (target.dir === "rtl" ? pageX < rect.right && pageX > rect.right - 20 : pageX > rect.left && pageX < rect.left + 20) {
+    callback();
+  }
+}
+function handleClick(event) {
+  handleCheckItemEvent(event, () => {
+    const domNode = event.target;
+    const editor = findEditor(domNode);
+    if (editor !== null) {
+      editor.update(() => {
+        const node = $getNearestNodeFromDOMNode(domNode);
+        if ($isListItemNode(node)) {
+          domNode.focus();
+          node.toggleChecked();
+        }
+      });
+    }
+  });
+}
+function handlePointerDown(event) {
+  handleCheckItemEvent(event, () => {
+    event.preventDefault();
+  });
+}
+function findEditor(target) {
+  let node = target;
+  while (node) {
+    if (node.__lexicalEditor)
+      return node.__lexicalEditor;
+    node = node.parentNode;
+  }
+  return null;
+}
+function getActiveCheckListItem() {
+  const { activeElement } = document;
+  return activeElement !== null && activeElement.tagName === "LI" && activeElement.parentNode !== null && activeElement.parentNode.__lexicalListType === "check" ? activeElement : null;
+}
+function findCheckListItemSibling(node, backward) {
+  let sibling = backward ? node.getPreviousSibling() : node.getNextSibling();
+  let parent = node;
+  while (sibling == null && $isListItemNode(parent)) {
+    parent = parent.getParentOrThrow().getParent();
+    if (parent !== null) {
+      sibling = backward ? parent.getPreviousSibling() : parent.getNextSibling();
+    }
+  }
+  while ($isListItemNode(sibling)) {
+    const firstChild = backward ? sibling.getLastChild() : sibling.getFirstChild();
+    if (!$isListNode(firstChild))
+      return sibling;
+    sibling = backward ? firstChild.getLastChild() : firstChild.getFirstChild();
+  }
+  return null;
+}
+function handleArrownUpOrDown(event, editor, backward) {
+  const activeItem = getActiveCheckListItem();
+  if (activeItem != null) {
+    editor.update(() => {
+      const listItem = $getNearestNodeFromDOMNode(activeItem);
+      if (!$isListItemNode(listItem))
+        return;
+      const nextListItem = findCheckListItemSibling(listItem, backward);
+      if (nextListItem != null) {
+        nextListItem.selectStart();
+        const dom = editor.getElementByKey(nextListItem.__key);
+        if (dom != null) {
+          event.preventDefault();
+          setTimeout(() => {
+            dom.focus();
+          }, 0);
+        }
+      }
+    });
+  }
+  return false;
+}
+registerEditorPlugin({
+  nodes: [],
+  tools: [],
+  templates: [],
+  useMounted(editor) {
+    return mergeRegister(
+      editor.registerCommand(
+        INSERT_CHECK_LIST_COMMAND,
+        () => {
+          insertList(editor, "check");
+          return true;
+        },
+        COMMAND_PRIORITY_LOW
+      ),
+      editor.registerCommand(
+        KEY_ARROW_DOWN_COMMAND,
+        (event) => {
+          return handleArrownUpOrDown(event, editor, false);
+        },
+        COMMAND_PRIORITY_LOW
+      ),
+      editor.registerCommand(
+        KEY_ARROW_UP_COMMAND,
+        (event) => {
+          return handleArrownUpOrDown(event, editor, true);
+        },
+        COMMAND_PRIORITY_LOW
+      ),
+      editor.registerCommand(
+        KEY_ESCAPE_COMMAND,
+        (_event) => {
+          const activeItem = getActiveCheckListItem();
+          if (activeItem != null) {
+            const rootElement = editor.getRootElement();
+            if (rootElement != null)
+              rootElement.focus();
+            return true;
+          }
+          return false;
+        },
+        COMMAND_PRIORITY_LOW
+      ),
+      editor.registerCommand(
+        KEY_SPACE_COMMAND,
+        (event) => {
+          const activeItem = getActiveCheckListItem();
+          if (activeItem != null) {
+            editor.update(() => {
+              const listItemNode = $getNearestNodeFromDOMNode(activeItem);
+              if ($isListItemNode(listItemNode)) {
+                event.preventDefault();
+                listItemNode.toggleChecked();
+              }
+            });
+            return true;
+          }
+          return false;
+        },
+        COMMAND_PRIORITY_LOW
+      ),
+      editor.registerCommand(
+        KEY_ARROW_LEFT_COMMAND,
+        (event) => {
+          return editor.getEditorState().read(() => {
+            const selection = $getSelection();
+            if ($isRangeSelection(selection) && selection.isCollapsed()) {
+              const { anchor } = selection;
+              const isElement = anchor.type === "element";
+              if (isElement || anchor.offset === 0) {
+                const anchorNode = anchor.getNode();
+                const elementNode = $findMatchingParent(
+                  anchorNode,
+                  (node) => $isElementNode(node) && !node.isInline()
+                );
+                if ($isListItemNode(elementNode)) {
+                  const parent = elementNode.getParent();
+                  if ($isListNode(parent) && parent.getListType() === "check" && (isElement || elementNode.getFirstDescendant() === anchorNode)) {
+                    const domNode = editor.getElementByKey(elementNode.__key);
+                    if (domNode != null && document.activeElement !== domNode) {
+                      domNode.focus();
+                      event.preventDefault();
+                      return true;
+                    }
+                  }
+                }
+              }
+            }
+            return false;
+          });
+        },
+        COMMAND_PRIORITY_LOW
+      ),
+      listenPointerDown()
+    );
+  }
+});
+//# sourceMappingURL=CheckListPlugin.js.map

package/dist/esm/components/basic/lexical-editor/plugins/CheckListPlugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckListPlugin.js","sources":["../../../../../../src/components/basic/lexical-editor/plugins/CheckListPlugin.ts"],"sourcesContent":["\r\n\r\nimport type { ListItemNode } from '@lexical/list'\r\nimport {\r\n  $getNearestNodeFromDOMNode,\r\n  $getSelection,\r\n  $isElementNode,\r\n  $isRangeSelection,\r\n  COMMAND_PRIORITY_LOW,\r\n  KEY_ARROW_DOWN_COMMAND,\r\n  KEY_ARROW_LEFT_COMMAND,\r\n  KEY_ARROW_UP_COMMAND,\r\n  KEY_ESCAPE_COMMAND,\r\n  KEY_SPACE_COMMAND,\r\n} from 'lexical'\r\nimport type { LexicalEditor } from 'lexical'\r\n\r\nimport {\r\n  $isListItemNode,\r\n  $isListNode,\r\n  INSERT_CHECK_LIST_COMMAND,\r\n  insertList,\r\n} from '@lexical/list'\r\nimport { $findMatchingParent, mergeRegister } from '@lexical/utils'\r\nimport { registerClickAndPointerListeners  } from '../composables'\r\nimport { registerEditorPlugin } from \"../composables\"\r\n\r\nfunction listenPointerDown() {\r\n  return registerClickAndPointerListeners(() => {\r\n    // @ts-expect-error: speculation ambiguous\r\n    document.addEventListener('click', handleClick)\r\n    document.addEventListener('pointerdown', handlePointerDown)\r\n  }, () => {\r\n    // @ts-expect-error: speculation ambiguous\r\n    document.removeEventListener('click', handleClick)\r\n    document.removeEventListener('pointerdown', handlePointerDown)\r\n  })\r\n}\r\n\r\nfunction handleCheckItemEvent(event: PointerEvent, callback: () => void) {\r\n  const target = event.target\r\n  if (!(target instanceof HTMLElement))\r\n    return\r\n\r\n  // Ignore clicks on LI that have nested lists\r\n  // @ts-expect-error: internal field\r\n  const firstChild: HTMLElement | null = target.firstChild\r\n  if (\r\n    firstChild != null\r\n    && (firstChild.tagName === 'UL' || firstChild.tagName === 'OL')\r\n  ) {\r\n    return\r\n  }\r\n\r\n  const parentNode = target.parentNode\r\n  // @ts-expect-error: Internal field\r\n  if (!parentNode || parentNode.__lexicalListType !== 'check')\r\n    return\r\n\r\n  const pageX = event.pageX\r\n  const rect = target.getBoundingClientRect()\r\n\r\n  if (\r\n    target.dir === 'rtl'\r\n      ? pageX < rect.right && pageX > rect.right - 20\r\n      : pageX > rect.left && pageX < rect.left + 20\r\n  ) {\r\n    callback()\r\n  }\r\n}\r\n\r\nfunction handleClick(event: PointerEvent) {\r\n  handleCheckItemEvent(event as PointerEvent, () => {\r\n    const domNode = event.target as HTMLElement\r\n    const editor = findEditor(domNode)\r\n\r\n    if (editor !== null) {\r\n      editor.update(() => {\r\n        const node = $getNearestNodeFromDOMNode(domNode)\r\n        if ($isListItemNode(node!)) {\r\n          domNode.focus()\r\n          node.toggleChecked()\r\n        }\r\n      })\r\n    }\r\n  })\r\n}\r\n\r\nfunction handlePointerDown(event: PointerEvent) {\r\n  handleCheckItemEvent(event, () => {\r\n    // Prevents caret moving when clicking on check mark\r\n    event.preventDefault()\r\n  })\r\n}\r\n\r\nfunction findEditor(target: Node) {\r\n  let node: ParentNode | Node | null = target\r\n\r\n  while (node) {\r\n    // @ts-expect-error internal field\r\n    if (node.__lexicalEditor)\r\n    // @ts-expect-error internal field\r\n      return (node.__lexicalEditor)\r\n\r\n    node = node.parentNode\r\n  }\r\n  return null\r\n}\r\n\r\nfunction getActiveCheckListItem(): HTMLElement | Element | null {\r\n  const { activeElement } = document\r\n  return activeElement !== null\r\n    && activeElement.tagName === 'LI'\r\n    && activeElement.parentNode !== null\r\n    // @ts-expect-error: internal field missing\r\n    && activeElement.parentNode.__lexicalListType === 'check'\r\n    ? activeElement\r\n    : null\r\n}\r\n\r\nfunction findCheckListItemSibling(\r\n  node: ListItemNode,\r\n  backward: boolean,\r\n): ListItemNode | null {\r\n  let sibling = backward ? node.getPreviousSibling() : node.getNextSibling()\r\n  let parent = node\r\n  // Going up in a tree to get non-null sibling\r\n  while (sibling == null && $isListItemNode(parent)) {\r\n    // Get li -> parent ul/ol -> parent li\r\n    parent = parent.getParentOrThrow().getParent() as ListItemNode\r\n    if (parent !== null) {\r\n      sibling = backward\r\n        ? parent.getPreviousSibling()\r\n        : parent.getNextSibling()\r\n    }\r\n  }\r\n\r\n  // Going down in a tree to get first non-nested list item\r\n  while ($isListItemNode(sibling!)) {\r\n    const firstChild = backward\r\n      ? sibling.getLastChild()\r\n      : sibling.getFirstChild()\r\n    if (!$isListNode(firstChild!))\r\n      return sibling\r\n\r\n    sibling = backward ? firstChild.getLastChild() : firstChild.getFirstChild()\r\n  }\r\n\r\n  return null\r\n}\r\n\r\nfunction handleArrownUpOrDown(  \r\n  event: KeyboardEvent,\r\n  editor: LexicalEditor,\r\n  backward: boolean,\r\n) {\r\n  const activeItem = getActiveCheckListItem()\r\n\r\n  if (activeItem != null) {\r\n    editor.update(() => {\r\n      const listItem = $getNearestNodeFromDOMNode(activeItem)\r\n      if (!$isListItemNode(listItem!))\r\n        return\r\n\r\n      const nextListItem = findCheckListItemSibling(listItem, backward)\r\n      if (nextListItem != null) {\r\n        nextListItem.selectStart()\r\n        const dom = editor.getElementByKey(nextListItem.__key)\r\n        if (dom != null) {\r\n          event.preventDefault()\r\n          setTimeout(() => {\r\n            dom.focus()\r\n          }, 0)\r\n        }\r\n      }\r\n    })\r\n  }\r\n\r\n  return false\r\n}\r\n\r\n// 注册插件\r\nregisterEditorPlugin({\r\n  nodes:[\r\n  \r\n  ],\r\n  tools:[\r\n    \r\n  ],\r\n  templates:[],\r\n  useMounted(editor){\r\n    \r\n    // 注册指令\r\n    return mergeRegister(\r\n      editor.registerCommand(INSERT_CHECK_LIST_COMMAND,\r\n        () => {\r\n          insertList(editor, 'check')\r\n          return true\r\n        },\r\n        COMMAND_PRIORITY_LOW,\r\n      ),\r\n      editor.registerCommand(\r\n        KEY_ARROW_DOWN_COMMAND,\r\n        (event) => {\r\n          return handleArrownUpOrDown(event, editor, false)\r\n        },\r\n        COMMAND_PRIORITY_LOW,\r\n      ),\r\n      editor.registerCommand(\r\n        KEY_ARROW_UP_COMMAND,\r\n        (event) => {\r\n          return handleArrownUpOrDown(event, editor, true)\r\n        },\r\n        COMMAND_PRIORITY_LOW,\r\n      ),\r\n      editor.registerCommand(\r\n        KEY_ESCAPE_COMMAND,\r\n        (_event) => {\r\n          const activeItem = getActiveCheckListItem()\r\n          if (activeItem != null) {\r\n            const rootElement = editor.getRootElement()\r\n            if (rootElement != null)\r\n              rootElement.focus()\r\n  \r\n            return true\r\n          }\r\n          return false\r\n        },\r\n        COMMAND_PRIORITY_LOW,\r\n      ),\r\n      editor.registerCommand(KEY_SPACE_COMMAND,(event) => {\r\n          const activeItem = getActiveCheckListItem()\r\n          if (activeItem != null) {\r\n            editor.update(() => {\r\n              const listItemNode = $getNearestNodeFromDOMNode(activeItem)\r\n              if ($isListItemNode(listItemNode!)) {\r\n                event.preventDefault()\r\n                listItemNode.toggleChecked()\r\n              }\r\n            })\r\n            return true\r\n          }\r\n          return false\r\n        },\r\n        COMMAND_PRIORITY_LOW,\r\n      ),\r\n      editor.registerCommand(KEY_ARROW_LEFT_COMMAND,(event) => {\r\n          return editor.getEditorState().read(() => {\r\n            const selection = $getSelection()\r\n            if ($isRangeSelection(selection) && selection.isCollapsed()) {\r\n              const { anchor } = selection\r\n              const isElement = anchor.type === 'element'\r\n              if (isElement || anchor.offset === 0) {\r\n                const anchorNode = anchor.getNode()\r\n                const elementNode = $findMatchingParent(\r\n                  anchorNode,\r\n                  node => $isElementNode(node) && !node.isInline(),\r\n                )\r\n  \r\n                if ($isListItemNode(elementNode)) {\r\n                  const parent = elementNode.getParent()\r\n                  if (\r\n                    $isListNode(parent)\r\n                    && parent.getListType() === 'check'\r\n                    && (isElement\r\n                    || elementNode.getFirstDescendant() === anchorNode)\r\n                  ) {\r\n                    const domNode = editor.getElementByKey(elementNode.__key)\r\n  \r\n                    if (domNode != null && document.activeElement !== domNode) {\r\n                      domNode.focus()\r\n                      event.preventDefault()\r\n                      return true\r\n                    }\r\n                  }\r\n                }\r\n              }\r\n            }\r\n  \r\n            return false\r\n          })\r\n        },\r\n        COMMAND_PRIORITY_LOW,\r\n      ),\r\n      listenPointerDown(),\r\n    );\r\n  }\r\n})\r\n"],"names":[],"mappings":"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"}

package/dist/esm/components/basic/lexical-editor/plugins/ElementBlockSelectionPlugin.vue.js

@@ -0,0 +1,8 @@
+import _sfc_main from "./ElementBlockSelectionPlugin.vue3.js";
+/* empty css                                 */
+import _export_sfc from "../../../../_virtual/_plugin-vue_export-helper.js";
+const ElementBlockSelectionPlugin = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-6efcbbca"]]);
+export {
+  ElementBlockSelectionPlugin as default
+};
+//# sourceMappingURL=ElementBlockSelectionPlugin.vue.js.map

package/dist/esm/components/basic/lexical-editor/plugins/ElementBlockSelectionPlugin.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ElementBlockSelectionPlugin.vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/esm/components/basic/lexical-editor/plugins/ElementBlockSelectionPlugin.vue3.js

@@ -0,0 +1,387 @@
+import { defineComponent, ref, shallowRef, reactive, resolveComponent, openBlock, createElementBlock, Fragment, mergeProps, createVNode, withCtx, createBlock, createTextVNode, toDisplayString, createCommentVNode, renderList, unref, normalizeStyle, nextTick } from "vue";
+import { $getNodeByKey, $getSelection, $isNodeSelection, $isRangeSelection, CLICK_COMMAND, SELECTION_CHANGE_COMMAND, $isRootNode, $isElementNode, $isParagraphNode, $isTextNode } from "lexical";
+import { mergeRegister } from "@lexical/utils";
+import "@lexical/overflow";
+import "@lexical/text";
+import { useMounted } from "../composables/utils.js";
+import "@lexical/selection";
+import "@lexical/link";
+import "@lexical/rich-text";
+import { useLexicalEditorContext } from "../composables/lexicalEditor.js";
+import "../utils/html.js";
+import "@maketribe/dm";
+import "element-plus";
+import "../utils/image.js";
+import "@element-plus/icons-vue";
+import { REMOVE_ELEMENTBLOCK_COMMAND, setElementBlockSelection, UPDATE_ELEMENTBLOCK_TOOLBAR_POS_COMMAND, SELECTED_ELEMENTBLOCK_COMMAND } from "../composables/useElementBlockSelection.js";
+import { deepCloneNode } from "../nodes/index.js";
+import { $isModuleDecoratorNode } from "../nodes/ModuleDecoratorNode.js";
+import { $isHtmlElementDecoratorNode } from "../nodes/HtmlElementDecoratorNode.js";
+import { $isModuleDecoratorWarpNode } from "../nodes/ModuleDecoratorWarpNode.js";
+const lowPriority = 1;
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "ElementBlockSelectionPlugin",
+  setup(__props) {
+    const { editor, stageId, findLexicalEditorModule, shortcutToolsList } = useLexicalEditorContext();
+    const selectionMarkPos = ref({ left: "px", top: "0px", width: "0", height: "0" });
+    const toolbarRef = ref(null);
+    const selectPayload = shallowRef(null);
+    const toolsPos = reactive({ left: "px", top: "0px" });
+    const showTools = ref(false);
+    const showMask = ref(false);
+    ref();
+    const updateToolsPos = () => {
+      nextTick(() => {
+        var _a;
+        if (selectPayload.value != null) {
+          const stageIframe = document.body.querySelector("#" + stageId);
+          const editBodyRect = (_a = editor.getRootElement()) == null ? void 0 : _a.getBoundingClientRect();
+          const selectElement = editor.getElementByKey(selectPayload.value.nodeKey);
+          const selectRect = selectElement.getBoundingClientRect();
+          const selectElComputedStyle = window.getComputedStyle(selectElement);
+          const selectElMarginTop = parseInt(selectElComputedStyle.marginTop);
+          const selectElMarginLeft = parseInt(selectElComputedStyle.marginLeft);
+          const selectElMarginBottom = parseInt(selectElComputedStyle.marginBottom);
+          const selectElMarginRight = parseInt(selectElComputedStyle.marginRight);
+          let baseY = ((stageIframe == null ? void 0 : stageIframe.offsetTop) ?? 0) - ((editBodyRect == null ? void 0 : editBodyRect.y) ?? 0), baseX = ((stageIframe == null ? void 0 : stageIframe.offsetLeft) ?? 0) - ((editBodyRect == null ? void 0 : editBodyRect.x) ?? 0);
+          if (toolbarRef.value != null) {
+            const toolsRect = toolbarRef.value.getBoundingClientRect();
+            toolsPos.top = Math.max(selectRect.y - toolsRect.height - 5 + baseY, 5 + baseY) + "px";
+            toolsPos.left = Math.max(toolsRect.width / -2 + selectRect.x + selectRect.width / 2, 0) + "px";
+          }
+          selectionMarkPos.value = {
+            top: `${selectRect.y + baseY - selectElMarginTop}px`,
+            left: `${selectRect.x + baseX - selectElMarginLeft}px`,
+            width: `${selectRect.width + selectElMarginLeft + selectElMarginRight}px`,
+            height: `${selectRect.height + selectElMarginTop + selectElMarginBottom}px`
+          };
+        }
+      });
+      return false;
+    };
+    const nodeTitle = ref("");
+    const canSelectedNextNode = ref(false);
+    const selectedNextNode = () => {
+      const node = editor.getEditorState().read(() => {
+        return $getNodeByKey(selectPayload.value.nodeKey);
+      });
+      if (node && node.__next) {
+        setElementBlockSelection(editor, node.__next);
+      }
+    };
+    const canSelectedPrevNode = ref(false);
+    const selectedPrevNode = () => {
+      const node = editor.getEditorState().read(() => {
+        return $getNodeByKey(selectPayload.value.nodeKey);
+      });
+      if (node && node.__prev) {
+        setElementBlockSelection(editor, node.__prev);
+      }
+    };
+    const copyInsert = (action) => {
+      editor.update(() => {
+        const selection = $getSelection();
+        const node = $isNodeSelection(selection) ? selection == null ? void 0 : selection.getNodes()[0] : $isRangeSelection(selection) ? selection.anchor.getNode() : null;
+        if (node) {
+          const oldNode = deepCloneNode(node);
+          if (action == -1) {
+            node.insertBefore(oldNode);
+          } else {
+            node.insertAfter(oldNode);
+          }
+        }
+      });
+    };
+    const execAction = function(item) {
+      editor.update(() => {
+        item.action($getNodeByKey(selectPayload.value.nodeKey), editor.getElementByKey(selectPayload.value.nodeKey));
+      });
+    };
+    useMounted(() => {
+      return mergeRegister(
+        editor.registerCommand(UPDATE_ELEMENTBLOCK_TOOLBAR_POS_COMMAND, () => updateToolsPos(), lowPriority),
+        editor.registerUpdateListener(() => setTimeout(() => updateToolsPos(), 50)),
+        // 点击选中
+        editor.registerCommand(CLICK_COMMAND, (event) => {
+          const el = event.target;
+          const nodeKey = el == null ? void 0 : el.getAttribute("node-key");
+          if (nodeKey != null) {
+            event.preventDefault();
+            setElementBlockSelection(editor, nodeKey);
+            return true;
+          }
+          return false;
+        }, lowPriority),
+        // 选中元素快
+        editor.registerCommand(SELECTED_ELEMENTBLOCK_COMMAND, (nodeKey) => {
+          if (nodeKey != null) {
+            const toolsbarList = [];
+            const node = $getNodeByKey(nodeKey);
+            if (node) {
+              shortcutToolsList.forEach((item) => {
+                if (item.exist(node)) {
+                  (typeof item.tools == "function" ? item.tools(nodeKey) : item.tools).forEach((toolsbar) => {
+                    const index = toolsbarList.findIndex((b) => b.key && toolsbar.key && b.key == toolsbar.key);
+                    if (index >= 0) {
+                      toolsbarList.splice(index, 1, toolsbar);
+                    } else {
+                      toolsbarList.push(toolsbar);
+                    }
+                  });
+                }
+              });
+            }
+            selectPayload.value = { nodeKey, toolsbars: toolsbarList };
+          } else {
+            selectPayload.value = null;
+          }
+          return updateToolsPos();
+        }, lowPriority),
+        // 删除模块
+        editor.registerCommand(REMOVE_ELEMENTBLOCK_COMMAND, () => {
+          const selection = $getSelection();
+          const node = $isNodeSelection(selection) ? selection == null ? void 0 : selection.getNodes()[0] : $isRangeSelection(selection) ? selection.anchor.getNode() : null;
+          if (node) {
+            node.remove();
+            editor.dispatchCommand(SELECTED_ELEMENTBLOCK_COMMAND, null);
+            return true;
+          }
+          return false;
+        }, lowPriority),
+        // 选中的话
+        editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
+          const selection = $getSelection();
+          const node = $isNodeSelection(selection) ? selection == null ? void 0 : selection.getNodes()[0] : $isRangeSelection(selection) ? selection.anchor.getNode() : null;
+          if (node) {
+            nodeTitle.value = node.getTitle ? node.getTitle() : "";
+            if ($isModuleDecoratorNode(node)) {
+              const module = findLexicalEditorModule(node.__moduleName);
+              if (module) {
+                nodeTitle.value = module.title;
+              }
+            }
+            showTools.value = !$isRootNode(node);
+            showMask.value = $isHtmlElementDecoratorNode(node);
+            if (node == null ? void 0 : node.__next) {
+              const nextNode = $getNodeByKey(node.__next);
+              canSelectedNextNode.value = (node == null ? void 0 : node.__next) ? $isElementNode(nextNode) && !$isParagraphNode(nextNode) : false;
+            } else {
+              canSelectedNextNode.value = false;
+            }
+            if (node == null ? void 0 : node.__prev) {
+              const prevNode = $getNodeByKey(node.__prev);
+              canSelectedPrevNode.value = (node == null ? void 0 : node.__prev) ? $isElementNode(prevNode) && !$isParagraphNode(prevNode) : false;
+            } else {
+              canSelectedPrevNode.value = false;
+            }
+            const nodeKey = node.getKey();
+            const el = editor.getElementByKey(nodeKey);
+            if (nodeKey && el && !$isRootNode(node) && !$isTextNode(node)) {
+              if ($isElementNode(node) && !$isModuleDecoratorWarpNode(node)) {
+                if (!node.isEmpty()) {
+                  editor.dispatchCommand(SELECTED_ELEMENTBLOCK_COMMAND, nodeKey);
+                  return true;
+                }
+              } else {
+                editor.dispatchCommand(SELECTED_ELEMENTBLOCK_COMMAND, nodeKey);
+                return true;
+              }
+            }
+          }
+          nodeTitle.value = "";
+          showTools.value = false;
+          canSelectedNextNode.value = false;
+          canSelectedPrevNode.value = false;
+          editor.dispatchCommand(SELECTED_ELEMENTBLOCK_COMMAND, null);
+          return false;
+        }, lowPriority)
+      );
+    });
+    return (_ctx, _cache) => {
+      const _component_el_button = resolveComponent("el-button");
+      const _component_MKSvgIcon = resolveComponent("MKSvgIcon");
+      const _component_el_tooltip = resolveComponent("el-tooltip");
+      const _component_el_button_group = resolveComponent("el-button-group");
+      const _component_el_popover = resolveComponent("el-popover");
+      return openBlock(), createElementBlock(Fragment, null, [
+        selectPayload.value != null && showTools.value ? (openBlock(), createElementBlock("div", mergeProps({
+          key: 0,
+          ref_key: "toolbarRef",
+          ref: toolbarRef
+        }, _ctx.$attrs, {
+          class: "mk-doc-editor-shortcut-tools-warp",
+          style: toolsPos
+        }), [
+          createVNode(_component_el_button_group, null, {
+            default: withCtx(() => [
+              nodeTitle.value ? (openBlock(), createBlock(_component_el_button, {
+                key: 0,
+                text: "",
+                bg: "",
+                style: { "font-size": "14px" }
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(toDisplayString(nodeTitle.value), 1)
+                ]),
+                _: 1
+              })) : createCommentVNode("", true),
+              (openBlock(true), createElementBlock(Fragment, null, renderList(selectPayload.value.toolsbars, (item) => {
+                return openBlock(), createBlock(_component_el_tooltip, {
+                  effect: "dark",
+                  content: item.title,
+                  placement: "top"
+                }, {
+                  default: withCtx(() => [
+                    createVNode(_component_el_button, {
+                      text: "",
+                      onClick: ($event) => execAction(item)
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(_component_MKSvgIcon, {
+                          iconClass: item.icon
+                        }, null, 8, ["iconClass"])
+                      ]),
+                      _: 2
+                    }, 1032, ["onClick"])
+                  ]),
+                  _: 2
+                }, 1032, ["content"]);
+              }), 256)),
+              createVNode(_component_el_tooltip, {
+                effect: "dark",
+                content: "删除",
+                placement: "top"
+              }, {
+                default: withCtx(() => [
+                  createVNode(_component_el_button, {
+                    text: "",
+                    type: "danger",
+                    onClick: _cache[0] || (_cache[0] = ($event) => unref(editor).dispatchCommand(unref(REMOVE_ELEMENTBLOCK_COMMAND), null))
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(_component_MKSvgIcon, { iconClass: `Delete` })
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }),
+              createVNode(_component_el_popover, { "popper-style": "padding: 10px;width:auto;min-width:50px" }, {
+                reference: withCtx(() => [
+                  createVNode(_component_el_button, { text: "" }, {
+                    default: withCtx(() => [
+                      createVNode(_component_MKSvgIcon, { iconClass: "MoreFilled" })
+                    ]),
+                    _: 1
+                  })
+                ]),
+                default: withCtx(() => [
+                  createVNode(_component_el_button_group, { style: { "display": "flex" } }, {
+                    default: withCtx(() => [
+                      canSelectedPrevNode.value ? (openBlock(), createBlock(_component_el_tooltip, {
+                        key: 0,
+                        effect: "dark",
+                        content: "上一个",
+                        placement: "top"
+                      }, {
+                        default: withCtx(() => [
+                          createVNode(_component_el_button, {
+                            text: "",
+                            onClick: _cache[1] || (_cache[1] = ($event) => selectedPrevNode())
+                          }, {
+                            default: withCtx(() => [
+                              createVNode(_component_MKSvgIcon, { iconClass: `CaretLeft` })
+                            ]),
+                            _: 1
+                          })
+                        ]),
+                        _: 1
+                      })) : createCommentVNode("", true),
+                      createVNode(_component_el_tooltip, {
+                        effect: "dark",
+                        content: "拷贝自己插入到当前快之前",
+                        placement: "top"
+                      }, {
+                        default: withCtx(() => [
+                          createVNode(_component_el_button, {
+                            text: "",
+                            onClick: _cache[2] || (_cache[2] = ($event) => copyInsert(-1))
+                          }, {
+                            default: withCtx(() => [
+                              createVNode(_component_MKSvgIcon, { iconClass: `Fold` })
+                            ]),
+                            _: 1
+                          })
+                        ]),
+                        _: 1
+                      }),
+                      createVNode(_component_el_tooltip, {
+                        effect: "dark",
+                        content: "拷贝自己插入到当前快之后",
+                        placement: "top"
+                      }, {
+                        default: withCtx(() => [
+                          createVNode(_component_el_button, {
+                            text: "",
+                            onClick: _cache[3] || (_cache[3] = ($event) => copyInsert(1))
+                          }, {
+                            default: withCtx(() => [
+                              createVNode(_component_MKSvgIcon, { iconClass: `Expand` })
+                            ]),
+                            _: 1
+                          })
+                        ]),
+                        _: 1
+                      }),
+                      canSelectedNextNode.value ? (openBlock(), createBlock(_component_el_tooltip, {
+                        key: 1,
+                        effect: "dark",
+                        content: "下一个",
+                        placement: "top"
+                      }, {
+                        default: withCtx(() => [
+                          createVNode(_component_el_button, {
+                            text: "",
+                            onClick: _cache[4] || (_cache[4] = ($event) => selectedNextNode())
+                          }, {
+                            default: withCtx(() => [
+                              createVNode(_component_MKSvgIcon, { iconClass: `CaretRight` })
+                            ]),
+                            _: 1
+                          })
+                        ]),
+                        _: 1
+                      })) : createCommentVNode("", true)
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })
+        ], 16)) : createCommentVNode("", true),
+        selectPayload.value != null ? (openBlock(), createElementBlock("div", {
+          key: 1,
+          style: normalizeStyle(
+            {
+              position: "absolute",
+              boxSizing: "border-box",
+              pointerEvents: "none",
+              zIndex: 0,
+              outline: "2px solid rgb(131 176 248)",
+              background: showMask.value ? "#03a9f417" : "transparent",
+              boxShadow: "0 0 10px 2px rgb(131 176 248)",
+              ...selectionMarkPos.value
+            }
+          )
+        }, null, 4)) : createCommentVNode("", true)
+      ], 64);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=ElementBlockSelectionPlugin.vue3.js.map