@maketribe/ms-app 3.2.25 → 3.2.27

package/dist/esm/components/basic/doc-editor/plugins/ImagePlugin/ImageNode.js

@@ -1,23 +1,22 @@
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-import { TextNode } from "lexical";
+import { DecoratorNode } from "lexical";
 const ImageDefaultSrc = "data:image/png;base64,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";
-class ImageNode extends TextNode {
+class ImageNode extends DecoratorNode {
   constructor(attrs, key) {
-    super("", key);
+    super(key);
     __publicField(this, "__attrs");
     this.__attrs = attrs;
   }
   static getType() {
-    return "Image";
+    return "image";
   }
   static clone(node) {
     return new ImageNode(node.__attrs, node.__key);
   }
   static importJSON(serializedNode) {
     const node = $createImageNode(serializedNode.attrs);
-    node.setFormat(serializedNode.format);
     return node;
   }
   static importDOM() {
@@ -25,7 +24,7 @@ class ImageNode extends TextNode {
       img: (el) => {
         const src = el.getAttribute("src");
         const alt = el.getAttribute("alt");
-        return el.tagName.toLowerCase() == "img" && !el.style.float ? {
+        return el.tagName.toLowerCase() == "img" ? {
           conversion: (domNode) => {
             return {
               node: $createImageNode({
@@ -40,14 +39,13 @@ class ImageNode extends TextNode {
               })
             };
           },
-          priority: 1
+          priority: 0
         } : null;
       }
     };
   }
   exportJSON() {
     return {
-      ...super.exportJSON(),
       type: this.getType(),
       version: 1,
       attrs: this.__attrs
@@ -77,55 +75,66 @@ class ImageNode extends TextNode {
   }
   exportDOM() {
     const element = document.createElement("img");
+    this.updateElementAttr(element);
+    return { element };
+  }
+  /**
+   * 更新元素属性
+   * @param el 
+   */
+  updateElementAttr(element) {
     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 };
   }
   /**
-   * 设置属性
-   * @param pos 
-   */
-  setAttrs(data) {
-    const writable = this.getWritable();
-    Object.assign(writable.__attrs, data);
+  * 更新DOM
+  * @param prevNode 
+  * @param dom 
+  * @param config 
+  * @returns 
+  */
+  updateDOM(prevNode, el, config) {
+    this.updateElementAttr(el);
+    if (!this.__attrs.src) {
+      el.setAttribute("src", ImageDefaultSrc);
+    }
+    return false;
   }
-  /**
-   * 创建DOM
-   * @param config 
-   * @returns 
-   */
   createDOM(config) {
     const element = document.createElement("img");
-    element.setAttribute("src", this.__attrs.src || ImageDefaultSrc);
-    if (this.__attrs.alt != null) {
-      element.setAttribute("alt", this.__attrs.alt ?? "");
+    this.updateElementAttr(element);
+    if (!this.__attrs.src) {
+      element.setAttribute("src", ImageDefaultSrc);
     }
-    element.setAttribute("style", this.getStyles().join(";"));
     element.setAttribute("node-key", this.__key);
-    element.setAttribute("class", config.theme.image ?? "");
     return element;
   }
-  updateDOM(prevNode, dom, config) {
-    const inner = dom.firstChild;
-    if (inner === null) {
-      return true;
-    }
-    super.updateDOM(prevNode, inner, config);
-    return false;
-  }
-  getTextContent(_includeInert, _includeDirectionless) {
-    return "";
+  decorate(editor, config) {
+    return null;
   }
   /**
-   * 内联
-   * @returns 
+   * 设置属性
+   * @param pos 
    */
+  setAttrs(data) {
+    const writable = this.getWritable();
+    Object.assign(writable.__attrs, data);
+  }
+  isEmpty() {
+    return false;
+  }
+  isIsolated() {
+    return false;
+  }
   isInline() {
     return true;
   }
+  isKeyboardSelectable() {
+    return true;
+  }
 }
 class InlineImageNode extends ImageNode {
   static getType() {
@@ -136,7 +145,6 @@ class InlineImageNode extends ImageNode {
   }
   static importJSON(serializedNode) {
     const node = $createImageNode(serializedNode.attrs);
-    node.setFormat(serializedNode.format);
     return node;
   }
   static importDOM() {
@@ -167,12 +175,15 @@ class InlineImageNode extends ImageNode {
   constructor(attrs, key) {
     super(attrs, key);
   }
-  /**
-   * 非内联元素
-   * @returns 
-   */
-  isInline() {
-    return false;
+  exportJSON() {
+    return {
+      type: this.getType(),
+      version: 1,
+      attrs: this.__attrs
+    };
+  }
+  decorate(editor, config) {
+    return null;
   }
 }
 function $createImageNode(attrs) {

package/dist/esm/components/basic/doc-editor/plugins/ImagePlugin/ImageNode.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageNode.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ImagePlugin/ImageNode.ts"],"sourcesContent":["\r\nimport type {\r\n  DOMConversionMap,\r\n  DOMExportOutput,\r\n  EditorConfig,\r\n  LexicalNode,\r\n  NodeKey,\r\n  Spread,\r\n  SerializedElementNode,\r\n  SerializedTextNode\r\n} from 'lexical'\r\nimport { ElementNode,TextNode } from 'lexical'\r\n\r\n\r\n// 默认图片\r\nconst ImageDefaultSrc = \"data:image/png;base64,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\";\r\n\r\n\r\n/**\r\n * 图片属性类型\r\n */\r\nexport type ImageAttrType = {\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 SerializedImageNode = Spread<\r\n  {\r\n    attrs: ImageAttrType\r\n  },\r\n  SerializedTextNode\r\n>\r\n\r\n/**\r\n * 定义图片节点\r\n */\r\nexport class ImageNode extends TextNode {\r\n  __attrs: ImageAttrType\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.__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  static importDOM(): DOMConversionMap | null {\r\n    return {\r\n      img: (el: HTMLElement) => {\r\n\r\n        const src = el.getAttribute('src');\r\n        const alt = el.getAttribute('alt');\r\n\r\n        return el.tagName.toLowerCase() == \"img\" && !el.style.float ?   {\r\n          conversion: (domNode: HTMLElement) => {\r\n\r\n            return { \r\n              \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:\"\"\r\n              } as ImageAttrType) \r\n            };\r\n          },\r\n          priority: 1\r\n        } : null\r\n      },\r\n    }\r\n  }\r\n\r\n  constructor(attrs: ImageAttrType,  key?: NodeKey) {\r\n    super(\"\",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  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.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  exportDOM(): DOMExportOutput {\r\n\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    \r\n    return { element }\r\n  }\r\n\r\n  /**\r\n   * 设置属性\r\n   * @param pos \r\n   */\r\n  setAttrs(data?:any){\r\n    const writable = this.getWritable();\r\n    Object.assign(writable.__attrs,data)\r\n  }\r\n\r\n  /**\r\n   * 创建DOM\r\n   * @param config \r\n   * @returns \r\n   */\r\n  createDOM(config: EditorConfig): HTMLElement {\r\n\r\n    const element = document.createElement('img') \r\n\r\n    element.setAttribute('src', this.__attrs.src || ImageDefaultSrc) \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    element.setAttribute(\"node-key\",this.__key)\r\n    element.setAttribute(\"class\",config.theme.image ?? \"\")\r\n\r\n\r\n    return element\r\n  }\r\n\r\n  updateDOM(\r\n    prevNode: ImageNode,\r\n    dom: HTMLElement,\r\n    config: EditorConfig,\r\n  ): boolean {\r\n    // console.log(prevNode,dom,dom.firstChild,config);\r\n    const inner = dom.firstChild\r\n    if (inner === null){ return true }\r\n    super.updateDOM(prevNode, inner as HTMLElement, config)\r\n    return false\r\n  }\r\n\r\n  getTextContent(\r\n    _includeInert?: boolean | undefined,\r\n    _includeDirectionless?: false | undefined,\r\n  ): string { return \"\"; }\r\n\r\n  /**\r\n   * 内联\r\n   * @returns \r\n   */\r\n  isInline(): boolean {\r\n    return true;\r\n  }\r\n}\r\n/**\r\n * 定义内联图片节点\r\n */\r\nexport class InlineImageNode extends ImageNode{\r\n  \r\n  static getType(): string {\r\n    return 'InlineImage'\r\n  }\r\n\r\n  static clone(node: ImageNode): ImageNode {\r\n    return new InlineImageNode(node.__attrs,  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  static importDOM(): DOMConversionMap | null {\r\n    return {\r\n      img: (el: HTMLElement) => {\r\n\r\n        const src = el.getAttribute('src');\r\n        const alt = el.getAttribute('alt');\r\n\r\n        return el.tagName.toLowerCase() == \"img\" && el.style.float ?   {\r\n          conversion: (domNode: HTMLElement) => {\r\n           \r\n            // 内联图\r\n            return { \r\n              node:new InlineImageNode({\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 ImageAttrType) \r\n            };\r\n          },\r\n          priority: 1\r\n        } : null\r\n      },\r\n    }\r\n  }\r\n\r\n  constructor(attrs: ImageAttrType,  key?: NodeKey) {\r\n    super(attrs,key)\r\n  }\r\n\r\n  /**\r\n   * 非内联元素\r\n   * @returns \r\n   */\r\n  isInline(): boolean {\r\n    return false;\r\n  }\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: ImageAttrType): 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":[],"mappings":"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"}
+{"version":3,"file":"ImageNode.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ImagePlugin/ImageNode.ts"],"sourcesContent":["\r\nimport type {\r\n  DOMConversionMap,\r\n  DOMExportOutput,\r\n  EditorConfig,\r\n  LexicalNode,\r\n  NodeKey,\r\n  Spread,\r\n  SerializedLexicalNode,\r\n  LexicalEditor\r\n} from 'lexical'\r\nimport { DecoratorNode } from 'lexical'\r\nimport { Component } from 'vue';\r\n\r\n\r\n// 默认图片\r\nconst ImageDefaultSrc = \"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAADkBJREFUeJzt3W/wHVdZwPHvL01S05AmbUhDm2L/0EJDaqVNbUmR2uIwBQtMbRxRJICow9BKFUZHxQr6ovIGZrDgqCNFgbajI6C2RR1NrRUKmYBpRQrTlmL8g9UpNKRtIk2bxhcnV5qQ5HfvPc/us3v3+5l5XiW/c59z555nd8/u2QOSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJEmSJGk+cy19xiXA5cCLgTOB44BFLXy21BdPAjuA+4EtwG3APwL7MpOqcRTwc8CDlE4YhjFZPAC8GVhAQ5o6AzgLuBFY31D70pB8Hng95ewgVBMF4DLg48CzGmhbGqrHgCuBzZGNRheAl1OuXRYHtysJ9gA/Atwe1WBkATgD2AYsC2xT0oF2AucBX4toLGpyYY5yze/gl5q1HPgYQQfvqAKwCbgwqC1JR3YR8JMRDUVdAnwZWBvUlqT53QucXdtIxBnARTj4pbatAy6obSSiALw6oA1Jk6seexEFYENAG5Imd1FtAxEF4PkBbUia3AtqG4iYBHwCH/yRMnwbWFLTQEQB2BfQhqTpVI3hxlYZSRqGyOWPmykLHk6gnXcVSG2YA04EXgt8htgxky6iE08CP9N24lKSa4C9WAD+P97SetZSrl/GAsA+ymuPpKGZA75IcgHowiTg9dkJSAn2ATdkJxGhtoId137KUidciGcA7MhOQEqyMzuBLhQASUksANKAWQCkPOm38SwA0oBZAKQBswBIebwEkJTHAiANmAVAypN+CbAwOwEpwMnApZTXZK8DTgVWAcfs//fdwMPAdsr79LcCfw98veU8Z1LvlzOql1YC7wD+iel/e1/Y38bKlnMfOXOMHDs/fnrfAfXKGuB3KUf12t/eKHYDH9zfdpssAAn5qp8WA79B7MA/OHYB1wKLWurTGQE5p+t9B9R564B/prmBf3DcQzvb3VkAEvJVv2wEHqe9wT+KxykvqG2SBSAhX/XH1cDTtD/4R7EXuKrB/j0vIMd0ve+AOulq8gb+wdFUEbAAJOSr7ttI7pH/4NhLM5cDFoCEfNVt68i55p8vHiN+YvD0gLzS9b4D6ozFtDvbP2ncTewtwvQC4FoAdcmvAOdkJ3EEL6Js6KFn8AxAEdbQ7EM+UfE4ZZ+/CKcF5FPFMwB1xTup3Ou+JUspuWo/zwBUayX9OPqPYjcxC4g8A5CAN9KPo//IEmBTdhIRLADqgp/KTmAKETmnnwFbAJTtZOC87CSmcD5wUnYStSwAynZpdgIV+pw7YAFQvguyE6hwYeXfewmgwVuXnUCFPucOWACU79TsBCqckp1ALQuAsq3KTqBCbe5eAmjwjpn/v3TW0uwEalkApAGzACjb7uwEKuyq/HsvATR4D2cnUKHPuQMWAOXbnp1Ahe3ZCdSyACjbvdkJVOhz7oAFQPm2ZidQoTZ35wA0eHdkJzClfZQdhnvNAqBs/0nZ4bdvvgA8lJ1ELQuAuuDm7ASmcFNAG+mXABF8JZhq9e2VYLuA4wP6vSYglyqeAagLvgl8ODuJCdwAPJKdRFd4BqAIayhH1uyj+3wR+VrwkwLyqeIZgLri68B7spMYw3XMwORfJM8AFGURcA/5R/nDxTZitwZLPwOI0PsOqFPW0t3NQc8K7uuJAXml630HOmop5QgRsQFF31xJ2ZI7e9CPYi9wRQP9tAAk5NtlLwP+CPg3vvvocztwDbAiLbt2XUX+wB/FWxvqowUgId8uWg9sYbzv61HKLrpHpWTarqvIPRPYS3ODHywA3ehAsmuAJ5n8e7uTmIdRuu5KyhlQ24P/MZo57X+m5wTkma73HUj0a9R9d3cDy1vPun1rKX1ta/DfTfyE36FYABLy7YrXEvNjvZN+baw5rUWUbbmbvEPwOKUoR97qOxILQEK+XbCe2GffbwEWttqDPCcCHyD2+9sFXE/cE37jWh2Qe7red6BlJ1KWwEYfvT4KzLXYj2wrgV8EPs/039lW4BfIu9WaXgAifjC1SQzpR/s9lFP2pvbD+x3KoBiakygbdV5I2a7rFMqmHaP39u+ivMBzO+U1XlspL/PIfqR3NfDflW2kjx/PAMZ3M/FH/oPj2tZ6o1onMAPjp/cdaMmv0/zgH0WT964VxwKQkG+GK4Cnaa8A7AV+opWeqYYFICHftn0/OYtb9gCXtdA/TW8VMzB+et+BBp3Adz/X32bsAjY03ktNywKQkG9bFgN3kTf4R/EIcHbDfdV0LAAJ+bblj8kf/KP4L+C0RnuraVgAEvJtwy+RP+gPjq9S7jurO57NDIyf3ncg2OV062UWz4x7GMbiob6wACTk26R1lPX62QP9SPFphrF4qA8sAAn5NmUl8CD5A3ycuI3hLB7qspXMwPjpfQcCLKJscpk9sCeJG+nAc+QDZwFIyLcJf0D+gJ4mrm/iy9DYLAAJ+UZ7G/kDuSbeHf+VaEzHMwPjp/cdqPBy4CnyB3Ft/Hz0F6OxWAAS8o3yfGAH+YM3Ip4GXhf79VRbTXmM+SWU9f6zyAKQkG+EFcB95A/cyNgDvDLyS5rCAmATh34B6Jcpl1uL07KLdxwzMH5634EJLQT+lvwB20TsphxxM5wBfG6MHL9EeUvwLLAAJORb6wPkD9QmYwdwTti3NZ5XATsnyPERyjLrvrMAJORb4y3kD9A24iHg9KDvbD7vYLpHpx+inDX0mQUgId9pXUK5Ts4enG3FgzT7muyFwO9X5viv9HuCcAUzMH5634ExnA58g/xB2XZ8kWY2I10B/F1Qjl+iv1ukWQAS8p3UsZRXSWcPxqy4Czim+lv8jucBXwnOcQvwrMAc22IBSMh3EguAT5E/CLPjr4jZLuulNHcmtRk4OiDHNi1nBsZP7ztwBO8lf/B1JW6mFMRpvQF4ouEcP0m/tk23ACTkO643kT/ouhY3Mfky4jnguhZz/DD9WeVoAUjIdxwvofmjVV/jLylbnI1jBfDxhBzfO2Z+2Y5lBsZP7ztwkFOA/yF/oHU5tgHnzvM9bqSZTVDHjXfOk18XpBcANwc90FLgs7T/JFwf7aPcyvsLyu3CHZQHW36Acr0/X4Fow1spzxp01bGUJyBrpI+f1AoWaA74c/KPrkZcdH2LtGXU9zFd7zuwX5sTVUZ70YVVjodjAUjI91BeR/4P1WgudgM/SPekFwDnAOAC4E7Gn9lWP+2krOe4JzmPZ1pGeY18jarxU/NgxyxYQ5nEcvDPvuXA39CtFYTVR/BaQy4ASyj3tJtc8aZuWU25c7EmO5GuGGoBmKNs3rk+OQ+171TKG51WJufRCUMtAO8Cfjw7CaV5IfDX5K8gTL8EiJA6izmFH6O8BTd7ZtrIj9vJXUG49DB5TRJVhnYGcC7wEfLvPKgbXgb8Cf1aQRhqSAXgOZRJv8iXW6j/rgA+RM5BofoIXmsoBeBoymO+z81ORJ30JuB92UlkGEoB+BDw4uwk1GlvB67NTqKPUicxxvCrATkaw4mraM+SgHzTdbkDr2G6d84bw40290lMLwCzvBbg+yhr+7Pv9ap/nqJMDn6q4c9ZQlmoVMO1AIewCrgFB7+msxD4M8pbjGfaLBaAxcAnKI98StNaAtxKs282qj6FrzWLBeD3GEDlVitGKwjPzE6kKbNWAN4OvDk7Cc2UEygrCE/OTqQJszQJ+ArgNgb8WKca9RXgYsrORlGOBr5d2YaTgMBa4E9x8Ks5aykrCJdlJxJpFgrA8ZQZ/2OzE9HMO5/yW5uZN0j1vQCMbtd06TVPmm2XUM42J90i7VC8C1DpesqSTqlNrwFuwGXlQN6jjFcHfLZh1MT7qbM4IId0GR34YeDJgM82jNp4F9NbFPD5Vfp4G/AMYCtlHzqpC94GfHCKv1tE2bmoRtUY7lsBWA5sAc6q/Ewp0j5gE3DThH+XXgD6NAl4FGX21cGvrhm9Zv5VyXlMrE8F4H3AZdlJSIcxuiX9QxP8TfU1fK2+XAL8LPCHlZ8jteFR4FJg2xj/dyFlMrvGzM8BXAxsplwvSX3wMGVF6n3z/D8LwDw5nEaZ8X925WdIbft3ypbk/3GE/3MU5e1DNWZ2EnAZ5blrB7/66Hspy4hXZSdyJF0tAAsot1TOzk5EqvACygtFOrtQrasF4D3Aq7OTkAKcx+FXEHoX4BA5bAI+Wtmm1DW3Aldy4DX/Aspr62vM1CTgBuAOcndslZpyI/AGvjNm0gtAly4BnkvZv8/Br1n1eg5cQZh+CdCVArCUcp20OjsRqWHXAL+ZncRIFwrAHPAR4EXZiUgteTelEKSLeK1Rrd8CNmYnIbXs/cC3spPowiSgNFRPUX8Q7v1dAEnTm5m7AJJaZgGQBswCIA2YBUAaMAuANGAWAGnALADSgFkApAGzAEgDZgGQBswCIA2YBUAaMAuANGAWAGnALADSgFkApAGzAEgDZgGQBswCIA2YBUAaMAuANGAWAGnALADSgFkApAGLKAB7AtqQNLn/rW0gogB8I6ANSZP7Zm0DEQXg/oA2JE3uvtoGIgrAZwPakDS5u2obiCgAtwS0IWlyt9Y2ELE7MMC9wAuD2pI0v38BzqltJOo24G8HtSNpPNdFNBJ1BjAHfAa4KKg9SYf3aeDiiIaiCgDA6cA2YHlgm5IO9C3gXGB7RGORTwJ+DdiIDwZJTXkC+FGCBj/EPwp8O3A58Ghwu9LQ7QReCfxDZKNNrAXYDJwPbG2gbWmItgDrgTuiG25qMdADwAbgp4GvNvQZ0qy7H3gjZXL9wSY+IHIS8Eif8VLKpcEG4EzgeGBxC58t9cUeyrP9DwCfA26jPOm3LzMpSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIkSZIE/wdtJeQPxMSAJQAAAABJRU5ErkJggg==\";\r\n\r\n/**\r\n * 图片属性类型\r\n */\r\nexport type ImageAttrType = {\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 SerializedImageNode = Spread<{ attrs: ImageAttrType },   SerializedLexicalNode>\r\n\r\n/** \r\n * 定义图片节点\r\n */\r\nexport class ImageNode extends DecoratorNode<Component|null> {\r\n  __attrs: ImageAttrType\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.__key)\r\n  }\r\n\r\n  static importJSON(serializedNode: SerializedImageNode): ImageNode {\r\n    const node = $createImageNode(serializedNode.attrs)\r\n    return node\r\n  }\r\n\r\n  static importDOM(): DOMConversionMap | null {\r\n    return {\r\n      img: (el: HTMLElement) => {\r\n\r\n        const src = el.getAttribute('src');\r\n        const alt = el.getAttribute('alt');\r\n\r\n        return el.tagName.toLowerCase() == \"img\" ?   {\r\n          conversion: (domNode: HTMLElement) => {\r\n        \r\n            return { \r\n              \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:\"\"\r\n              } as ImageAttrType) \r\n            };\r\n          },\r\n          priority: 0\r\n        } : null\r\n      },\r\n    }\r\n  }\r\n\r\n  constructor(attrs: ImageAttrType,  key?: NodeKey) {\r\n    super(key)\r\n    this.__attrs = attrs\r\n  }\r\n\r\n  exportJSON(): SerializedImageNode {\r\n\r\n    return {\r\n      type: this.getType(),\r\n      version: 1,\r\n      attrs: this.__attrs,\r\n    }\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.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  exportDOM(): DOMExportOutput {\r\n\r\n    \r\n    const element = document.createElement('img') \r\n\r\n    this.updateElementAttr(element);\r\n\r\n    \r\n    return { element }\r\n  }\r\n\r\n  /**\r\n   * 更新元素属性\r\n   * @param el \r\n   */\r\n  updateElementAttr(element:HTMLElement){\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\r\n    /**\r\n   * 更新DOM\r\n   * @param prevNode \r\n   * @param dom \r\n   * @param config \r\n   * @returns \r\n   */\r\n  updateDOM(prevNode: ImageNode, el: HTMLElement, config: EditorConfig): boolean {\r\n    // 更新属性\r\n    this.updateElementAttr(el);\r\n\r\n    if(!this.__attrs.src){\r\n      el.setAttribute('src', ImageDefaultSrc) \r\n    }\r\n    return false\r\n  }\r\n \r\n  createDOM(config: EditorConfig): HTMLElement {\r\n\r\n    const element = document.createElement('img') \r\n    // 更新属性\r\n    this.updateElementAttr(element);\r\n\r\n    if(!this.__attrs.src){\r\n      element.setAttribute('src', ImageDefaultSrc) \r\n    }\r\n\r\n    element.setAttribute(\"node-key\",this.__key)\r\n\r\n    return element\r\n  }\r\n \r\n  decorate(editor: LexicalEditor, config: EditorConfig): Component | null {\r\n    return null;\r\n  }\r\n\r\n  /**\r\n   * 设置属性\r\n   * @param pos \r\n   */\r\n  setAttrs(data?:any){\r\n    const writable = this.getWritable();\r\n    Object.assign(writable.__attrs,data)\r\n  }\r\n\r\n  isEmpty(){\r\n    return false;\r\n  }\r\n\r\n  isIsolated() {\r\n    return false;\r\n  }\r\n  isInline() {\r\n    return true;\r\n  }\r\n  isKeyboardSelectable() {\r\n    return true;\r\n  }\r\n}\r\n/**\r\n * 定义内联图片节点\r\n */\r\nexport class InlineImageNode extends ImageNode{\r\n  \r\n  static getType(): string {\r\n    return 'InlineImage'\r\n  }\r\n\r\n  static clone(node: ImageNode): ImageNode {\r\n    return new InlineImageNode(node.__attrs,  node.__key)\r\n  }\r\n\r\n  static importJSON(serializedNode: SerializedImageNode): ImageNode {\r\n    const node = $createImageNode(serializedNode.attrs)\r\n    return node\r\n  }\r\n  \r\n\r\n  static importDOM(): DOMConversionMap | null {\r\n    return {\r\n      img: (el: HTMLElement) => {\r\n\r\n        const src = el.getAttribute('src');\r\n        const alt = el.getAttribute('alt');\r\n\r\n        return el.tagName.toLowerCase() == \"img\" && el.style.float ?   {\r\n          conversion: (domNode: HTMLElement) => {\r\n           \r\n            // 内联图\r\n            return { \r\n              node:new InlineImageNode({\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 ImageAttrType) \r\n            };\r\n          },\r\n          priority: 1\r\n        } : null\r\n      },\r\n    }\r\n  }\r\n\r\n  constructor(attrs: ImageAttrType,  key?: NodeKey) {\r\n    super(attrs,key)\r\n  }\r\n\r\n  exportJSON(): SerializedImageNode {\r\n\r\n    return {\r\n      type: this.getType(),\r\n      version: 1,\r\n      attrs: this.__attrs,\r\n    }\r\n  }\r\n  decorate(editor: LexicalEditor, config: EditorConfig): Component | null {\r\n    return null;\r\n  }\r\n}\r\n\r\n/**\r\n * 创建图片节点\r\n * @param src \r\n * @returns \r\n */\r\nexport function $createImageNode(attrs: ImageAttrType): 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":[],"mappings":"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"}

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

@@ -1,15 +1,18 @@
 import { defineComponent, onMounted, unref, openBlock, createElementBlock, normalizeStyle, createCommentVNode } from "vue";
 import { mergeRegister, $insertNodeToNearestRoot, mediaFileReader, isMimeType } from "@lexical/utils";
-import { $createParagraphNode, COMMAND_PRIORITY_EDITOR, COMMAND_PRIORITY_LOW, $getNodeByKey, $isParagraphNode } from "lexical";
+import { $getSelection, $isNodeSelection, $createParagraphNode, COMMAND_PRIORITY_EDITOR, COMMAND_PRIORITY_LOW, $getNodeByKey, $isParagraphNode } from "lexical";
 import { DRAG_DROP_PASTE } from "@lexical/rich-text";
 import { useLexicalComposer, useMounted } from "lexical-vue";
 import { INSERT_IMAGE_COMMAND } from "./commands.js";
 import { $createImageNode, ImageNode } from "./ImageNode.js";
-import { $isImageTextNode } from "../ImageTextPlugin/ImageTextNode.js";
+import "../GridPlugin/TextGridNode.js";
+import "../GridPlugin/LayoutGridNode.js";
+import { $isImageTextGridNode } from "../GridPlugin/ImageTextGridNode.js";
+import "../GridPlugin/ModuleGridNode.js";
 import { registerDocEditorToolbarExtend } from "../../core/index.js";
 import { showImageEditDialog, imageUpload } from "./utils.js";
 import { ElLoading } from "element-plus";
-import { useElementModule } from "../../core/element-module.js";
+import { useElementBlockSelection } from "../../core/element-block.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "index",
   setup(__props) {
@@ -38,7 +41,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           editor.dispatchCommand(INSERT_IMAGE_COMMAND, data);
         });
       },
-      sort: 11
+      sort: 90
     });
     const editor = useLexicalComposer();
     const uploadhandle = async (pathList) => {
@@ -52,13 +55,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       return [];
     };
-    const { isSelected, curSelectKey, curSelectPos, updateActiveViewState } = useElementModule((el) => {
+    const { isSelected, curSelectKey, curSelectPos } = useElementBlockSelection((el) => {
       return el.tagName.toLowerCase() == "img" ? el : null;
     }, (selection) => {
       const node = $getNodeByKey(curSelectKey.value);
       if (node != null) {
         const parent = node.getParent();
-        const isImageText = $isImageTextNode(parent);
+        const isImageText = $isImageTextGridNode(parent);
         const toolbarList = [];
         if ($isParagraphNode(parent) || isImageText) {
           toolbarList.push({
@@ -71,7 +74,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 } else {
                   parent.setFormat("left");
                 }
-                updateActiveViewState(null);
               });
             }
           });
@@ -83,7 +85,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             action() {
               editor.update(() => {
                 parent.setFormat("center");
-                updateActiveViewState(null);
               });
             }
           });
@@ -99,7 +100,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 } else {
                   parent.setFormat("right");
                 }
-                updateActiveViewState(null);
               });
             }
           });
@@ -111,10 +111,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             const data = await showImageEditDialog(node.__attrs);
             const result = await uploadhandle([data.src]);
             data.src = result[0];
-            editor.update(() => {
-              node.setAttrs(data);
-              updateActiveViewState(null);
-            });
+            editor.update(() => node.setAttrs(data));
           }
         });
         return toolbarList;
@@ -125,9 +122,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return mergeRegister(
         // 插入图片
         editor.registerCommand(INSERT_IMAGE_COMMAND, (payload) => {
-          const p = $createParagraphNode();
-          p.append($createImageNode(payload));
-          $insertNodeToNearestRoot(p);
+          const selection = $getSelection();
+          const elementNode = $isNodeSelection(selection) ? selection == null ? void 0 : selection.getNodes()[0] : null;
+          if (elementNode) {
+            elementNode.append($createImageNode(payload));
+          } else {
+            const p = $createParagraphNode();
+            p.append($createImageNode(payload));
+            $insertNodeToNearestRoot(p);
+          }
           return true;
         }, COMMAND_PRIORITY_EDITOR),
         // 剪切板图片
@@ -155,7 +158,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return unref(isSelected) ? (openBlock(), createElementBlock("div", {
         key: 0,
-        class: "mk-doc-active-mark",
+        class: "mk-doc-active-element-block-mark",
         style: normalizeStyle(unref(curSelectPos))
       }, null, 4)) : createCommentVNode("", true);
     };

package/dist/esm/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 { $insertNodeToNearestRoot,mergeRegister,mediaFileReader,isMimeType } from '@lexical/utils'\r\nimport { \r\n  COMMAND_PRIORITY_EDITOR,COMMAND_PRIORITY_LOW,CLICK_COMMAND,$isParagraphNode,\r\n  $getSelection,$createParagraphNode,$isNodeSelection, $getNodeByKey\r\n} from 'lexical'\r\nimport { DRAG_DROP_PASTE } from '@lexical/rich-text'\r\nimport { useLexicalComposer,useMounted } from 'lexical-vue'\r\nimport { onMounted,  } from 'vue'\r\nimport { INSERT_IMAGE_COMMAND,$createImageNode,ImageNode,type ImageAttrType } from './index'\r\nimport { $isImageTextNode } from '../ImageTextPlugin'\r\nimport { registerDocEditorToolbarExtend,type ToolbarExtendPlugin } from \"../../core\"\r\nimport { showImageEditDialog,imageUpload } from \"./utils\"\r\nimport {  useElementModule } from '../../core'\r\nimport { ElLoading } from 'element-plus'\r\n\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\n// 注册到工具条\r\nregisterDocEditorToolbarExtend({\r\n  icon:\"Picture\",\r\n  text:\"图片\",\r\n  action:async ()=>{\r\n    // 显示图片编辑面板\r\n    showImageEditDialog({\r\n      src:\"\", alt:\"\", width:\"\", height:\"\", maxWidth:\"100%\", maxHeight:\"\", margin:\"\"\r\n    }).then(async (data:any)=>{\r\n      const result = await uploadhandle([data.src])\r\n      data.src = result[0]\r\n      editor.dispatchCommand(INSERT_IMAGE_COMMAND,data)\r\n    });\r\n  },\r\n  sort:11\r\n} as ToolbarExtendPlugin)\r\n\r\nconst editor = useLexicalComposer()\r\n\r\n// 上传处理函数\r\nconst uploadhandle = async (pathList:Array<string>)=>{\r\n\r\n  if(pathList.length){\r\n\r\n    const loadingInstance = ElLoading.service({ fullscreen: true,text:\"图片上传中...\" })\r\n\r\n    const reesult = await Promise.all(pathList.map(path=>{\r\n      return imageUpload(path)\r\n    }))\r\n\r\n    loadingInstance.close();\r\n\r\n    return reesult;\r\n  }\r\n\r\n  return [];\r\n}\r\n\r\n// 使用元素模块 集成了模块选中删除以及工具条\r\nconst { isSelected,  curSelectKey, curSelectPos,updateActiveViewState } = useElementModule(el=>{\r\n  return el.tagName.toLowerCase() == \"img\" ? el : null\r\n},(selection)=>{\r\n  \r\n  const node = $getNodeByKey(curSelectKey.value) as ImageNode;\r\n\r\n  if(node != null){\r\n  \r\n    const parent = node.getParent();\r\n    const isImageText = $isImageTextNode(parent)\r\n\r\n    // 工具条\r\n    const toolbarList =  [];\r\n\r\n    if($isParagraphNode(parent) || isImageText){\r\n      toolbarList.push({ title: isImageText ? \"居左\" : \"左对齐\",icon:`doc-align-left`,action(){\r\n          editor.update(()=>{\r\n            if(isImageText){\r\n              node.setAttrs({float:\"left\"})\r\n            }\r\n            else{\r\n              parent.setFormat(\"left\")\r\n            }\r\n\r\n            updateActiveViewState(null);\r\n          })\r\n        } \r\n      });\r\n    }\r\n\r\n    if($isParagraphNode(parent)){\r\n      toolbarList.push({ title: \"居中对齐\",icon:`doc-align-center`,action(){\r\n          editor.update(()=>{  \r\n            parent.setFormat(\"center\")  \r\n            updateActiveViewState(null);\r\n          })\r\n        } \r\n      });\r\n    }\r\n\r\n    if($isParagraphNode(parent) || isImageText){\r\n      toolbarList.push({ title: isImageText ? \"居右\" : \"右对齐\",icon:`doc-align-right`,action(){\r\n          editor.update(()=>{\r\n\r\n            if(isImageText){\r\n              node.setAttrs({float:\"right\"})\r\n            }\r\n            else{\r\n              parent.setFormat(\"right\")\r\n            }\r\n            updateActiveViewState(null);\r\n          })\r\n        } \r\n      });\r\n    }\r\n\r\n    // 编辑\r\n    toolbarList.push({ \r\n      title:\"编辑\",icon:\"Edit\",action:async ()=>{\r\n\r\n        // 显示图片编辑面板\r\n        const data:any = await showImageEditDialog(node.__attrs);\r\n        const result = await uploadhandle([data.src])\r\n        data.src = result[0];\r\n        editor.update(()=>{\r\n          node.setAttrs(data)\r\n          updateActiveViewState(null);\r\n        })\r\n      }\r\n    });\r\n\r\n    return toolbarList;\r\n  }\r\n\r\n  return null;\r\n})\r\n\r\n\r\n// 编辑器挂载\r\nuseMounted(()=>{\r\n  // 注册事件\r\n  return mergeRegister(\r\n    // 插入图片\r\n    editor.registerCommand<ImageAttrType>(INSERT_IMAGE_COMMAND,(payload) => {\r\n      const p = $createParagraphNode()\r\n      p.append($createImageNode(payload))\r\n      $insertNodeToNearestRoot(p)\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        const result = await uploadhandle(filesResult.filter(f=>isMimeType(f.file, ACCEPTABLE_IMAGE_TYPES)).map(f=>f.result))\r\n\r\n        result.forEach(path=>{\r\n            editor.dispatchCommand(INSERT_IMAGE_COMMAND, {\r\n              src:path, alt:\"\",  maxWidth:\":100%\"\r\n            } as ImageAttrType)\r\n        })\r\n\r\n      })()\r\n\r\n      return true\r\n    },COMMAND_PRIORITY_LOW)\r\n  )\r\n})\r\n\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\r\n</script>\r\n\r\n<template>\r\n  <div class=\"mk-doc-active-mark\" v-if=\"isSelected\" :style=\"curSelectPos\">\r\n  </div>\r\n</template>\r\n"],"names":[],"mappings":"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"}
+{"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 { \r\n  COMMAND_PRIORITY_EDITOR,COMMAND_PRIORITY_LOW,$isParagraphNode,\r\n  $getSelection,$createParagraphNode,$isNodeSelection, $getNodeByKey,\r\nElementNode\r\n} from 'lexical'\r\nimport { DRAG_DROP_PASTE } from '@lexical/rich-text'\r\nimport { useLexicalComposer,useMounted } from 'lexical-vue'\r\nimport { onMounted,  } from 'vue'\r\nimport { INSERT_IMAGE_COMMAND,$createImageNode,ImageNode,type ImageAttrType } from './index'\r\nimport { $isImageTextGridNode } from '../GridPlugin'\r\nimport { registerDocEditorToolbarExtend,type ToolbarExtendPlugin } from \"../../core\"\r\nimport { showImageEditDialog,imageUpload } from \"./utils\"\r\nimport {  useElementBlockSelection } from '../../core'\r\nimport { ElLoading } from 'element-plus'\r\n\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\n// 注册到工具条\r\nregisterDocEditorToolbarExtend({\r\n  icon:\"Picture\",\r\n  text:\"图片\",\r\n  action:async ()=>{\r\n    // 显示图片编辑面板\r\n    showImageEditDialog({\r\n      src:\"\", alt:\"\", width:\"\", height:\"\", maxWidth:\"100%\", maxHeight:\"\", margin:\"\"\r\n    }).then(async (data:any)=>{\r\n      const result = await uploadhandle([data.src])\r\n      data.src = result[0];\r\n      editor.dispatchCommand(INSERT_IMAGE_COMMAND,data)\r\n    });\r\n  },\r\n  sort:90\r\n} as ToolbarExtendPlugin)\r\n\r\nconst editor = useLexicalComposer()\r\n\r\n// 上传处理函数\r\nconst uploadhandle = async (pathList:Array<string>)=>{\r\n\r\n  if(pathList.length){\r\n\r\n    const loadingInstance = ElLoading.service({ fullscreen: true,text:\"图片上传中...\" })\r\n\r\n    const reesult = await Promise.all(pathList.map(path=>{\r\n      return imageUpload(path)\r\n    }))\r\n\r\n    loadingInstance.close();\r\n\r\n    return reesult;\r\n  }\r\n\r\n  return [];\r\n}\r\n\r\n// 使用元素模块 集成了模块选中删除以及工具条\r\nconst { isSelected,  curSelectKey, curSelectPos } = useElementBlockSelection(el=>{\r\n  return el.tagName.toLowerCase() == \"img\" ? el : null\r\n},(selection)=>{\r\n  \r\n  const node = $getNodeByKey(curSelectKey.value) as ImageNode;\r\n\r\n  if(node != null){\r\n  \r\n    const parent = node.getParent();\r\n    const isImageText = $isImageTextGridNode(parent)\r\n\r\n    // 工具条\r\n    const toolbarList =  [];\r\n\r\n    if($isParagraphNode(parent) || isImageText){\r\n      toolbarList.push({ title: isImageText ? \"居左\" : \"左对齐\",icon:`doc-align-left`,action(){\r\n          editor.update(()=>{\r\n            if(isImageText){\r\n              node.setAttrs({float:\"left\"})\r\n            }\r\n            else{\r\n              parent.setFormat(\"left\")\r\n            }\r\n          })\r\n        } \r\n      });\r\n    }\r\n\r\n    if($isParagraphNode(parent)){\r\n      toolbarList.push({ title: \"居中对齐\",icon:`doc-align-center`,action(){\r\n          editor.update(()=>{  \r\n            parent.setFormat(\"center\")  \r\n          })\r\n        } \r\n      });\r\n    }\r\n\r\n    if($isParagraphNode(parent) || isImageText){\r\n      toolbarList.push({ title: isImageText ? \"居右\" : \"右对齐\",icon:`doc-align-right`,action(){\r\n          editor.update(()=>{\r\n\r\n            if(isImageText){\r\n              node.setAttrs({float:\"right\"})\r\n            }\r\n            else{\r\n              parent.setFormat(\"right\")\r\n            }\r\n          })\r\n        } \r\n      });\r\n    }\r\n\r\n    // 编辑\r\n    toolbarList.push({ \r\n      title:\"编辑\",icon:\"Edit\",action:async ()=>{\r\n        // 显示图片编辑面板\r\n        const data:any = await showImageEditDialog(node.__attrs);\r\n        const result = await uploadhandle([data.src])\r\n        data.src = result[0];\r\n        editor.update(()=>node.setAttrs(data))\r\n      }\r\n    });\r\n\r\n    return toolbarList;\r\n  }\r\n\r\n  return null;\r\n})\r\n\r\n// 编辑器挂载\r\nuseMounted(()=>{\r\n  // 注册事件\r\n  return mergeRegister(\r\n    // 插入图片\r\n    editor.registerCommand<ImageAttrType>(INSERT_IMAGE_COMMAND,(payload) => {\r\n\r\n      const selection = $getSelection()\r\n      const elementNode = $isNodeSelection(selection) ? selection?.getNodes()[0] as ElementNode : null;\r\n\r\n      if (elementNode) {\r\n        elementNode.append($createImageNode(payload));\r\n      }\r\n      else{\r\n        const p = $createParagraphNode()\r\n        p.append($createImageNode(payload))\r\n        $insertNodeToNearestRoot(p)\r\n      }\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        const result = await uploadhandle(filesResult.filter(f=>isMimeType(f.file, ACCEPTABLE_IMAGE_TYPES)).map(f=>f.result))\r\n\r\n        result.forEach(path=>{\r\n            editor.dispatchCommand(INSERT_IMAGE_COMMAND, {\r\n              src:path, alt:\"\",  maxWidth:\":100%\"\r\n            } as ImageAttrType)\r\n        })\r\n\r\n      })()\r\n\r\n      return true\r\n    },COMMAND_PRIORITY_LOW)\r\n  )\r\n})\r\n\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\r\n</script>\r\n\r\n<template>\r\n  <div class=\"mk-doc-active-element-block-mark\" v-if=\"isSelected\" :style=\"curSelectPos\">\r\n  </div>\r\n</template>\r\n"],"names":[],"mappings":"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"}

package/dist/esm/components/basic/doc-editor/plugins/ImagePlugin/utils.js

@@ -1,4 +1,4 @@
-import { ref, computed, h, createVNode, createTextVNode, Fragment, defineComponent, reactive, mergeProps, isVNode } from "vue";
+import { ref, computed, h, createVNode, createTextVNode, Fragment, defineComponent, reactive, watch, mergeProps, isVNode } from "vue";
 import { Messager, Dialoger } from "@maketribe/dm";
 import { ElButton, ElImage, ElIcon, ElTabs, ElTabPane, ElInput, ElRow, ElCol, ElForm, ElFormItem } from "element-plus";
 import { Picture, UploadFilled, Share } from "@element-plus/icons-vue";
@@ -42,70 +42,48 @@ const ImageEditPanelComponent = /* @__PURE__ */ defineComponent({
   }) {
     const attrs = reactive(props.attrs);
     const materialTable = reactive(new MsMaterialTable());
-    const margin = computed(() => {
-      var vals = attrs.margin.split(/[\s]+/g);
-      if (vals.length == 1) {
-        return {
+    const margin = ref({
+      t: 0,
+      r: 0,
+      b: 0,
+      l: 0
+    });
+    watch(() => `${margin.value.t} ${margin.value.r} ${margin.value.b} ${margin.value.l}`, (v) => {
+      attrs.margin = v;
+    });
+    watch(() => props.attrs, () => {
+      var vals = props.attrs.margin.split(/[\s]+/g);
+      if (vals.length == 1 && vals[0]) {
+        margin.value = {
           t: vals[0],
           r: vals[0],
           b: vals[0],
           l: vals[0]
         };
       } else if (vals.length == 2) {
-        return {
+        margin.value = {
           t: vals[0],
           r: vals[1],
           b: vals[0],
           l: vals[1]
         };
       } else if (vals.length == 3) {
-        return {
+        margin.value = {
           t: vals[0],
           r: vals[1],
           b: vals[2],
           l: vals[1]
         };
-      } else if (vals.length <= 0) {
-        vals = ["", "", "", ""];
-      }
-      return {
-        t: vals[0],
-        r: vals[1],
-        b: vals[2],
-        l: vals[3]
-      };
-    });
-    const marginT = computed({
-      set(v) {
-        attrs.margin = `${v} ${margin.value.r} ${margin.value.b} ${margin.value.l}`;
-      },
-      get() {
-        return margin.value.t;
-      }
-    });
-    const marginR = computed({
-      set(v) {
-        attrs.margin = `${margin.value.t} ${v} ${margin.value.b} ${margin.value.l}`;
-      },
-      get() {
-        return margin.value.r;
-      }
-    });
-    const marginB = computed({
-      set(v) {
-        attrs.margin = `${margin.value.t} ${margin.value.r} ${v} ${margin.value.l}`;
-      },
-      get() {
-        return margin.value.b;
-      }
-    });
-    const marginL = computed({
-      set(v) {
-        attrs.margin = `${margin.value.t} ${margin.value.r}  ${margin.value.b} ${v}`;
-      },
-      get() {
-        return margin.value.l;
+      } else if (vals.length == 4) {
+        margin.value = {
+          t: vals[0],
+          r: vals[1],
+          b: vals[2],
+          l: vals[3]
+        };
       }
+    }, {
+      immediate: true
     });
     materialTable.selectionChangeEvent.on(() => {
       var _a;
@@ -257,20 +235,20 @@ const ImageEditPanelComponent = /* @__PURE__ */ defineComponent({
                 default: () => [createVNode("div", {
                   "style": "display: flex;flex-wrap: nowrap;gap: 10px;justify-content: space-around;"
                 }, [createVNode("div", null, [createTextVNode("上:"), createVNode(ElInput, {
-                  "modelValue": marginT.value,
-                  "onUpdate:modelValue": ($event) => marginT.value = $event,
+                  "modelValue": margin.value.t,
+                  "onUpdate:modelValue": ($event) => margin.value.t = $event,
                   "placeholder": ""
                 }, null)]), createVNode("div", null, [createTextVNode("右:"), createVNode(ElInput, {
-                  "modelValue": marginR.value,
-                  "onUpdate:modelValue": ($event) => marginR.value = $event,
+                  "modelValue": margin.value.r,
+                  "onUpdate:modelValue": ($event) => margin.value.r = $event,
                   "placeholder": ""
                 }, null)]), createVNode("div", null, [createTextVNode("下:"), createVNode(ElInput, {
-                  "modelValue": marginB.value,
-                  "onUpdate:modelValue": ($event) => marginB.value = $event,
+                  "modelValue": margin.value.b,
+                  "onUpdate:modelValue": ($event) => margin.value.b = $event,
                   "placeholder": ""
                 }, null)]), createVNode("div", null, [createTextVNode("左:"), createVNode(ElInput, {
-                  "modelValue": marginL.value,
-                  "onUpdate:modelValue": ($event) => marginL.value = $event,
+                  "modelValue": margin.value.l,
+                  "onUpdate:modelValue": ($event) => margin.value.l = $event,
                   "placeholder": ""
                 }, null)])])]
               })]