@maketribe/ms-app 3.2.2 → 3.2.4

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

@@ -0,0 +1,112 @@
+"use strict";
+const vue = require("vue");
+const lexical = require("lexical");
+const utils = require("@lexical/utils");
+require("@lexical/text");
+require("@lexical/overflow");
+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 lowPriority = 1;
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "ImageTools",
+  setup(__props) {
+    const editor = useLexicalComposer.useLexicalComposer();
+    const alignList = vue.ref(["left", "center", "right"]);
+    const alignValue = vue.ref("left");
+    const isFloat = vue.ref(false);
+    const setImageAttr = (name, value) => {
+      editor.dispatchCommand(index.IMAGE_ATTRS_CHANGE, { value, name });
+    };
+    vue.onMounted(() => {
+      const unregisterMergeListener = utils.mergeRegister(
+        editor.registerCommand(index.IMAGE_ATTRS_CHANGE, (payload) => {
+          if (payload.name == "align") {
+            alignValue.value = payload.value;
+          }
+          return false;
+        }, lowPriority),
+        editor.registerCommand(lexical.SELECTION_CHANGE_COMMAND, (payload, newEditor) => {
+          var _a;
+          const selection = lexical.$getSelection();
+          if (lexical.$isNodeSelection(selection)) {
+            const node = selection.getNodes()[0];
+            if ((node == null ? void 0 : node.__attrs) != null && node.__type == index.ImageNode.getType()) {
+              isFloat.value = node.__attrs.float != null && node.__attrs.float != "";
+              alignValue.value = isFloat.value ? node.__attrs.float : ((_a = node.getParent()) == null ? void 0 : _a.getFormatType()) ?? "left";
+            }
+          }
+          return false;
+        }, lowPriority)
+      );
+      vue.onUnmounted(() => unregisterMergeListener());
+    });
+    return (_ctx, _cache) => {
+      const _component_MKSvgIcon = vue.resolveComponent("MKSvgIcon");
+      const _component_el_button = vue.resolveComponent("el-button");
+      const _component_el_button_group = vue.resolveComponent("el-button-group");
+      return vue.openBlock(), vue.createBlock(_component_el_button_group, null, {
+        default: vue.withCtx(() => [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(alignList.value, (item) => {
+            return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: item }, [
+              (isFloat.value ? item != "center" : true) ? (vue.openBlock(), vue.createBlock(_component_el_button, {
+                key: 0,
+                text: "",
+                class: vue.normalizeClass({ active: alignValue.value == item }),
+                onClick: ($event) => setImageAttr("align", item)
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(_component_MKSvgIcon, {
+                    iconClass: `doc-align-${item}`
+                  }, null, 8, ["iconClass"])
+                ]),
+                _: 2
+              }, 1032, ["class", "onClick"])) : vue.createCommentVNode("", true)
+            ], 64);
+          }), 128)),
+          vue.createVNode(_component_el_button, {
+            text: "",
+            onClick: _cache[0] || (_cache[0] = ($event) => setImageAttr("edit", null))
+          }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(_component_MKSvgIcon, { iconClass: `Edit` })
+            ]),
+            _: 1
+          }),
+          !isFloat.value ? (vue.openBlock(), vue.createBlock(_component_el_button, {
+            key: 0,
+            text: "",
+            type: "danger",
+            onClick: _cache[1] || (_cache[1] = ($event) => vue.unref(editor).dispatchCommand(vue.unref(index.REMOVE_IMAGE_COMMAND), null))
+          }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(_component_MKSvgIcon, { iconClass: `Delete` })
+            ]),
+            _: 1
+          })) : vue.createCommentVNode("", true)
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+module.exports = _sfc_main;
+//# sourceMappingURL=ImageTools.vue.js.map

package/dist/cjs/components/basic/doc-editor/plugins/ImagePlugin/ImageTools.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageTools.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ImagePlugin/ImageTools.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { \r\n  type CommandListenerPriority,\r\n  ElementFormatType,SELECTION_CHANGE_COMMAND,$getSelection,$isNodeSelection } from 'lexical'\r\nimport { mergeRegister } from '@lexical/utils'\r\nimport { onMounted, onUnmounted,ref } from 'vue'\r\nimport { useLexicalComposer } from '../../lexical-vue'\r\nimport { ImageAttrData,IMAGE_ATTRS_CHANGE,REMOVE_IMAGE_COMMAND,ImageNode } from './index'\r\n\r\n \r\nconst lowPriority: CommandListenerPriority = 1\r\nconst editor = useLexicalComposer()\r\n// 对齐方式\r\nconst alignList = ref<ElementFormatType[]>([\"left\",\"center\",\"right\"])\r\nconst alignValue = ref<any>(\"left\")\r\nconst isFloat = ref<boolean>(false);\r\n\r\n// 设置图片属性\r\nconst setImageAttr = (name:string,value:string|undefined|null)=>{\r\n  editor.dispatchCommand(IMAGE_ATTRS_CHANGE,{value,name} as ImageAttrData)\r\n}\r\n\r\nonMounted(()=>{\r\n\r\n  const unregisterMergeListener = mergeRegister(\r\n    editor.registerCommand(IMAGE_ATTRS_CHANGE, (payload:ImageAttrData) => {\r\n      if(payload.name == \"align\"){\r\n        alignValue.value = payload.value;\r\n      }\r\n      return false;\r\n    },lowPriority),\r\n    editor.registerCommand(SELECTION_CHANGE_COMMAND, (payload, newEditor) => {\r\n        \r\n      const selection = $getSelection();\r\n\r\n      if($isNodeSelection(selection)){\r\n\r\n        const node = selection.getNodes()[0] as ImageNode;\r\n\r\n        // 是图片\r\n        if(node?.__attrs != null && node.__type == ImageNode.getType()){\r\n          // 判断是否有浮动\r\n          isFloat.value = node.__attrs.float != null && node.__attrs.float != \"\";\r\n          alignValue.value = isFloat.value ? node.__attrs.float : node.getParent()?.getFormatType() ?? \"left\"\r\n        }\r\n        \r\n      }\r\n      return false;\r\n    },lowPriority)\r\n  )\r\n\r\n  // 卸载\r\n  onUnmounted(() => unregisterMergeListener())\r\n\r\n})\r\n\r\n</script>\r\n\r\n<template>\r\n   <el-button-group>\r\n    <template v-for=\"item in alignList\" :key=\"item\">\r\n      <el-button text :class=\"{active:alignValue == item}\" v-if=\"isFloat ? item != 'center':true\" @click=\"setImageAttr('align',item)\">\r\n        <MKSvgIcon :iconClass=\"`doc-align-${item}`\" /> \r\n      </el-button>\r\n    </template>\r\n    <el-button text  @click=\"setImageAttr('edit',null)\">\r\n      <MKSvgIcon :iconClass=\"`Edit`\" /> \r\n    </el-button>\r\n    <el-button text type=\"danger\" v-if=\"!isFloat\" @click=\"editor.dispatchCommand(REMOVE_IMAGE_COMMAND,null)\">\r\n      <MKSvgIcon :iconClass=\"`Delete`\" /> \r\n    </el-button>\r\n  </el-button-group>\r\n</template>\r\n"],"names":["useLexicalComposer","ref","IMAGE_ATTRS_CHANGE","onMounted","mergeRegister","SELECTION_CHANGE_COMMAND","$getSelection","$isNodeSelection","ImageNode","onUnmounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAM,cAAuC;;;;AAC7C,UAAM,SAASA,mBAAAA;AAEf,UAAM,YAAYC,IAAAA,IAAyB,CAAC,QAAO,UAAS,OAAO,CAAC;AAC9D,UAAA,aAAaA,QAAS,MAAM;AAC5B,UAAA,UAAUA,QAAa,KAAK;AAG5B,UAAA,eAAe,CAAC,MAAY,UAA8B;AAC9D,aAAO,gBAAgBC,MAAA,oBAAmB,EAAC,OAAM,KAAsB,CAAA;AAAA,IAAA;AAGzEC,QAAAA,UAAU,MAAI;AAEZ,YAAM,0BAA0BC,MAAA;AAAA,QAC9B,OAAO,gBAAgBF,0BAAoB,CAAC,YAA0B;AACjE,cAAA,QAAQ,QAAQ,SAAQ;AACzB,uBAAW,QAAQ,QAAQ;AAAA,UAC7B;AACO,iBAAA;AAAA,WACP,WAAW;AAAA,QACb,OAAO,gBAAgBG,QAAAA,0BAA0B,CAAC,SAAS,cAAc;;AAEvE,gBAAM,YAAYC,QAAAA;AAEf,cAAAC,QAAAA,iBAAiB,SAAS,GAAE;AAE7B,kBAAM,OAAO,UAAU,SAAS,EAAE,CAAC;AAGnC,iBAAG,6BAAM,YAAW,QAAQ,KAAK,UAAUC,MAAAA,UAAU,WAAU;AAE7D,sBAAQ,QAAQ,KAAK,QAAQ,SAAS,QAAQ,KAAK,QAAQ,SAAS;AACzD,yBAAA,QAAQ,QAAQ,QAAQ,KAAK,QAAQ,UAAQ,UAAK,UAAA,MAAL,mBAAkB,oBAAmB;AAAA,YAC/F;AAAA,UAEF;AACO,iBAAA;AAAA,WACP,WAAW;AAAA,MAAA;AAIHC,sBAAA,MAAM,yBAAyB;AAAA,IAAA,CAE5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

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

package/dist/cjs/components/basic/doc-editor/plugins/ImagePlugin/ImageTools.vue2.js.map

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

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

@@ -1,11 +1,13 @@
 "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" });
-require("./DocImageComponent.js");
-require("vue");
+const lexical = require("lexical");
+const vue = require("vue");
 require("@lexical/text");
 require("@lexical/utils");
 require("@lexical/overflow");
-const lexical = require("lexical");
 require("tiny-invariant");
 require("@lexical/history");
 require("@lexical/list");
@@ -20,13 +22,127 @@ 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 INSERT_IMAGE_COMMAND = lexical.createCommand(
-  "INSERT_IMAGE_COMMAND"
-);
+const DocImageComponent = require("./DocImageComponent.js");
+const IMAGE_ATTRS_CHANGE = lexical.createCommand("IMAGE_ATTRS_CHANGE");
+const REMOVE_IMAGE_COMMAND = lexical.createCommand("REMOVE_IMAGE_COMMAND");
+const INSERT_IMAGE_COMMAND = lexical.createCommand("INSERT_IMAGE_COMMAND");
+class ImageNode extends LexicalDecoratorBlockNode.DecoratorBlockNode {
+  constructor(attrs, format, key) {
+    super(format, key);
+    __publicField(this, "__attrs");
+    this.__attrs = attrs;
+  }
+  static getType() {
+    return "Image";
+  }
+  static clone(node) {
+    return new ImageNode(node.__attrs, node.__format, node.__key);
+  }
+  static importJSON(serializedNode) {
+    const node = $createImageNode(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("img");
+    element.setAttribute("src", this.__attrs.src);
+    if (this.__attrs.alt != null) {
+      element.setAttribute("alt", this.__attrs.alt ?? "");
+    }
+    element.setAttribute("style", this.getStyles().join(";"));
+    return { element };
+  }
+  static importDOM() {
+    return {
+      img: (dn) => {
+        return {
+          conversion: (domNode) => {
+            const src = domNode.getAttribute("src");
+            const alt = domNode.getAttribute("alt");
+            console.log(domNode.style.width);
+            return domNode.tagName.toLowerCase() == "img" && src != null ? {
+              node: $createImageNode({
+                src,
+                alt,
+                width: domNode.style.width,
+                height: domNode.style.height,
+                maxWidth: domNode.style.maxWidth || "100%",
+                maxHeight: domNode.style.maxHeight,
+                margin: domNode.style.margin,
+                float: domNode.style.float
+              })
+            } : null;
+          },
+          priority: 0
+        };
+      }
+    };
+  }
+  setFloat(pos) {
+    this.__attrs.float = pos;
+  }
+  getStyles() {
+    const style = [];
+    if (this.__attrs.width) {
+      style.push("width:" + this.__attrs.width);
+    }
+    if (this.__attrs.height) {
+      style.push("height:" + this.__attrs.height);
+    }
+    if (this.__attrs.float) {
+      style.push("float:" + this.__attrs.float);
+    }
+    if (this.__attrs.maxWidth) {
+      style.push("max-width:" + this.__attrs.maxWidth);
+    }
+    if (this.__attrs.maxHeight) {
+      style.push("max-height:" + this.__attrs.maxHeight);
+    }
+    if (this.__attrs.float) {
+      style.push("float:" + this.__attrs.float);
+    }
+    if (this.__attrs.margin) {
+      style.push("margin:" + this.__attrs.margin);
+    }
+    return style;
+  }
+  updateDOM() {
+    return false;
+  }
+  getTextContent(_includeInert, _includeDirectionless) {
+    return this.__attrs.src;
+  }
+  decorate(_editor, config) {
+    const embedBlockTheme = config.theme.embedBlock || {};
+    return vue.h(DocImageComponent, {
+      baseClass: embedBlockTheme.base || "",
+      focusClass: embedBlockTheme.focus || "",
+      format: this.__format,
+      nodeKey: this.getKey(),
+      attrs: this.__attrs
+    });
+  }
+}
+function $createImageNode(attrs) {
+  return new ImageNode(attrs);
+}
+exports.$createImageNode = $createImageNode;
+exports.IMAGE_ATTRS_CHANGE = IMAGE_ATTRS_CHANGE;
 exports.INSERT_IMAGE_COMMAND = INSERT_IMAGE_COMMAND;
+exports.ImageNode = ImageNode;
+exports.REMOVE_IMAGE_COMMAND = REMOVE_IMAGE_COMMAND;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ImagePlugin/index.ts"],"sourcesContent":["\r\n\r\nimport {\r\n  ImageNode,\r\n  $createImageNode,\r\n  $isImageNode,\r\n} from \"./ImageNode\"\r\n\r\n\r\nimport type { LexicalCommand } from 'lexical'\r\nimport { createCommand } from 'lexical'\r\n\r\nexport const INSERT_IMAGE_COMMAND: LexicalCommand<string> = createCommand(\r\n  'INSERT_IMAGE_COMMAND',\r\n)\r\n\r\nexport {\r\n  ImageNode,\r\n  $createImageNode,\r\n  $isImageNode,\r\n}\r\n"],"names":["createCommand"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAYO,MAAM,uBAA+CA,QAAA;AAAA,EAC1D;AACF;;"}
+{"version":3,"file":"index.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ImagePlugin/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 DocImageComponent from './DocImageComponent'\r\n\r\n/**\r\n * 图片属性类型\r\n */\r\nexport type ImageAttrs = {\r\n  src:string,\r\n  alt?:string,\r\n  width?:string,\r\n  height?:string,\r\n  float?:string,\r\n  maxWidth?:string,\r\n  maxHeight?:string,\r\n  margin?:string\r\n};\r\n\r\n/**\r\n * 图片属性数据\r\n */\r\nexport type ImageAttrData = { name:string, value:string|null|undefined }\r\n\r\n/**\r\n * 图片属性改变\r\n */\r\nexport const IMAGE_ATTRS_CHANGE: LexicalCommand<ImageAttrData> = createCommand('IMAGE_ATTRS_CHANGE')\r\n\r\n\r\n/**\r\n * 删除图片\r\n */\r\nexport const REMOVE_IMAGE_COMMAND: LexicalCommand<undefined|null> = createCommand('REMOVE_IMAGE_COMMAND')\r\n\r\n\r\n/**\r\n * 插入图片指令\r\n */\r\nexport const INSERT_IMAGE_COMMAND: LexicalCommand<ImageAttrs> = createCommand('INSERT_IMAGE_COMMAND')\r\n\r\n/**\r\n * 图片节点序列化\r\n */\r\nexport type SerializedImageNode = Spread<\r\n  {\r\n    attrs: ImageAttrs\r\n  },\r\n  SerializedDecoratorBlockNode\r\n>\r\n\r\n/**\r\n * 定义图片节点\r\n */\r\nexport class ImageNode extends DecoratorBlockNode {\r\n  __attrs: ImageAttrs\r\n\r\n  static getType(): string {\r\n    return 'Image'\r\n  }\r\n\r\n  static clone(node: ImageNode): ImageNode {\r\n    return new ImageNode(node.__attrs, node.__format, node.__key)\r\n  }\r\n\r\n  static importJSON(serializedNode: SerializedImageNode): ImageNode {\r\n    const node = $createImageNode(serializedNode.attrs)\r\n    node.setFormat(serializedNode.format)\r\n    return node\r\n  }\r\n\r\n  constructor(attrs: ImageAttrs, format?: ElementFormatType, key?: NodeKey) {\r\n    super(format, key)\r\n    this.__attrs = attrs\r\n  }\r\n\r\n  exportJSON(): SerializedImageNode {\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('img') \r\n\r\n    element.setAttribute('src', this.__attrs.src) \r\n\r\n    if(this.__attrs.alt  != null){\r\n      element.setAttribute('alt', this.__attrs.alt ?? \"\")\r\n    }\r\n\r\n    element.setAttribute(\"style\",this.getStyles().join(\";\"))\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            const src = domNode.getAttribute('src');\r\n            const alt = domNode.getAttribute('alt');\r\n            console.log(domNode.style.width);\r\n            return domNode.tagName.toLowerCase() == \"img\" && src != null ?  { \r\n              node:$createImageNode({\r\n                src:src,\r\n                alt:alt,\r\n                width:domNode.style.width,\r\n                height:domNode.style.height,\r\n                maxWidth:domNode.style.maxWidth || \"100%\",\r\n                maxHeight:domNode.style.maxHeight,\r\n                margin:domNode.style.margin,\r\n                float:domNode.style.float\r\n              } as ImageAttrs) \r\n            } : null;\r\n          },\r\n          priority: 0\r\n        }\r\n      },\r\n    }\r\n  }\r\n\r\n  setFloat(pos?:string){\r\n    this.__attrs.float = pos;\r\n  }\r\n\r\n  getStyles():string[]{\r\n\r\n    const style : string[] = [];\r\n\r\n    if(this.__attrs.width){\r\n      style.push(\"width:\"+this.__attrs.width)\r\n    }\r\n    if(this.__attrs.height){\r\n      style.push(\"height:\"+this.__attrs.height)\r\n    }\r\n    if(this.__attrs.float){\r\n      style.push(\"float:\"+this.__attrs.float)\r\n    }\r\n    if(this.__attrs.maxWidth){\r\n      style.push(\"max-width:\"+this.__attrs.maxWidth)\r\n    }\r\n    if(this.__attrs.maxHeight){\r\n      style.push(\"max-height:\"+this.__attrs.maxHeight)\r\n    }\r\n    if(this.__attrs.float){\r\n      style.push(\"float:\"+this.__attrs.float)\r\n    }\r\n    if(this.__attrs.margin){\r\n      style.push(\"margin:\"+this.__attrs.margin)\r\n    }\r\n\r\n    return style\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.src\r\n  }\r\n\r\n  decorate(_editor: LexicalEditor, config: EditorConfig): Component {\r\n    const embedBlockTheme = config.theme.embedBlock || {}\r\n    return h(DocImageComponent, {\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 $createImageNode(attrs: ImageAttrs): ImageNode {\r\n  return new ImageNode(attrs)\r\n}\r\n\r\n/**\r\n * 判断是否是图片节点\r\n * @param node \r\n * @returns \r\n */\r\nexport function $isImageNode(\r\n  node: ImageNode | LexicalNode | null | undefined,\r\n): node is ImageNode {\r\n  return node instanceof ImageNode\r\n}\r\n"],"names":["createCommand","DecoratorBlockNode","h"],"mappings":"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"}

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

@@ -1,16 +1,16 @@
 "use strict";
 const vue = require("vue");
-require("@lexical/text");
 const utils = require("@lexical/utils");
-require("@lexical/overflow");
 const lexical = require("lexical");
+const richText = require("@lexical/rich-text");
+require("@lexical/text");
+require("@lexical/overflow");
 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");
@@ -25,24 +25,61 @@ 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 ImageNode = require("./ImageNode.js");
+const defines = require("../ToolbarPlugin/defines.js");
+const ImageEditPanel = require("./ImageEditPanel.js");
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "index",
   setup(__props) {
+    const ACCEPTABLE_IMAGE_TYPES = [
+      "image/",
+      "image/heic",
+      "image/heif",
+      "image/gif",
+      "image/webp"
+    ];
     const editor = useLexicalComposer.useLexicalComposer();
     vue.onMounted(() => {
-      if (!editor.hasNodes([ImageNode.ImageNode])) {
+      if (!editor.hasNodes([index.ImageNode])) {
         throw new Error("ImagePlugin: 图片节点未注册！");
       }
+      defines.RegisterToolbarExtend({
+        icon: "Picture",
+        text: "图片",
+        action: async () => {
+          ImageEditPanel.ShowImageEditPanel({
+            src: "",
+            alt: "",
+            width: "",
+            height: "",
+            maxWidth: "100%",
+            maxHeight: "",
+            margin: ""
+          });
+        },
+        sort: 11
+      });
       const unregister = utils.mergeRegister(
-        editor.registerCommand(
-          index.INSERT_IMAGE_COMMAND,
-          (payload) => {
-            utils.$insertNodeToNearestRoot(ImageNode.$createImageNode(payload));
-            return true;
-          },
-          lexical.COMMAND_PRIORITY_EDITOR
-        )
+        // 插入图片
+        editor.registerCommand(index.INSERT_IMAGE_COMMAND, (payload) => {
+          utils.$insertNodeToNearestRoot(index.$createImageNode(payload));
+          return true;
+        }, lexical.COMMAND_PRIORITY_EDITOR),
+        // 剪切板图片
+        editor.registerCommand(richText.DRAG_DROP_PASTE, (files) => {
+          (async () => {
+            const filesResult = await utils.mediaFileReader(files, [ACCEPTABLE_IMAGE_TYPES].flatMap((x) => x));
+            for (const { file, result } of filesResult) {
+              if (utils.isMimeType(file, ACCEPTABLE_IMAGE_TYPES)) {
+                editor.dispatchCommand(index.INSERT_IMAGE_COMMAND, {
+                  src: result,
+                  alt: file.name,
+                  maxWidth: ":100%"
+                });
+              }
+            }
+          })();
+          return true;
+        }, lexical.COMMAND_PRIORITY_LOW)
       );
       vue.onUnmounted(() => unregister());
     });

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

@@ -1 +1 @@
-{"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ImagePlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { useLexicalComposer } from '../../lexical-vue'\r\nimport { $insertNodeToNearestRoot,mergeRegister } from '@lexical/utils'\r\nimport { COMMAND_PRIORITY_EDITOR } from 'lexical'\r\n\r\nimport { onMounted, onUnmounted } from 'vue'\r\nimport { INSERT_IMAGE_COMMAND,$createImageNode,ImageNode } from './index'\r\n\r\nconst editor = useLexicalComposer()\r\n\r\nonMounted(() => {\r\n\r\n  if (!editor.hasNodes([ImageNode])){\r\n    throw new Error('ImagePlugin: 图片节点未注册！')\r\n  }\r\n\r\n  // 注册指令\r\n  const unregister = mergeRegister(\r\n    editor.registerCommand<string>(\r\n      INSERT_IMAGE_COMMAND,\r\n      (payload) => {\r\n\r\n        $insertNodeToNearestRoot($createImageNode(payload))\r\n\r\n        return true\r\n      },\r\n      COMMAND_PRIORITY_EDITOR\r\n    )\r\n  );\r\n\r\n  onUnmounted(() =>   unregister())\r\n})\r\n</script>\r\n\r\n<template />\r\n"],"names":["useLexicalComposer","onMounted","ImageNode","mergeRegister","INSERT_IMAGE_COMMAND","$insertNodeToNearestRoot","$createImageNode","COMMAND_PRIORITY_EDITOR","onUnmounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,UAAM,SAASA,mBAAAA;AAEfC,QAAAA,UAAU,MAAM;AAEd,UAAI,CAAC,OAAO,SAAS,CAACC,UAAAA,SAAS,CAAC,GAAE;AAC1B,cAAA,IAAI,MAAM,uBAAuB;AAAA,MACzC;AAGA,YAAM,aAAaC,MAAA;AAAA,QACjB,OAAO;AAAA,UACLC,MAAA;AAAA,UACA,CAAC,YAAY;AAEcC,2CAAAC,UAAAA,iBAAiB,OAAO,CAAC;AAE3C,mBAAA;AAAA,UACT;AAAA,UACAC,QAAA;AAAA,QACF;AAAA,MAAA;AAGUC,sBAAA,MAAQ,YAAY;AAAA,IAAA,CACjC;;;;;;;"}
+{"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ImagePlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { $insertNodeToNearestRoot,mergeRegister,mediaFileReader,isMimeType } from '@lexical/utils'\r\nimport { COMMAND_PRIORITY_EDITOR,COMMAND_PRIORITY_LOW,$getSelection } from 'lexical'\r\nimport { DRAG_DROP_PASTE } from '@lexical/rich-text'\r\nimport { useLexicalComposer } from '../../lexical-vue'\r\nimport { onMounted, onUnmounted } from 'vue'\r\nimport { INSERT_IMAGE_COMMAND,$createImageNode,ImageNode,type ImageAttrs } from './index'\r\nimport { RegisterToolbarExtend,type ToolbarExtendPlugin } from \"../ToolbarPlugin/defines\"\r\nimport { ShowImageEditPanel } from \"./ImageEditPanel\"\r\n\r\nconst ACCEPTABLE_IMAGE_TYPES = [\r\n  'image/',\r\n  'image/heic',\r\n  'image/heif',\r\n  'image/gif',\r\n  'image/webp',\r\n]\r\n\r\nconst editor = useLexicalComposer()\r\n\r\nonMounted(() => {\r\n\r\n  if (!editor.hasNodes([ImageNode])){\r\n    throw new Error('ImagePlugin: 图片节点未注册！')\r\n  }\r\n\r\n  // 注册到工具条\r\n  RegisterToolbarExtend({\r\n    icon:\"Picture\",\r\n    text:\"图片\",\r\n    action:async ()=>{\r\n      // 显示图片编辑面板\r\n      ShowImageEditPanel({\r\n        src:\"\", alt:\"\", width:\"\", height:\"\", maxWidth:\"100%\", maxHeight:\"\", margin:\"\"\r\n      } as ImageAttrs);\r\n    },\r\n    sort:11\r\n  } as ToolbarExtendPlugin)\r\n\r\n  // 注册指令\r\n  const unregister = mergeRegister(\r\n\r\n    // 插入图片\r\n    editor.registerCommand<ImageAttrs>(INSERT_IMAGE_COMMAND,(payload) => {\r\n      $insertNodeToNearestRoot($createImageNode(payload))\r\n      return true\r\n    },COMMAND_PRIORITY_EDITOR),\r\n\r\n    // 剪切板图片\r\n    editor.registerCommand(DRAG_DROP_PASTE,(files) => {\r\n\r\n      (async () => {\r\n\r\n        const filesResult = await mediaFileReader(files, [ACCEPTABLE_IMAGE_TYPES].flatMap((x) => x))\r\n\r\n        for (const {file, result} of filesResult) {\r\n\r\n          if (isMimeType(file, ACCEPTABLE_IMAGE_TYPES)) {\r\n\r\n            editor.dispatchCommand(INSERT_IMAGE_COMMAND, {\r\n              src:result,\r\n              alt:file.name,\r\n              maxWidth:\":100%\"\r\n            } as ImageAttrs)\r\n          }\r\n        }\r\n      })()\r\n\r\n      return true\r\n    },COMMAND_PRIORITY_LOW)\r\n  );\r\n\r\n  onUnmounted(() => unregister())\r\n})\r\n</script>\r\n\r\n<template />\r\n"],"names":["useLexicalComposer","onMounted","ImageNode","RegisterToolbarExtend","ShowImageEditPanel","mergeRegister","INSERT_IMAGE_COMMAND","$insertNodeToNearestRoot","$createImageNode","COMMAND_PRIORITY_EDITOR","DRAG_DROP_PASTE","mediaFileReader","isMimeType","COMMAND_PRIORITY_LOW","onUnmounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,UAAM,yBAAyB;AAAA,MAC7B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGF,UAAM,SAASA,mBAAAA;AAEfC,QAAAA,UAAU,MAAM;AAEd,UAAI,CAAC,OAAO,SAAS,CAACC,MAAAA,SAAS,CAAC,GAAE;AAC1B,cAAA,IAAI,MAAM,uBAAuB;AAAA,MACzC;AAGsBC,oCAAA;AAAA,QACpB,MAAK;AAAA,QACL,MAAK;AAAA,QACL,QAAO,YAAU;AAEIC,4CAAA;AAAA,YACjB,KAAI;AAAA,YAAI,KAAI;AAAA,YAAI,OAAM;AAAA,YAAI,QAAO;AAAA,YAAI,UAAS;AAAA,YAAQ,WAAU;AAAA,YAAI,QAAO;AAAA,UAAA,CAC9D;AAAA,QACjB;AAAA,QACA,MAAK;AAAA,MAAA,CACiB;AAGxB,YAAM,aAAaC,MAAA;AAAA;AAAA,QAGjB,OAAO,gBAA4BC,4BAAqB,CAAC,YAAY;AAC1CC,yCAAAC,MAAAA,iBAAiB,OAAO,CAAC;AAC3C,iBAAA;AAAA,WACPC,+BAAuB;AAAA;AAAA,QAGzB,OAAO,gBAAgBC,0BAAgB,CAAC,UAAU;AAEhD,WAAC,YAAY;AAEL,kBAAA,cAAc,MAAMC,sBAAgB,OAAO,CAAC,sBAAsB,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC;AAE3F,uBAAW,EAAC,MAAM,OAAM,KAAK,aAAa;AAEpC,kBAAAC,MAAA,WAAW,MAAM,sBAAsB,GAAG;AAE5C,uBAAO,gBAAgBN,4BAAsB;AAAA,kBAC3C,KAAI;AAAA,kBACJ,KAAI,KAAK;AAAA,kBACT,UAAS;AAAA,gBAAA,CACI;AAAA,cACjB;AAAA,YACF;AAAA,UAAA;AAGK,iBAAA;AAAA,WACPO,4BAAoB;AAAA,MAAA;AAGZC,sBAAA,MAAM,YAAY;AAAA,IAAA,CAC/B;;;;;;;"}

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

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lexical = require("lexical");
+const index = require("../ImagePlugin/index.js");
+const BaseBlockNode = require("../BaseBlockNode.js");
+const INSERT_IMAGETEXT_COMMAND = lexical.createCommand(
+  "INSERT_IMAGETEXT_COMMAND"
+);
+class ImageTextNode extends BaseBlockNode.BaseBlockNode {
+  static getType() {
+    return "image-text";
+  }
+  static clone(node) {
+    return new ImageTextNode(node.__key);
+  }
+  static importJSON(serializedNode) {
+    return $createImageTextNode();
+  }
+  static getMakeClassName() {
+    return `${BaseBlockNode.BaseBlockNode.MarkClassName}-${ImageTextNode.getType()}`;
+  }
+  static importDOM() {
+    return {
+      "div": (domNode) => {
+        return {
+          conversion: (domNode2) => {
+            return domNode2.classList.contains(ImageTextNode.getMakeClassName()) ? { node: $createImageTextNode() } : null;
+          },
+          priority: 0
+        };
+      }
+    };
+  }
+  constructor(key) {
+    super(ImageTextNode.getType(), key);
+  }
+}
+function $createImageTextNode(attrs) {
+  const imageText = new ImageTextNode();
+  if (attrs != null) {
+    imageText.append(index.$createImageNode(attrs));
+    imageText.append(lexical.$createParagraphNode());
+  }
+  return imageText;
+}
+exports.$createImageTextNode = $createImageTextNode;
+exports.INSERT_IMAGETEXT_COMMAND = INSERT_IMAGETEXT_COMMAND;
+exports.ImageTextNode = ImageTextNode;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ImageTextPlugin/index.ts"],"sourcesContent":["\r\n\r\n\r\n\r\n\r\nimport type { DOMConversionMap, LexicalCommand, LexicalNode, NodeKey, Spread } from 'lexical'\r\nimport { createCommand,$createParagraphNode } from 'lexical'\r\nimport { ImageAttrs,$createImageNode } from '../ImagePlugin'\r\nimport { BaseBlockNode,SerializedMkDocEditBlockComponentNode } from '../BaseBlockNode'\r\n\r\n/**\r\n * 插入图文\r\n */\r\nexport const INSERT_IMAGETEXT_COMMAND: LexicalCommand<ImageAttrs> = createCommand(\r\n  'INSERT_IMAGETEXT_COMMAND',\r\n)\r\n\r\n\r\n/**\r\n * 图文节点序列化\r\n */\r\nexport type SerializedImageTextNode = Spread<{},SerializedMkDocEditBlockComponentNode>\r\n\r\n/**\r\n * 图文节点\r\n */\r\nexport class ImageTextNode extends BaseBlockNode{\r\n\r\n  static getType(): string {\r\n    return \"image-text\";\r\n  }\r\n\r\n  static clone(node: ImageTextNode): ImageTextNode {\r\n    return new ImageTextNode(node.__key)\r\n  }\r\n\r\n  static importJSON(serializedNode: SerializedImageTextNode): ImageTextNode {\r\n    return $createImageTextNode()\r\n  }\r\n\r\n  static getMakeClassName(): string {\r\n    return `${BaseBlockNode.MarkClassName}-${ImageTextNode.getType()}`\r\n  }\r\n\r\n  static importDOM(): DOMConversionMap | null {\r\n    return {\r\n      \"div\" : (domNode: HTMLElement) => {\r\n        return  {\r\n          conversion: (domNode : HTMLElement)=>{\r\n            return domNode.classList.contains(ImageTextNode.getMakeClassName()) ? { node:$createImageTextNode() } : null;\r\n          },\r\n          priority: 0\r\n        }\r\n      },\r\n    }\r\n  }\r\n\r\n\r\n  constructor(key?: NodeKey) {\r\n    super(ImageTextNode.getType(),key)\r\n  }\r\n}\r\n\r\n/**\r\n * 创建图片节点\r\n * @param src \r\n * @returns \r\n */\r\nexport function $createImageTextNode(attrs?: ImageAttrs): ImageTextNode {\r\n\r\n  const imageText = new ImageTextNode()\r\n\r\n  if(attrs != null){\r\n    imageText.append($createImageNode(attrs))\r\n    imageText.append($createParagraphNode())\r\n  }\r\n\r\n  return imageText;\r\n}\r\n\r\n/**\r\n * 判断是否是图文节点\r\n * @param node \r\n * @returns \r\n */\r\nexport function $isImageTextNode(\r\n  node: ImageTextNode | LexicalNode | null | undefined,\r\n): node is ImageTextNode {\r\n  return node instanceof ImageTextNode\r\n}\r\n"],"names":["createCommand","BaseBlockNode","domNode","$createImageNode","$createParagraphNode"],"mappings":";;;;;AAaO,MAAM,2BAAuDA,QAAA;AAAA,EAClE;AACF;AAWO,MAAM,sBAAsBC,cAAAA,cAAa;AAAA,EAE9C,OAAO,UAAkB;AAChB,WAAA;AAAA,EACT;AAAA,EAEA,OAAO,MAAM,MAAoC;AACxC,WAAA,IAAI,cAAc,KAAK,KAAK;AAAA,EACrC;AAAA,EAEA,OAAO,WAAW,gBAAwD;AACxE,WAAO,qBAAqB;AAAA,EAC9B;AAAA,EAEA,OAAO,mBAA2B;AAChC,WAAO,GAAGA,cAAAA,cAAc,aAAa,IAAI,cAAc,QAAS,CAAA;AAAA,EAClE;AAAA,EAEA,OAAO,YAAqC;AACnC,WAAA;AAAA,MACL,OAAQ,CAAC,YAAyB;AACxB,eAAA;AAAA,UACN,YAAY,CAACC,aAAwB;AAC5BA,mBAAAA,SAAQ,UAAU,SAAS,cAAc,kBAAkB,IAAI,EAAE,MAAK,qBAAqB,EAAA,IAAM;AAAA,UAC1G;AAAA,UACA,UAAU;AAAA,QAAA;AAAA,MAEd;AAAA,IAAA;AAAA,EAEJ;AAAA,EAGA,YAAY,KAAe;AACnB,UAAA,cAAc,QAAQ,GAAE,GAAG;AAAA,EACnC;AACF;AAOO,SAAS,qBAAqB,OAAmC;AAEhE,QAAA,YAAY,IAAI;AAEtB,MAAG,SAAS,MAAK;AACL,cAAA,OAAOC,uBAAiB,KAAK,CAAC;AAC9B,cAAA,OAAOC,8BAAsB;AAAA,EACzC;AAEO,SAAA;AACT;;;;"}

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

@@ -0,0 +1,80 @@
+"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 defines = require("../ToolbarPlugin/defines.js");
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "index",
+  setup(__props) {
+    const editor = useLexicalComposer.useLexicalComposer();
+    vue.onMounted(() => {
+      if (!editor.hasNodes([index.ImageTextNode])) {
+        throw new Error("ImageTextPlugin: 图文节点未注册！");
+      }
+      defines.RegisterToolbarExtend({
+        icon: "richtext-outline",
+        text: "图文",
+        action: async () => {
+          editor.dispatchCommand(index.INSERT_IMAGETEXT_COMMAND, {
+            src: "https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1prXny.img?w=768&h=479&m=6&x=142&y=148&s=131&d=131",
+            float: "left",
+            width: "200px",
+            margin: "0 10px 10px 0"
+          });
+        },
+        sort: 10
+      });
+      const unregister = utils.mergeRegister(
+        // 插入图片
+        editor.registerCommand(index.INSERT_IMAGETEXT_COMMAND, (payload) => {
+          utils.$insertNodeToNearestRoot(index.$createImageTextNode(payload));
+          return true;
+        }, lexical.COMMAND_PRIORITY_EDITOR)
+        // editor.registerCommand<MouseEvent>(CLICK_COMMAND,(event) => {
+        //   let dom = event.target as HTMLElement
+        //   let block = dom.parentElement
+        //   if(block?.classList.contains(ImageTextNode.getMakeClassName())){
+        //     event.preventDefault();
+        //     console.log(block);
+        //     // if (!event.shiftKey){ clearSelection() }
+        //     // setSelected(true)
+        //     // updateImageActiveBox();
+        //     return true
+        //   }
+        //   // if (event.target === selfElRef.value) {
+        //   // }
+        //   return false
+        // },COMMAND_PRIORITY_LOW),
+      );
+      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/ImageTextPlugin/index.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ImageTextPlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { useLexicalComposer } from '../../lexical-vue'\r\nimport { $insertNodeToNearestRoot,mergeRegister } from '@lexical/utils'\r\nimport { COMMAND_PRIORITY_EDITOR,COMMAND_PRIORITY_LOW,$getSelection,CLICK_COMMAND } from 'lexical'\r\n\r\nimport { onMounted, onUnmounted } from 'vue'\r\nimport { INSERT_IMAGETEXT_COMMAND,ImageTextNode,$createImageTextNode } from './index'\r\nimport { ImageAttrs } from '../ImagePlugin/index'\r\nimport { RegisterToolbarExtend,type ToolbarExtendPlugin } from \"../ToolbarPlugin/defines\"\r\n\r\n\r\nconst editor = useLexicalComposer()\r\n\r\nonMounted(() => {\r\n\r\n  if (!editor.hasNodes([ImageTextNode])){\r\n    throw new Error('ImageTextPlugin: 图文节点未注册！')\r\n  }\r\n\r\n  // 注册到工具条\r\n  RegisterToolbarExtend({\r\n    icon:\"richtext-outline\",\r\n    text:\"图文\",\r\n    action:async ()=>{\r\n      editor.dispatchCommand(INSERT_IMAGETEXT_COMMAND,{\r\n        src:\"https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB1prXny.img?w=768&amp;h=479&amp;m=6&amp;x=142&amp;y=148&amp;s=131&amp;d=131\",\r\n        float:\"left\",\r\n        width:\"200px\",\r\n        margin:\"0 10px 10px 0\"\r\n      })\r\n    },\r\n    sort:10\r\n  } as ToolbarExtendPlugin)\r\n\r\n  // 注册指令\r\n  const unregister = mergeRegister(\r\n\r\n    // 插入图片\r\n    editor.registerCommand<ImageAttrs>(INSERT_IMAGETEXT_COMMAND,(payload) => {\r\n      $insertNodeToNearestRoot($createImageTextNode(payload))\r\n      return true\r\n    },COMMAND_PRIORITY_EDITOR),\r\n    // editor.registerCommand<MouseEvent>(CLICK_COMMAND,(event) => {\r\n\r\n    //   let dom = event.target as HTMLElement\r\n    //   let block = dom.parentElement\r\n\r\n    //   if(block?.classList.contains(ImageTextNode.getMakeClassName())){\r\n\r\n    //     event.preventDefault();\r\n    //     console.log(block);\r\n\r\n    //     // if (!event.shiftKey){ clearSelection() }\r\n        \r\n    //     // setSelected(true)\r\n    //     // updateImageActiveBox();\r\n\r\n    //     return true\r\n    //   }\r\n\r\n    //   // if (event.target === selfElRef.value) {\r\n\r\n    \r\n    //   // }\r\n    //   return false\r\n    // },COMMAND_PRIORITY_LOW),\r\n  );\r\n\r\n  onUnmounted(() => unregister())\r\n})\r\n</script>\r\n\r\n<template />\r\n"],"names":["useLexicalComposer","onMounted","ImageTextNode","RegisterToolbarExtend","INSERT_IMAGETEXT_COMMAND","mergeRegister","$insertNodeToNearestRoot","$createImageTextNode","COMMAND_PRIORITY_EDITOR","onUnmounted"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA,UAAM,SAASA,mBAAAA;AAEfC,QAAAA,UAAU,MAAM;AAEd,UAAI,CAAC,OAAO,SAAS,CAACC,MAAAA,aAAa,CAAC,GAAE;AAC9B,cAAA,IAAI,MAAM,2BAA2B;AAAA,MAC7C;AAGsBC,oCAAA;AAAA,QACpB,MAAK;AAAA,QACL,MAAK;AAAA,QACL,QAAO,YAAU;AACf,iBAAO,gBAAgBC,gCAAyB;AAAA,YAC9C,KAAI;AAAA,YACJ,OAAM;AAAA,YACN,OAAM;AAAA,YACN,QAAO;AAAA,UAAA,CACR;AAAA,QACH;AAAA,QACA,MAAK;AAAA,MAAA,CACiB;AAGxB,YAAM,aAAaC,MAAA;AAAA;AAAA,QAGjB,OAAO,gBAA4BD,gCAAyB,CAAC,YAAY;AAC9CE,yCAAAC,MAAAA,qBAAqB,OAAO,CAAC;AAC/C,iBAAA;AAAA,WACPC,+BAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAAA;AA2BfC,sBAAA,MAAM,YAAY;AAAA,IAAA,CAC/B;;;;;;;"}

package/dist/cjs/components/basic/doc-editor/plugins/ImageTextPlugin/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/ImageTextPlugin/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/ToolbarPlugin/ContentStyleTool.vue.js

@@ -40,6 +40,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       { value: "h2", label: "标题 2" },
       { value: "h3", label: "标题 3" }
     ];
+    const disabled = vue.ref(false);
     const contentType = vue.ref(CONTENT_TYPE_DEFINES[0]);
     function updateToolbar() {
       const selection2 = lexical.$getSelection();
@@ -58,6 +59,9 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           const type = richText.$isHeadingNode(element) ? element.getTag() : element.getType();
           contentType.value = CONTENT_TYPE_DEFINES.find((item) => item.value == type) || CONTENT_TYPE_DEFINES[0];
         }
+        disabled.value = false;
+      } else {
+        disabled.value = true;
       }
     }
     const setContentType = (type) => {
@@ -90,7 +94,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       const _component_el_dropdown = vue.resolveComponent("el-dropdown");
       return vue.openBlock(), vue.createBlock(_component_el_dropdown, {
         "max-height": "300px",
-        trigger: "click"
+        trigger: "click",
+        disabled: disabled.value
       }, {
         dropdown: vue.withCtx(() => [
           vue.createVNode(_component_el_dropdown_menu, null, {
@@ -98,6 +103,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(CONTENT_TYPE_DEFINES, (item) => {
                 return vue.createVNode(_component_el_dropdown_item, {
                   class: vue.normalizeClass({ active: contentType.value.label == item.label }),
+                  disabled: disabled.value,
                   value: item.value,
                   onClick: ($event) => setContentType(item)
                 }, {
@@ -109,14 +115,17 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                     }, null, 8, _hoisted_2))
                   ]),
                   _: 2
-                }, 1032, ["class", "value", "onClick"]);
+                }, 1032, ["class", "disabled", "value", "onClick"]);
               }), 64))
             ]),
             _: 1
           })
         ]),
         default: vue.withCtx(() => [
-          vue.createVNode(_component_el_button, { text: "" }, {
+          vue.createVNode(_component_el_button, {
+            text: "",
+            disabled: disabled.value
+          }, {
             default: vue.withCtx(() => [
               vue.createTextVNode(vue.toDisplayString(contentType.value.label) + " ", 1),
               vue.createVNode(_component_MKSvgIcon, {
@@ -125,10 +134,10 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
               })
             ]),
             _: 1
-          })
+          }, 8, ["disabled"])
         ]),
         _: 1
-      });
+      }, 8, ["disabled"]);
     };
   }
 });