@maketribe/ms-app 3.2.5 → 3.2.6

package/dist/cjs/components/basic/doc-editor/lexical-vue/components/LexicalBlockWithAlignableContents.vue2.js

@@ -0,0 +1,108 @@
+"use strict";
+const vue = require("vue");
+const utils = require("@lexical/utils");
+const lexical = require("lexical");
+require("@lexical/text");
+const useMounted = require("../composables/useMounted.js");
+require("@lexical/overflow");
+require("tiny-invariant");
+require("@lexical/history");
+const useLexicalComposer = require("../composables/useLexicalComposer.js");
+const useLexicalNodeSelection = require("../composables/useLexicalNodeSelection.js");
+require("@lexical/list");
+require("@lexical/dragon");
+require("@lexical/plain-text");
+require("@lexical/rich-text");
+require("@lexical/yjs");
+require("yjs");
+const LexicalDecoratorBlockNode = require("./LexicalDecoratorBlockNode.js");
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "LexicalBlockWithAlignableContents",
+  props: {
+    format: {},
+    nodeKey: {},
+    baseClass: {},
+    focusClass: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const editor = useLexicalComposer.useLexicalComposer();
+    const { isSelected, setSelected, clearSelection } = useLexicalNodeSelection.useLexicalNodeSelection(props.nodeKey);
+    const containerRef = vue.ref(null);
+    function onDelete(event) {
+      if (isSelected.value && lexical.$isNodeSelection(lexical.$getSelection())) {
+        event.preventDefault();
+        const node = lexical.$getNodeByKey(props.nodeKey);
+        if (lexical.$isDecoratorNode(node))
+          node == null ? void 0 : node.remove();
+      }
+      return false;
+    }
+    useMounted.useMounted(() => {
+      return utils.mergeRegister(
+        editor.registerCommand(
+          lexical.FORMAT_ELEMENT_COMMAND,
+          (formatType) => {
+            if (isSelected.value) {
+              const selection = lexical.$getSelection();
+              if (lexical.$isNodeSelection(selection)) {
+                const node = lexical.$getNodeByKey(props.nodeKey);
+                if (node && LexicalDecoratorBlockNode.$isDecoratorBlockNode(node))
+                  node.setFormat(formatType);
+              } else if (lexical.$isRangeSelection(selection)) {
+                const nodes = selection.getNodes();
+                for (const node of nodes) {
+                  if (LexicalDecoratorBlockNode.$isDecoratorBlockNode(node)) {
+                    node.setFormat(formatType);
+                  } else {
+                    const element = utils.$getNearestBlockElementAncestorOrThrow(node);
+                    element.setFormat(formatType);
+                  }
+                }
+              }
+              return true;
+            }
+            return false;
+          },
+          lexical.COMMAND_PRIORITY_LOW
+        ),
+        editor.registerCommand(
+          lexical.CLICK_COMMAND,
+          (event) => {
+            if (event.target === containerRef.value) {
+              event.preventDefault();
+              if (!event.shiftKey)
+                clearSelection();
+              setSelected(!isSelected.value);
+              return true;
+            }
+            return false;
+          },
+          lexical.COMMAND_PRIORITY_LOW
+        ),
+        editor.registerCommand(
+          lexical.KEY_DELETE_COMMAND,
+          onDelete,
+          lexical.COMMAND_PRIORITY_LOW
+        ),
+        editor.registerCommand(
+          lexical.KEY_BACKSPACE_COMMAND,
+          onDelete,
+          lexical.COMMAND_PRIORITY_LOW
+        )
+      );
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        ref_key: "containerRef",
+        ref: containerRef,
+        style: vue.normalizeStyle(`text-align: ${_ctx.format}`),
+        class: vue.normalizeClass([_ctx.baseClass, vue.unref(isSelected) ? _ctx.focusClass : ""])
+      }, [
+        vue.renderSlot(_ctx.$slots, "default")
+      ], 6);
+    };
+  }
+});
+module.exports = _sfc_main;
+//# sourceMappingURL=LexicalBlockWithAlignableContents.vue2.js.map

package/dist/cjs/components/basic/doc-editor/lexical-vue/components/LexicalBlockWithAlignableContents.vue2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LexicalBlockWithAlignableContents.vue2.js","sources":["../../../../../../../src/components/basic/doc-editor/lexical-vue/components/LexicalBlockWithAlignableContents.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport type {\r\n  ElementFormatType,\r\n  NodeKey,\r\n} from 'lexical'\r\nimport {\r\n  $getNearestBlockElementAncestorOrThrow,\r\n  mergeRegister,\r\n} from '@lexical/utils'\r\nimport {\r\n  $getNodeByKey,\r\n  $getSelection,\r\n  $isDecoratorNode,\r\n  $isNodeSelection,\r\n  $isRangeSelection,\r\n  CLICK_COMMAND,\r\n  COMMAND_PRIORITY_LOW,\r\n  FORMAT_ELEMENT_COMMAND,\r\n  KEY_BACKSPACE_COMMAND,\r\n  KEY_DELETE_COMMAND,\r\n} from 'lexical'\r\nimport { ref } from 'vue'\r\nimport { useLexicalComposer, useLexicalNodeSelection } from '../composables'\r\nimport { useMounted } from '../composables/useMounted'\r\nimport { $isDecoratorBlockNode } from './LexicalDecoratorBlockNode'\r\n\r\nconst props = defineProps<{\r\n  format?: ElementFormatType\r\n  nodeKey: NodeKey\r\n  baseClass?: string\r\n  focusClass?: string\r\n}>()\r\n\r\nconst editor = useLexicalComposer()\r\nconst { isSelected, setSelected, clearSelection } = useLexicalNodeSelection(props.nodeKey)\r\nconst containerRef = ref<HTMLDivElement | null>(null)\r\n\r\nfunction onDelete(event: KeyboardEvent) {\r\n  if (isSelected.value && $isNodeSelection($getSelection())) {\r\n    event.preventDefault()\r\n    const node = $getNodeByKey(props.nodeKey)\r\n    if ($isDecoratorNode(node))\r\n      node?.remove()\r\n  }\r\n  return false\r\n}\r\n\r\nuseMounted(() => {\r\n  return mergeRegister(\r\n    editor.registerCommand<ElementFormatType>(\r\n      FORMAT_ELEMENT_COMMAND,\r\n      (formatType) => {\r\n        if (isSelected.value) {\r\n          const selection = $getSelection()\r\n\r\n          if ($isNodeSelection(selection)) {\r\n            const node = $getNodeByKey(props.nodeKey)\r\n\r\n            if (node && $isDecoratorBlockNode(node))\r\n              node.setFormat(formatType)\r\n          }\r\n          else if ($isRangeSelection(selection)) {\r\n            const nodes = selection.getNodes()\r\n\r\n            for (const node of nodes) {\r\n              if ($isDecoratorBlockNode(node)) {\r\n                node.setFormat(formatType)\r\n              }\r\n              else {\r\n                const element = $getNearestBlockElementAncestorOrThrow(node)\r\n                element.setFormat(formatType)\r\n              }\r\n            }\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<MouseEvent>(\r\n      CLICK_COMMAND,\r\n      (event) => {\r\n        if (event.target === containerRef.value) {\r\n          event.preventDefault()\r\n          if (!event.shiftKey)\r\n            clearSelection()\r\n\r\n          setSelected(!isSelected.value)\r\n          return true\r\n        }\r\n        return false\r\n      },\r\n      COMMAND_PRIORITY_LOW,\r\n    ),\r\n    editor.registerCommand(\r\n      KEY_DELETE_COMMAND,\r\n      onDelete,\r\n      COMMAND_PRIORITY_LOW,\r\n    ),\r\n    editor.registerCommand(\r\n      KEY_BACKSPACE_COMMAND,\r\n      onDelete,\r\n      COMMAND_PRIORITY_LOW,\r\n    ),\r\n  )\r\n})\r\n</script>\r\n\r\n<template>\r\n  <div\r\n    ref=\"containerRef\"\r\n    :style=\"`text-align: ${format}`\"\r\n    :class=\"[baseClass, isSelected ? focusClass : '']\"\r\n  >\r\n    <slot />\r\n  </div>\r\n</template>\r\n"],"names":["useLexicalComposer","useLexicalNodeSelection","ref","$isNodeSelection","$getSelection","$getNodeByKey","$isDecoratorNode","useMounted","mergeRegister","FORMAT_ELEMENT_COMMAND","$isDecoratorBlockNode","$isRangeSelection","$getNearestBlockElementAncestorOrThrow","COMMAND_PRIORITY_LOW","CLICK_COMMAND","KEY_DELETE_COMMAND","KEY_BACKSPACE_COMMAND"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,UAAM,QAAQ;AAOd,UAAM,SAASA,mBAAAA;AACf,UAAM,EAAE,YAAY,aAAa,eAAmB,IAAAC,gDAAwB,MAAM,OAAO;AACnF,UAAA,eAAeC,QAA2B,IAAI;AAEpD,aAAS,SAAS,OAAsB;AACtC,UAAI,WAAW,SAASC,yBAAiBC,QAAAA,cAAe,CAAA,GAAG;AACzD,cAAM,eAAe;AACf,cAAA,OAAOC,QAAAA,cAAc,MAAM,OAAO;AACxC,YAAIC,QAAAA,iBAAiB,IAAI;AACvB,uCAAM;AAAA,MACV;AACO,aAAA;AAAA,IACT;AAEAC,eAAAA,WAAW,MAAM;AACR,aAAAC,MAAA;AAAA,QACL,OAAO;AAAA,UACLC,QAAA;AAAA,UACA,CAAC,eAAe;AACd,gBAAI,WAAW,OAAO;AACpB,oBAAM,YAAYL,QAAAA;AAEd,kBAAAD,QAAAA,iBAAiB,SAAS,GAAG;AACzB,sBAAA,OAAOE,QAAAA,cAAc,MAAM,OAAO;AAEpC,oBAAA,QAAQK,gDAAsB,IAAI;AACpC,uBAAK,UAAU,UAAU;AAAA,cAAA,WAEpBC,QAAAA,kBAAkB,SAAS,GAAG;AAC/B,sBAAA,QAAQ,UAAU;AAExB,2BAAW,QAAQ,OAAO;AACpB,sBAAAD,0BAAAA,sBAAsB,IAAI,GAAG;AAC/B,yBAAK,UAAU,UAAU;AAAA,kBAAA,OAEtB;AACG,0BAAA,UAAUE,6CAAuC,IAAI;AAC3D,4BAAQ,UAAU,UAAU;AAAA,kBAC9B;AAAA,gBACF;AAAA,cACF;AAEO,qBAAA;AAAA,YACT;AACO,mBAAA;AAAA,UACT;AAAA,UACAC,QAAA;AAAA,QACF;AAAA,QACA,OAAO;AAAA,UACLC,QAAA;AAAA,UACA,CAAC,UAAU;AACL,gBAAA,MAAM,WAAW,aAAa,OAAO;AACvC,oBAAM,eAAe;AACrB,kBAAI,CAAC,MAAM;AACM;AAEL,0BAAA,CAAC,WAAW,KAAK;AACtB,qBAAA;AAAA,YACT;AACO,mBAAA;AAAA,UACT;AAAA,UACAD,QAAA;AAAA,QACF;AAAA,QACA,OAAO;AAAA,UACLE,QAAA;AAAA,UACA;AAAA,UACAF,QAAA;AAAA,QACF;AAAA,QACA,OAAO;AAAA,UACLG,QAAA;AAAA,UACA;AAAA,UACAH,QAAA;AAAA,QACF;AAAA,MAAA;AAAA,IACF,CACD;;;;;;;;;;;;;;"}

package/dist/cjs/components/basic/doc-editor/lexical-vue/components/LexicalDecoratorBlockNode.js

@@ -28,5 +28,9 @@ class DecoratorBlockNode extends lexical.DecoratorNode {
     self.__format = format;
   }
 }
+function $isDecoratorBlockNode(node) {
+  return node instanceof DecoratorBlockNode;
+}
+exports.$isDecoratorBlockNode = $isDecoratorBlockNode;
 exports.DecoratorBlockNode = DecoratorBlockNode;
 //# sourceMappingURL=LexicalDecoratorBlockNode.js.map

package/dist/cjs/components/basic/doc-editor/lexical-vue/components/LexicalDecoratorBlockNode.js.map

@@ -1 +1 @@
-{"version":3,"file":"LexicalDecoratorBlockNode.js","sources":["../../../../../../../src/components/basic/doc-editor/lexical-vue/components/LexicalDecoratorBlockNode.ts"],"sourcesContent":["import type { ElementFormatType, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical'\r\n\r\nimport { DecoratorNode } from 'lexical'\r\nimport type { Component } from 'vue'\r\n\r\nexport type SerializedDecoratorBlockNode = Spread<\r\n  {\r\n    format: ElementFormatType\r\n  },\r\n  SerializedLexicalNode\r\n>\r\n\r\nexport class DecoratorBlockNode extends DecoratorNode<Component> {\r\n  __format?: ElementFormatType\r\n\r\n  constructor(format?: ElementFormatType, key?: NodeKey) {\r\n    super(key)\r\n    this.__format = format || ''\r\n  }\r\n\r\n  exportJSON(): SerializedDecoratorBlockNode {\r\n    return {\r\n      format: this.__format || '',\r\n      type: 'decorator-block',\r\n      version: 1,\r\n    }\r\n  }\r\n\r\n  createDOM() {\r\n    return document.createElement('div')\r\n  }\r\n\r\n  updateDOM() {\r\n    return false\r\n  }\r\n\r\n  setFormat(format: ElementFormatType) {\r\n    const self = this.getWritable()\r\n    self.__format = format\r\n  }\r\n}\r\n\r\nexport function $createDecoratorBlockNode() {\r\n  return new DecoratorBlockNode()\r\n}\r\n\r\nexport function $isDecoratorBlockNode(node: LexicalNode | null | undefined): node is DecoratorBlockNode {\r\n  return node instanceof DecoratorBlockNode\r\n}\r\n"],"names":["DecoratorNode"],"mappings":";;;;;;AAYO,MAAM,2BAA2BA,QAAAA,cAAyB;AAAA,EAG/D,YAAY,QAA4B,KAAe;AACrD,UAAM,GAAG;AAHX;AAIE,SAAK,WAAW,UAAU;AAAA,EAC5B;AAAA,EAEA,aAA2C;AAClC,WAAA;AAAA,MACL,QAAQ,KAAK,YAAY;AAAA,MACzB,MAAM;AAAA,MACN,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EAEA,YAAY;AACH,WAAA,SAAS,cAAc,KAAK;AAAA,EACrC;AAAA,EAEA,YAAY;AACH,WAAA;AAAA,EACT;AAAA,EAEA,UAAU,QAA2B;AAC7B,UAAA,OAAO,KAAK;AAClB,SAAK,WAAW;AAAA,EAClB;AACF;;"}
+{"version":3,"file":"LexicalDecoratorBlockNode.js","sources":["../../../../../../../src/components/basic/doc-editor/lexical-vue/components/LexicalDecoratorBlockNode.ts"],"sourcesContent":["import type { ElementFormatType, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical'\r\n\r\nimport { DecoratorNode } from 'lexical'\r\nimport type { Component } from 'vue'\r\n\r\nexport type SerializedDecoratorBlockNode = Spread<\r\n  {\r\n    format: ElementFormatType\r\n  },\r\n  SerializedLexicalNode\r\n>\r\n\r\nexport class DecoratorBlockNode extends DecoratorNode<Component> {\r\n  __format?: ElementFormatType\r\n\r\n  constructor(format?: ElementFormatType, key?: NodeKey) {\r\n    super(key)\r\n    this.__format = format || ''\r\n  }\r\n\r\n  exportJSON(): SerializedDecoratorBlockNode {\r\n    return {\r\n      format: this.__format || '',\r\n      type: 'decorator-block',\r\n      version: 1,\r\n    }\r\n  }\r\n\r\n  createDOM() {\r\n    return document.createElement('div')\r\n  }\r\n\r\n  updateDOM() {\r\n    return false\r\n  }\r\n\r\n  setFormat(format: ElementFormatType) {\r\n    const self = this.getWritable()\r\n    self.__format = format\r\n  }\r\n}\r\n\r\nexport function $createDecoratorBlockNode() {\r\n  return new DecoratorBlockNode()\r\n}\r\n\r\nexport function $isDecoratorBlockNode(node: LexicalNode | null | undefined): node is DecoratorBlockNode {\r\n  return node instanceof DecoratorBlockNode\r\n}\r\n"],"names":["DecoratorNode"],"mappings":";;;;;;AAYO,MAAM,2BAA2BA,QAAAA,cAAyB;AAAA,EAG/D,YAAY,QAA4B,KAAe;AACrD,UAAM,GAAG;AAHX;AAIE,SAAK,WAAW,UAAU;AAAA,EAC5B;AAAA,EAEA,aAA2C;AAClC,WAAA;AAAA,MACL,QAAQ,KAAK,YAAY;AAAA,MACzB,MAAM;AAAA,MACN,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA,EAEA,YAAY;AACH,WAAA,SAAS,cAAc,KAAK;AAAA,EACrC;AAAA,EAEA,YAAY;AACH,WAAA;AAAA,EACT;AAAA,EAEA,UAAU,QAA2B;AAC7B,UAAA,OAAO,KAAK;AAClB,SAAK,WAAW;AAAA,EAClB;AACF;AAMO,SAAS,sBAAsB,MAAkE;AACtG,SAAO,gBAAgB;AACzB;;;"}

package/dist/cjs/components/basic/doc-editor/lexical-vue/components/LexicalRichTextPlugin.vue.js

@@ -33,26 +33,32 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const htmlContent = vue.ref("");
     const contentIsEmpty = vue.computed(() => htmlContent.value == `<p class="mk-doc__paragraph"><br></p>` || !htmlContent.value);
     const setHtml = (html$1) => {
-      let nodes = [];
-      htmlContent.value = html$1;
-      editor.update(() => {
-        var _a;
-        if (html$1.trim()) {
-          nodes = html.$generateNodesFromDOM(editor, parser.parseFromString(html$1.trim(), "text/html"));
-        }
-        lexical.$selectAll();
-        (_a = lexical.$getSelection()) == null ? void 0 : _a.insertNodes(nodes);
-      });
+      if (htmlContent.value != html$1) {
+        let nodes = [];
+        htmlContent.value = html$1;
+        editor.update(() => {
+          var _a, _b;
+          if (html$1.trim()) {
+            nodes = html.$generateNodesFromDOM(editor, parser.parseFromString(html$1.trim(), "text/html"));
+          }
+          lexical.$selectAll();
+          if (nodes.length > 0) {
+            (_a = lexical.$getSelection()) == null ? void 0 : _a.insertNodes(nodes);
+          } else {
+            (_b = lexical.$getSelection()) == null ? void 0 : _b.insertText("");
+          }
+        });
+      }
     };
-    const unregisterMergeListener = editor.registerUpdateListener(({ editorState }) => {
-      editorState.read(() => {
-        htmlContent.value = html.$generateHtmlFromNodes(editor);
-        emit("change", htmlContent.value);
-      });
-    });
-    vue.onUnmounted(() => unregisterMergeListener());
     vue.onMounted(() => {
-      setHtml(props.content);
+      vue.watch(() => props.content, setHtml, { immediate: true });
+      vue.watch(htmlContent, (value) => emit("change", value));
+      const unregisterMergeListener = editor.registerUpdateListener(({ editorState }) => {
+        editorState.read(() => {
+          htmlContent.value = html.$generateHtmlFromNodes(editor);
+        });
+      });
+      vue.onUnmounted(() => unregisterMergeListener());
     });
     useRichTextSetup.useRichTextSetup(editor);
     return (_ctx, _cache) => {

package/dist/cjs/components/basic/doc-editor/lexical-vue/components/LexicalRichTextPlugin.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"LexicalRichTextPlugin.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/lexical-vue/components/LexicalRichTextPlugin.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { useCanShowPlaceholder, useLexicalComposer, useRichTextSetup } from '../composables'\r\nimport Decorators from './LexicalDecoratedTeleports'\r\nimport { ref,defineProps,computed,defineEmits,onMounted,onUnmounted } from \"vue\"\r\nimport { $getRoot, $getSelection ,$createRangeSelection,$selectAll } from 'lexical'\r\nimport { $generateHtmlFromNodes,$generateNodesFromDOM } from '@lexical/html'\r\n\r\n// 事件\r\nconst emit = defineEmits([\"change\"]);\r\n\r\n// 参数\r\nconst props = defineProps({\r\n  content:{ type:String,default:`` }\r\n})\r\n\r\nconst editor = useLexicalComposer()\r\n\r\nconst canShowPlaceholder = useCanShowPlaceholder(editor)\r\n\r\nconst parser = new DOMParser();\r\n\r\nconst htmlContent = ref(\"\");\r\n\r\n// 空内容\r\nconst contentIsEmpty = computed(()=>htmlContent.value == `<p class=\"mk-doc__paragraph\"><br></p>` || !htmlContent.value);\r\n\r\n// 设置 HTML\r\nconst setHtml = (html : any)=>{\r\n\r\n    let nodes : Array<any> = [];\r\n\r\n    htmlContent.value = html;\r\n\r\n    editor.update(()=>{\r\n\r\n      if(html.trim()){\r\n        // Once you have the DOM instance it's easy to generate LexicalNodes.\r\n        nodes = $generateNodesFromDOM(editor,parser.parseFromString(html.trim(),\"text/html\"));\r\n      }\r\n      // 设置权限替换\r\n      $selectAll();\r\n      $getSelection()?.insertNodes(nodes);\r\n    })\r\n}\r\n\r\n// 更新操作\r\nconst unregisterMergeListener = editor.registerUpdateListener(({ editorState }) => {\r\n  editorState.read(() => {\r\n    htmlContent.value = $generateHtmlFromNodes(editor);\r\n    emit('change',htmlContent.value);\r\n  })\r\n})\r\n\r\nonUnmounted(() => unregisterMergeListener());\r\n\r\nonMounted(()=>{\r\n  // 初始化\r\n  setHtml(props.content);\r\n})\r\n\r\n\r\n// 使用富文本\r\nuseRichTextSetup(editor)\r\n\r\n</script>\r\n\r\n<template>\r\n <div class=\"mk-doc-editor__stage__editable\">\r\n    <slot name=\"contentEditable\"></slot>\r\n    <slot v-if=\"canShowPlaceholder && contentIsEmpty\" name=\"placeholder\"></slot>\r\n    <Decorators />\r\n  </div>\r\n\r\n</template>\r\n"],"names":["useLexicalComposer","useCanShowPlaceholder","ref","computed","html","$generateNodesFromDOM","$selectAll","$getSelection","$generateHtmlFromNodes","onUnmounted","onMounted","useRichTextSetup"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,UAAM,OAAO;AAGb,UAAM,QAAQ;AAId,UAAM,SAASA,mBAAAA;AAET,UAAA,qBAAqBC,4CAAsB,MAAM;AAEjD,UAAA,SAAS,IAAI;AAEb,UAAA,cAAcC,QAAI,EAAE;AAGpB,UAAA,iBAAiBC,aAAS,MAAI,YAAY,SAAS,2CAA2C,CAAC,YAAY,KAAK;AAGhH,UAAA,UAAU,CAACC,WAAa;AAE1B,UAAI,QAAqB,CAAA;AAEzB,kBAAY,QAAQA;AAEpB,aAAO,OAAO,MAAI;;AAEb,YAAAA,OAAK,QAAO;AAEL,kBAAAC,KAAAA,sBAAsB,QAAO,OAAO,gBAAgBD,OAAK,KAAK,GAAE,WAAW,CAAC;AAAA,QACtF;AAEWE,gBAAAA;AACGC,oCAAA,MAAAA,mBAAG,YAAY;AAAA,MAAK,CACnC;AAAA,IAAA;AAIL,UAAM,0BAA0B,OAAO,uBAAuB,CAAC,EAAE,kBAAkB;AACjF,kBAAY,KAAK,MAAM;AACT,oBAAA,QAAQC,4BAAuB,MAAM;AAC5C,aAAA,UAAS,YAAY,KAAK;AAAA,MAAA,CAChC;AAAA,IAAA,CACF;AAEWC,oBAAA,MAAM,yBAAyB;AAE3CC,QAAAA,UAAU,MAAI;AAEZ,cAAQ,MAAM,OAAO;AAAA,IAAA,CACtB;AAIDC,qBAAA,iBAAiB,MAAM;;;;;;;;;;;"}
+{"version":3,"file":"LexicalRichTextPlugin.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/lexical-vue/components/LexicalRichTextPlugin.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { useCanShowPlaceholder, useLexicalComposer, useRichTextSetup } from '../composables'\r\nimport Decorators from './LexicalDecoratedTeleports'\r\nimport { ref,defineProps,computed,defineEmits,onMounted,onUnmounted,watch } from \"vue\"\r\nimport { $getRoot, $getSelection ,$createRangeSelection,$selectAll } from 'lexical'\r\nimport { $generateHtmlFromNodes,$generateNodesFromDOM } from '@lexical/html'\r\n\r\n// 事件\r\nconst emit = defineEmits([\"change\"]);\r\n\r\n// 参数\r\nconst props = defineProps({\r\n  content:{ type:String,default:`` }\r\n})\r\n\r\nconst editor = useLexicalComposer()\r\n\r\nconst canShowPlaceholder = useCanShowPlaceholder(editor)\r\n\r\nconst parser = new DOMParser();\r\n\r\n// html 内容\r\nconst htmlContent = ref(\"\");\r\n\r\n// 空内容\r\nconst contentIsEmpty = computed(()=>htmlContent.value == `<p class=\"mk-doc__paragraph\"><br></p>` || !htmlContent.value);\r\n\r\n// 设置 HTML\r\nconst setHtml = (html : any)=>{\r\n\r\n    // 内容不同则重置 \r\n    if(htmlContent.value != html){\r\n\r\n      let nodes : Array<any> = [];\r\n\r\n      htmlContent.value = html;\r\n\r\n      editor.update(()=>{\r\n\r\n        if(html.trim()){\r\n          // Once you have the DOM instance it's easy to generate LexicalNodes.\r\n          nodes = $generateNodesFromDOM(editor,parser.parseFromString(html.trim(),\"text/html\"));\r\n        }\r\n        // 设置权限替换\r\n        $selectAll();\r\n\r\n        if(nodes.length > 0){\r\n          $getSelection()?.insertNodes(nodes);\r\n        }\r\n        else{\r\n          $getSelection()?.insertText(\"\")\r\n        }\r\n        \r\n      })\r\n    }\r\n}\r\n\r\n\r\nonMounted(()=>{\r\n  // 初始化\r\n  watch(()=>props.content,setHtml,{ immediate:true });\r\n  // 监听内容变化\r\n  watch(htmlContent,(value:any)=>emit('change',value));\r\n\r\n  // 更新操作\r\n  const unregisterMergeListener = editor.registerUpdateListener(({ editorState }) => {\r\n    editorState.read(() => {\r\n      htmlContent.value = $generateHtmlFromNodes(editor);\r\n    })\r\n  })\r\n\r\n  // 取消华仔\r\n  onUnmounted(() => unregisterMergeListener());\r\n})\r\n\r\n\r\n// 使用富文本\r\nuseRichTextSetup(editor)\r\n\r\n</script>\r\n\r\n<template>\r\n <div class=\"mk-doc-editor__stage__editable\">\r\n    <slot name=\"contentEditable\"></slot>\r\n    <slot v-if=\"canShowPlaceholder && contentIsEmpty\" name=\"placeholder\"></slot>\r\n    <Decorators />\r\n  </div>\r\n\r\n</template>\r\n"],"names":["useLexicalComposer","useCanShowPlaceholder","ref","computed","html","$generateNodesFromDOM","$selectAll","$getSelection","onMounted","watch","$generateHtmlFromNodes","onUnmounted","useRichTextSetup"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,UAAM,OAAO;AAGb,UAAM,QAAQ;AAId,UAAM,SAASA,mBAAAA;AAET,UAAA,qBAAqBC,4CAAsB,MAAM;AAEjD,UAAA,SAAS,IAAI;AAGb,UAAA,cAAcC,QAAI,EAAE;AAGpB,UAAA,iBAAiBC,aAAS,MAAI,YAAY,SAAS,2CAA2C,CAAC,YAAY,KAAK;AAGhH,UAAA,UAAU,CAACC,WAAa;AAGvB,UAAA,YAAY,SAASA,QAAK;AAE3B,YAAI,QAAqB,CAAA;AAEzB,oBAAY,QAAQA;AAEpB,eAAO,OAAO,MAAI;;AAEb,cAAAA,OAAK,QAAO;AAEL,oBAAAC,KAAAA,sBAAsB,QAAO,OAAO,gBAAgBD,OAAK,KAAK,GAAE,WAAW,CAAC;AAAA,UACtF;AAEWE,kBAAAA;AAER,cAAA,MAAM,SAAS,GAAE;AACJC,wCAAA,MAAAA,mBAAG,YAAY;AAAA,UAAK,OAEhC;AACYA,wCAAA,MAAAA,mBAAG,WAAW;AAAA,UAC9B;AAAA,QAAA,CAED;AAAA,MACH;AAAA,IAAA;AAIJC,QAAAA,UAAU,MAAI;AAEZC,UAAA,MAAM,MAAI,MAAM,SAAQ,SAAQ,EAAE,WAAU,MAAM;AAElDA,UAAA,MAAM,aAAY,CAAC,UAAY,KAAK,UAAS,KAAK,CAAC;AAGnD,YAAM,0BAA0B,OAAO,uBAAuB,CAAC,EAAE,kBAAkB;AACjF,oBAAY,KAAK,MAAM;AACT,sBAAA,QAAQC,4BAAuB,MAAM;AAAA,QAAA,CAClD;AAAA,MAAA,CACF;AAGWC,sBAAA,MAAM,yBAAyB;AAAA,IAAA,CAC5C;AAIDC,qBAAA,iBAAiB,MAAM;;;;;;;;;;;"}

package/dist/cjs/components/basic/doc-editor/plugins/AutoLinkPlugin.vue.js

@@ -22,7 +22,7 @@ require("@lexical/markdown");
 require("../lexical-vue/composables/useCollaborationContext.js");
 require("../lexical-vue/components/LexicalMenu/shared.js");
 require("../lexical-vue/components/LexicalAutoEmbedPlugin/shared.js");
-const index_vue_vue_type_script_setup_true_lang = require("../lexical-vue/components/LexicalAutoLinkPlugin/index.vue.js");
+const index_vue_vue_type_script_setup_true_lang = require("../lexical-vue/components/LexicalAutoLinkPlugin/index.vue2.js");
 require("../lexical-vue/components/LexicalTypeaheadMenuPlugin/shared.js");
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "AutoLinkPlugin",

package/dist/cjs/components/basic/doc-editor/plugins/HtmlBlockPlugin/DocHtmlBlockComponent.js

@@ -0,0 +1,93 @@
+"use strict";
+const vue = require("vue");
+const lexical = require("lexical");
+const utils = require("@lexical/utils");
+require("@lexical/text");
+const useMounted = require("../../lexical-vue/composables/useMounted.js");
+require("@lexical/overflow");
+require("tiny-invariant");
+require("@lexical/history");
+const useLexicalComposer = require("../../lexical-vue/composables/useLexicalComposer.js");
+const useLexicalNodeSelection = require("../../lexical-vue/composables/useLexicalNodeSelection.js");
+require("@lexical/list");
+require("@lexical/dragon");
+require("@lexical/plain-text");
+require("@lexical/rich-text");
+require("@lexical/yjs");
+require("yjs");
+require("../../lexical-vue/components/LexicalDecoratedTeleports.js");
+require("@lexical/html");
+require("@lexical/link");
+require("@lexical/mark");
+require("@lexical/table");
+require("@lexical/hashtag");
+const LexicalBlockWithAlignableContents_vue_vue_type_script_setup_true_lang = require("../../lexical-vue/components/LexicalBlockWithAlignableContents.vue2.js");
+require("@lexical/markdown");
+require("../../lexical-vue/composables/useCollaborationContext.js");
+require("../../lexical-vue/components/LexicalMenu/shared.js");
+require("../../lexical-vue/components/LexicalAutoEmbedPlugin/shared.js");
+require("../../lexical-vue/components/LexicalTypeaheadMenuPlugin/shared.js");
+const DocHtmlBlockComponent = /* @__PURE__ */ vue.defineComponent({
+  name: "DocHtmlBlockComponent",
+  props: ["baseClass", "focusClass", "nodeKey", "attrs"],
+  setup(props) {
+    const editor = useLexicalComposer.useLexicalComposer();
+    const {
+      isSelected,
+      setSelected,
+      clearSelection
+    } = useLexicalNodeSelection.useLexicalNodeSelection(props.nodeKey);
+    const selfElRef = vue.ref(null);
+    useMounted.useMounted(() => {
+      return utils.mergeRegister(
+        // 选中图
+        editor.registerCommand(lexical.CLICK_COMMAND, (event) => {
+          console.log(event.target);
+          if (event.target === selfElRef.value) {
+            event.preventDefault();
+            if (!event.shiftKey) {
+              clearSelection();
+            }
+            setSelected(true);
+            return true;
+          }
+          return false;
+        }, lexical.COMMAND_PRIORITY_LOW)
+      );
+    });
+    return () => {
+      return vue.createVNode(LexicalBlockWithAlignableContents_vue_vue_type_script_setup_true_lang, {
+        "nodeKey": "props.nodeKey"
+      }, {
+        default: () => [vue.createVNode("iframe", vue.mergeProps({
+          "ref": (el) => selfElRef.value = el,
+          "srcdoc": `
+          <html>
+            <head>
+              <style type="text/css">
+                ${props.attrs.css}
+              </style>
+               <script>
+                ${props.attrs.js}
+              <\/script>
+            </head>
+            <body>${props.attrs.content}</body>
+          </html>
+          `,
+          "style": {
+            width: "100%",
+            padding: 0,
+            margin: 0
+          }
+        }, {
+          frameborder: 0,
+          allowFullScreen: true
+        }, {
+          "allow": "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        }), null)]
+      });
+    };
+  }
+});
+module.exports = DocHtmlBlockComponent;
+//# sourceMappingURL=DocHtmlBlockComponent.js.map

package/dist/cjs/components/basic/doc-editor/plugins/HtmlBlockPlugin/DocHtmlBlockComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DocHtmlBlockComponent.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/HtmlBlockPlugin/DocHtmlBlockComponent.tsx"],"sourcesContent":["import type { ElementFormatType } from \"lexical\";\nimport {\n  $getSelection,\n  $isNodeSelection,\n  CLICK_COMMAND,\n  COMMAND_PRIORITY_LOW,\n} from \"lexical\";\nimport { mergeRegister } from \"@lexical/utils\";\nimport {\n  useLexicalComposer,\n  useLexicalNodeSelection,\n  useMounted,\n  DecoratorBlockNode,\n  LexicalBlockWithAlignableContents,\n} from \"../../lexical-vue\";\nimport { defineComponent, ref, reactive, computed, watch } from \"vue\";\nimport { Messager } from \"@maketribe/dm\";\n\n/**\n * 图片渲染组件\n */\nexport default defineComponent({\n  name: \"DocHtmlBlockComponent\",\n  props: [\"baseClass\", \"focusClass\", \"nodeKey\", \"attrs\"],\n  setup(props) {\n    const editor = useLexicalComposer();\n    const { isSelected, setSelected, clearSelection } = useLexicalNodeSelection(\n      props.nodeKey\n    );\n    const selfElRef = ref<any>(null);\n\n    // 编辑器挂载的时候\n    useMounted(() => {\n      return mergeRegister(\n        // 选中图\n        editor.registerCommand<MouseEvent>(\n          CLICK_COMMAND,\n          (event) => {\n            console.log(event.target);\n            if (event.target === selfElRef.value) {\n              event.preventDefault();\n\n              if (!event.shiftKey) {\n                clearSelection();\n              }\n\n              setSelected(true);\n\n              return true;\n            }\n\n            return false;\n          },\n          COMMAND_PRIORITY_LOW\n        )\n      );\n    });\n\n    return () => {\n      return (\n        <LexicalBlockWithAlignableContents nodeKey=\"props.nodeKey\">\n          <iframe\n            ref={(el) => (selfElRef.value = el)}\n            srcdoc={`\n          <html>\n            <head>\n              <style type=\"text/css\">\n                ${props.attrs.css}\n              </style>\n               <script>\n                ${props.attrs.js}\n              </script>\n            </head>\n            <body>${props.attrs.content}</body>\n          </html>\n          `}\n            style={{ width: \"100%\", padding: 0, margin: 0 }}\n            {...{ frameborder: 0, allowFullScreen: true }}\n            allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n          ></iframe>\n        </LexicalBlockWithAlignableContents>\n      );\n    };\n  },\n});\n"],"names":["defineComponent","name","props","setup","editor","useLexicalComposer","isSelected","setSelected","clearSelection","useLexicalNodeSelection","nodeKey","selfElRef","ref","useMounted","mergeRegister","registerCommand","CLICK_COMMAND","event","console","log","target","value","preventDefault","shiftKey","COMMAND_PRIORITY_LOW","_createVNode","LexicalBlockWithAlignableContents","default","_mergeProps","el","attrs","css","js","content","width","padding","margin","frameborder","allowFullScreen"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqBA,MAAeA,4DAAgB;AAAA,EAC7BC,MAAM;AAAA,EACNC,OAAO,CAAC,aAAa,cAAc,WAAW,OAAO;AAAA,EACrDC,MAAMD,OAAO;AACX,UAAME,SAASC,mBAAAA;AACf,UAAM;AAAA,MAAEC;AAAAA,MAAYC;AAAAA,MAAaC;AAAAA,IAAe,IAAIC,wBAAuB,wBACzEP,MAAMQ,OACR;AACA,UAAMC,YAAYC,QAAS,IAAI;AAG/BC,eAAAA,WAAW,MAAM;AACf,aAAOC,MAAa;AAAA;AAAA,QAElBV,OAAOW,gBACLC,QAAa,eACZC,WAAU;AACTC,kBAAQC,IAAIF,MAAMG,MAAM;AACxB,cAAIH,MAAMG,WAAWT,UAAUU,OAAO;AACpCJ,kBAAMK,eAAc;AAEpB,gBAAI,CAACL,MAAMM,UAAU;AACnBf;YACF;AAEAD,wBAAY,IAAI;AAEhB,mBAAO;AAAA,UACT;AAEA,iBAAO;AAAA,WAETiB,QAAAA,oBACF;AAAA,MACF;AAAA,IACF,CAAC;AAED,WAAO,MAAM;AACX,aAAAC,IAAAA,YAAAC,uEAAA;AAAA,QAAA,WAAA;AAAA,MAAA,GAAA;AAAA,QAAAC,SAAAA,MAAAF,CAAAA,0BAAAG,IAAAA,WAAA;AAAA,UAAA,OAGYC,QAAQlB,UAAUU,QAAQQ;AAAAA,UAAG,UAC3B;AAAA;AAAA;AAAA;AAAA,kBAIF3B,MAAM4B,MAAMC,GAAG;AAAA;AAAA;AAAA,kBAGf7B,MAAM4B,MAAME,EAAE;AAAA;AAAA;AAAA,oBAGZ9B,MAAM4B,MAAMG,OAAO;AAAA;AAAA;AAAA,UAE5B,SACQ;AAAA,YAAEC,OAAO;AAAA,YAAQC,SAAS;AAAA,YAAGC,QAAQ;AAAA,UAAE;AAAA,QAAC,GAAA;AAAA,UACzCC,aAAa;AAAA,UAAGC,iBAAiB;AAAA,QAAI,GAAA;AAAA,UAAA,SAAA;AAAA,QAAA,CAAA,GAAA,IAAA,CAAA;AAAA,MAAA,CAAA;AAAA;EAMrD;AACF,CAAC;;"}

package/dist/cjs/components/basic/doc-editor/plugins/HtmlBlockPlugin/index.js

@@ -0,0 +1,128 @@
+"use strict";
+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);
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lexical = require("lexical");
+const vue = require("vue");
+require("@lexical/text");
+require("@lexical/utils");
+require("@lexical/overflow");
+require("tiny-invariant");
+require("@lexical/history");
+require("@lexical/list");
+require("@lexical/dragon");
+require("@lexical/plain-text");
+require("@lexical/rich-text");
+require("@lexical/yjs");
+require("yjs");
+require("../../lexical-vue/components/LexicalDecoratedTeleports.js");
+require("@lexical/html");
+require("@lexical/link");
+require("@lexical/mark");
+require("@lexical/table");
+require("@lexical/hashtag");
+const LexicalDecoratorBlockNode = require("../../lexical-vue/components/LexicalDecoratorBlockNode.js");
+require("@lexical/markdown");
+require("../../lexical-vue/composables/useCollaborationContext.js");
+require("../../lexical-vue/components/LexicalMenu/shared.js");
+require("../../lexical-vue/components/LexicalAutoEmbedPlugin/shared.js");
+require("../../lexical-vue/components/LexicalTypeaheadMenuPlugin/shared.js");
+const DocHtmlBlockComponent = require("./DocHtmlBlockComponent.js");
+lexical.createCommand("HTML_BLOCK_CHANGE");
+lexical.createCommand("REMOVE_HTML_BLOCK_COMMAND");
+const INSERT_HTML_BLOCK_COMMAND = lexical.createCommand("INSERT_HTML_BLOCK_COMMAND");
+class HtmlBlockNode extends LexicalDecoratorBlockNode.DecoratorBlockNode {
+  constructor(attrs, format, key) {
+    super(format, key);
+    __publicField(this, "__attrs");
+    this.__attrs = attrs;
+  }
+  static getType() {
+    return "HtmlBlock";
+  }
+  static clone(node) {
+    return new HtmlBlockNode(node.__attrs, node.__format, node.__key);
+  }
+  static importJSON(serializedNode) {
+    const node = $createHtmlBlockNode(serializedNode.attrs);
+    node.setFormat(serializedNode.format);
+    return node;
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: this.getType(),
+      version: 1,
+      attrs: this.__attrs
+    };
+  }
+  exportDOM() {
+    const element = document.createElement("div");
+    element.innerHTML = this.__attrs.content;
+    if (this.__attrs.js) {
+      const script = document.createElement("script");
+      script.innerHTML = this.__attrs.js;
+      element.append(script);
+    }
+    if (this.__attrs.css) {
+      const style = document.createElement("style");
+      style.innerHTML = this.__attrs.css;
+      element.append(style);
+    }
+    element.setAttribute("class", "mk-doc-html-block");
+    return { element };
+  }
+  static importDOM() {
+    return {
+      img: (dn) => {
+        return {
+          conversion: (domNode) => {
+            let css = "";
+            let js = "";
+            domNode.childNodes.forEach((node) => {
+              if (node.nodeName.toLowerCase() == "style") {
+                css += "\r\n" + node.textContent;
+                node.remove();
+              } else if (node.nodeName.toLowerCase() == "script") {
+                js += "\r\n" + node.textContent;
+                node.remove();
+              }
+            });
+            return domNode.classList.contains("mk-doc-html-block") ? {
+              node: $createHtmlBlockNode({
+                content: domNode.innerHTML,
+                css,
+                js
+              })
+            } : null;
+          },
+          priority: 0
+        };
+      }
+    };
+  }
+  updateDOM() {
+    return false;
+  }
+  getTextContent(_includeInert, _includeDirectionless) {
+    return this.__attrs.content;
+  }
+  decorate(_editor, config) {
+    const embedBlockTheme = config.theme.embedBlock || {};
+    return vue.h(DocHtmlBlockComponent, {
+      baseClass: embedBlockTheme.base || "",
+      focusClass: embedBlockTheme.focus || "",
+      format: this.__format,
+      nodeKey: this.getKey(),
+      attrs: this.__attrs
+    });
+  }
+}
+function $createHtmlBlockNode(attrs) {
+  return new HtmlBlockNode(attrs);
+}
+exports.$createHtmlBlockNode = $createHtmlBlockNode;
+exports.HtmlBlockNode = HtmlBlockNode;
+exports.INSERT_HTML_BLOCK_COMMAND = INSERT_HTML_BLOCK_COMMAND;
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/basic/doc-editor/plugins/HtmlBlockPlugin/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/HtmlBlockPlugin/index.ts"],"sourcesContent":["\r\nimport type {\r\n  DOMConversionMap,\r\n  DOMConversionOutput,\r\n  DOMExportOutput,\r\n  EditorConfig,\r\n  ElementFormatType,\r\n  LexicalEditor,\r\n  LexicalNode,\r\n  NodeKey,\r\n  Spread,\r\n  LexicalCommand\r\n} from 'lexical'\r\nimport { createCommand } from 'lexical'\r\nimport { DecoratorBlockNode,type SerializedDecoratorBlockNode  } from '../../lexical-vue'\r\nimport { h ,type Component} from 'vue'\r\nimport DocHtmlBlockComponent from \"./DocHtmlBlockComponent\"\r\n\r\n/**\r\n * html块类型\r\n */\r\nexport type HtmlBlockAttrs = { content:string, css?:string, js?:string };\r\n\r\n/**\r\n * html块改变\r\n */\r\nexport const HTML_BLOCK_CHANGE: LexicalCommand<HtmlBlockAttrs> = createCommand('HTML_BLOCK_CHANGE')\r\n\r\n/**\r\n * 删除html块\r\n */\r\nexport const REMOVE_HTML_BLOCK_COMMAND: LexicalCommand<undefined|null> = createCommand('REMOVE_HTML_BLOCK_COMMAND')\r\n\r\n\r\n/**\r\n * 插入html块指令\r\n */\r\nexport const INSERT_HTML_BLOCK_COMMAND: LexicalCommand<HtmlBlockAttrs> = createCommand('INSERT_HTML_BLOCK_COMMAND')\r\n\r\n/**\r\n * 图片节点序列化\r\n */\r\nexport type SerializedHtmlBlockNode = Spread<\r\n  {\r\n    attrs: HtmlBlockAttrs\r\n  },\r\n  SerializedDecoratorBlockNode\r\n>\r\n\r\n/**\r\n * 定义图片节点\r\n */\r\nexport class HtmlBlockNode extends DecoratorBlockNode {\r\n  __attrs: HtmlBlockAttrs\r\n\r\n  static getType(): string {\r\n    return 'HtmlBlock'\r\n  }\r\n\r\n  static clone(node: HtmlBlockNode): HtmlBlockNode {\r\n    return new HtmlBlockNode(node.__attrs, node.__format, node.__key)\r\n  }\r\n\r\n  static importJSON(serializedNode: SerializedHtmlBlockNode): HtmlBlockNode {\r\n    const node = $createHtmlBlockNode(serializedNode.attrs)\r\n    node.setFormat(serializedNode.format)\r\n    return node\r\n  }\r\n\r\n  constructor(attrs: HtmlBlockAttrs, format?: ElementFormatType, key?: NodeKey) {\r\n    super(format, key)\r\n    this.__attrs = attrs\r\n  }\r\n\r\n  exportJSON(): SerializedHtmlBlockNode {\r\n\r\n    return {\r\n      ...super.exportJSON(),\r\n      type: this.getType(),\r\n      version: 1,\r\n      attrs: this.__attrs,\r\n    }\r\n  }\r\n\r\n  exportDOM(): DOMExportOutput {\r\n\r\n    const element = document.createElement('div')  \r\n\r\n    // 内容\r\n    element.innerHTML = this.__attrs.content;\r\n\r\n    if(this.__attrs.js){\r\n      const script = document.createElement('script') \r\n      script.innerHTML = this.__attrs.js;\r\n      element.append(script);\r\n    }\r\n\r\n    if(this.__attrs.css){\r\n      const style = document.createElement('style')\r\n      style.innerHTML = this.__attrs.css;\r\n      element.append(style);\r\n    }\r\n\r\n\r\n    element.setAttribute(\"class\",\"mk-doc-html-block\")\r\n    \r\n    return { element }\r\n  }\r\n\r\n  static importDOM(): DOMConversionMap | null {\r\n    return {\r\n      img: (dn: HTMLElement) => {\r\n        return  {\r\n          conversion: (domNode: HTMLElement) => {\r\n\r\n            let css = \"\";\r\n            let js = \"\";\r\n\r\n            domNode.childNodes.forEach((node:ChildNode)=>{\r\n\r\n              if(node.nodeName.toLowerCase() == \"style\"){\r\n                css+=\"\\r\\n\"+node.textContent;\r\n                node.remove()\r\n              }\r\n              else if(node.nodeName.toLowerCase() == \"script\"){\r\n                js+=\"\\r\\n\"+node.textContent;\r\n                node.remove()\r\n              }\r\n            });\r\n        \r\n            return domNode.classList.contains(\"mk-doc-html-block\") ?  { \r\n              node:$createHtmlBlockNode({\r\n                content:domNode.innerHTML, css, js\r\n              } as HtmlBlockAttrs) \r\n            } : null;\r\n          },\r\n          priority: 0\r\n        }\r\n      },\r\n    }\r\n  }\r\n\r\n  updateDOM(): false {\r\n    return false\r\n  }\r\n\r\n  getTextContent(\r\n    _includeInert?: boolean | undefined,\r\n    _includeDirectionless?: false | undefined,\r\n  ): string {\r\n    return this.__attrs.content\r\n  }\r\n\r\n  decorate(_editor: LexicalEditor, config: EditorConfig): Component {\r\n    const embedBlockTheme = config.theme.embedBlock || {}\r\n    return h(DocHtmlBlockComponent, {\r\n      baseClass: embedBlockTheme.base || '',\r\n      focusClass: embedBlockTheme.focus || '',\r\n      format: this.__format,\r\n      nodeKey: this.getKey(),\r\n      attrs: this.__attrs\r\n    })\r\n  }\r\n}\r\n\r\n/**\r\n * 创建图片节点\r\n * @param src \r\n * @returns \r\n */\r\nexport function $createHtmlBlockNode(attrs: HtmlBlockAttrs): HtmlBlockNode {\r\n  return new HtmlBlockNode(attrs)\r\n}\r\n\r\n/**\r\n * 判断是否是图片节点\r\n * @param node \r\n * @returns \r\n */\r\nexport function $isHtmlBlockNode(\r\n  node: HtmlBlockNode | LexicalNode | null | undefined,\r\n): node is HtmlBlockNode {\r\n  return node instanceof HtmlBlockNode\r\n}\r\n"],"names":["createCommand","DecoratorBlockNode","h"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BiEA,sBAAc,mBAAmB;AAKzBA,sBAAc,2BAA2B;AAMrG,MAAA,4BAA4DA,sBAAc,2BAA2B;AAe3G,MAAM,sBAAsBC,0BAAAA,mBAAmB;AAAA,EAiBpD,YAAY,OAAuB,QAA4B,KAAe;AAC5E,UAAM,QAAQ,GAAG;AAjBnB;AAkBE,SAAK,UAAU;AAAA,EACjB;AAAA,EAjBA,OAAO,UAAkB;AAChB,WAAA;AAAA,EACT;AAAA,EAEA,OAAO,MAAM,MAAoC;AAC/C,WAAO,IAAI,cAAc,KAAK,SAAS,KAAK,UAAU,KAAK,KAAK;AAAA,EAClE;AAAA,EAEA,OAAO,WAAW,gBAAwD;AAClE,UAAA,OAAO,qBAAqB,eAAe,KAAK;AACjD,SAAA,UAAU,eAAe,MAAM;AAC7B,WAAA;AAAA,EACT;AAAA,EAOA,aAAsC;AAE7B,WAAA;AAAA,MACL,GAAG,MAAM,WAAW;AAAA,MACpB,MAAM,KAAK,QAAQ;AAAA,MACnB,SAAS;AAAA,MACT,OAAO,KAAK;AAAA,IAAA;AAAA,EAEhB;AAAA,EAEA,YAA6B;AAErB,UAAA,UAAU,SAAS,cAAc,KAAK;AAGpC,YAAA,YAAY,KAAK,QAAQ;AAE9B,QAAA,KAAK,QAAQ,IAAG;AACX,YAAA,SAAS,SAAS,cAAc,QAAQ;AACvC,aAAA,YAAY,KAAK,QAAQ;AAChC,cAAQ,OAAO,MAAM;AAAA,IACvB;AAEG,QAAA,KAAK,QAAQ,KAAI;AACZ,YAAA,QAAQ,SAAS,cAAc,OAAO;AACtC,YAAA,YAAY,KAAK,QAAQ;AAC/B,cAAQ,OAAO,KAAK;AAAA,IACtB;AAGQ,YAAA,aAAa,SAAQ,mBAAmB;AAEhD,WAAO,EAAE,QAAQ;AAAA,EACnB;AAAA,EAEA,OAAO,YAAqC;AACnC,WAAA;AAAA,MACL,KAAK,CAAC,OAAoB;AAChB,eAAA;AAAA,UACN,YAAY,CAAC,YAAyB;AAEpC,gBAAI,MAAM;AACV,gBAAI,KAAK;AAED,oBAAA,WAAW,QAAQ,CAAC,SAAiB;AAE3C,kBAAG,KAAK,SAAS,YAAY,KAAK,SAAQ;AACxC,uBAAK,SAAO,KAAK;AACjB,qBAAK,OAAO;AAAA,cAEN,WAAA,KAAK,SAAS,YAAA,KAAiB,UAAS;AAC9C,sBAAI,SAAO,KAAK;AAChB,qBAAK,OAAO;AAAA,cACd;AAAA,YAAA,CACD;AAED,mBAAO,QAAQ,UAAU,SAAS,mBAAmB,IAAK;AAAA,cACxD,MAAK,qBAAqB;AAAA,gBACxB,SAAQ,QAAQ;AAAA,gBAAW;AAAA,gBAAK;AAAA,cAAA,CACf;AAAA,YACjB,IAAA;AAAA,UACN;AAAA,UACA,UAAU;AAAA,QAAA;AAAA,MAEd;AAAA,IAAA;AAAA,EAEJ;AAAA,EAEA,YAAmB;AACV,WAAA;AAAA,EACT;AAAA,EAEA,eACE,eACA,uBACQ;AACR,WAAO,KAAK,QAAQ;AAAA,EACtB;AAAA,EAEA,SAAS,SAAwB,QAAiC;AAChE,UAAM,kBAAkB,OAAO,MAAM,cAAc,CAAA;AACnD,WAAOC,IAAAA,EAAE,uBAAuB;AAAA,MAC9B,WAAW,gBAAgB,QAAQ;AAAA,MACnC,YAAY,gBAAgB,SAAS;AAAA,MACrC,QAAQ,KAAK;AAAA,MACb,SAAS,KAAK,OAAO;AAAA,MACrB,OAAO,KAAK;AAAA,IAAA,CACb;AAAA,EACH;AACF;AAOO,SAAS,qBAAqB,OAAsC;AAClE,SAAA,IAAI,cAAc,KAAK;AAChC;;;;"}

package/dist/cjs/components/basic/doc-editor/plugins/HtmlBlockPlugin/index.vue.js

@@ -0,0 +1,51 @@
+"use strict";
+const vue = require("vue");
+require("@lexical/text");
+const utils = require("@lexical/utils");
+require("@lexical/overflow");
+const lexical = require("lexical");
+require("tiny-invariant");
+require("@lexical/history");
+const useLexicalComposer = require("../../lexical-vue/composables/useLexicalComposer.js");
+require("@lexical/list");
+require("@lexical/dragon");
+require("@lexical/plain-text");
+require("@lexical/rich-text");
+require("@lexical/yjs");
+require("yjs");
+require("../../lexical-vue/components/LexicalDecoratedTeleports.js");
+require("@lexical/html");
+require("@lexical/link");
+require("@lexical/mark");
+require("@lexical/table");
+require("@lexical/hashtag");
+require("@lexical/markdown");
+require("../../lexical-vue/composables/useCollaborationContext.js");
+require("../../lexical-vue/components/LexicalMenu/shared.js");
+require("../../lexical-vue/components/LexicalAutoEmbedPlugin/shared.js");
+require("../../lexical-vue/components/LexicalTypeaheadMenuPlugin/shared.js");
+const index = require("./index.js");
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "index",
+  setup(__props) {
+    const editor = useLexicalComposer.useLexicalComposer();
+    vue.onMounted(() => {
+      if (!editor.hasNodes([index.HtmlBlockNode])) {
+        throw new Error("HtmlBlockPlugin: 自定义HTML代码块节点未注册！");
+      }
+      const unregister = utils.mergeRegister(
+        // 插入
+        editor.registerCommand(index.INSERT_HTML_BLOCK_COMMAND, (payload) => {
+          utils.$insertNodeToNearestRoot(index.$createHtmlBlockNode(payload));
+          return true;
+        }, lexical.COMMAND_PRIORITY_EDITOR)
+      );
+      vue.onUnmounted(() => unregister());
+    });
+    return (_ctx, _cache) => {
+      return null;
+    };
+  }
+});
+module.exports = _sfc_main;
+//# sourceMappingURL=index.vue.js.map

package/dist/cjs/components/basic/doc-editor/plugins/HtmlBlockPlugin/index.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/HtmlBlockPlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useLexicalComposer } from '../../lexical-vue'\nimport { $insertNodeToNearestRoot,mergeRegister } from '@lexical/utils'\nimport { COMMAND_PRIORITY_EDITOR,COMMAND_PRIORITY_LOW,$getSelection,CLICK_COMMAND } from 'lexical'\n\nimport { onMounted, onUnmounted } from 'vue'\nimport { INSERT_HTML_BLOCK_COMMAND,HtmlBlockNode,$createHtmlBlockNode,HtmlBlockAttrs } from './index'\nimport { RegisterToolbarExtend,type ToolbarExtendPlugin } from \"../ToolbarPlugin/defines\"\n\n\nconst editor = useLexicalComposer()\n\nonMounted(() => {\n\n  if (!editor.hasNodes([HtmlBlockNode])){\n    throw new Error('HtmlBlockPlugin: 自定义HTML代码块节点未注册！')\n  }\n \n  // 注册到工具条\n  // RegisterToolbarExtend({\n  //   icon:\"html-code\",\n  //   text:\"自定义代码块\",\n  //   action:async ()=>{\n  //     editor.dispatchCommand(INSERT_HTML_BLOCK_COMMAND,{\n  //       content:`<div class=\"aa\">我是自定义代码块</div>`,\n  //       css:\"div.aa{ width:100%;height:300px }\"\n  //     })\n  //   },\n  //   sort:9\n  // } as ToolbarExtendPlugin)\n\n  // 注册指令\n  const unregister = mergeRegister(\n\n    // 插入\n    editor.registerCommand<HtmlBlockAttrs>(INSERT_HTML_BLOCK_COMMAND,(payload) => {\n      $insertNodeToNearestRoot($createHtmlBlockNode(payload))\n      return true\n    },COMMAND_PRIORITY_EDITOR),\n  );\n\n  onUnmounted(() => unregister())\n})\n</script>\n\n<template />\n"],"names":["useLexicalComposer","onMounted","HtmlBlockNode","mergeRegister","INSERT_HTML_BLOCK_COMMAND","$insertNodeToNearestRoot","$createHtmlBlockNode","COMMAND_PRIORITY_EDITOR","onUnmounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,UAAM,SAASA,mBAAAA;AAEfC,QAAAA,UAAU,MAAM;AAEd,UAAI,CAAC,OAAO,SAAS,CAACC,MAAAA,aAAa,CAAC,GAAE;AAC9B,cAAA,IAAI,MAAM,mCAAmC;AAAA,MACrD;AAgBA,YAAM,aAAaC,MAAA;AAAA;AAAA,QAGjB,OAAO,gBAAgCC,iCAA0B,CAAC,YAAY;AACnDC,yCAAAC,MAAAA,qBAAqB,OAAO,CAAC;AAC/C,iBAAA;AAAA,WACPC,+BAAuB;AAAA,MAAA;AAGfC,sBAAA,MAAM,YAAY;AAAA,IAAA,CAC/B;;;;;;;"}

package/dist/cjs/components/basic/doc-editor/plugins/HtmlBlockPlugin/index.vue2.js

@@ -0,0 +1,4 @@
+"use strict";
+const index_vue_vue_type_script_setup_true_lang = require("./index.vue.js");
+module.exports = index_vue_vue_type_script_setup_true_lang;
+//# sourceMappingURL=index.vue2.js.map

package/dist/cjs/components/basic/doc-editor/plugins/HtmlBlockPlugin/index.vue2.js.map

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

package/dist/cjs/components/basic/doc-editor/plugins/ImagePlugin/ImageEditPanel.js

@@ -5,7 +5,6 @@ const dm = require("@maketribe/dm");
 const elementPlus = require("element-plus");
 const icons = require("@element-plus/icons-vue");
 const MsMaterialTable = require("../../../../../modules/ms/dataviews/ms-material/MsMaterialTable.js");
-require("@maketribe/request");
 const index = require("../../../../../modules/ms/components/material-list/index.js");
 const utils = require("@maketribe/utils");
 require("../../../image-cropper/index.js");