@maketribe/ms-app 3.2.41 → 3.2.43

package/dist/esm/components/basic/lexical-editor/composables/useTableOfContents.js

@@ -0,0 +1,176 @@
+import { $isHeadingNode, HeadingNode } from "@lexical/rich-text";
+import { mergeRegister, $getNextRightPreorderNode } from "@lexical/utils";
+import { $getRoot, $isElementNode, $getNodeByKey, TextNode } from "lexical";
+import { ref } from "vue";
+import { useMounted } from "./utils.js";
+function toEntry(heading) {
+  return [heading.getKey(), heading.getTextContent(), heading.getTag()];
+}
+function $insertHeadingIntoTableOfContents(prevHeading, newHeading, currentTableOfContents) {
+  if (newHeading === null)
+    return currentTableOfContents;
+  const newEntry = toEntry(newHeading);
+  let newTableOfContents = [];
+  if (prevHeading === null) {
+    if (currentTableOfContents.length > 0 && currentTableOfContents[0][0] === newHeading.__key) {
+      return currentTableOfContents;
+    }
+    newTableOfContents = [newEntry, ...currentTableOfContents];
+  } else {
+    for (let i = 0; i < currentTableOfContents.length; i++) {
+      const key = currentTableOfContents[i][0];
+      newTableOfContents.push(currentTableOfContents[i]);
+      if (key === prevHeading.getKey() && key !== newHeading.getKey()) {
+        if (i + 1 < currentTableOfContents.length && currentTableOfContents[i + 1][0] === newHeading.__key) {
+          return currentTableOfContents;
+        }
+        newTableOfContents.push(newEntry);
+      }
+    }
+  }
+  return newTableOfContents;
+}
+function $deleteHeadingFromTableOfContents(key, currentTableOfContents) {
+  const newTableOfContents = [];
+  for (const heading of currentTableOfContents) {
+    if (heading[0] !== key)
+      newTableOfContents.push(heading);
+  }
+  return newTableOfContents;
+}
+function $updateHeadingInTableOfContents(heading, currentTableOfContents) {
+  const newTableOfContents = [];
+  for (const oldHeading of currentTableOfContents) {
+    if (oldHeading[0] === heading.getKey())
+      newTableOfContents.push(toEntry(heading));
+    else
+      newTableOfContents.push(oldHeading);
+  }
+  return newTableOfContents;
+}
+function $updateHeadingPosition(prevHeading, heading, currentTableOfContents) {
+  const newTableOfContents = [];
+  const newEntry = toEntry(heading);
+  if (!prevHeading)
+    newTableOfContents.push(newEntry);
+  for (const oldHeading of currentTableOfContents) {
+    if (oldHeading[0] === heading.getKey())
+      continue;
+    newTableOfContents.push(oldHeading);
+    if (prevHeading && oldHeading[0] === prevHeading.getKey())
+      newTableOfContents.push(newEntry);
+  }
+  return newTableOfContents;
+}
+function $getPreviousHeading(node) {
+  let prevHeading = $getNextRightPreorderNode(node);
+  while (prevHeading !== null && !$isHeadingNode(prevHeading))
+    prevHeading = $getNextRightPreorderNode(prevHeading);
+  return prevHeading;
+}
+function useTableOfContents(editor) {
+  const tableOfContents = ref([]);
+  editor.getEditorState().read(() => {
+    const root = $getRoot();
+    const rootChildren = root.getChildren();
+    for (const child of rootChildren) {
+      if ($isHeadingNode(child)) {
+        tableOfContents.value.push([
+          child.getKey(),
+          child.getTextContent(),
+          child.getTag()
+        ]);
+      }
+    }
+  });
+  const removeRootUpdateListener = editor.registerUpdateListener(
+    ({ editorState, dirtyElements }) => {
+      editorState.read(() => {
+        const updateChildHeadings = (node) => {
+          for (const child of node.getChildren()) {
+            if ($isHeadingNode(child)) {
+              const prevHeading = $getPreviousHeading(child);
+              tableOfContents.value = $updateHeadingPosition(
+                prevHeading,
+                child,
+                tableOfContents.value
+              );
+            } else if ($isElementNode(child)) {
+              updateChildHeadings(child);
+            }
+          }
+        };
+        $getRoot().getChildren().forEach((node) => {
+          if ($isElementNode(node) && dirtyElements.get(node.__key))
+            updateChildHeadings(node);
+        });
+      });
+    }
+  );
+  const removeHeaderMutationListener = editor.registerMutationListener(
+    HeadingNode,
+    (mutatedNodes) => {
+      editor.getEditorState().read(() => {
+        for (const [nodeKey, mutation] of mutatedNodes) {
+          if (mutation === "created") {
+            const newHeading = $getNodeByKey(nodeKey);
+            if (newHeading !== null) {
+              const prevHeading = $getPreviousHeading(newHeading);
+              tableOfContents.value = $insertHeadingIntoTableOfContents(
+                prevHeading,
+                newHeading,
+                tableOfContents.value
+              );
+            }
+          } else if (mutation === "destroyed") {
+            tableOfContents.value = $deleteHeadingFromTableOfContents(
+              nodeKey,
+              tableOfContents.value
+            );
+          } else if (mutation === "updated") {
+            const newHeading = $getNodeByKey(nodeKey);
+            if (newHeading !== null) {
+              const prevHeading = $getPreviousHeading(newHeading);
+              tableOfContents.value = $updateHeadingPosition(
+                prevHeading,
+                newHeading,
+                tableOfContents.value
+              );
+            }
+          }
+        }
+      });
+    }
+  );
+  const removeTextNodeMutationListener = editor.registerMutationListener(
+    TextNode,
+    (mutatedNodes) => {
+      editor.getEditorState().read(() => {
+        for (const [nodeKey, mutation] of mutatedNodes) {
+          if (mutation === "updated") {
+            const currNode = $getNodeByKey(nodeKey);
+            if (currNode !== null) {
+              const parentNode = currNode.getParentOrThrow();
+              if ($isHeadingNode(parentNode)) {
+                tableOfContents.value = $updateHeadingInTableOfContents(
+                  parentNode,
+                  tableOfContents.value
+                );
+              }
+            }
+          }
+        }
+      });
+    }
+  );
+  useMounted(() => mergeRegister(
+    removeRootUpdateListener,
+    removeHeaderMutationListener,
+    removeTextNodeMutationListener
+  ));
+  return tableOfContents;
+}
+export {
+  useTableOfContents
+};
+//# sourceMappingURL=useTableOfContents.js.map

package/dist/esm/components/basic/lexical-editor/composables/useTableOfContents.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableOfContents.js","sources":["../../../../../../src/components/basic/lexical-editor/composables/useTableOfContents.ts"],"sourcesContent":["import { $isHeadingNode, HeadingNode, type HeadingTagType } from '@lexical/rich-text'\r\nimport { $getNextRightPreorderNode, mergeRegister } from '@lexical/utils'\r\nimport {\r\n  $getNodeByKey,\r\n  $getRoot,\r\n  $isElementNode,\r\n  type ElementNode,\r\n  type LexicalEditor,\r\n  type NodeKey,\r\n  type NodeMutation,\r\n  TextNode,\r\n} from 'lexical'\r\nimport { ref } from 'vue'\r\nimport { useMounted } from './utils'\r\n\r\nexport type TableOfContentsEntry = [\r\n  key: NodeKey,\r\n  text: string,\r\n  tag: HeadingTagType,\r\n]\r\n\r\nfunction toEntry(heading: HeadingNode): TableOfContentsEntry {\r\n  return [heading.getKey(), heading.getTextContent(), heading.getTag()]\r\n}\r\n\r\nfunction $insertHeadingIntoTableOfContents(\r\n  prevHeading: HeadingNode | null,\r\n  newHeading: HeadingNode | null,\r\n  currentTableOfContents: Array<TableOfContentsEntry>,\r\n): Array<TableOfContentsEntry> {\r\n  if (newHeading === null)\r\n    return currentTableOfContents\r\n\r\n  const newEntry: TableOfContentsEntry = toEntry(newHeading)\r\n  let newTableOfContents: Array<TableOfContentsEntry> = []\r\n  if (prevHeading === null) {\r\n    // check if key already exists\r\n    if (\r\n      currentTableOfContents.length > 0\r\n      && currentTableOfContents[0][0] === newHeading.__key\r\n    ) {\r\n      return currentTableOfContents\r\n    }\r\n\r\n    newTableOfContents = [newEntry, ...currentTableOfContents]\r\n  }\r\n  else {\r\n    for (let i = 0; i < currentTableOfContents.length; i++) {\r\n      const key = currentTableOfContents[i][0]\r\n      newTableOfContents.push(currentTableOfContents[i])\r\n      if (key === prevHeading.getKey() && key !== newHeading.getKey()) {\r\n        // check if key already exists\r\n        if (\r\n          i + 1 < currentTableOfContents.length\r\n          && currentTableOfContents[i + 1][0] === newHeading.__key\r\n        ) {\r\n          return currentTableOfContents\r\n        }\r\n\r\n        newTableOfContents.push(newEntry)\r\n      }\r\n    }\r\n  }\r\n  return newTableOfContents\r\n}\r\n\r\nfunction $deleteHeadingFromTableOfContents(\r\n  key: NodeKey,\r\n  currentTableOfContents: Array<TableOfContentsEntry>,\r\n): Array<TableOfContentsEntry> {\r\n  const newTableOfContents = []\r\n  for (const heading of currentTableOfContents) {\r\n    if (heading[0] !== key)\r\n      newTableOfContents.push(heading)\r\n  }\r\n  return newTableOfContents\r\n}\r\n\r\nfunction $updateHeadingInTableOfContents(\r\n  heading: HeadingNode,\r\n  currentTableOfContents: Array<TableOfContentsEntry>,\r\n): Array<TableOfContentsEntry> {\r\n  const newTableOfContents: Array<TableOfContentsEntry> = []\r\n  for (const oldHeading of currentTableOfContents) {\r\n    if (oldHeading[0] === heading.getKey())\r\n      newTableOfContents.push(toEntry(heading))\r\n\r\n    else\r\n      newTableOfContents.push(oldHeading)\r\n  }\r\n  return newTableOfContents\r\n}\r\n\r\n/**\r\n * Returns the updated table of contents, placing the given `heading` before the given `prevHeading`. If `prevHeading`\r\n * is undefined, `heading` is placed at the start of table of contents\r\n */\r\nfunction $updateHeadingPosition(\r\n  prevHeading: HeadingNode | null,\r\n  heading: HeadingNode,\r\n  currentTableOfContents: Array<TableOfContentsEntry>,\r\n): Array<TableOfContentsEntry> {\r\n  const newTableOfContents: Array<TableOfContentsEntry> = []\r\n  const newEntry: TableOfContentsEntry = toEntry(heading)\r\n\r\n  if (!prevHeading)\r\n    newTableOfContents.push(newEntry)\r\n\r\n  for (const oldHeading of currentTableOfContents) {\r\n    if (oldHeading[0] === heading.getKey())\r\n      continue\r\n\r\n    newTableOfContents.push(oldHeading)\r\n    if (prevHeading && oldHeading[0] === prevHeading.getKey())\r\n      newTableOfContents.push(newEntry)\r\n  }\r\n\r\n  return newTableOfContents\r\n}\r\n\r\nfunction $getPreviousHeading(node: HeadingNode): HeadingNode | null {\r\n  let prevHeading = $getNextRightPreorderNode(node)\r\n  while (prevHeading !== null && !$isHeadingNode(prevHeading))\r\n    prevHeading = $getNextRightPreorderNode(prevHeading)\r\n\r\n  return prevHeading\r\n}\r\n\r\nexport function useTableOfContents(editor: LexicalEditor) {\r\n  const tableOfContents = ref<Array<TableOfContentsEntry>>([])\r\n  // Set table of contents initial state\r\n  editor.getEditorState().read(() => {\r\n    const root = $getRoot()\r\n    const rootChildren = root.getChildren()\r\n    for (const child of rootChildren) {\r\n      if ($isHeadingNode(child)) {\r\n        tableOfContents.value.push([\r\n          child.getKey(),\r\n          child.getTextContent(),\r\n          child.getTag(),\r\n        ])\r\n      }\r\n    }\r\n  })\r\n\r\n  const removeRootUpdateListener = editor.registerUpdateListener(\r\n    ({ editorState, dirtyElements }) => {\r\n      editorState.read(() => {\r\n        const updateChildHeadings = (node: ElementNode) => {\r\n          for (const child of node.getChildren()) {\r\n            if ($isHeadingNode(child)) {\r\n              const prevHeading = $getPreviousHeading(child)\r\n              tableOfContents.value = $updateHeadingPosition(\r\n                prevHeading,\r\n                child,\r\n                tableOfContents.value,\r\n              )\r\n            }\r\n            else if ($isElementNode(child)) {\r\n              updateChildHeadings(child)\r\n            }\r\n          }\r\n        }\r\n\r\n        // If a node is changes, all child heading positions need to be updated\r\n        $getRoot()\r\n          .getChildren()\r\n          .forEach((node) => {\r\n            if ($isElementNode(node) && dirtyElements.get(node.__key))\r\n              updateChildHeadings(node)\r\n          })\r\n      })\r\n    },\r\n  )\r\n\r\n  // Listen to updates to heading mutations and update state\r\n  const removeHeaderMutationListener = editor.registerMutationListener(\r\n    HeadingNode,\r\n    (mutatedNodes: Map<string, NodeMutation>) => {\r\n      editor.getEditorState().read(() => {\r\n        for (const [nodeKey, mutation] of mutatedNodes) {\r\n          if (mutation === 'created') {\r\n            const newHeading = $getNodeByKey<HeadingNode>(nodeKey)\r\n            if (newHeading !== null) {\r\n              const prevHeading = $getPreviousHeading(newHeading)\r\n              tableOfContents.value = $insertHeadingIntoTableOfContents(\r\n                prevHeading,\r\n                newHeading,\r\n                tableOfContents.value,\r\n              )\r\n            }\r\n          }\r\n          else if (mutation === 'destroyed') {\r\n            tableOfContents.value = $deleteHeadingFromTableOfContents(\r\n              nodeKey,\r\n              tableOfContents.value,\r\n            )\r\n          }\r\n          else if (mutation === 'updated') {\r\n            const newHeading = $getNodeByKey<HeadingNode>(nodeKey)\r\n            if (newHeading !== null) {\r\n              const prevHeading = $getPreviousHeading(newHeading)\r\n              tableOfContents.value = $updateHeadingPosition(\r\n                prevHeading,\r\n                newHeading,\r\n                tableOfContents.value,\r\n              )\r\n            }\r\n          }\r\n        }\r\n      })\r\n    },\r\n  )\r\n\r\n  // Listen to text node mutation updates\r\n  const removeTextNodeMutationListener = editor.registerMutationListener(\r\n    TextNode,\r\n    (mutatedNodes: Map<string, NodeMutation>) => {\r\n      editor.getEditorState().read(() => {\r\n        for (const [nodeKey, mutation] of mutatedNodes) {\r\n          if (mutation === 'updated') {\r\n            const currNode = $getNodeByKey(nodeKey)\r\n            if (currNode !== null) {\r\n              const parentNode = currNode.getParentOrThrow()\r\n              if ($isHeadingNode(parentNode)) {\r\n                tableOfContents.value = $updateHeadingInTableOfContents(\r\n                  parentNode,\r\n                  tableOfContents.value,\r\n                )\r\n              }\r\n            }\r\n          }\r\n        }\r\n      })\r\n    },\r\n  )\r\n\r\n  useMounted(() => mergeRegister(\r\n    removeRootUpdateListener,\r\n    removeHeaderMutationListener,\r\n    removeTextNodeMutationListener,\r\n  ))\r\n\r\n  return tableOfContents\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/esm/components/basic/lexical-editor/composables/utils.js

@@ -0,0 +1,24 @@
+import { watchEffect, onMounted, onUnmounted } from "vue";
+function useEffect(cb, options) {
+  watchEffect((onInvalidate) => {
+    const unregister = cb();
+    onInvalidate(() => unregister == null ? void 0 : unregister());
+  }, {
+    flush: "post",
+    ...options
+  });
+}
+function useMounted(cb) {
+  let unregister;
+  onMounted(() => {
+    unregister = cb();
+  });
+  onUnmounted(() => {
+    unregister == null ? void 0 : unregister();
+  });
+}
+export {
+  useEffect,
+  useMounted
+};
+//# sourceMappingURL=utils.js.map

package/dist/esm/components/basic/lexical-editor/composables/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../../../../src/components/basic/lexical-editor/composables/utils.ts"],"sourcesContent":["import type { WatchOptionsBase } from 'vue'\r\nimport { watchEffect,onMounted, onUnmounted } from 'vue'\r\n\r\n/**\r\n * @internal\r\n */\r\nexport function useEffect(cb: () => (() => any) | undefined, options?: WatchOptionsBase) {\r\n  watchEffect((onInvalidate) => {\r\n    const unregister = cb()\r\n\r\n    onInvalidate(() => unregister?.())\r\n  }, {\r\n    flush: 'post',\r\n    ...options,\r\n  })\r\n}\r\n\r\n\r\n/**\r\n * @internal\r\n */\r\nexport function useMounted(cb: () => undefined | (() => any)) {\r\n    \r\n  let unregister: (() => void) | undefined\r\n\r\n  onMounted(() => {\r\n    unregister = cb()\r\n  })\r\n\r\n  onUnmounted(() => {\r\n    unregister?.()\r\n  })\r\n}\r\n"],"names":[],"mappings":";AAMgB,SAAA,UAAU,IAAmC,SAA4B;AACvF,cAAY,CAAC,iBAAiB;AAC5B,UAAM,aAAa;AAEN,iBAAA,MAAM,0CAAc;AAAA,EAAA,GAChC;AAAA,IACD,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,CACJ;AACH;AAMO,SAAS,WAAW,IAAmC;AAExD,MAAA;AAEJ,YAAU,MAAM;AACd,iBAAa,GAAG;AAAA,EAAA,CACjB;AAED,cAAY,MAAM;AACH;AAAA,EAAA,CACd;AACH;"}

package/dist/esm/components/basic/lexical-editor/nodes/HtmlElementDecoratorNode.js

@@ -0,0 +1,187 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { DecoratorNode } from "lexical";
+import "../utils/html.js";
+import "@lexical/selection";
+import { getStyleObjectFromRawCSS, getCSSFromStyleObject } from "../utils/css.js";
+import "vue";
+import "@maketribe/dm";
+import "element-plus";
+import "../utils/image.js";
+import "@element-plus/icons-vue";
+import "@lexical/overflow";
+import "@lexical/text";
+import "@lexical/utils";
+import "@lexical/link";
+import "@lexical/rich-text";
+import "../composables/useElementBlockSelection.js";
+class HtmlElementDecoratorNode extends DecoratorNode {
+  /**
+   * 
+   * @param tagName 
+   * @param className 
+   * @param style 
+   * @param key 
+   */
+  constructor(tagName, className, style, key) {
+    super(key);
+    __publicField(this, "__tagName");
+    __publicField(this, "__class");
+    __publicField(this, "__style");
+    this.__tagName = tagName, this.__class = className;
+    this.__style = style || "";
+  }
+  static getType() {
+    return "html-decorator-element";
+  }
+  static clone(node) {
+    return new HtmlElementDecoratorNode(node.__tagName, node.__class, node.__style, node.__key);
+  }
+  static importJSON(serializedNode) {
+    return new HtmlElementDecoratorNode(serializedNode.tag, serializedNode.class, serializedNode.style);
+  }
+  static importDOM() {
+    return {
+      div: $covertHtmlElementDecoratorNode,
+      section: $covertHtmlElementDecoratorNode
+    };
+  }
+  /**
+   * 名称
+   * @returns 
+   */
+  getName() {
+    return this.getType();
+  }
+  /**
+   * 描述
+   * @returns 
+   */
+  getDesc() {
+    var _a;
+    return (_a = this.__class) == null ? void 0 : _a.split(/[\s]/g).join(".");
+  }
+  /**
+   * 导出JSON
+   * @returns 
+   */
+  exportJSON() {
+    return {
+      type: this.getType(),
+      tag: this.__tagName,
+      class: this.__class,
+      style: this.__style,
+      version: 1
+    };
+  }
+  /**
+   * 导出DOM
+   * @returns 
+   */
+  exportDOM(editor) {
+    const element = this.createDOM(editor._config);
+    element.removeAttribute("node-key");
+    return { element };
+  }
+  /**
+   * 创建渲染DOM
+   * @param config 
+   * @returns 
+   */
+  createDOM(config) {
+    const element = document.createElement(this.__tagName);
+    if (this.__class) {
+      element.setAttribute("class", this.__class);
+    }
+    if (this.__style) {
+      element.setAttribute("style", this.__style);
+    }
+    element.setAttribute("node-key", this.__key);
+    return element;
+  }
+  /**
+   * 隔离渲染函数
+   * @param editor 
+   * @param config 
+   * @returns 
+   */
+  decorate(editor, config) {
+    return null;
+  }
+  /**
+   * 设置样式
+   * @param style 
+   * @returns 
+   */
+  setStyle(style) {
+    const self = this.getWritable();
+    self.__style = style || "";
+    return this;
+  }
+  /**
+   * 添加样式
+   * @param plaload 
+   */
+  addStyle(plaload) {
+    const styleObj = Object.assign(getStyleObjectFromRawCSS(this.__style), plaload);
+    return this.setStyle(getCSSFromStyleObject(styleObj));
+  }
+  /**
+   * 获取样式对象
+   */
+  getStyleObj() {
+    return getStyleObjectFromRawCSS(this.__style);
+  }
+  /**
+   * 更新DOM
+   * @param _prevNode 
+   * @param _dom 
+   * @param _config 
+   * @returns 
+   */
+  updateDOM(prevNode, dom, config) {
+    dom.setAttribute("class", this.__class ?? "");
+    dom.setAttribute("style", this.__style);
+    return false;
+  }
+  /**
+   * 是否是独立的
+   * @returns 
+   */
+  isIsolated() {
+    return true;
+  }
+  /**
+   *  如果是内联元素的话会导致容器将其当字符串处理 将会有换行符存在
+   * @returns 
+   */
+  isInline() {
+    return false;
+  }
+  /**
+   * 是否允许键盘选择
+   * @returns 
+   */
+  isKeyboardSelectable() {
+    return true;
+  }
+}
+function $isHtmlElementDecoratorNode(node) {
+  return node instanceof HtmlElementDecoratorNode;
+}
+const $covertHtmlElementDecoratorNode = (domNode) => {
+  return domNode.classList.contains("clear") || domNode.classList.contains("mk-doc__decorator") ? {
+    conversion: () => {
+      return {
+        node: new HtmlElementDecoratorNode(domNode.tagName, domNode.getAttribute("class") || "", domNode.getAttribute("style") || "")
+      };
+    },
+    priority: 2
+  } : null;
+};
+export {
+  $isHtmlElementDecoratorNode,
+  HtmlElementDecoratorNode
+};
+//# sourceMappingURL=HtmlElementDecoratorNode.js.map

package/dist/esm/components/basic/lexical-editor/nodes/HtmlElementDecoratorNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HtmlElementDecoratorNode.js","sources":["../../../../../../src/components/basic/lexical-editor/nodes/HtmlElementDecoratorNode.ts"],"sourcesContent":["\r\nimport type {\r\n  DOMConversionMap,\r\n  DOMExportOutput,\r\n  EditorConfig,\r\n  LexicalNode,\r\n  NodeKey,\r\n  Spread,\r\n  SerializedLexicalNode,\r\n  LexicalEditor,\r\n  DOMConversion\r\n} from 'lexical'\r\nimport { DecoratorNode ,ElementNode } from 'lexical'\r\nimport { Component } from 'vue';\r\nimport { getCSSFromStyleObject, getStyleObjectFromRawCSS } from '../utils';\r\n\r\n/**\r\n * 节点序列化 \r\n */\r\nexport type SerializedHtmlElementDecoratorNode = Spread<{ tag: string, style?: string, class?: string }, SerializedLexicalNode>\r\n\r\n/**\r\n * 隔离的HTML节点\r\n */\r\nexport class HtmlElementDecoratorNode extends  DecoratorNode<Component|null>  {\r\n\r\n  __tagName: string\r\n  __class?: string\r\n  __style: string\r\n\r\n  static getType(): string { return \"html-decorator-element\"; }\r\n\r\n  static clone(node: HtmlElementDecoratorNode): HtmlElementDecoratorNode {\r\n    return new HtmlElementDecoratorNode(node.__tagName, node.__class, node.__style, node.__key)\r\n  }\r\n\r\n  static importJSON(serializedNode: SerializedHtmlElementDecoratorNode): HtmlElementDecoratorNode {\r\n    return new HtmlElementDecoratorNode(serializedNode.tag, serializedNode.class, serializedNode.style)\r\n  }\r\n\r\n  static importDOM(): DOMConversionMap | null {\r\n    return {\r\n      div: $covertHtmlElementDecoratorNode,\r\n      section: $covertHtmlElementDecoratorNode\r\n    }\r\n  }\r\n\r\n  /**\r\n   * \r\n   * @param tagName \r\n   * @param className \r\n   * @param style \r\n   * @param key \r\n   */\r\n  constructor(tagName: string, className?: string , style?: string, key?: NodeKey) {\r\n    super(key)\r\n    this.__tagName = tagName,\r\n    this.__class = className;\r\n    this.__style = style || \"\";\r\n  }\r\n\r\n  /**\r\n   * 名称\r\n   * @returns \r\n   */\r\n  getName(){ return this.getType(); }\r\n\r\n  /**\r\n   * 描述\r\n   * @returns \r\n   */\r\n  getDesc(){ return this.__class?.split(/[\\s]/g).join(\".\")}\r\n\r\n\r\n  /**\r\n   * 导出JSON\r\n   * @returns \r\n   */\r\n  exportJSON(): SerializedHtmlElementDecoratorNode {\r\n    return {\r\n      type: this.getType(),\r\n      tag: this.__tagName,\r\n      class: this.__class,\r\n      style: this.__style,\r\n      version: 1\r\n    }\r\n  }\r\n\r\n  /**\r\n   * 导出DOM\r\n   * @returns \r\n   */\r\n  exportDOM(editor:LexicalEditor): DOMExportOutput {\r\n  \r\n    const element = this.createDOM(editor._config)\r\n\r\n    // 删除不用的key\r\n    element.removeAttribute(\"node-key\");\r\n\r\n    return { element }\r\n  }\r\n\r\n  /**\r\n   * 创建渲染DOM\r\n   * @param config \r\n   * @returns \r\n   */\r\n  createDOM(config: EditorConfig): HTMLElement {\r\n\r\n    const element = document.createElement(this.__tagName)\r\n\r\n    if (this.__class) {\r\n      element.setAttribute(\"class\", this.__class)\r\n    }\r\n\r\n    if (this.__style) {\r\n      element.setAttribute(\"style\", this.__style)\r\n    }\r\n\r\n    element.setAttribute(\"node-key\",this.__key);\r\n   \r\n\r\n    return element;\r\n  }\r\n\r\n  /**\r\n   * 隔离渲染函数\r\n   * @param editor \r\n   * @param config \r\n   * @returns \r\n   */\r\n  decorate(editor: LexicalEditor, config: EditorConfig): Component | null {\r\n    return null;\r\n  }\r\n\r\n  /**\r\n   * 设置样式\r\n   * @param style \r\n   * @returns \r\n   */\r\n  setStyle(style:string) {\r\n    const self = this.getWritable();\r\n    self.__style = style || \"\";\r\n    return this;\r\n  }\r\n\r\n  /**\r\n   * 添加样式\r\n   * @param plaload \r\n   */\r\n  addStyle(plaload:any){\r\n    const styleObj = Object.assign(getStyleObjectFromRawCSS(this.__style),plaload);\r\n    return this.setStyle(getCSSFromStyleObject(styleObj));\r\n  }\r\n\r\n  /**\r\n   * 获取样式对象\r\n   */\r\n  getStyleObj(){\r\n    return getStyleObjectFromRawCSS(this.__style);\r\n  }\r\n  \r\n  /**\r\n   * 更新DOM\r\n   * @param _prevNode \r\n   * @param _dom \r\n   * @param _config \r\n   * @returns \r\n   */\r\n  updateDOM(prevNode: LexicalNode, dom: HTMLElement, config: EditorConfig): boolean {\r\n    dom.setAttribute(\"class\",this.__class ?? \"\")\r\n    dom.setAttribute(\"style\",this.__style)\r\n    return false;\r\n  }\r\n  \r\n  /**\r\n   * 是否是独立的\r\n   * @returns \r\n   */\r\n  isIsolated() { return true; }\r\n  \r\n  /**\r\n   *  如果是内联元素的话会导致容器将其当字符串处理 将会有换行符存在\r\n   * @returns \r\n   */\r\n  isInline() { return false; }\r\n\r\n  /**\r\n   * 是否允许键盘选择\r\n   * @returns \r\n   */\r\n  isKeyboardSelectable() { return true; }\r\n}\r\n\r\n/**\r\n * 判断是否是隔离的HTML节点\r\n * @param node \r\n * @returns \r\n */\r\nexport function $isHtmlElementDecoratorNode(\r\n  node: HtmlElementDecoratorNode | LexicalNode | null | undefined,\r\n): node is HtmlElementDecoratorNode {\r\n  return node instanceof HtmlElementDecoratorNode\r\n}\r\n\r\n/**\r\n * 转换隔离节点DOM\r\n * @param node \r\n * @returns \r\n */\r\nconst $covertHtmlElementDecoratorNode = (domNode: HTMLElement): DOMConversion<HTMLElement> | null => {\r\n  return domNode.classList.contains(\"clear\") || domNode.classList.contains(\"mk-doc__decorator\") ?  {\r\n    conversion: () => {\r\n      return {\r\n        node: new HtmlElementDecoratorNode(domNode.tagName, domNode.getAttribute(\"class\") || \"\", domNode.getAttribute(\"style\") || \"\")\r\n      };\r\n    },\r\n    priority: 2\r\n  } : null;\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/esm/components/basic/lexical-editor/nodes/HtmlElementNode.js

@@ -0,0 +1,159 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { ElementNode, $isTextNode } from "lexical";
+import "../utils/html.js";
+import "@lexical/selection";
+import { getStyleObjectFromRawCSS, getCSSFromStyleObject } from "../utils/css.js";
+import "vue";
+import "@maketribe/dm";
+import "element-plus";
+import "../utils/image.js";
+import "@element-plus/icons-vue";
+import "@lexical/overflow";
+import "@lexical/text";
+import "@lexical/utils";
+import "@lexical/link";
+import "@lexical/rich-text";
+import "../composables/useElementBlockSelection.js";
+class HtmlElementNode extends ElementNode {
+  /**
+   * 
+   * @param tagName 
+   * @param className 
+   * @param style 
+   * @param key 
+   */
+  constructor(tagName, className, style, key) {
+    super(key);
+    __publicField(this, "__tagName");
+    __publicField(this, "__class");
+    this.__tagName = tagName, this.__class = className;
+    this.__style = style || "";
+  }
+  static getType() {
+    return "html-element";
+  }
+  static clone(node) {
+    return new HtmlElementNode(node.__tagName, node.__class, node.__style, node.__key);
+  }
+  static importJSON(serializedNode) {
+    return new HtmlElementNode(serializedNode.tag, serializedNode.class, serializedNode.style);
+  }
+  static importDOM() {
+    return {
+      div: $covertHtmlElementDOM,
+      section: $covertHtmlElementDOM,
+      main: $covertHtmlElementDOM,
+      header: $covertHtmlElementDOM
+    };
+  }
+  /**
+   * 名称
+   * @returns 
+   */
+  getName() {
+    return this.__tagName;
+  }
+  /**
+   * 描述
+   * @returns 
+   */
+  getDesc() {
+    var _a;
+    return (_a = this.__class) == null ? void 0 : _a.split(/[\s]/g).join(".");
+  }
+  /**
+   * 添加样式
+   * @param plaload 
+   */
+  addStyle(plaload) {
+    const styleObj = Object.assign(getStyleObjectFromRawCSS(this.__style), plaload);
+    return this.setStyle(getCSSFromStyleObject(styleObj));
+  }
+  /**
+   * 获取样式对象
+   */
+  getStyleObj() {
+    return getStyleObjectFromRawCSS(this.__style);
+  }
+  /**
+   * 导出JSON
+   * @returns 
+   */
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: this.getType(),
+      tag: this.__tagName,
+      class: this.__class,
+      style: this.__style,
+      version: 1
+    };
+  }
+  /**
+   * 导出DOM
+   * @returns 
+   */
+  exportDOM(editor) {
+    const element = this.createDOM(editor._config);
+    element.removeAttribute("node-key");
+    element.removeAttribute("contenteditable");
+    element.removeAttribute("data-lexical-decorator");
+    return { element };
+  }
+  /**
+   * 创建渲染DOM
+   * @param config 
+   * @returns 
+   */
+  createDOM(config) {
+    const element = document.createElement(this.__tagName);
+    if (this.__class) {
+      element.setAttribute("class", this.__class);
+    }
+    if (this.__style) {
+      element.setAttribute("style", this.__style);
+    }
+    return element;
+  }
+  /**
+   * 开始折叠
+   * 目前看 删除节点的时候会调用
+   * @returns 
+   */
+  collapseAtStart() {
+    const children = this.getChildren();
+    if (children.length === 0 || $isTextNode(children[0]) && children[0].getTextContent().trim() === "") {
+      this.remove();
+      return true;
+    }
+    return false;
+  }
+  /**
+   * 更新DOM
+   * @param _prevNode 
+   * @param _dom 
+   * @param _config 
+   * @returns 
+   */
+  updateDOM(prevNode, dom, config) {
+    dom.setAttribute("class", this.__class ?? "");
+    dom.setAttribute("style", this.__style);
+    return false;
+  }
+}
+const $covertHtmlElementDOM = (domNode) => {
+  return {
+    conversion: () => {
+      return {
+        node: new HtmlElementNode(domNode.tagName, domNode.getAttribute("class") || "", domNode.getAttribute("style") || "")
+      };
+    },
+    priority: 2
+  };
+};
+export {
+  HtmlElementNode
+};
+//# sourceMappingURL=HtmlElementNode.js.map

package/dist/esm/components/basic/lexical-editor/nodes/HtmlElementNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HtmlElementNode.js","sources":["../../../../../../src/components/basic/lexical-editor/nodes/HtmlElementNode.ts"],"sourcesContent":["\r\nimport type { DOMConversionMap, SerializedElementNode, NodeKey, Spread, EditorConfig, DOMExportOutput, DOMConversion, LexicalEditor, LexicalNode } from 'lexical'\r\nimport { $isTextNode, ElementNode } from 'lexical'\r\nimport { getCSSFromStyleObject, getStyleObjectFromRawCSS } from '../utils'\r\n\r\n/**\r\n * 节点序列化 \r\n */\r\nexport type SerializedHtmlElementNode = Spread<{ tag: string, style?: string, class?: string }, SerializedElementNode>\r\n/**\r\n * 其他位置Html节点\r\n */\r\nexport class HtmlElementNode extends ElementNode {\r\n\r\n  __tagName: string\r\n  __class?: string\r\n\r\n  static getType(): string { return \"html-element\"; }\r\n\r\n  static clone(node: HtmlElementNode): HtmlElementNode {\r\n    return new HtmlElementNode(node.__tagName, node.__class, node.__style, node.__key)\r\n  }\r\n\r\n  static importJSON(serializedNode: SerializedHtmlElementNode): HtmlElementNode {\r\n    return new HtmlElementNode(serializedNode.tag, serializedNode.class, serializedNode.style)\r\n  }\r\n\r\n  static importDOM(): DOMConversionMap | null {\r\n    return {\r\n      div: $covertHtmlElementDOM,\r\n      section: $covertHtmlElementDOM,\r\n      main: $covertHtmlElementDOM,\r\n      header: $covertHtmlElementDOM\r\n    }\r\n  }\r\n\r\n  /**\r\n   * \r\n   * @param tagName \r\n   * @param className \r\n   * @param style \r\n   * @param key \r\n   */\r\n  constructor(tagName: string, className?: string , style?: string, key?: NodeKey) {\r\n    super(key)\r\n    this.__tagName = tagName,\r\n    this.__class = className;\r\n    this.__style = style || \"\";\r\n  }\r\n\r\n  /**\r\n   * 名称\r\n   * @returns \r\n   */\r\n  getName(){ return this.__tagName; }\r\n\r\n  /**\r\n   * 描述\r\n   * @returns \r\n   */\r\n  getDesc(){ return this.__class?.split(/[\\s]/g).join(\".\")}\r\n\r\n  /**\r\n   * 添加样式\r\n   * @param plaload \r\n   */\r\n  addStyle(plaload:any){\r\n    const styleObj = Object.assign(getStyleObjectFromRawCSS(this.__style),plaload);\r\n    return this.setStyle(getCSSFromStyleObject(styleObj));\r\n  }\r\n\r\n  /**\r\n   * 获取样式对象\r\n   */\r\n  getStyleObj(){\r\n    return getStyleObjectFromRawCSS(this.__style);\r\n  }\r\n\r\n  /**\r\n   * 导出JSON\r\n   * @returns \r\n   */\r\n  exportJSON(): SerializedHtmlElementNode {\r\n    return {\r\n      ...super.exportJSON(),\r\n      type: this.getType(),\r\n      tag: this.__tagName,\r\n      class: this.__class,\r\n      style: this.__style,\r\n      version: 1\r\n    }\r\n  }\r\n\r\n  /**\r\n   * 导出DOM\r\n   * @returns \r\n   */\r\n  exportDOM(editor:LexicalEditor): DOMExportOutput {\r\n  \r\n    const element = this.createDOM(editor._config)\r\n\r\n    // 删除不用的key\r\n    element.removeAttribute(\"node-key\");\r\n    element.removeAttribute(\"contenteditable\")\r\n    element.removeAttribute(\"data-lexical-decorator\")\r\n\r\n    return { element }\r\n  }\r\n\r\n  /**\r\n   * 创建渲染DOM\r\n   * @param config \r\n   * @returns \r\n   */\r\n  createDOM(config: EditorConfig): HTMLElement {\r\n\r\n    const element = document.createElement(this.__tagName)\r\n\r\n    if (this.__class) {\r\n      element.setAttribute(\"class\", this.__class)\r\n    }\r\n\r\n    if (this.__style) {\r\n      element.setAttribute(\"style\", this.__style)\r\n    }\r\n\r\n    return element;\r\n  }\r\n\r\n  /**\r\n   * 开始折叠\r\n   * 目前看 删除节点的时候会调用\r\n   * @returns \r\n   */\r\n  collapseAtStart() {\r\n\r\n    const children = this.getChildren();\r\n\r\n    // 判断空内容的时候 直接删除自己\r\n    if (children.length === 0 || $isTextNode(children[0]) && children[0].getTextContent().trim() === \"\") {\r\n      this.remove();\r\n      return true;\r\n    }\r\n    return false;\r\n  }\r\n\r\n  /**\r\n   * 更新DOM\r\n   * @param _prevNode \r\n   * @param _dom \r\n   * @param _config \r\n   * @returns \r\n   */\r\n  updateDOM(prevNode: LexicalNode, dom: HTMLElement, config: EditorConfig): boolean {\r\n    dom.setAttribute(\"class\",this.__class ?? \"\")\r\n    dom.setAttribute(\"style\",this.__style)\r\n    return false;\r\n  }\r\n\r\n}\r\n\r\n/**\r\n * 转换DOM\r\n * @param node \r\n * @returns \r\n */\r\nconst $covertHtmlElementDOM = (domNode: HTMLElement): DOMConversion<HTMLElement> | null => {\r\n  return {\r\n    conversion: () => {\r\n      return {\r\n        node: new HtmlElementNode(domNode.tagName, domNode.getAttribute(\"class\") || \"\", domNode.getAttribute(\"style\") || \"\")\r\n      };\r\n    },\r\n    priority: 2\r\n  };\r\n}\r\n\r\n/**\r\n * 判断是否是HtmlElementNode\r\n * @param node \r\n * @returns \r\n */\r\nexport function $isHtmlElementNode(\r\n  node: HtmlElementNode | LexicalNode | null | undefined,\r\n): node is HtmlElementNode {\r\n  return node instanceof HtmlElementNode\r\n}\r\n"],"names":[],"mappings":"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"}