@maketribe/ms-app 3.2.23 → 3.2.24

package/dist/cjs/components/basic/doc-editor/plugins/RichTextPlugin/nodes/BaseBlockCantainerNode.js

@@ -0,0 +1,123 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lexical = require("lexical");
+const BaseMarkClassName = "mk-doc-block-container";
+class BaseBlockCantainerNode extends lexical.ElementNode {
+  constructor(type, key) {
+    super(key);
+    this.__type = type;
+  }
+  /**
+  * 获取指定类型模块类标识
+  * @param type 
+  * @returns 
+  */
+  static getMarkClassName(type) {
+    return `${BaseMarkClassName}__${type}`;
+  }
+  /**
+   * 是否是指定类型模块
+   * @param dom 
+   * @param type 
+   * @returns 
+   */
+  static hasBlockByType(dom, type) {
+    return dom.classList.contains(BaseBlockCantainerNode.getMarkClassName(type));
+  }
+  /**
+   * 导出json
+   * @returns 
+   */
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: this.__type,
+      version: 1
+    };
+  }
+  /**
+   * 获取标识类名
+   */
+  getMarkClassName() {
+    return BaseBlockCantainerNode.getMarkClassName(this.__type);
+  }
+  /**
+   * 导出DOM
+   * @returns 
+   */
+  exportDOM() {
+    const element = document.createElement("div");
+    if (!element.classList.contains(this.getMarkClassName())) {
+      element.classList.add(this.getMarkClassName());
+    }
+    return { element };
+  }
+  /**
+   * 创建渲染DOM
+   * @param config 
+   * @returns 
+   */
+  createDOM(config) {
+    const el = this.exportDOM().element;
+    el.setAttribute("node-key", this.__key);
+    el.setAttribute("contenteditable", "false");
+    el.setAttribute("data-lexical-decorator", "true");
+    return el;
+  }
+  /**
+   * 更新DOM
+   * @param prevNode 
+   * @param dom 
+   * @param config 
+   * @returns 
+   */
+  updateDOM(prevNode, dom, config) {
+    return false;
+  }
+  /**
+   * 非内联
+   * @returns 
+   */
+  isInline() {
+    return false;
+  }
+  /**
+   * 定义为影子根
+   * @returns 
+   */
+  isShadowRoot() {
+    return true;
+  }
+  // // Mutation
+  // insertNewAfter(rangeSelection:RangeSelection, restoreSelection:boolean) {
+  //   // const newElement = $createParagraphNode();
+  //   // newElement.setTextFormat(rangeSelection.format);
+  //   // const direction = this.getDirection();
+  //   // newElement.setDirection(direction);
+  //   // newElement.setFormat(this.getFormatType());
+  //   // this.insertAfter(newElement, restoreSelection);
+  //   console.log(rangeSelection,restoreSelection)
+  //   return null;
+  // }
+  // collapseAtStart() {
+  //   const children = this.getChildren();
+  //   console.log("asdasdas")
+  //   if (children.length === 0 || $isTextNode(children[0]) && children[0].getTextContent().trim() === "") {
+  //     const nextSibling = this.getNextSibling();
+  //     if (nextSibling !== null) {
+  //       this.selectNext();
+  //       this.remove();
+  //       return true;
+  //     }
+  //     const prevSibling = this.getPreviousSibling();
+  //     if (prevSibling !== null) {
+  //       this.selectPrevious();
+  //       this.remove();
+  //       return true;
+  //     }
+  //   }
+  //   return false;
+  // }
+}
+exports.BaseBlockCantainerNode = BaseBlockCantainerNode;
+//# sourceMappingURL=BaseBlockCantainerNode.js.map

package/dist/cjs/components/basic/doc-editor/plugins/RichTextPlugin/nodes/BaseBlockCantainerNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseBlockCantainerNode.js","sources":["../../../../../../../../src/components/basic/doc-editor/plugins/RichTextPlugin/nodes/BaseBlockCantainerNode.ts"],"sourcesContent":["import type {\r\n  DOMExportOutput,\r\n  EditorConfig,\r\n  NodeKey,\r\n  Spread,\r\n  SerializedElementNode,\r\n} from 'lexical'\r\nimport { ElementNode} from 'lexical'\r\n\r\n/**\r\n * 可编辑组件块容器节点\r\n */\r\nexport type SerializedBlockCantainerNode = Spread<{},SerializedElementNode>\r\n\r\n// 基础类标识\r\nconst BaseMarkClassName = \"mk-doc-block-container\";\r\n\r\n/**\r\n * 定义组件块容器点\r\n */\r\nexport class BaseBlockCantainerNode extends ElementNode {\r\n\r\n  constructor(type: string,  key?: NodeKey) {\r\n    super(key)\r\n    this.__type = type\r\n  }\r\n\r\n   /**\r\n   * 获取指定类型模块类标识\r\n   * @param type \r\n   * @returns \r\n   */\r\n  static getMarkClassName(type:string): string {\r\n    return `${BaseMarkClassName}__${type}`\r\n  }\r\n\r\n  /**\r\n   * 是否是指定类型模块\r\n   * @param dom \r\n   * @param type \r\n   * @returns \r\n   */\r\n  static hasBlockByType(dom: HTMLElement,type:string): boolean {\r\n    return dom.classList.contains(BaseBlockCantainerNode.getMarkClassName(type))\r\n  }\r\n\r\n  /**\r\n   * 导出json\r\n   * @returns \r\n   */\r\n  exportJSON(): SerializedBlockCantainerNode {\r\n    return {\r\n      ...super.exportJSON(),\r\n      type: this.__type,\r\n      version: 1\r\n    }\r\n  }\r\n\r\n  /**\r\n   * 获取标识类名\r\n   */\r\n  getMarkClassName(){\r\n    return BaseBlockCantainerNode.getMarkClassName(this.__type)\r\n  }\r\n\r\n  /**\r\n   * 导出DOM\r\n   * @returns \r\n   */\r\n  exportDOM(): DOMExportOutput {\r\n   \r\n    const element = document.createElement('div')\r\n\r\n    if (!element.classList.contains(this.getMarkClassName())) {\r\n      element.classList.add(this.getMarkClassName());\r\n    }\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    const el = this.exportDOM().element as HTMLElement;\r\n    el.setAttribute(\"node-key\",this.__key)\r\n    el.setAttribute(\"contenteditable\",\"false\")\r\n    el.setAttribute(\"data-lexical-decorator\",\"true\")\r\n    return el;\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: BaseBlockCantainerNode, dom: HTMLElement, config: EditorConfig): boolean {\r\n    // console.log(\"Image Text updateDOM\",prevNode,dom);\r\n    // const position = this.__pos\r\n    // if (position !== prevNode.__pos) {\r\n    //   const className = `${config.theme.image} position-${position}`\r\n    //   if (className !== undefined) {\r\n    //     dom.className = className\r\n    //   }\r\n    // }\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\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   * @returns \r\n   */\r\n  isShadowRoot(): boolean {\r\n    return true;\r\n  }\r\n\r\n  \r\n  // // Mutation\r\n  // insertNewAfter(rangeSelection:RangeSelection, restoreSelection:boolean) {\r\n  //   // const newElement = $createParagraphNode();\r\n  //   // newElement.setTextFormat(rangeSelection.format);\r\n  //   // const direction = this.getDirection();\r\n  //   // newElement.setDirection(direction);\r\n  //   // newElement.setFormat(this.getFormatType());\r\n  //   // this.insertAfter(newElement, restoreSelection);\r\n  //   console.log(rangeSelection,restoreSelection)\r\n  //   return null;\r\n  // }\r\n\r\n\r\n  // collapseAtStart() {\r\n  //   const children = this.getChildren();\r\n  //   console.log(\"asdasdas\")\r\n  //   if (children.length === 0 || $isTextNode(children[0]) && children[0].getTextContent().trim() === \"\") {\r\n  //     const nextSibling = this.getNextSibling();\r\n  //     if (nextSibling !== null) {\r\n  //       this.selectNext();\r\n  //       this.remove();\r\n  //       return true;\r\n  //     }\r\n  //     const prevSibling = this.getPreviousSibling();\r\n  //     if (prevSibling !== null) {\r\n  //       this.selectPrevious();\r\n  //       this.remove();\r\n  //       return true;\r\n  //     }\r\n  //   }\r\n  //   return false;\r\n  // }\r\n}\r\n"],"names":["ElementNode"],"mappings":";;;AAeA,MAAM,oBAAoB;AAKnB,MAAM,+BAA+BA,QAAAA,YAAY;AAAA,EAEtD,YAAY,MAAe,KAAe;AACxC,UAAM,GAAG;AACT,SAAK,SAAS;AAAA,EAChB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,OAAO,iBAAiB,MAAqB;AACpC,WAAA,GAAG,iBAAiB,KAAK,IAAI;AAAA,EACtC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,OAAO,eAAe,KAAiB,MAAsB;AAC3D,WAAO,IAAI,UAAU,SAAS,uBAAuB,iBAAiB,IAAI,CAAC;AAAA,EAC7E;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,aAA2C;AAClC,WAAA;AAAA,MACL,GAAG,MAAM,WAAW;AAAA,MACpB,MAAM,KAAK;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA;AAAA;AAAA;AAAA,EAKA,mBAAkB;AACT,WAAA,uBAAuB,iBAAiB,KAAK,MAAM;AAAA,EAC5D;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,YAA6B;AAErB,UAAA,UAAU,SAAS,cAAc,KAAK;AAE5C,QAAI,CAAC,QAAQ,UAAU,SAAS,KAAK,iBAAA,CAAkB,GAAG;AACxD,cAAQ,UAAU,IAAI,KAAK,iBAAkB,CAAA;AAAA,IAC/C;AAEA,WAAO,EAAE,QAAQ;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,UAAU,QAAmC;AACrC,UAAA,KAAK,KAAK,UAAA,EAAY;AACzB,OAAA,aAAa,YAAW,KAAK,KAAK;AAClC,OAAA,aAAa,mBAAkB,OAAO;AACtC,OAAA,aAAa,0BAAyB,MAAM;AACxC,WAAA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,UAAU,UAAkC,KAAkB,QAA+B;AAYpF,WAAA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,WAAoB;AACX,WAAA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,eAAwB;AACf,WAAA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmCF;;"}

package/dist/cjs/components/basic/doc-editor/plugins/RichTextPlugin/nodes/BaseBlockNode.js

@@ -0,0 +1,84 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lexical = require("lexical");
+const BaseMarkClassName = "mk-doc-block";
+class BaseBlockNode extends lexical.ElementNode {
+  constructor(type, key) {
+    super(key);
+    this.__type = type;
+  }
+  /**
+  * 获取指定类型模块类标识
+  * @param type 
+  * @returns 
+  */
+  static getMarkClassName(type) {
+    return `${BaseMarkClassName}__${type}`;
+  }
+  /**
+   * 是否是指定类型模块
+   * @param dom 
+   * @param type 
+   * @returns 
+   */
+  static hasBlockByType(dom, type) {
+    return dom.classList.contains(BaseBlockNode.getMarkClassName(type));
+  }
+  /**
+   * 导出json
+   * @returns 
+   */
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: this.__type,
+      version: 1
+    };
+  }
+  /**
+   * 获取标识类名
+   */
+  getMarkClassName() {
+    return BaseBlockNode.getMarkClassName(this.__type);
+  }
+  /**
+   * 导出DOM
+   * @returns 
+   */
+  exportDOM() {
+    const element = document.createElement("div");
+    if (!element.classList.contains(this.getMarkClassName())) {
+      element.classList.add(this.getMarkClassName());
+    }
+    return { element };
+  }
+  /**
+   * 创建渲染DOM
+   * @param config 
+   * @returns 
+   */
+  createDOM(config) {
+    const el = this.exportDOM().element;
+    el.setAttribute("node-key", this.__key);
+    return el;
+  }
+  /**
+   * 更新DOM
+   * @param prevNode 
+   * @param dom 
+   * @param config 
+   * @returns 
+   */
+  updateDOM(prevNode, dom, config) {
+    return false;
+  }
+  /**
+   * 非内联
+   * @returns 
+   */
+  isInline() {
+    return false;
+  }
+}
+exports.BaseBlockNode = BaseBlockNode;
+//# sourceMappingURL=BaseBlockNode.js.map

package/dist/cjs/components/basic/doc-editor/plugins/RichTextPlugin/nodes/BaseBlockNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseBlockNode.js","sources":["../../../../../../../../src/components/basic/doc-editor/plugins/RichTextPlugin/nodes/BaseBlockNode.ts"],"sourcesContent":["import type {\r\n  DOMExportOutput,\r\n  EditorConfig,\r\n  NodeKey,\r\n  Spread,\r\n  SerializedElementNode,\r\n\r\n} from 'lexical'\r\nimport {  isBlockDomNode, $isBlockElementNode,ElementNode } from 'lexical'\r\nimport { type Component} from \"vue\"\r\n \r\n/**\r\n * 可编辑组件块节点\r\n */\r\nexport type SerializedBlockNode = Spread<{},SerializedElementNode>\r\n\r\n// 基础类标识\r\nconst BaseMarkClassName = \"mk-doc-block\";\r\n\r\n/**\r\n * 定义组件块节点\r\n */\r\nexport class BaseBlockNode extends ElementNode {\r\n\r\n  constructor(type: string,  key?: NodeKey) {\r\n    super(key)\r\n    this.__type = type\r\n  }\r\n\r\n   /**\r\n   * 获取指定类型模块类标识\r\n   * @param type \r\n   * @returns \r\n   */\r\n   static getMarkClassName(type:string): string {\r\n    return `${BaseMarkClassName}__${type}`\r\n  }\r\n\r\n  /**\r\n   * 是否是指定类型模块\r\n   * @param dom \r\n   * @param type \r\n   * @returns \r\n   */\r\n  static hasBlockByType(dom: HTMLElement,type:string): boolean {\r\n    return dom.classList.contains(BaseBlockNode.getMarkClassName(type))\r\n  }\r\n\r\n  /**\r\n   * 导出json\r\n   * @returns \r\n   */\r\n  exportJSON(): SerializedBlockNode {\r\n    return {\r\n      ...super.exportJSON(),\r\n      type: this.__type,\r\n      version: 1\r\n    }\r\n  }\r\n\r\n  /**\r\n   * 获取标识类名\r\n   */\r\n  getMarkClassName(){\r\n    return BaseBlockNode.getMarkClassName(this.__type)\r\n  }\r\n\r\n  /**\r\n   * 导出DOM\r\n   * @returns \r\n   */\r\n  exportDOM(): DOMExportOutput {\r\n   \r\n    const element = document.createElement('div')\r\n\r\n    if (!element.classList.contains(this.getMarkClassName())) {\r\n      element.classList.add(this.getMarkClassName());\r\n    }\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    const el = this.exportDOM().element as HTMLElement;\r\n    el.setAttribute(\"node-key\",this.__key)\r\n    return el;\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: BaseBlockNode, dom: HTMLElement, config: EditorConfig): boolean {\r\n    // console.log(\"Image Text updateDOM\",prevNode,dom);\r\n    // const position = this.__pos\r\n    // if (position !== prevNode.__pos) {\r\n    //   const className = `${config.theme.image} position-${position}`\r\n    //   if (className !== undefined) {\r\n    //     dom.className = className\r\n    //   }\r\n    // }\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  /**\r\n   * 非内联\r\n   * @returns \r\n   */\r\n  isInline(): boolean {\r\n    return false;\r\n  }\r\n\r\n}\r\n"],"names":["ElementNode"],"mappings":";;;AAiBA,MAAM,oBAAoB;AAKnB,MAAM,sBAAsBA,QAAAA,YAAY;AAAA,EAE7C,YAAY,MAAe,KAAe;AACxC,UAAM,GAAG;AACT,SAAK,SAAS;AAAA,EAChB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOC,OAAO,iBAAiB,MAAqB;AACrC,WAAA,GAAG,iBAAiB,KAAK,IAAI;AAAA,EACtC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,OAAO,eAAe,KAAiB,MAAsB;AAC3D,WAAO,IAAI,UAAU,SAAS,cAAc,iBAAiB,IAAI,CAAC;AAAA,EACpE;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,aAAkC;AACzB,WAAA;AAAA,MACL,GAAG,MAAM,WAAW;AAAA,MACpB,MAAM,KAAK;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA;AAAA;AAAA;AAAA,EAKA,mBAAkB;AACT,WAAA,cAAc,iBAAiB,KAAK,MAAM;AAAA,EACnD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,YAA6B;AAErB,UAAA,UAAU,SAAS,cAAc,KAAK;AAE5C,QAAI,CAAC,QAAQ,UAAU,SAAS,KAAK,iBAAA,CAAkB,GAAG;AACxD,cAAQ,UAAU,IAAI,KAAK,iBAAkB,CAAA;AAAA,IAC/C;AAEA,WAAO,EAAE,QAAQ;AAAA,EACnB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,UAAU,QAAmC;AACrC,UAAA,KAAK,KAAK,UAAA,EAAY;AACzB,OAAA,aAAa,YAAW,KAAK,KAAK;AAC9B,WAAA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,UAAU,UAAyB,KAAkB,QAA+B;AAY3E,WAAA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAoB;AACX,WAAA;AAAA,EACT;AAEF;;"}

package/dist/cjs/components/basic/doc-editor/plugins/RichTextPlugin/nodes/RichTextNode.js

@@ -58,6 +58,11 @@ class RichTextNode extends lexical.TextNode {
   constructor(text, key) {
     super(text, key);
   }
+  exportJSON() {
+    return {
+      ...super.exportJSON()
+    };
+  }
 }
 function convertBringAttentionToElement(domNode) {
   const b = domNode;

package/dist/cjs/components/basic/doc-editor/plugins/RichTextPlugin/nodes/RichTextNode.js.map

@@ -1 +1 @@
-{"version":3,"file":"RichTextNode.js","sources":["../../../../../../../../src/components/basic/doc-editor/plugins/RichTextPlugin/nodes/RichTextNode.ts"],"sourcesContent":["\r\n\r\nimport type { DOMConversionMap, LexicalCommand, LexicalNode, NodeKey, SerializedTextNode } from 'lexical'\r\nimport { $isTextNode,TextNode,$createTextNode } from 'lexical'\r\n\r\n/**\r\n * 富文本的文本节点\r\n */\r\nexport class RichTextNode extends TextNode{\r\n\r\n  static getType(): string {\r\n    return \"rich-text\";\r\n  }\r\n\r\n  static clone(node: RichTextNode): RichTextNode {\r\n    return new RichTextNode(node.__key)\r\n  }\r\n\r\n  static importJSON(serializedNode: SerializedTextNode): TextNode {\r\n    return TextNode.importJSON(serializedNode);\r\n  }\r\n\r\n  static importDOM(): DOMConversionMap | null {\r\n    \r\n    return {\r\n      b: () => ({\r\n        conversion: convertBringAttentionToElement,\r\n        priority: 4\r\n      }),\r\n      code: () => ({\r\n        conversion: convertTextFormatElement,\r\n        priority: 4\r\n      }),\r\n      em: () => ({\r\n        conversion: convertTextFormatElement,\r\n        priority: 4\r\n      }),\r\n      i: () => ({\r\n        conversion: convertTextFormatElement,\r\n        priority: 4\r\n      }),\r\n      s: () => ({\r\n        conversion: convertTextFormatElement,\r\n        priority: 4\r\n      }),\r\n      span: () => ({\r\n        conversion: convertSpanElement,\r\n        priority: 4\r\n      }),\r\n      strong: () => ({\r\n        conversion: convertTextFormatElement,\r\n        priority: 4\r\n      }),\r\n      sub: () => ({\r\n        conversion: convertTextFormatElement,\r\n        priority: 4\r\n      }),\r\n      sup: () => ({\r\n        conversion: convertTextFormatElement,\r\n        priority: 4\r\n      }),\r\n      u: () => ({\r\n        conversion: convertTextFormatElement,\r\n        priority: 4\r\n      })\r\n    };\r\n  }\r\n\r\n  constructor(text:string,key?: NodeKey) {\r\n    super(text,key)\r\n  }\r\n\r\n}\r\n\r\nfunction convertBringAttentionToElement(domNode:HTMLElement) {\r\n  const b = domNode;\r\n  const hasNormalFontWeight = b.style.fontWeight === \"normal\";\r\n  return {\r\n    forChild: applyTextFormatFromStyle(b.style, hasNormalFontWeight ? void 0 : \"bold\"),\r\n    node: null\r\n  };\r\n}\r\n\r\nvar nodeNameToTextFormat:any = {\r\n  code: \"code\",\r\n  em: \"italic\",\r\n  i: \"italic\",\r\n  s: \"strikethrough\",\r\n  strong: \"bold\",\r\n  sub: \"subscript\",\r\n  sup: \"superscript\",\r\n  u: \"underline\"\r\n};\r\nfunction convertTextFormatElement(domNode:HTMLElement) {\r\n  const format = nodeNameToTextFormat[domNode.nodeName.toLowerCase()];\r\n  if (format === void 0) {\r\n    return {\r\n      node: null\r\n    };\r\n  }\r\n  return {\r\n    forChild: applyTextFormatFromStyle(domNode.style, format),\r\n    node: null\r\n  };\r\n}\r\nfunction convertSpanElement(domNode:HTMLElement) {\r\n  const span = domNode;\r\n  const style = span.style;\r\n  return {\r\n    forChild: applyTextFormatFromStyle(style,null),\r\n    node: null\r\n  };\r\n}\r\n\r\nfunction applyTextFormatFromStyle(style:any, shouldApply:any) {\r\n  const fontWeight = style.fontWeight;\r\n  const textDecoration = style.textDecoration.split(\" \");\r\n  const hasBoldFontWeight = fontWeight === \"700\" || fontWeight === \"bold\";\r\n  const hasLinethroughTextDecoration = textDecoration.includes(\"line-through\");\r\n  const hasItalicFontStyle = style.fontStyle === \"italic\";\r\n  const hasUnderlineTextDecoration = textDecoration.includes(\"underline\");\r\n  const verticalAlign = style.verticalAlign;\r\n\r\n  return (lexicalNode:LexicalNode) => {\r\n    if (!$isTextNode(lexicalNode)) {\r\n      return lexicalNode;\r\n    }\r\n\r\n    let styleStr = \"\";\r\n\r\n    if(style.color){\r\n      styleStr += `color:${style.color};`\r\n    }\r\n    if(style.fontSize){\r\n      styleStr += `font-size:${style.fontSize};`\r\n    }\r\n    if(style.fontFamily){\r\n      styleStr += `font-family:${style.fontFamily};`\r\n    }\r\n    if(style.backgroundColor){\r\n      styleStr += `background-color:${style.backgroundColor};`\r\n    }\r\n\r\n    if(styleStr){\r\n      lexicalNode.setStyle(styleStr);\r\n    }\r\n\r\n\r\n    if (hasBoldFontWeight && !lexicalNode.hasFormat(\"bold\")) {\r\n      lexicalNode.toggleFormat(\"bold\");\r\n    }\r\n    if (hasLinethroughTextDecoration && !lexicalNode.hasFormat(\"strikethrough\")) {\r\n      lexicalNode.toggleFormat(\"strikethrough\");\r\n    }\r\n    if (hasItalicFontStyle && !lexicalNode.hasFormat(\"italic\")) {\r\n      lexicalNode.toggleFormat(\"italic\");\r\n    }\r\n    if (hasUnderlineTextDecoration && !lexicalNode.hasFormat(\"underline\")) {\r\n      lexicalNode.toggleFormat(\"underline\");\r\n    }\r\n    if (verticalAlign === \"sub\" && !lexicalNode.hasFormat(\"subscript\")) {\r\n      lexicalNode.toggleFormat(\"subscript\");\r\n    }\r\n    if (verticalAlign === \"super\" && !lexicalNode.hasFormat(\"superscript\")) {\r\n      lexicalNode.toggleFormat(\"superscript\");\r\n    }\r\n    if (shouldApply && !lexicalNode.hasFormat(shouldApply)) {\r\n      lexicalNode.toggleFormat(shouldApply);\r\n    }\r\n    return lexicalNode;\r\n  };\r\n}\r\n\r\n\r\n"],"names":["TextNode","$isTextNode"],"mappings":"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"}
+{"version":3,"file":"RichTextNode.js","sources":["../../../../../../../../src/components/basic/doc-editor/plugins/RichTextPlugin/nodes/RichTextNode.ts"],"sourcesContent":["\r\n\r\nimport type { DOMConversionMap, LexicalCommand, LexicalNode, NodeKey, SerializedTextNode } from 'lexical'\r\nimport { $isTextNode,TextNode,$createTextNode } from 'lexical'\r\n\r\n/**\r\n * 富文本的文本节点\r\n */\r\nexport class RichTextNode extends TextNode{\r\n\r\n  static getType(): string {\r\n    return \"rich-text\";\r\n  }\r\n\r\n  static clone(node: RichTextNode): RichTextNode {\r\n    return new RichTextNode(node.__key)\r\n  }\r\n\r\n  static importJSON(serializedNode: SerializedTextNode): TextNode {\r\n    return TextNode.importJSON(serializedNode);\r\n  }\r\n\r\n  static importDOM(): DOMConversionMap | null {\r\n    \r\n    return {\r\n      b: () => ({\r\n        conversion: convertBringAttentionToElement,\r\n        priority: 4\r\n      }),\r\n      code: () => ({\r\n        conversion: convertTextFormatElement,\r\n        priority: 4\r\n      }),\r\n      em: () => ({\r\n        conversion: convertTextFormatElement,\r\n        priority: 4\r\n      }),\r\n      i: () => ({\r\n        conversion: convertTextFormatElement,\r\n        priority: 4\r\n      }),\r\n      s: () => ({\r\n        conversion: convertTextFormatElement,\r\n        priority: 4\r\n      }),\r\n      span: () => ({\r\n        conversion: convertSpanElement,\r\n        priority: 4\r\n      }),\r\n      strong: () => ({\r\n        conversion: convertTextFormatElement,\r\n        priority: 4\r\n      }),\r\n      sub: () => ({\r\n        conversion: convertTextFormatElement,\r\n        priority: 4\r\n      }),\r\n      sup: () => ({\r\n        conversion: convertTextFormatElement,\r\n        priority: 4\r\n      }),\r\n      u: () => ({\r\n        conversion: convertTextFormatElement,\r\n        priority: 4\r\n      })\r\n    };\r\n  }\r\n\r\n  constructor(text:string,key?: NodeKey) {\r\n    super(text,key)\r\n  }\r\n\r\n  exportJSON(): SerializedTextNode {\r\n    return {\r\n      ...super.exportJSON(),\r\n     \r\n    }\r\n  }\r\n}\r\n\r\nfunction convertBringAttentionToElement(domNode:HTMLElement) {\r\n  const b = domNode;\r\n  const hasNormalFontWeight = b.style.fontWeight === \"normal\";\r\n  return {\r\n    forChild: applyTextFormatFromStyle(b.style, hasNormalFontWeight ? void 0 : \"bold\"),\r\n    node: null\r\n  };\r\n}\r\n\r\nvar nodeNameToTextFormat:any = {\r\n  code: \"code\",\r\n  em: \"italic\",\r\n  i: \"italic\",\r\n  s: \"strikethrough\",\r\n  strong: \"bold\",\r\n  sub: \"subscript\",\r\n  sup: \"superscript\",\r\n  u: \"underline\"\r\n};\r\nfunction convertTextFormatElement(domNode:HTMLElement) {\r\n  const format = nodeNameToTextFormat[domNode.nodeName.toLowerCase()];\r\n  if (format === void 0) {\r\n    return {\r\n      node: null\r\n    };\r\n  }\r\n  return {\r\n    forChild: applyTextFormatFromStyle(domNode.style, format),\r\n    node: null\r\n  };\r\n}\r\nfunction convertSpanElement(domNode:HTMLElement) {\r\n  const span = domNode;\r\n  const style = span.style;\r\n  return {\r\n    forChild: applyTextFormatFromStyle(style,null),\r\n    node: null\r\n  };\r\n}\r\n\r\nfunction applyTextFormatFromStyle(style:any, shouldApply:any) {\r\n  const fontWeight = style.fontWeight;\r\n  const textDecoration = style.textDecoration.split(\" \");\r\n  const hasBoldFontWeight = fontWeight === \"700\" || fontWeight === \"bold\";\r\n  const hasLinethroughTextDecoration = textDecoration.includes(\"line-through\");\r\n  const hasItalicFontStyle = style.fontStyle === \"italic\";\r\n  const hasUnderlineTextDecoration = textDecoration.includes(\"underline\");\r\n  const verticalAlign = style.verticalAlign;\r\n\r\n  return (lexicalNode:LexicalNode) => {\r\n    if (!$isTextNode(lexicalNode)) {\r\n      return lexicalNode;\r\n    }\r\n\r\n    let styleStr = \"\";\r\n\r\n    if(style.color){\r\n      styleStr += `color:${style.color};`\r\n    }\r\n    if(style.fontSize){\r\n      styleStr += `font-size:${style.fontSize};`\r\n    }\r\n    if(style.fontFamily){\r\n      styleStr += `font-family:${style.fontFamily};`\r\n    }\r\n    if(style.backgroundColor){\r\n      styleStr += `background-color:${style.backgroundColor};`\r\n    }\r\n\r\n    if(styleStr){\r\n      lexicalNode.setStyle(styleStr);\r\n    }\r\n\r\n\r\n    if (hasBoldFontWeight && !lexicalNode.hasFormat(\"bold\")) {\r\n      lexicalNode.toggleFormat(\"bold\");\r\n    }\r\n    if (hasLinethroughTextDecoration && !lexicalNode.hasFormat(\"strikethrough\")) {\r\n      lexicalNode.toggleFormat(\"strikethrough\");\r\n    }\r\n    if (hasItalicFontStyle && !lexicalNode.hasFormat(\"italic\")) {\r\n      lexicalNode.toggleFormat(\"italic\");\r\n    }\r\n    if (hasUnderlineTextDecoration && !lexicalNode.hasFormat(\"underline\")) {\r\n      lexicalNode.toggleFormat(\"underline\");\r\n    }\r\n    if (verticalAlign === \"sub\" && !lexicalNode.hasFormat(\"subscript\")) {\r\n      lexicalNode.toggleFormat(\"subscript\");\r\n    }\r\n    if (verticalAlign === \"super\" && !lexicalNode.hasFormat(\"superscript\")) {\r\n      lexicalNode.toggleFormat(\"superscript\");\r\n    }\r\n    if (shouldApply && !lexicalNode.hasFormat(shouldApply)) {\r\n      lexicalNode.toggleFormat(shouldApply);\r\n    }\r\n    return lexicalNode;\r\n  };\r\n}\r\n\r\n\r\n"],"names":["TextNode","$isTextNode"],"mappings":"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"}

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

@@ -2,9 +2,13 @@
 const vue = require("vue");
 const lexical = require("lexical");
 const selection = require("@lexical/selection");
+const link = require("@lexical/link");
+const url = require("../../utils/url.js");
+const getSelectedNode = require("../../utils/getSelectedNode.js");
 const utils = require("@lexical/utils");
 const lexicalVue = require("lexical-vue");
 const FontStyleDefines = require("./FontStyleDefines.js");
+const LinkEditDialog = require("../AutoLinkPlugin/LinkEditDialog.js");
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "FontStyleTool",
   setup(__props) {
@@ -20,13 +24,23 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const alignList = vue.ref(["left", "center", "right", "justify"]);
     const alignValue = vue.ref(alignList.value[0]);
     const disabled = vue.ref(false);
+    const isLink = vue.ref(false);
+    const linkValue = vue.ref("");
+    async function insertLink() {
+      const result = await LinkEditDialog.ShowLinkEditPanel(linkValue.value);
+      if (result.trim()) {
+        editor.dispatchCommand(link.TOGGLE_LINK_COMMAND, url.sanitizeUrl(result));
+      } else {
+        editor.dispatchCommand(link.TOGGLE_LINK_COMMAND, null);
+      }
+    }
     function updateToolbar() {
       const selection$1 = lexical.$getSelection();
       if (lexical.$isRangeSelection(selection$1)) {
         const anchorNode = selection$1.anchor.getNode();
         let element = anchorNode.getKey() === "root" ? anchorNode : utils.$findMatchingParent(anchorNode, (e) => {
-          const parent = e.getParent();
-          return parent !== null && lexical.$isRootOrShadowRoot(parent);
+          const parent2 = e.getParent();
+          return parent2 !== null && lexical.$isRootOrShadowRoot(parent2);
         });
         if (element === null) {
           element = anchorNode.getTopLevelElementOrThrow();
@@ -51,6 +65,14 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         bgColor.value = selection.$getSelectionStyleValueForProperty(selection$1, "background-color", "#fff");
         fontFamily.value = FontStyleDefines.FONT_FAMILY_OPTIONS.find((item) => item.value == ff) || FontStyleDefines.FONT_FAMILY_OPTIONS[0];
         disabled.value = false;
+        const node = getSelectedNode.getSelectedNode(selection$1);
+        const parent = node.getParent();
+        isLink.value = link.$isLinkNode(parent) || link.$isLinkNode(node);
+        if (isLink.value) {
+          linkValue.value = link.$isLinkNode(parent) ? parent.getURL() : node.getURL();
+        } else {
+          linkValue.value = "";
+        }
       } else {
         disabled.value = true;
       }
@@ -317,7 +339,24 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             }, 8, ["style", "disabled"])
           ]),
           _: 1
-        }, 8, ["disabled"])
+        }, 8, ["disabled"]),
+        vue.createVNode(_component_el_divider, { direction: "vertical" }),
+        vue.createVNode(_component_el_button_group, null, {
+          default: vue.withCtx(() => [
+            vue.createVNode(_component_el_button, {
+              text: "",
+              disabled: disabled.value,
+              class: vue.normalizeClass(`${isLink.value ? "active" : ""}`),
+              onClick: insertLink
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_component_MKSvgIcon, { iconClass: "doc-link" })
+              ]),
+              _: 1
+            }, 8, ["disabled", "class"])
+          ]),
+          _: 1
+        })
       ], 64);
     };
   }

package/dist/cjs/components/basic/doc-editor/plugins/ToolbarPlugin/FontStyleTool.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"FontStyleTool.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ToolbarPlugin/FontStyleTool.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport {\r\n  $getSelection,\r\n  $isRangeSelection,\r\n  $isRootOrShadowRoot,\r\n  FORMAT_TEXT_COMMAND,\r\n  FORMAT_ELEMENT_COMMAND,\r\n  SELECTION_CHANGE_COMMAND,\r\n  type CommandListenerPriority,\r\n  type ElementFormatType\r\n} from 'lexical'\r\nimport {\r\n  $getSelectionStyleValueForProperty,\r\n  $patchStyleText,\r\n} from '@lexical/selection'\r\nimport { $findMatchingParent,mergeRegister } from '@lexical/utils'\r\nimport {  useLexicalComposer } from 'lexical-vue'\r\nimport { onMounted, onUnmounted, ref,watch } from 'vue'\r\nimport { FONT_SIZE_OPTIONS,ROOT_FONT_SIZE,FONT_FAMILY_OPTIONS } from \"./FontStyleDefines\"\r\n\r\nconst editor = useLexicalComposer()\r\nconst fontSize = ref('14px')\r\nconst fontColor = ref<string>('#000')\r\nconst bgColor = ref<string>('#fff')\r\nconst fontFamily = ref<any>(FONT_FAMILY_OPTIONS[0])\r\nconst isBold = ref(false)\r\nconst isItalic = ref(false)\r\nconst isUnderline = ref(false)\r\nconst isStrikethrough = ref(false)\r\n\r\n\r\nconst lowPriority: CommandListenerPriority = 1\r\n\r\n// 对齐方式\r\nconst alignList = ref<ElementFormatType[]>([\"left\",\"center\",\"right\",\"justify\"])\r\nconst alignValue = ref(alignList.value[0])\r\nconst disabled = ref(false)\r\n\r\n\r\n// 更新状态栏\r\nfunction updateToolbar() {\r\n\r\n  const selection = $getSelection()\r\n\r\n  if ($isRangeSelection(selection)) {\r\n\r\n    const anchorNode = selection.anchor.getNode()\r\n\r\n    let element = anchorNode.getKey() === 'root'\r\n          ? anchorNode\r\n          : $findMatchingParent(anchorNode, (e) => {\r\n            const parent = e.getParent()\r\n            return parent !== null && $isRootOrShadowRoot(parent)\r\n          });\r\n\r\n\r\n    if (element === null){\r\n      element = anchorNode.getTopLevelElementOrThrow()\r\n    }\r\n\r\n    let elementDOM = editor.getElementByKey(element.getKey());\r\n\r\n    // 文本对齐\r\n    alignValue.value = (elementDOM?.style.textAlign as ElementFormatType) || \"left\";\r\n\r\n    if(alignValue.value  == \"start\"){ alignValue.value  = \"left\"; }\r\n    else if(alignValue.value  == \"end\"){ alignValue.value  = \"right\"; }\r\n\r\n    // Update text format\r\n    isBold.value = selection.hasFormat('bold')\r\n    isItalic.value = selection.hasFormat('italic')\r\n    isUnderline.value = selection.hasFormat('underline')\r\n    isStrikethrough.value = selection.hasFormat('strikethrough')\r\n\r\n    // Handle buttons\r\n    var ff = $getSelectionStyleValueForProperty(selection, 'font-family', 'Arial');\r\n    let fs = $getSelectionStyleValueForProperty(selection, 'font-size', '1rem');\r\n     \r\n    if(fs){\r\n       fontSize.value = Math.round(parseFloat(fs) * ROOT_FONT_SIZE)+\"px\"\r\n    }\r\n   \r\n    fontColor.value = $getSelectionStyleValueForProperty(selection, 'color', '#000')\r\n    bgColor.value = $getSelectionStyleValueForProperty(selection, 'background-color', '#fff')\r\n    fontFamily.value = FONT_FAMILY_OPTIONS.find(item=>item.value==ff) || FONT_FAMILY_OPTIONS[0];\r\n\r\n    disabled.value = false;\r\n  }\r\n  else{\r\n\r\n    disabled.value = true;\r\n  }\r\n}\r\n\r\n// 文字样式\r\nconst fontStyleHandle = (data : any,styleName?:any)=>{\r\n  fontSize.value = data.label;\r\n  editor.update(() => {\r\n    const selection = $getSelection()\r\n    if (selection !== null) {\r\n      $patchStyleText(selection, {\r\n        [styleName || \"font-size\"]:data.value\r\n      })\r\n    }\r\n  })\r\n}\r\n\r\n// 字体颜色\r\nwatch(fontColor,(color:any)=>{\r\n  editor.update(() => {\r\n      const selection = $getSelection()\r\n      if (selection !== null){\r\n        $patchStyleText(selection, { color })\r\n      }\r\n    },{})\r\n})\r\n\r\n// bg颜色\r\nwatch(bgColor,(color:any)=>{\r\n  editor.update(() => {\r\n      const selection = $getSelection()\r\n      if (selection !== null){\r\n        $patchStyleText(selection, { 'background-color':color })\r\n      }\r\n    },{})\r\n})\r\n\r\n// 挂载的时候\r\nonMounted(() => {\r\n\r\n  const unregisterMergeListener = mergeRegister(\r\n    editor.registerUpdateListener(({ editorState }) => {\r\n      editorState.read(() => updateToolbar())\r\n    }),\r\n    // editor.registerCommand(SELECTION_CHANGE_COMMAND, (_payload, _newEditor) => updateToolbar()!,lowPriority)\r\n  )\r\n\r\n  onUnmounted(() => unregisterMergeListener());\r\n})\r\n\r\n</script>\r\n\r\n<template>\r\n   <!-- 字体 -->\r\n    <el-dropdown max-height=\"300px\" trigger=\"click\" :disabled=\"disabled\">\r\n      <el-button text  :style=\"{fontFamily:fontFamily.value}\" :disabled=\"disabled\">\r\n        {{fontFamily.label}} <MKSvgIcon iconClass=\"ArrowDownBold\" style=\"margin-left: 8px;\" /> \r\n      </el-button>\r\n      <template #dropdown>\r\n        <el-dropdown-menu>\r\n          <el-dropdown-item :class=\"{active:fontFamily.label == item.label}\" :disabled=\"disabled\"  v-for=\"item in FONT_FAMILY_OPTIONS\" :value=\"item.value\" @click=\"fontStyleHandle(item,'font-family')\">\r\n            <span :style=\"{fontFamily:item.value}\">\r\n              {{item.label}}\r\n            </span>\r\n          </el-dropdown-item>\r\n        </el-dropdown-menu>\r\n      </template>\r\n    </el-dropdown>\r\n    <el-divider  direction=\"vertical\" />  \r\n    <!-- 字体大小 -->\r\n    <el-dropdown max-height=\"300px\" trigger=\"click\" :disabled=\"disabled\">\r\n        <el-button text :disabled=\"disabled\">\r\n          {{fontSize}} <MKSvgIcon iconClass=\"ArrowDownBold\" style=\"margin-left: 8px;\" /> \r\n        </el-button>\r\n        <template #dropdown>\r\n          <el-dropdown-menu>\r\n            <el-dropdown-item :class=\"{active:fontSize==item.label}\" :disabled=\"disabled\" v-for=\"item in FONT_SIZE_OPTIONS\" :value=\"item.value\" @click=\"fontStyleHandle(item)\">{{item.label}}</el-dropdown-item>\r\n          </el-dropdown-menu>\r\n        </template>\r\n    </el-dropdown>\r\n    <el-divider  direction=\"vertical\" />  \r\n    <!-- 字体颜色 -->\r\n    <el-button text class=\"mk-doc-editor-toolbar__fontcolor\" :disabled=\"disabled\" >\r\n        <el-color-picker v-model=\"fontColor\" :disabled=\"disabled\"  />\r\n    </el-button>\r\n    <!-- 背景颜色 -->\r\n    <el-button text class=\"mk-doc-editor-toolbar__bgcolor\" :disabled=\"disabled\" >\r\n      <el-color-picker v-model=\"bgColor\" :disabled=\"disabled\"  />\r\n      <MKSvgIcon class=\"view\" iconClass=\"doc-background-color\" /> \r\n    </el-button>\r\n\r\n    <el-divider  direction=\"vertical\" />\r\n    <el-button-group>\r\n      <el-button :disabled=\"disabled\" text :class=\"`${isBold ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold')\">\r\n        <MKSvgIcon iconClass=\"doc-bold\" /> \r\n      </el-button>\r\n      <el-button :disabled=\"disabled\" text :class=\"`${isItalic ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND,  'italic')\">\r\n        <MKSvgIcon iconClass=\"doc-italic\" /> \r\n      </el-button>\r\n      <el-button :disabled=\"disabled\" text :class=\"`${isUnderline ? 'active' : ''}`\"  @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND,  'underline')\">\r\n        <MKSvgIcon iconClass=\"doc-underline\" /> \r\n      </el-button>\r\n      <el-button :disabled=\"disabled\" text :class=\"`${isStrikethrough ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND,  'strikethrough')\">\r\n        <MKSvgIcon iconClass=\"doc-strikethrough\" /> \r\n      </el-button>\r\n    </el-button-group>\r\n    <el-divider  direction=\"vertical\" />\r\n    <el-dropdown max-height=\"300px\" trigger=\"click\" :disabled=\"disabled\">\r\n      <el-button text  :style=\"{fontFamily:fontFamily.value}\" :disabled=\"disabled\">\r\n        <MKSvgIcon :iconClass=\"`doc-align-${alignValue}`\" style=\"font-size: 18px;\" /> \r\n      </el-button>\r\n      <template #dropdown>\r\n        <el-dropdown-menu>\r\n          <el-dropdown-item :disabled=\"disabled\"  :class=\"{active:alignValue == item}\" v-for=\"item in alignList\" :value=\"item\"  @click=\"editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, item)\">\r\n            <MKSvgIcon :iconClass=\"`doc-align-${item}`\" style=\"font-size: 18px;\"  /> \r\n          </el-dropdown-item>\r\n        </el-dropdown-menu>\r\n      </template>\r\n    </el-dropdown>\r\n</template>\r\n"],"names":["useLexicalComposer","ref","FONT_FAMILY_OPTIONS","selection","$getSelection","$isRangeSelection","$findMatchingParent","$isRootOrShadowRoot","$getSelectionStyleValueForProperty","ROOT_FONT_SIZE","$patchStyleText","watch","onMounted","mergeRegister","onUnmounted"],"mappings":";;;;;;;;;;AAoBA,UAAM,SAASA,WAAAA;AACT,UAAA,WAAWC,QAAI,MAAM;AACrB,UAAA,YAAYA,QAAY,MAAM;AAC9B,UAAA,UAAUA,QAAY,MAAM;AAClC,UAAM,aAAaA,IAAA,IAASC,qCAAoB,CAAC,CAAC;AAC5C,UAAA,SAASD,QAAI,KAAK;AAClB,UAAA,WAAWA,QAAI,KAAK;AACpB,UAAA,cAAcA,QAAI,KAAK;AACvB,UAAA,kBAAkBA,QAAI,KAAK;AAMjC,UAAM,YAAYA,IAAAA,IAAyB,CAAC,QAAO,UAAS,SAAQ,SAAS,CAAC;AAC9E,UAAM,aAAaA,IAAAA,IAAI,UAAU,MAAM,CAAC,CAAC;AACnC,UAAA,WAAWA,QAAI,KAAK;AAI1B,aAAS,gBAAgB;AAEvB,YAAME,cAAYC,QAAAA;AAEd,UAAAC,QAAAA,kBAAkBF,WAAS,GAAG;AAE1B,cAAA,aAAaA,YAAU,OAAO,QAAQ;AAExC,YAAA,UAAU,WAAW,aAAa,SAC9B,aACAG,MAAA,oBAAoB,YAAY,CAAC,MAAM;AACjC,gBAAA,SAAS,EAAE;AACV,iBAAA,WAAW,QAAQC,QAAA,oBAAoB,MAAM;AAAA,QAAA,CACrD;AAGP,YAAI,YAAY,MAAK;AACnB,oBAAU,WAAW;QACvB;AAEA,YAAI,aAAa,OAAO,gBAAgB,QAAQ,OAAQ,CAAA;AAG7C,mBAAA,SAAS,yCAAY,MAAM,cAAmC;AAEtE,YAAA,WAAW,SAAU,SAAQ;AAAE,qBAAW,QAAS;AAAA,QAAA,WAC9C,WAAW,SAAU,OAAM;AAAE,qBAAW,QAAS;AAAA,QAAS;AAG3D,eAAA,QAAQJ,YAAU,UAAU,MAAM;AAChC,iBAAA,QAAQA,YAAU,UAAU,QAAQ;AACjC,oBAAA,QAAQA,YAAU,UAAU,WAAW;AACnC,wBAAA,QAAQA,YAAU,UAAU,eAAe;AAG3D,YAAI,KAAKK,UAAA,mCAAmCL,aAAW,eAAe,OAAO;AAC7E,YAAI,KAAKK,UAAA,mCAAmCL,aAAW,aAAa,MAAM;AAE1E,YAAG,IAAG;AACH,mBAAS,QAAQ,KAAK,MAAM,WAAW,EAAE,IAAIM,+BAAc,IAAE;AAAA,QAChE;AAEA,kBAAU,QAAQD,UAAA,mCAAmCL,aAAW,SAAS,MAAM;AAC/E,gBAAQ,QAAQK,UAAA,mCAAmCL,aAAW,oBAAoB,MAAM;AAC7E,mBAAA,QAAQD,qCAAoB,KAAK,CAAA,SAAM,KAAK,SAAO,EAAE,KAAKA,iBAAA,oBAAoB,CAAC;AAE1F,iBAAS,QAAQ;AAAA,MAAA,OAEf;AAEF,iBAAS,QAAQ;AAAA,MACnB;AAAA,IACF;AAGM,UAAA,kBAAkB,CAAC,MAAW,cAAiB;AACnD,eAAS,QAAQ,KAAK;AACtB,aAAO,OAAO,MAAM;AAClB,cAAMC,cAAYC,QAAAA;AAClB,YAAID,gBAAc,MAAM;AACtBO,oBAAAA,gBAAgBP,aAAW;AAAA,YACzB,CAAC,aAAa,WAAW,GAAE,KAAK;AAAA,UAAA,CACjC;AAAA,QACH;AAAA,MAAA,CACD;AAAA,IAAA;AAIGQ,cAAA,WAAU,CAAC,UAAY;AAC3B,aAAO,OAAO,MAAM;AAChB,cAAMR,cAAYC,QAAAA;AAClB,YAAID,gBAAc,MAAK;AACLO,oBAAAA,gBAAAP,aAAW,EAAE,MAAA,CAAO;AAAA,QACtC;AAAA,MACF,GAAE,CAAE,CAAA;AAAA,IAAA,CACP;AAGKQ,cAAA,SAAQ,CAAC,UAAY;AACzB,aAAO,OAAO,MAAM;AAChB,cAAMR,cAAYC,QAAAA;AAClB,YAAID,gBAAc,MAAK;AACrBO,oBAAAA,gBAAgBP,aAAW,EAAE,oBAAmB,MAAO,CAAA;AAAA,QACzD;AAAA,MACF,GAAE,CAAE,CAAA;AAAA,IAAA,CACP;AAGDS,QAAAA,UAAU,MAAM;AAEd,YAAM,0BAA0BC,MAAA;AAAA,QAC9B,OAAO,uBAAuB,CAAC,EAAE,kBAAkB;AACrC,sBAAA,KAAK,MAAM,cAAA,CAAe;AAAA,QAAA,CACvC;AAAA;AAAA,MAAA;AAISC,sBAAA,MAAM,yBAAyB;AAAA,IAAA,CAC5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"FontStyleTool.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ToolbarPlugin/FontStyleTool.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport {\r\n  $getSelection,\r\n  $isRangeSelection,\r\n  $isRootOrShadowRoot,\r\n  $isParagraphNode,\r\n  FORMAT_TEXT_COMMAND,\r\n  FORMAT_ELEMENT_COMMAND,\r\n  type ElementFormatType,\r\n} from 'lexical'\r\nimport {\r\n  $getSelectionStyleValueForProperty,\r\n  $patchStyleText,\r\n} from '@lexical/selection'\r\n\r\nimport { $isLinkNode, TOGGLE_LINK_COMMAND,LinkNode } from '@lexical/link'\r\nimport { sanitizeUrl } from '../../utils/url'\r\nimport { getSelectedNode } from '../../utils/getSelectedNode'\r\nimport { $findMatchingParent,mergeRegister } from '@lexical/utils'\r\nimport {  useLexicalComposer } from 'lexical-vue'\r\nimport { onMounted, onUnmounted, ref,watch } from 'vue'\r\nimport { FONT_SIZE_OPTIONS,ROOT_FONT_SIZE,FONT_FAMILY_OPTIONS } from \"./FontStyleDefines\"\r\nimport { ShowLinkEditPanel } from \"../AutoLinkPlugin/LinkEditDialog\";\r\n\r\nconst editor = useLexicalComposer()\r\nconst fontSize = ref('14px')\r\nconst fontColor = ref<string>('#000')\r\nconst bgColor = ref<string>('#fff')\r\nconst fontFamily = ref<any>(FONT_FAMILY_OPTIONS[0])\r\nconst isBold = ref(false)\r\nconst isItalic = ref(false)\r\nconst isUnderline = ref(false)\r\nconst isStrikethrough = ref(false)\r\n\r\n// 对齐方式\r\nconst alignList = ref<ElementFormatType[]>([\"left\",\"center\",\"right\",\"justify\"])\r\nconst alignValue = ref(alignList.value[0])\r\nconst disabled = ref(false)\r\nconst isLink = ref(false)\r\nconst linkValue = ref(\"\");\r\n\r\nasync function insertLink() {\r\n\r\n  const result:any = await ShowLinkEditPanel(linkValue.value);\r\n\r\n  if(result.trim()){\r\n    editor.dispatchCommand(TOGGLE_LINK_COMMAND, sanitizeUrl(result))\r\n  }\r\n  else{\r\n    editor.dispatchCommand(TOGGLE_LINK_COMMAND, null)\r\n  }\r\n}\r\n\r\n// 更新状态栏\r\nfunction updateToolbar() {\r\n\r\n  const selection = $getSelection()\r\n\r\n  if ($isRangeSelection(selection)) {\r\n\r\n    const anchorNode = selection.anchor.getNode()\r\n\r\n    let element = anchorNode.getKey() === 'root'\r\n          ? anchorNode\r\n          : $findMatchingParent(anchorNode, (e) => {\r\n            const parent = e.getParent()\r\n            return parent !== null && $isRootOrShadowRoot(parent)\r\n          });\r\n\r\n\r\n    if (element === null){\r\n      element = anchorNode.getTopLevelElementOrThrow()\r\n    }\r\n\r\n    let elementDOM = editor.getElementByKey(element.getKey());\r\n\r\n    // 文本对齐\r\n    alignValue.value = (elementDOM?.style.textAlign as ElementFormatType) || \"left\";\r\n\r\n    if(alignValue.value  == \"start\"){ alignValue.value  = \"left\"; }\r\n    else if(alignValue.value  == \"end\"){ alignValue.value  = \"right\"; }\r\n\r\n    // Update text format\r\n    isBold.value = selection.hasFormat('bold')\r\n    isItalic.value = selection.hasFormat('italic')\r\n    isUnderline.value = selection.hasFormat('underline')\r\n    isStrikethrough.value = selection.hasFormat('strikethrough')\r\n\r\n    // Handle buttons\r\n    var ff = $getSelectionStyleValueForProperty(selection, 'font-family', 'Arial');\r\n    let fs = $getSelectionStyleValueForProperty(selection, 'font-size', '1rem');\r\n     \r\n    if(fs){\r\n       fontSize.value = Math.round(parseFloat(fs) * ROOT_FONT_SIZE)+\"px\"\r\n    }\r\n   \r\n    fontColor.value = $getSelectionStyleValueForProperty(selection, 'color', '#000')\r\n    bgColor.value = $getSelectionStyleValueForProperty(selection, 'background-color', '#fff')\r\n    fontFamily.value = FONT_FAMILY_OPTIONS.find(item=>item.value==ff) || FONT_FAMILY_OPTIONS[0];\r\n\r\n    disabled.value = false;\r\n\r\n    // Update links\r\n    const node = getSelectedNode(selection)\r\n    const parent = node.getParent()\r\n    isLink.value = $isLinkNode(parent) || $isLinkNode(node)\r\n    if(isLink.value){\r\n      linkValue.value = $isLinkNode(parent) ? parent.getURL() : (node as LinkNode).getURL()\r\n    }\r\n    else{\r\n      linkValue.value = \"\";\r\n    }\r\n  }\r\n  else{\r\n\r\n    disabled.value = true;\r\n  }\r\n}\r\n\r\n// 文字样式\r\nconst fontStyleHandle = (data : any,styleName?:any)=>{\r\n  fontSize.value = data.label;\r\n  editor.update(() => {\r\n    const selection = $getSelection()\r\n    if (selection !== null) {\r\n      $patchStyleText(selection, {\r\n        [styleName || \"font-size\"]:data.value\r\n      })\r\n    }\r\n  })\r\n}\r\n\r\n// 字体颜色\r\nwatch(fontColor,(color:any)=>{\r\n  editor.update(() => {\r\n      const selection = $getSelection()\r\n      if (selection !== null){\r\n        $patchStyleText(selection, { color })\r\n      }\r\n    },{})\r\n})\r\n\r\n// bg颜色\r\nwatch(bgColor,(color:any)=>{\r\n  editor.update(() => {\r\n      const selection = $getSelection()\r\n      if (selection !== null){\r\n        $patchStyleText(selection, { 'background-color':color })\r\n      }\r\n    },{})\r\n})\r\n\r\n// 挂载的时候\r\nonMounted(() => {\r\n\r\n  const unregisterMergeListener = mergeRegister(\r\n    editor.registerUpdateListener(({ editorState }) => {\r\n      editorState.read(() => updateToolbar())\r\n    }),\r\n    // editor.registerCommand(SELECTION_CHANGE_COMMAND, (_payload, _newEditor) => updateToolbar()!,lowPriority)\r\n  )\r\n\r\n  onUnmounted(() => unregisterMergeListener());\r\n})\r\n\r\n</script>\r\n\r\n<template>\r\n   <!-- 字体 -->\r\n    <el-dropdown max-height=\"300px\" trigger=\"click\" :disabled=\"disabled\">\r\n      <el-button text  :style=\"{fontFamily:fontFamily.value}\" :disabled=\"disabled\">\r\n        {{fontFamily.label}} <MKSvgIcon iconClass=\"ArrowDownBold\" style=\"margin-left: 8px;\" /> \r\n      </el-button>\r\n      <template #dropdown>\r\n        <el-dropdown-menu>\r\n          <el-dropdown-item :class=\"{active:fontFamily.label == item.label}\" :disabled=\"disabled\"  v-for=\"item in FONT_FAMILY_OPTIONS\" :value=\"item.value\" @click=\"fontStyleHandle(item,'font-family')\">\r\n            <span :style=\"{fontFamily:item.value}\">\r\n              {{item.label}}\r\n            </span>\r\n          </el-dropdown-item>\r\n        </el-dropdown-menu>\r\n      </template>\r\n    </el-dropdown>\r\n    <el-divider  direction=\"vertical\" />  \r\n    <!-- 字体大小 -->\r\n    <el-dropdown max-height=\"300px\" trigger=\"click\" :disabled=\"disabled\">\r\n        <el-button text :disabled=\"disabled\">\r\n          {{fontSize}} <MKSvgIcon iconClass=\"ArrowDownBold\" style=\"margin-left: 8px;\" /> \r\n        </el-button>\r\n        <template #dropdown>\r\n          <el-dropdown-menu>\r\n            <el-dropdown-item :class=\"{active:fontSize==item.label}\" :disabled=\"disabled\" v-for=\"item in FONT_SIZE_OPTIONS\" :value=\"item.value\" @click=\"fontStyleHandle(item)\">{{item.label}}</el-dropdown-item>\r\n          </el-dropdown-menu>\r\n        </template>\r\n    </el-dropdown>\r\n    <el-divider  direction=\"vertical\" />  \r\n    <!-- 字体颜色 -->\r\n    <el-button text class=\"mk-doc-editor-toolbar__fontcolor\" :disabled=\"disabled\" >\r\n        <el-color-picker v-model=\"fontColor\" :disabled=\"disabled\"  />\r\n    </el-button>\r\n    <!-- 背景颜色 -->\r\n    <el-button text class=\"mk-doc-editor-toolbar__bgcolor\" :disabled=\"disabled\" >\r\n      <el-color-picker v-model=\"bgColor\" :disabled=\"disabled\"  />\r\n      <MKSvgIcon class=\"view\" iconClass=\"doc-background-color\" /> \r\n    </el-button>\r\n\r\n    <el-divider  direction=\"vertical\" />\r\n    <el-button-group>\r\n      <el-button :disabled=\"disabled\" text :class=\"`${isBold ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND, 'bold')\">\r\n        <MKSvgIcon iconClass=\"doc-bold\" /> \r\n      </el-button>\r\n      <el-button :disabled=\"disabled\" text :class=\"`${isItalic ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND,  'italic')\">\r\n        <MKSvgIcon iconClass=\"doc-italic\" /> \r\n      </el-button>\r\n      <el-button :disabled=\"disabled\" text :class=\"`${isUnderline ? 'active' : ''}`\"  @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND,  'underline')\">\r\n        <MKSvgIcon iconClass=\"doc-underline\" /> \r\n      </el-button>\r\n      <el-button :disabled=\"disabled\" text :class=\"`${isStrikethrough ? 'active' : ''}`\" @click=\"editor.dispatchCommand(FORMAT_TEXT_COMMAND,  'strikethrough')\">\r\n        <MKSvgIcon iconClass=\"doc-strikethrough\" /> \r\n      </el-button>\r\n    </el-button-group>\r\n    <el-divider  direction=\"vertical\" />\r\n    <el-dropdown max-height=\"300px\" trigger=\"click\" :disabled=\"disabled\">\r\n      <el-button text  :style=\"{fontFamily:fontFamily.value}\" :disabled=\"disabled\">\r\n        <MKSvgIcon :iconClass=\"`doc-align-${alignValue}`\" style=\"font-size: 18px;\" /> \r\n      </el-button>\r\n      <template #dropdown>\r\n        <el-dropdown-menu>\r\n          <el-dropdown-item :disabled=\"disabled\" :class=\"{active:alignValue == item}\" v-for=\"item in alignList\" :value=\"item\"  @click=\"editor.dispatchCommand(FORMAT_ELEMENT_COMMAND, item)\">\r\n            <MKSvgIcon :iconClass=\"`doc-align-${item}`\" style=\"font-size: 18px;\"  /> \r\n          </el-dropdown-item>\r\n        </el-dropdown-menu>\r\n      </template>\r\n    </el-dropdown>\r\n    <el-divider  direction=\"vertical\" />\r\n    <!-- 链接 -->\r\n    <el-button-group>\r\n      <el-button text :disabled=\"disabled\" :class=\"`${isLink ? 'active' : ''}`\" @click=\"insertLink\">\r\n        <MKSvgIcon iconClass=\"doc-link\" /> \r\n      </el-button>\r\n    </el-button-group>\r\n</template>\r\n"],"names":["useLexicalComposer","ref","FONT_FAMILY_OPTIONS","ShowLinkEditPanel","TOGGLE_LINK_COMMAND","sanitizeUrl","selection","$getSelection","$isRangeSelection","$findMatchingParent","parent","$isRootOrShadowRoot","$getSelectionStyleValueForProperty","ROOT_FONT_SIZE","getSelectedNode","$isLinkNode","$patchStyleText","watch","onMounted","mergeRegister","onUnmounted"],"mappings":"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"}

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

@@ -1,8 +1,8 @@
 "use strict";
 const vue = require("vue");
 const lexicalVue = require("lexical-vue");
-const commands = require("../commands.js");
 const html = require("@lexical/html");
+const index = require("../../core/index.js");
 const docTheme = require("../../themes/doc-theme.css.js");
 const docEditor = require("../../themes/doc-editor.css.js");
 const _hoisted_1 = ["srcdoc"];
@@ -25,10 +25,6 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const linkStr = props.css.split(",").map((path) => {
       return `<link crossorigin href="${path}" />`;
     }).join("");
-    props.css.split(",").map((path) => {
-      return `<link crossorigin href="${path}" />`;
-    }).join("");
-    const viewDevice = vue.ref("pc");
     const createViewContent = (content) => {
       srcdoc.value = `
     <html>
@@ -39,7 +35,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         </style>
         ${linkStr}
       </head>
-      <body style="font-size:${viewDevice.value == "pc" ? "14px" : "18px"}">${content}</body>
+      <body style="font-size:${index.DEVICE_VIEW_MODE.value == "pc" ? "14px" : "18px"}">${content}</body>
     </html>
   `;
     };
@@ -55,12 +51,6 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       });
       codeDialogVisible.value = true;
     };
-    vue.onMounted(() => {
-      editor.registerCommand(commands.DEVICE_VIEW_MODE, (payload) => {
-        viewDevice.value = payload;
-        return false;
-      }, 1);
-    });
     return (_ctx, _cache) => {
       const _component_MKSvgIcon = vue.resolveComponent("MKSvgIcon");
       const _component_el_button = vue.resolveComponent("el-button");
@@ -86,7 +76,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           default: vue.withCtx(() => [
             codeDialogVisible.value ? (vue.openBlock(), vue.createElementBlock("div", {
               key: 0,
-              class: vue.normalizeClass(["mk-doc-editor__view_warp", viewDevice.value])
+              class: vue.normalizeClass(["mk-doc-editor__view_warp", vue.unref(index.DEVICE_VIEW_MODE)])
             }, [
               vue.createElementVNode("iframe", {
                 class: "mk-doc-editor__view_iframe",

package/dist/cjs/components/basic/doc-editor/plugins/ToolbarPlugin/PreviewToolbar.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"PreviewToolbar.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ToolbarPlugin/PreviewToolbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\n\r\nimport {  useLexicalComposer } from 'lexical-vue'\r\nimport { DEVICE_VIEW_MODE } from \"../commands\"\r\nimport { $generateHtmlFromNodes} from '@lexical/html'\r\nimport { onMounted,ref,computed,defineProps } from \"vue\"\r\nimport DocThemeCss from \"../../themes/doc-theme.css?raw\";\r\nimport DocEditorCss from \"../../themes/doc-editor.css?raw\";\r\n\r\nconst editor = useLexicalComposer()\r\n// 参数\r\nconst props = defineProps({\r\n  js:{ type:String,default:`` },\r\n  css:{ type:String,default:`` }\r\n})\r\n// iframe 编辑器\r\nconst iframeContentRef = ref(null as any);\r\nconst iframeBody = computed<any>(()=>iframeContentRef.value?.contentWindow?.document?.body)\r\n\r\nconst codeDialogVisible = ref(false);\r\nconst srcdoc = ref(\"\");\r\nconst linkStr = props.css.split(\",\").map(path=>{\r\n  return `<link crossorigin href=\"${path}\" />`\r\n}).join(\"\");\r\nconst scriptStr = props.css.split(\",\").map(path=>{\r\n  return `<link crossorigin href=\"${path}\" />`\r\n}).join(\"\");\r\n  // // 扩展的js和css\r\n  // props.js.split(\",\").forEach(path=>{\r\n  //   const script = document.createElement(\"script\");\r\n  //   script.src = path;\r\n  //   script.setAttribute(\"crossorigin\",\"true\")\r\n  //   doc.head.append(script);\r\n  // })\r\n  // props.css.split(\",\").forEach(path=>{\r\n  //   const link = document.createElement(\"link\");\r\n  //   link.href = path;\r\n  //   link.setAttribute(\"crossorigin\",\"true\")\r\n  //   doc.head.append(link);\r\n  // })\r\n\r\n// pc | mobile\r\nconst viewDevice = ref('pc')\r\n\r\n// 创建预览内容\r\nconst createViewContent = (content:string)=>{\r\n  srcdoc.value = `\r\n    <html>\r\n      <head>\r\n        <style type=\"text/css\">\r\n          ${DocEditorCss}\r\n          ${DocThemeCss}\r\n        </style>\r\n        ${linkStr}\r\n      </head>\r\n      <body style=\"font-size:${(viewDevice.value=='pc'?\"14px\":\"18px\")}\">${content}</body>\r\n    </html>\r\n  `;\r\n}\r\n\r\n// 显示\r\nconst show = function(){\r\n\r\n  editor.getEditorState().read(() => {\r\n    createViewContent($generateHtmlFromNodes(editor))\r\n    setTimeout(() => {\r\n      if(iframeBody.value.scrollHeight > iframeBody.value.offsetHeight){\r\n        iframeContentRef.value.style.height = (iframeBody.value?.scrollHeight + 10)+\"px\";\r\n      }\r\n    }, 100);\r\n  })\r\n\r\n  codeDialogVisible.value = true;\r\n  \r\n}\r\nonMounted(()=>{\r\n  editor.registerCommand(DEVICE_VIEW_MODE,(payload: string) => {\r\n    viewDevice.value = payload;\r\n    return false\r\n  },1)\r\n});\r\n\r\n</script>\r\n\r\n<template>\r\n  <el-button text @click=\"show\">\r\n    <MKSvgIcon iconClass=\"View\" /> \r\n  </el-button>\r\n  <el-dialog v-model=\"codeDialogVisible\" append-to-body title=\"预览\" width=\"80%\" fullscreen>\r\n    <div class=\"mk-doc-editor__view_warp\"  :class=\"viewDevice\" v-if=\"codeDialogVisible\">\r\n      <iframe class=\"mk-doc-editor__view_iframe\" ref=\"iframeContentRef\" :srcdoc=\"srcdoc\"></iframe>\r\n    </div>\r\n  </el-dialog>\r\n</template>\r\n"],"names":["useLexicalComposer","ref","computed","DocEditorCss","DocThemeCss","$generateHtmlFromNodes","onMounted","DEVICE_VIEW_MODE"],"mappings":";;;;;;;;;;;;;;;AASA,UAAM,SAASA,WAAAA;AAEf,UAAM,QAAQ;AAKR,UAAA,mBAAmBC,QAAI,IAAW;AACxC,UAAM,aAAaC,IAAc,SAAA;;AAAI,gDAAiB,UAAjB,mBAAwB,kBAAxB,mBAAuC,aAAvC,mBAAiD;AAAA,KAAI;AAEpF,UAAA,oBAAoBD,QAAI,KAAK;AAC7B,UAAA,SAASA,QAAI,EAAE;AACrB,UAAM,UAAU,MAAM,IAAI,MAAM,GAAG,EAAE,IAAI,CAAM,SAAA;AAC7C,aAAO,2BAA2B,IAAI;AAAA,IAAA,CACvC,EAAE,KAAK,EAAE;AACQ,UAAM,IAAI,MAAM,GAAG,EAAE,IAAI,CAAM,SAAA;AAC/C,aAAO,2BAA2B,IAAI;AAAA,IAAA,CACvC,EAAE,KAAK,EAAE;AAgBJ,UAAA,aAAaA,QAAI,IAAI;AAGrB,UAAA,oBAAoB,CAAC,YAAiB;AAC1C,aAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,YAILE,SAAY;AAAA,YACZC,QAAW;AAAA;AAAA,UAEb,OAAO;AAAA;AAAA,+BAEe,WAAW,SAAO,OAAK,SAAO,MAAO,KAAK,OAAO;AAAA;AAAA;AAAA,IAAA;AAMjF,UAAM,OAAO,WAAU;AAEd,aAAA,iBAAiB,KAAK,MAAM;AACf,0BAAAC,KAAAA,uBAAuB,MAAM,CAAC;AAChD,mBAAW,MAAM;;AACf,cAAG,WAAW,MAAM,eAAe,WAAW,MAAM,cAAa;AAC/D,6BAAiB,MAAM,MAAM,WAAU,gBAAW,UAAX,mBAAkB,gBAAe,KAAI;AAAA,UAC9E;AAAA,WACC,GAAG;AAAA,MAAA,CACP;AAED,wBAAkB,QAAQ;AAAA,IAAA;AAG5BC,QAAAA,UAAU,MAAI;AACL,aAAA,gBAAgBC,2BAAiB,CAAC,YAAoB;AAC3D,mBAAW,QAAQ;AACZ,eAAA;AAAA,SACP,CAAC;AAAA,IAAA,CACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"PreviewToolbar.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ToolbarPlugin/PreviewToolbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\n\r\nimport {  useLexicalComposer } from 'lexical-vue'\r\nimport { $generateHtmlFromNodes} from '@lexical/html'\r\nimport { ref,computed,defineProps } from \"vue\"\r\nimport { DEVICE_VIEW_MODE } from \"../../core\"\r\nimport DocThemeCss from \"../../themes/doc-theme.css?raw\";\r\nimport DocEditorCss from \"../../themes/doc-editor.css?raw\";\r\n\r\nconst editor = useLexicalComposer()\r\n// 参数\r\nconst props = defineProps({\r\n  js:{ type:String,default:`` },\r\n  css:{ type:String,default:`` }\r\n})\r\n// iframe 编辑器\r\nconst iframeContentRef = ref(null as any);\r\nconst iframeBody = computed<any>(()=>iframeContentRef.value?.contentWindow?.document?.body)\r\n\r\nconst codeDialogVisible = ref(false);\r\nconst srcdoc = ref(\"\");\r\nconst linkStr = props.css.split(\",\").map(path=>{\r\n  return `<link crossorigin href=\"${path}\" />`\r\n}).join(\"\");\r\n// const scriptStr = props.css.split(\",\").map(path=>{\r\n//   return `<script1 crossorigin src=\"${path}\"></script1>`\r\n// }).join(\"\");\r\n\r\n\r\n// 创建预览内容\r\nconst createViewContent = (content:string)=>{\r\n  srcdoc.value = `\r\n    <html>\r\n      <head>\r\n        <style type=\"text/css\">\r\n          ${DocEditorCss}\r\n          ${DocThemeCss}\r\n        </style>\r\n        ${linkStr}\r\n      </head>\r\n      <body style=\"font-size:${(DEVICE_VIEW_MODE.value=='pc'?\"14px\":\"18px\")}\">${content}</body>\r\n    </html>\r\n  `;\r\n}\r\n\r\n// 显示\r\nconst show = function(){\r\n\r\n  editor.getEditorState().read(() => {\r\n    createViewContent($generateHtmlFromNodes(editor))\r\n    setTimeout(() => {\r\n      if(iframeBody.value.scrollHeight > iframeBody.value.offsetHeight){\r\n        iframeContentRef.value.style.height = (iframeBody.value?.scrollHeight + 10)+\"px\";\r\n      }\r\n    }, 100);\r\n  })\r\n\r\n  codeDialogVisible.value = true;\r\n  \r\n}\r\n\r\n\r\n</script>\r\n\r\n<template>\r\n  <el-button text @click=\"show\">\r\n    <MKSvgIcon iconClass=\"View\" /> \r\n  </el-button>\r\n  <el-dialog v-model=\"codeDialogVisible\" append-to-body title=\"预览\" width=\"80%\" fullscreen>\r\n    <div class=\"mk-doc-editor__view_warp\" :class=\"DEVICE_VIEW_MODE\" v-if=\"codeDialogVisible\">\r\n      <iframe class=\"mk-doc-editor__view_iframe\" ref=\"iframeContentRef\" :srcdoc=\"srcdoc\"></iframe>\r\n    </div>\r\n  </el-dialog>\r\n</template>\r\n"],"names":["useLexicalComposer","ref","computed","DocEditorCss","DocThemeCss","DEVICE_VIEW_MODE","$generateHtmlFromNodes"],"mappings":";;;;;;;;;;;;;;;AASA,UAAM,SAASA,WAAAA;AAEf,UAAM,QAAQ;AAKR,UAAA,mBAAmBC,QAAI,IAAW;AACxC,UAAM,aAAaC,IAAc,SAAA;;AAAI,gDAAiB,UAAjB,mBAAwB,kBAAxB,mBAAuC,aAAvC,mBAAiD;AAAA,KAAI;AAEpF,UAAA,oBAAoBD,QAAI,KAAK;AAC7B,UAAA,SAASA,QAAI,EAAE;AACrB,UAAM,UAAU,MAAM,IAAI,MAAM,GAAG,EAAE,IAAI,CAAM,SAAA;AAC7C,aAAO,2BAA2B,IAAI;AAAA,IAAA,CACvC,EAAE,KAAK,EAAE;AAOJ,UAAA,oBAAoB,CAAC,YAAiB;AAC1C,aAAO,QAAQ;AAAA;AAAA;AAAA;AAAA,YAILE,SAAY;AAAA,YACZC,QAAW;AAAA;AAAA,UAEb,OAAO;AAAA;AAAA,+BAEeC,MAAAA,iBAAiB,SAAO,OAAK,SAAO,MAAO,KAAK,OAAO;AAAA;AAAA;AAAA,IAAA;AAMvF,UAAM,OAAO,WAAU;AAEd,aAAA,iBAAiB,KAAK,MAAM;AACf,0BAAAC,KAAAA,uBAAuB,MAAM,CAAC;AAChD,mBAAW,MAAM;;AACf,cAAG,WAAW,MAAM,eAAe,WAAW,MAAM,cAAa;AAC/D,6BAAiB,MAAM,MAAM,WAAU,gBAAW,UAAX,mBAAkB,gBAAe,KAAI;AAAA,UAC9E;AAAA,WACC,GAAG;AAAA,MAAA,CACP;AAED,wBAAkB,QAAQ;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/components/basic/doc-editor/plugins/ToolbarPlugin/defines.js

@@ -2,10 +2,10 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const vue = require("vue");
 const ToolbarExtendPlugins = vue.reactive([]);
-const RegisterToolbarExtend = function(options) {
+const registerDocEditorToolbarExtend = function(options) {
   ToolbarExtendPlugins.push(options);
   ToolbarExtendPlugins.sort((a, b) => a.sort < b.sort ? 1 : -1);
 };
-exports.RegisterToolbarExtend = RegisterToolbarExtend;
 exports.ToolbarExtendPlugins = ToolbarExtendPlugins;
+exports.registerDocEditorToolbarExtend = registerDocEditorToolbarExtend;
 //# sourceMappingURL=defines.js.map

package/dist/cjs/components/basic/doc-editor/plugins/ToolbarPlugin/defines.js.map

@@ -1 +1 @@
-{"version":3,"file":"defines.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ToolbarPlugin/defines.ts"],"sourcesContent":["\r\nimport { reactive } from 'vue'\r\n\r\n/**\r\n * 工具条扩展\r\n */\r\nexport type ToolbarExtendPlugin = {\r\n  icon: string;\r\n  text:string,\r\n  action:Function,\r\n  sort:number\r\n};\r\n\r\n// 插入的插件列表\r\nexport const ToolbarExtendPlugins = reactive<ToolbarExtendPlugin[]>([]);\r\n\r\n/**\r\n * 注册工具条的扩展\r\n * @param options \r\n */\r\nexport const RegisterToolbarExtend = function(options:ToolbarExtendPlugin){\r\n  ToolbarExtendPlugins.push(options);\r\n  ToolbarExtendPlugins.sort((a,b)=>a.sort<b.sort ? 1:-1);\r\n}\r\n"],"names":["reactive"],"mappings":";;;AAca,MAAA,uBAAuBA,IAAgC,SAAA,EAAE;AAMzD,MAAA,wBAAwB,SAAS,SAA4B;AACxE,uBAAqB,KAAK,OAAO;AACZ,uBAAA,KAAK,CAAC,GAAE,MAAI,EAAE,OAAK,EAAE,OAAO,IAAE,EAAE;AACvD;;;"}
+{"version":3,"file":"defines.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ToolbarPlugin/defines.ts"],"sourcesContent":["\r\nimport { reactive } from 'vue'\r\n\r\n/**\r\n * 工具条扩展\r\n */\r\nexport type ToolbarExtendPlugin = {\r\n  icon: string;\r\n  text:string,\r\n  action:Function,\r\n  sort:number\r\n};\r\n\r\n// 插入的插件列表\r\nexport const ToolbarExtendPlugins = reactive<ToolbarExtendPlugin[]>([]);\r\n\r\n/**\r\n * 注册工具条的扩展\r\n * @param options \r\n */\r\nexport const registerDocEditorToolbarExtend = function(options:ToolbarExtendPlugin){\r\n  ToolbarExtendPlugins.push(options);\r\n  ToolbarExtendPlugins.sort((a,b)=>a.sort<b.sort ? 1:-1);\r\n}\r\n"],"names":["reactive"],"mappings":";;;AAca,MAAA,uBAAuBA,IAAgC,SAAA,EAAE;AAMzD,MAAA,iCAAiC,SAAS,SAA4B;AACjF,uBAAqB,KAAK,OAAO;AACZ,uBAAA,KAAK,CAAC,GAAE,MAAI,EAAE,OAAK,EAAE,OAAO,IAAE,EAAE;AACvD;;;"}

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

@@ -3,11 +3,11 @@ const vue = require("vue");
 const lexical = require("lexical");
 const utils = require("@lexical/utils");
 const lexicalVue = require("lexical-vue");
+const index = require("../../core/index.js");
 const PreviewToolbar_vue_vue_type_script_setup_true_lang = require("./PreviewToolbar.vue.js");
 const FontStyleTool_vue_vue_type_script_setup_true_lang = require("./FontStyleTool.vue.js");
 const ContentStyleTool_vue_vue_type_script_setup_true_lang = require("./ContentStyleTool.vue.js");
 const defines = require("./defines.js");
-const commands = require("../commands.js");
 const LowPriority = 1;
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "index",
@@ -20,7 +20,6 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const editor = lexicalVue.useLexicalComposer();
     const canUndo = vue.ref(false);
     const canRedo = vue.ref(false);
-    const viewDevice = vue.ref("pc");
     vue.onMounted(() => {
       const unregisterMergeListener = utils.mergeRegister(
         editor.registerCommand(
@@ -38,14 +37,6 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             return false;
           },
           LowPriority
-        ),
-        editor.registerCommand(
-          commands.DEVICE_VIEW_MODE,
-          (payload) => {
-            viewDevice.value = payload;
-            return false;
-          },
-          LowPriority
         )
       );
       vue.onUnmounted(() => {
@@ -100,8 +91,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           default: vue.withCtx(() => [
             vue.createVNode(_component_el_button, {
               text: "",
-              class: vue.normalizeClass(`${viewDevice.value == "pc" ? "active" : ""}`),
-              onClick: _cache[2] || (_cache[2] = ($event) => vue.unref(editor).dispatchCommand(vue.unref(commands.DEVICE_VIEW_MODE), "pc"))
+              class: vue.normalizeClass(`${vue.unref(index.DEVICE_VIEW_MODE) == "pc" ? "active" : ""}`),
+              onClick: _cache[2] || (_cache[2] = ($event) => index.DEVICE_VIEW_MODE.value = "pc")
             }, {
               default: vue.withCtx(() => [
                 vue.createVNode(_component_MKSvgIcon, { iconClass: "Platform" })
@@ -110,8 +101,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
             }, 8, ["class"]),
             vue.createVNode(_component_el_button, {
               text: "",
-              class: vue.normalizeClass(`${viewDevice.value == "mobile" ? "active" : ""}`),
-              onClick: _cache[3] || (_cache[3] = ($event) => vue.unref(editor).dispatchCommand(vue.unref(commands.DEVICE_VIEW_MODE), "mobile"))
+              class: vue.normalizeClass(`${vue.unref(index.DEVICE_VIEW_MODE) == "mobile" ? "active" : ""}`),
+              onClick: _cache[3] || (_cache[3] = ($event) => index.DEVICE_VIEW_MODE.value = "mobile")
             }, {
               default: vue.withCtx(() => [
                 vue.createVNode(_component_MKSvgIcon, { iconClass: "Iphone" })

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

@@ -1 +1 @@
-{"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ToolbarPlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport type { CommandListenerPriority } from 'lexical'\r\nimport {\r\n  CAN_REDO_COMMAND,\r\n  CAN_UNDO_COMMAND,\r\n  REDO_COMMAND,\r\n  UNDO_COMMAND,\r\n} from 'lexical'\r\n\r\nimport {  mergeRegister } from '@lexical/utils'\r\nimport {  useLexicalComposer } from 'lexical-vue'\r\nimport { onMounted, onUnmounted, ref,defineProps } from 'vue'\r\nimport PreviewToolbar from \"./PreviewToolbar.vue\"\r\nimport FontStyleToolbar from \"./FontStyleTool.vue\"\r\nimport ContentStyleToolbar from \"./ContentStyleTool.vue\"\r\nimport { ToolbarExtendPlugins } from \"./defines\"\r\nimport { DEVICE_VIEW_MODE } from \"../commands\"\r\n\r\n// 参数\r\nconst props = defineProps({\r\n  js:{ type:String,default:`` },\r\n  css:{ type:String,default:`` }\r\n})\r\n\r\nconst LowPriority: CommandListenerPriority = 1\r\n\r\nconst toolbarRef = ref<HTMLDivElement | null>(null)\r\nconst editor = useLexicalComposer()\r\n\r\nconst canUndo = ref(false)\r\nconst canRedo = ref(false)\r\n// pc | mobile\r\nconst viewDevice = ref('pc')\r\n\r\n\r\nonMounted(() => {\r\n  const unregisterMergeListener = mergeRegister(\r\n    editor.registerCommand(\r\n      CAN_UNDO_COMMAND,\r\n      (payload: boolean) => {\r\n        canUndo.value = payload\r\n        return false\r\n      },\r\n      LowPriority,\r\n    ),\r\n    editor.registerCommand(\r\n      CAN_REDO_COMMAND,\r\n      (payload: boolean) => {\r\n        canRedo.value = payload\r\n        return false\r\n      },\r\n      LowPriority,\r\n    ),\r\n    editor.registerCommand(\r\n      DEVICE_VIEW_MODE,\r\n      (payload: string) => {\r\n        viewDevice.value = payload\r\n        return false\r\n      },\r\n      LowPriority,\r\n    )\r\n  )\r\n\r\n  onUnmounted(() => {\r\n    ToolbarExtendPlugins.length = 0;\r\n    unregisterMergeListener()\r\n  })\r\n})\r\n\r\n</script>\r\n\r\n<template>\r\n  <div ref=\"toolbarRef\" class=\"mk-doc-editor-toolbar\">\r\n    <el-button-group>\r\n      <el-button text  :disabled=\"!canUndo\" @click=\"editor.dispatchCommand(UNDO_COMMAND, undefined)\">\r\n        <MKSvgIcon iconClass=\"RefreshLeft\" /> \r\n      </el-button>\r\n      <el-button text  :disabled=\"!canRedo\" @click=\"editor.dispatchCommand(REDO_COMMAND, undefined)\">\r\n        <MKSvgIcon iconClass=\"RefreshRight\" /> \r\n      </el-button>\r\n    </el-button-group>\r\n    <el-divider  direction=\"vertical\" />\r\n    <!-- 内容 -->\r\n    <ContentStyleToolbar />\r\n    <el-divider  direction=\"vertical\" />  \r\n    <!-- 文字样式 -->\r\n    <FontStyleToolbar />\r\n    <el-divider  direction=\"vertical\" />\r\n    \r\n    <el-button-group>\r\n      <el-button text :class=\"`${viewDevice=='pc' ? 'active' : ''}`\" @click=\"editor.dispatchCommand(DEVICE_VIEW_MODE, 'pc')\">\r\n        <MKSvgIcon iconClass=\"Platform\" /> \r\n      </el-button>\r\n      <el-button text :class=\"`${viewDevice=='mobile' ? 'active' : ''}`\" @click=\"editor.dispatchCommand(DEVICE_VIEW_MODE, 'mobile')\">\r\n        <MKSvgIcon iconClass=\"Iphone\" /> \r\n      </el-button>\r\n    </el-button-group>\r\n    <el-divider  direction=\"vertical\" />\r\n    <el-dropdown>\r\n      <el-button text>\r\n        <MKSvgIcon iconClass=\"Plus\" style=\"margin-right: 5px;\" /> 插入\r\n      </el-button>\r\n      <template #dropdown>\r\n        <el-dropdown-menu>\r\n          <el-dropdown-item v-for=\"item in ToolbarExtendPlugins\" :key=\"item\" @click=\"item.action()\">\r\n            <MKSvgIcon :iconClass=\"item.icon\" /> \r\n            {{item.text}}\r\n          </el-dropdown-item>\r\n        </el-dropdown-menu>\r\n      </template>\r\n    </el-dropdown>\r\n    <el-divider  direction=\"vertical\" />\r\n    <el-button-group>\r\n      <PreviewToolbar :js=\"js\" :css=\"css\" />\r\n    </el-button-group>\r\n  </div>\r\n</template>\r\n"],"names":["ref","useLexicalComposer","onMounted","mergeRegister","CAN_UNDO_COMMAND","CAN_REDO_COMMAND","DEVICE_VIEW_MODE","onUnmounted","ToolbarExtendPlugins"],"mappings":";;;;;;;;;;AAwBA,MAAM,cAAuC;;;;;;;;AAEvC,UAAA,aAAaA,QAA2B,IAAI;AAClD,UAAM,SAASC,WAAAA;AAET,UAAA,UAAUD,QAAI,KAAK;AACnB,UAAA,UAAUA,QAAI,KAAK;AAEnB,UAAA,aAAaA,QAAI,IAAI;AAG3BE,QAAAA,UAAU,MAAM;AACd,YAAM,0BAA0BC,MAAA;AAAA,QAC9B,OAAO;AAAA,UACLC,QAAA;AAAA,UACA,CAAC,YAAqB;AACpB,oBAAQ,QAAQ;AACT,mBAAA;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACA,OAAO;AAAA,UACLC,QAAA;AAAA,UACA,CAAC,YAAqB;AACpB,oBAAQ,QAAQ;AACT,mBAAA;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACA,OAAO;AAAA,UACLC,SAAA;AAAA,UACA,CAAC,YAAoB;AACnB,uBAAW,QAAQ;AACZ,mBAAA;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,MAAA;AAGFC,UAAAA,YAAY,MAAM;AAChBC,gBAAA,qBAAqB,SAAS;AACN;MAAA,CACzB;AAAA,IAAA,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ToolbarPlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport type { CommandListenerPriority } from 'lexical'\r\nimport {\r\n  CAN_REDO_COMMAND,\r\n  CAN_UNDO_COMMAND,\r\n  REDO_COMMAND,\r\n  UNDO_COMMAND,\r\n} from 'lexical'\r\nimport {  mergeRegister } from '@lexical/utils'\r\nimport {  useLexicalComposer } from 'lexical-vue'\r\nimport { onMounted, onUnmounted, ref,defineProps } from 'vue'\r\nimport { DEVICE_VIEW_MODE } from \"../../core\"\r\nimport PreviewToolbar from \"./PreviewToolbar.vue\"\r\nimport FontStyleToolbar from \"./FontStyleTool.vue\"\r\nimport ContentStyleToolbar from \"./ContentStyleTool.vue\"\r\nimport { ToolbarExtendPlugins } from \"./defines\"\r\n// 参数\r\nconst props = defineProps({\r\n  js:{ type:String,default:`` },\r\n  css:{ type:String,default:`` }\r\n})\r\n\r\nconst LowPriority: CommandListenerPriority = 1\r\n\r\nconst toolbarRef = ref<HTMLDivElement | null>(null)\r\nconst editor = useLexicalComposer()\r\n\r\nconst canUndo = ref(false)\r\nconst canRedo = ref(false)\r\n\r\nonMounted(() => {\r\n  const unregisterMergeListener = mergeRegister(\r\n    editor.registerCommand(\r\n      CAN_UNDO_COMMAND,\r\n      (payload: boolean) => {\r\n        canUndo.value = payload\r\n        return false\r\n      },\r\n      LowPriority,\r\n    ),\r\n    editor.registerCommand(\r\n      CAN_REDO_COMMAND,\r\n      (payload: boolean) => {\r\n        canRedo.value = payload\r\n        return false\r\n      },\r\n      LowPriority,\r\n    )\r\n  )\r\n\r\n  onUnmounted(() => {\r\n    ToolbarExtendPlugins.length = 0;\r\n    unregisterMergeListener()\r\n  })\r\n})\r\n\r\n\r\n</script>\r\n\r\n<template>\r\n  <div ref=\"toolbarRef\" class=\"mk-doc-editor-toolbar\">\r\n    <el-button-group>\r\n      <el-button text  :disabled=\"!canUndo\" @click=\"editor.dispatchCommand(UNDO_COMMAND, undefined)\">\r\n        <MKSvgIcon iconClass=\"RefreshLeft\" /> \r\n      </el-button>\r\n      <el-button text  :disabled=\"!canRedo\" @click=\"editor.dispatchCommand(REDO_COMMAND, undefined)\">\r\n        <MKSvgIcon iconClass=\"RefreshRight\" /> \r\n      </el-button>\r\n    </el-button-group>\r\n    <el-divider  direction=\"vertical\" />\r\n    <!-- 内容 -->\r\n    <ContentStyleToolbar />\r\n    <el-divider  direction=\"vertical\" />  \r\n    <!-- 文字样式 -->\r\n    <FontStyleToolbar /> \r\n    <el-divider  direction=\"vertical\" />\r\n    \r\n    <el-button-group>\r\n      <el-button text :class=\"`${DEVICE_VIEW_MODE=='pc' ? 'active' : ''}`\" @click=\"DEVICE_VIEW_MODE='pc'\">\r\n        <MKSvgIcon iconClass=\"Platform\" /> \r\n      </el-button>\r\n      <el-button text :class=\"`${DEVICE_VIEW_MODE=='mobile' ? 'active' : ''}`\" @click=\"DEVICE_VIEW_MODE='mobile'\">\r\n        <MKSvgIcon iconClass=\"Iphone\" /> \r\n      </el-button>\r\n    </el-button-group>\r\n    <el-divider  direction=\"vertical\" />\r\n    <el-dropdown>\r\n      <el-button text>\r\n        <MKSvgIcon iconClass=\"Plus\" style=\"margin-right: 5px;\" /> 插入\r\n      </el-button>\r\n      <template #dropdown>\r\n        <el-dropdown-menu>\r\n          <el-dropdown-item v-for=\"item in ToolbarExtendPlugins\" :key=\"item\" @click=\"item.action()\">\r\n            <MKSvgIcon :iconClass=\"item.icon\" /> \r\n            {{item.text}}\r\n          </el-dropdown-item>\r\n        </el-dropdown-menu>\r\n      </template>\r\n    </el-dropdown>\r\n    <el-divider  direction=\"vertical\" />\r\n    <el-button-group>\r\n      <PreviewToolbar :js=\"js\" :css=\"css\" />\r\n    </el-button-group>\r\n  </div>\r\n</template>\r\n"],"names":["ref","useLexicalComposer","onMounted","mergeRegister","CAN_UNDO_COMMAND","CAN_REDO_COMMAND","onUnmounted","ToolbarExtendPlugins"],"mappings":";;;;;;;;;;AAsBA,MAAM,cAAuC;;;;;;;;AAEvC,UAAA,aAAaA,QAA2B,IAAI;AAClD,UAAM,SAASC,WAAAA;AAET,UAAA,UAAUD,QAAI,KAAK;AACnB,UAAA,UAAUA,QAAI,KAAK;AAEzBE,QAAAA,UAAU,MAAM;AACd,YAAM,0BAA0BC,MAAA;AAAA,QAC9B,OAAO;AAAA,UACLC,QAAA;AAAA,UACA,CAAC,YAAqB;AACpB,oBAAQ,QAAQ;AACT,mBAAA;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QACA,OAAO;AAAA,UACLC,QAAA;AAAA,UACA,CAAC,YAAqB;AACpB,oBAAQ,QAAQ;AACT,mBAAA;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,MAAA;AAGFC,UAAAA,YAAY,MAAM;AAChBC,gBAAA,qBAAqB,SAAS;AACN;MAAA,CACzB;AAAA,IAAA,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}