@maketribe/ms-app 3.2.42 → 3.2.44

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

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

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

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

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

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

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

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

package/dist/cjs/components/basic/{doc-editor/plugins/ImagePlugin → lexical-editor/nodes}/ImageNode.js

@@ -3,23 +3,26 @@ 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 HtmlElementDecoratorNode = require("./HtmlElementDecoratorNode.js");
 const lexical = require("lexical");
+const INSERT_IMAGE_COMMAND = lexical.createCommand("INSERT_IMAGE_COMMAND");
 const ImageDefaultSrc = "data:image/png;base64,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";
-class ImageNode extends lexical.DecoratorNode {
-  constructor(attrs, key) {
-    super(key);
-    __publicField(this, "__attrs");
-    this.__attrs = attrs;
+class ImageNode extends HtmlElementDecoratorNode.HtmlElementDecoratorNode {
+  constructor(src, alt, className, style, key) {
+    super("img", className, style, key);
+    __publicField(this, "__src");
+    __publicField(this, "__alt");
+    this.__src = src;
+    this.__alt = alt;
   }
   static getType() {
     return "image";
   }
   static clone(node) {
-    return new ImageNode(node.__attrs, node.__key);
+    return new ImageNode(node.__src, node.__alt, node.__class, node.__style, node.__key);
   }
   static importJSON(serializedNode) {
-    const node = $createImageNode(serializedNode.attrs);
-    return node;
+    return $createImageNode(serializedNode.src, serializedNode.alt, serializedNode.class, serializedNode.style);
   }
   static importDOM() {
     return {
@@ -29,173 +32,107 @@ class ImageNode extends lexical.DecoratorNode {
         return el.tagName.toLowerCase() == "img" ? {
           conversion: (domNode) => {
             return {
-              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: ""
-              })
+              node: $createImageNode(src ?? "", alt ?? void 0, domNode.className, domNode.getAttribute("style") ?? "")
             };
           },
-          priority: 0
+          priority: 1
         } : null;
       }
     };
   }
+  /**
+   * 隔离渲染函数
+   * @param editor 
+   * @param config 
+   * @returns 
+   */
+  decorate(editor, config) {
+    return null;
+  }
+  /**
+   * 导出JSON
+   * @returns 
+   */
   exportJSON() {
     return {
+      ...super.exportJSON(),
       type: this.getType(),
       version: 1,
-      attrs: this.__attrs
+      src: this.__src,
+      alt: this.__alt
     };
   }
-  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.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;
-  }
-  exportDOM() {
-    const element = document.createElement("img");
-    this.updateElementAttr(element);
-    return { element };
-  }
   /**
-   * 更新元素属性
-   * @param el 
+   * 设置src
+   * @param src 
+   * @returns 
    */
-  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(";"));
+  setSrc(src) {
+    const self = this.getWritable();
+    self.__src = src || "";
+    return this;
   }
   /**
-  * 更新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;
+   * 设置 alt
+   * @param alt 
+   * @returns 
+   */
+  setAlt(alt) {
+    const self = this.getWritable();
+    self.__alt = alt || "";
+    return this;
   }
+  /**
+   * 创建DOM
+   * @param config 
+   * @returns 
+   */
   createDOM(config) {
-    const element = document.createElement("img");
-    this.updateElementAttr(element);
-    if (!this.__attrs.src) {
+    const element = super.createDOM(config);
+    if (this.__src) {
+      element.setAttribute("src", this.__src);
+    } else {
       element.setAttribute("src", ImageDefaultSrc);
     }
-    element.setAttribute("node-key", this.__key);
+    if (this.__alt) {
+      element.setAttribute("alt", this.__alt);
+    }
     return element;
   }
-  decorate(editor, config) {
-    return null;
-  }
   /**
-   * 设置属性
-   * @param pos 
+   * 更新DOM
+   * @param _prevNode 
+   * @param _dom 
+   * @param _config 
+   * @returns 
    */
-  setAttrs(data) {
-    const writable = this.getWritable();
-    Object.assign(writable.__attrs, data);
-  }
-  isEmpty() {
-    return false;
-  }
-  isIsolated() {
+  updateDOM(prevNode, dom, config) {
+    super.updateDOM(prevNode, dom, config);
+    if (this.__src) {
+      dom.setAttribute("src", this.__src);
+    } else {
+      dom.setAttribute("src", ImageDefaultSrc);
+    }
+    if (this.__alt) {
+      dom.setAttribute("alt", this.__alt);
+    }
     return false;
   }
+  /**
+   * @returns 
+   */
   isInline() {
     return true;
   }
-  isKeyboardSelectable() {
-    return true;
-  }
-}
-class InlineImageNode extends ImageNode {
-  static getType() {
-    return "InlineImage";
-  }
-  static clone(node) {
-    return new InlineImageNode(node.__attrs, node.__key);
-  }
-  static importJSON(serializedNode) {
-    const node = $createImageNode(serializedNode.attrs);
-    return node;
-  }
-  static importDOM() {
-    return {
-      img: (el) => {
-        const src = el.getAttribute("src");
-        const alt = el.getAttribute("alt");
-        return el.tagName.toLowerCase() == "img" && el.style.float ? {
-          conversion: (domNode) => {
-            return {
-              node: new InlineImageNode({
-                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
-              })
-            };
-          },
-          priority: 1
-        } : null;
-      }
-    };
-  }
-  constructor(attrs, key) {
-    super(attrs, key);
-  }
-  exportJSON() {
-    return {
-      type: this.getType(),
-      version: 1,
-      attrs: this.__attrs
-    };
-  }
-  decorate(editor, config) {
-    return null;
-  }
 }
-function $createImageNode(attrs) {
-  return new ImageNode(attrs);
+function $createImageNode(src, alt, className, style) {
+  return new ImageNode(src, alt, className, style);
 }
 function $isImageNode(node) {
   return node instanceof ImageNode;
 }
 exports.$createImageNode = $createImageNode;
 exports.$isImageNode = $isImageNode;
+exports.INSERT_IMAGE_COMMAND = INSERT_IMAGE_COMMAND;
 exports.ImageNode = ImageNode;
-exports.InlineImageNode = InlineImageNode;
 //# sourceMappingURL=ImageNode.js.map