@maketribe/ms-app 3.2.24 → 3.2.25

package/dist/cjs/components/basic/doc-editor/plugins/ModulePlugin/ModuleBlockNode.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModuleBlockNode.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ModulePlugin/ModuleBlockNode.ts"],"sourcesContent":["\r\nimport type {\r\n  DOMConversionMap,\r\n  DOMExportOutput,\r\n  LexicalNode,\r\n  NodeKey,\r\n  Spread,\r\n  EditorConfig,\r\n} from 'lexical'\r\nimport { type Component,h} from 'vue'\r\nimport { DecoratorModuleBlockNode } from \"../../core\"\r\nimport { useModule } from \"./composables\"\r\nimport { createHtml,createModuleMetaData } from \"./utils\"\r\nimport RenderComponent from \"./ModuleRenderComponent\"\r\nimport { BaseBlockNode,SerializedBlockNode } from '../RichTextPlugin/nodes/BaseBlockNode'\r\n\r\n/**\r\n * 模块模版节点序列化\r\n */\r\nexport type SerializedModuleBlockNode = Spread<\r\n  {\r\n    name:string,\r\n    data: object\r\n  },\r\n  SerializedBlockNode\r\n>\r\n\r\n//\r\nconst ClassMarkName = \"module-name\";\r\n// 属性标识\r\nconst AttrMarkName = \"module-name\";\r\n\r\n/**\r\n * 模块节点\r\n */\r\nexport class ModuleBlockNode extends BaseBlockNode {\r\n  __name: string\r\n  __data: object\r\n\r\n  static getType(): string {\r\n    return \"module\";\r\n  }\r\n\r\n  /**\r\n   * 克隆\r\n   * @param node \r\n   * @returns \r\n   */\r\n  static clone(node: ModuleBlockNode): ModuleBlockNode {\r\n    return new ModuleBlockNode(node.__name,node.__data,node.__key)\r\n  }\r\n\r\n  /**\r\n   * 获取模块类标识\r\n   * @returns \r\n   */\r\n  static getMarkClassName(): string {\r\n    return BaseBlockNode.getMarkClassName(ModuleBlockNode.getType())\r\n  }\r\n\r\n  /**\r\n   * 导入\r\n   * @param serializedNode \r\n   * @returns \r\n   */\r\n  static importJSON(serializedNode: SerializedModuleBlockNode): ModuleBlockNode {\r\n    return $createModuleBlockNode(serializedNode.name,serializedNode.data)\r\n  }\r\n\r\n  constructor(name: string, data: object,  key?: NodeKey) {\r\n    super(ModuleBlockNode.getType(),key)\r\n    this.__name = name\r\n    this.__data = data\r\n  }\r\n\r\n  /**\r\n   * 获取html内容\r\n   */\r\n  getHtml(){\r\n    const { module } = useModule(this.__name);\r\n    return createHtml(module.template,this.__data)\r\n  }\r\n\r\n  /**\r\n   * 设置内容\r\n   * @param html \r\n   */\r\n  setContent(data:any){\r\n    const writable = this.getWritable();\r\n    writable.__data = data;\r\n  }\r\n\r\n  exportJSON(): SerializedModuleBlockNode {\r\n\r\n    return {\r\n      ...super.exportJSON(),\r\n      type: this.getType(),\r\n      version: 1,\r\n      name:this.__name,\r\n      data: this.__data\r\n    }\r\n  }\r\n\r\n\r\n  static importDOM(): DOMConversionMap | null {\r\n    return {\r\n      div : (domNode: HTMLElement) => {\r\n\r\n        const name = domNode.getAttribute(AttrMarkName) as string;\r\n        const isModule = BaseBlockNode.hasBlockByType(domNode,ModuleBlockNode.getType());\r\n        const moduleContent = domNode.innerHTML ;\r\n\r\n        if(isModule && name){\r\n          domNode.innerHTML = \"\";\r\n        }\r\n\r\n        return isModule && name ? {\r\n          conversion: ()=>{ \r\n           \r\n            const { module } = useModule(name);\r\n            const { data } = createModuleMetaData(moduleContent,module.options);\r\n\r\n            return { \r\n              node:$createModuleBlockNode(name,data)\r\n            };\r\n          },\r\n          priority: 4\r\n        } : null;\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * 获取文本内容\r\n   * @param _includeInert \r\n   * @param _includeDirectionless \r\n   * @returns \r\n   */\r\n  getTextContent(\r\n    _includeInert?: boolean | undefined,\r\n    _includeDirectionless?: false | undefined,\r\n  ): string {\r\n\r\n    const element = document.createElement('div')\r\n    const { module } = useModule(this.__name);\r\n    element.innerHTML = createHtml(module.template,this.__data);\r\n\r\n    return element.textContent as string;\r\n  }\r\n\r\n  /**\r\n   * 创建模块的el\r\n   * @returns \r\n   */\r\n  createModuleElement(): HTMLElement {\r\n    const element = document.createElement('div')\r\n    const { module } = useModule(this.__name);\r\n    element.innerHTML = createHtml(module.template,this.__data);\r\n\r\n    if(element.children.length > 1){\r\n      throw new Error(\"定义模块模版的时候请用一个容器将模版内容包裹起来，不能有多个并列的元素！\");\r\n    }\r\n\r\n    const contentEl = element.children[0] as HTMLElement;\r\n\r\n    if (!contentEl.classList.contains(this.getMarkClassName())) {\r\n      contentEl.classList.add(this.getMarkClassName());\r\n    }\r\n\r\n    // 模块名称标识\r\n    contentEl.setAttribute(AttrMarkName,this.__name)\r\n    \r\n    return contentEl;\r\n  }\r\n\r\n  /**\r\n   * 导出DOM结构\r\n   * @returns \r\n   */\r\n  exportDOM(): DOMExportOutput {\r\n    return { element:this.createModuleElement() }\r\n  }\r\n\r\n  /**\r\n   * 渲染\r\n   * @param config \r\n   * @returns \r\n   */\r\n  createDOM(config: EditorConfig): HTMLElement {\r\n    const el = this.createModuleElement();\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: ModuleBlockNode, dom: HTMLElement, config: EditorConfig): boolean {\r\n      const el = this.createModuleElement();\r\n      dom.innerHTML = el.innerHTML;\r\n      return false\r\n    }\r\n  \r\n}\r\n\r\n/**\r\n * 创建节点\r\n * @param src \r\n * @returns \r\n */\r\nexport function $createModuleBlockNode(name:string,data: object): ModuleBlockNode {\r\n  return new ModuleBlockNode(name,data)\r\n}\r\n\r\n/**\r\n * 判断节点\r\n * @param node \r\n * @returns \r\n */\r\nexport function $isModuleBlockNode(\r\n  node: ModuleBlockNode | LexicalNode | null | undefined,\r\n): node is ModuleBlockNode {\r\n  return node instanceof ModuleBlockNode\r\n}\r\n"],"names":["BaseBlockNode","module","useModule","createHtml","createModuleMetaData"],"mappings":"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"}
+{"version":3,"file":"ModuleBlockNode.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ModulePlugin/ModuleBlockNode.ts"],"sourcesContent":["\r\nimport type {\r\n  DOMConversionMap,\r\n  DOMExportOutput,\r\n  LexicalNode,\r\n  NodeKey,\r\n  Spread,\r\n  EditorConfig,\r\n  DOMConversion,\r\n} from 'lexical'\r\nimport { type Component,h} from 'vue'\r\nimport { DecoratorModuleBlockNode } from \"../../core\"\r\nimport { useModule } from \"./composables\"\r\nimport { createHtml,createModuleMetaData } from \"./utils\"\r\nimport RenderComponent from \"./ModuleRenderComponent\"\r\nimport { BaseBlockNode,SerializedBlockNode } from '../RichTextPlugin/nodes/BaseBlockNode'\r\n\r\n/**\r\n * 模块模版节点序列化\r\n */\r\nexport type SerializedModuleBlockNode = Spread<\r\n  {\r\n    name:string,\r\n    data: object\r\n  },\r\n  SerializedBlockNode\r\n>\r\n\r\n//\r\nconst ClassMarkName = \"module-name\";\r\n// 属性标识\r\nconst AttrMarkName = \"module-name\";\r\n\r\n/**\r\n * 模块节点\r\n */\r\nexport class ModuleBlockNode extends BaseBlockNode {\r\n  __name: string\r\n  __data: object\r\n\r\n  static getType(): string {\r\n    return \"module\";\r\n  }\r\n\r\n  /**\r\n   * 克隆\r\n   * @param node \r\n   * @returns \r\n   */\r\n  static clone(node: ModuleBlockNode): ModuleBlockNode {\r\n    return new ModuleBlockNode(node.__name,node.__data,node.__key)\r\n  }\r\n\r\n  /**\r\n   * 获取模块类标识\r\n   * @returns \r\n   */\r\n  static getMarkClassName(): string {\r\n    return BaseBlockNode.getMarkClassName(ModuleBlockNode.getType())\r\n  }\r\n\r\n  /**\r\n   * 导入\r\n   * @param serializedNode \r\n   * @returns \r\n   */\r\n  static importJSON(serializedNode: SerializedModuleBlockNode): ModuleBlockNode {\r\n    return $createModuleBlockNode(serializedNode.name,serializedNode.data)\r\n  }\r\n\r\n  constructor(name: string, data: object,  key?: NodeKey) {\r\n    super(ModuleBlockNode.getType(),key)\r\n    this.__name = name\r\n    this.__data = data\r\n  }\r\n\r\n  /**\r\n   * 获取html内容\r\n   */\r\n  getHtml(){\r\n    const { module } = useModule(this.__name);\r\n    return createHtml(module.template,this.__data)\r\n  }\r\n\r\n  /**\r\n   * 设置内容\r\n   * @param html \r\n   */\r\n  setContent(data:any){\r\n    const writable = this.getWritable();\r\n    writable.__data = data;\r\n  }\r\n\r\n  exportJSON(): SerializedModuleBlockNode {\r\n\r\n    return {\r\n      ...super.exportJSON(),\r\n      type: this.getType(),\r\n      version: 1,\r\n      name:this.__name,\r\n      data: this.__data\r\n    }\r\n  }\r\n\r\n\r\n  static importDOM(): DOMConversionMap | null {\r\n    return {\r\n      div : $covertModuleBlockDOM,\r\n      section : $covertModuleBlockDOM \r\n    }\r\n  }\r\n\r\n  /**\r\n   * 获取文本内容\r\n   * @param _includeInert \r\n   * @param _includeDirectionless \r\n   * @returns \r\n   */\r\n  getTextContent(\r\n    _includeInert?: boolean | undefined,\r\n    _includeDirectionless?: false | undefined,\r\n  ): string {\r\n\r\n    const element = document.createElement('div')\r\n    const { module } = useModule(this.__name);\r\n    element.innerHTML = createHtml(module.template,this.__data);\r\n\r\n    return element.textContent as string;\r\n  }\r\n\r\n  /**\r\n   * 创建模块的el\r\n   * @returns \r\n   */\r\n  createModuleElement(): HTMLElement {\r\n    const element = document.createElement('div')\r\n    const { module } = useModule(this.__name);\r\n    element.innerHTML = createHtml(module.template,this.__data);\r\n\r\n    if(element.children.length > 1){\r\n      throw new Error(\"定义模块模版的时候请用一个容器将模版内容包裹起来，不能有多个并列的元素！\");\r\n    }\r\n\r\n    const contentEl = element.children[0] as HTMLElement;\r\n\r\n    if (!contentEl.classList.contains(this.getMarkClassName())) {\r\n      contentEl.classList.add(this.getMarkClassName());\r\n    }\r\n\r\n    // 模块名称标识\r\n    contentEl.setAttribute(AttrMarkName,this.__name)\r\n    \r\n    return contentEl;\r\n  }\r\n\r\n  /**\r\n   * 导出DOM结构\r\n   * @returns \r\n   */\r\n  exportDOM(): DOMExportOutput {\r\n    return { element:this.createModuleElement() }\r\n  }\r\n\r\n  /**\r\n   * 渲染\r\n   * @param config \r\n   * @returns \r\n   */\r\n  createDOM(config: EditorConfig): HTMLElement {\r\n    const el = this.createModuleElement();\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: ModuleBlockNode, dom: HTMLElement, config: EditorConfig): boolean {\r\n    const el = this.createModuleElement();\r\n    dom.innerHTML = el.innerHTML;\r\n    return false\r\n  }\r\n  \r\n}\r\n\r\n/**\r\n * 创建节点\r\n * @param src \r\n * @returns \r\n */\r\nexport function $createModuleBlockNode(name:string,data: object): ModuleBlockNode {\r\n  return new ModuleBlockNode(name,data)\r\n}\r\n\r\n/**\r\n * 判断节点\r\n * @param node \r\n * @returns \r\n */\r\nexport function $isModuleBlockNode(\r\n  node: ModuleBlockNode | LexicalNode | null | undefined,\r\n): node is ModuleBlockNode {\r\n  return node instanceof ModuleBlockNode\r\n}\r\n\r\n\r\n/**\r\n * 转换模块DOM\r\n * @param node \r\n * @returns \r\n */\r\nexport const $covertModuleBlockDOM = (domNode: HTMLElement):DOMConversion<HTMLElement> | null => {\r\n\r\n  const name = domNode.getAttribute(AttrMarkName) as string;\r\n  const isModule = BaseBlockNode.hasBlockByType(domNode,ModuleBlockNode.getType());\r\n  const moduleContent = domNode.innerHTML ;\r\n\r\n  if(isModule && name){\r\n    domNode.innerHTML = \"\";\r\n  }\r\n\r\n  return isModule && name ? {\r\n    conversion: ()=>{ \r\n     \r\n      const { module } = useModule(name);\r\n      const { data } = createModuleMetaData(moduleContent,module.options);\r\n\r\n      return { \r\n        node:$createModuleBlockNode(name,data)\r\n      };\r\n    },\r\n    priority: 4\r\n  } : null;\r\n}\r\n"],"names":["BaseBlockNode","module","useModule","createHtml","createModuleMetaData"],"mappings":"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"}

package/dist/cjs/components/basic/doc-editor/plugins/ModulePlugin/ModuleContainerNode.js

@@ -106,6 +106,21 @@ class ModuleContainerNode extends BaseBlockCantainerNode.BaseBlockCantainerNode
     }
     return el;
   }
+  /**
+  * 更新DOM
+  * @param prevNode 
+  * @param el 
+  * @param config 
+  * @returns 
+  */
+  updateDOM(node, el, config) {
+    if (node.__attrs.class) {
+      el.className = `${ModuleContainerNode.getMarkClassName()} ${node.__attrs.class}`;
+    } else {
+      el.className = `${ModuleContainerNode.getMarkClassName()}`;
+    }
+    return false;
+  }
 }
 function $isModuleContainerNode(node) {
   return node instanceof ModuleContainerNode;

package/dist/cjs/components/basic/doc-editor/plugins/ModulePlugin/ModuleContainerNode.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModuleContainerNode.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ModulePlugin/ModuleContainerNode.ts"],"sourcesContent":["\r\n\r\n\r\n\r\n\r\nimport type { DOMConversionMap, LexicalCommand, LexicalNode, NodeKey, Spread,EditorConfig, DOMExportOutput } from 'lexical'\r\nimport { createCommand } from 'lexical'\r\nimport { BaseBlockCantainerNode,SerializedBlockCantainerNode } from '../RichTextPlugin/nodes/BaseBlockCantainerNode'\r\n\r\n/**\r\n * 容器属性\r\n */\r\nexport type ModuleContainerAttrType = {\r\n  isFlex:boolean,\r\n  direction:'column'|'row'|'row-reverse'|'column-reverse',\r\n  wrap:boolean,\r\n  alignContent:'center'|'flex-start',\r\n  justifyContent:'center'|'flex-start',\r\n  alignItems:'center'|'flex-start',\r\n  class:string\r\n};\r\n\r\n/**\r\n * 插入模块容器\r\n */\r\nexport const INSERT_MODULECONTAINER_COMMAND: LexicalCommand<ModuleContainerAttrType> = createCommand('INSERT_MODULECONTAINER_COMMAND')\r\n\r\n/**\r\n * 图文节点序列化\r\n */\r\nexport type SerializedModuleContainerNode = Spread<{\r\n  attrs:ModuleContainerAttrType\r\n},SerializedBlockCantainerNode>\r\n\r\n/**\r\n * 模块容器\r\n */\r\nexport class ModuleContainerNode extends BaseBlockCantainerNode{\r\n  __attrs:ModuleContainerAttrType\r\n\r\n  static getType(): string {\r\n    return \"module-container\";\r\n  }\r\n  /**\r\n   * 获取模块类标识\r\n   * @returns \r\n   */\r\n  static getMarkClassName(): string {\r\n    return BaseBlockCantainerNode.getMarkClassName(ModuleContainerNode.getType())\r\n  }\r\n\r\n  static clone(node: ModuleContainerNode): ModuleContainerNode {\r\n    return new ModuleContainerNode(node.__attrs,node.__key)\r\n  }\r\n\r\n  static importJSON(serializedNode: SerializedModuleContainerNode): ModuleContainerNode {\r\n    return new ModuleContainerNode(serializedNode.attrs)\r\n  }\r\n\r\n  static importDOM(): DOMConversionMap | null {\r\n    return {\r\n      div : (domNode: HTMLElement) => {\r\n\r\n        const data = {};\r\n\r\n        return  BaseBlockCantainerNode.hasBlockByType(domNode,ModuleContainerNode.getType()) ? {\r\n          conversion: ()=>{ \r\n\r\n            // 标识类名\r\n            const className = domNode.className.replace(ModuleContainerNode.getMarkClassName(),\"\").trim();\r\n\r\n            return  { \r\n              node:$createModuleContainerNode(Object.assign({\r\n                isFlex:false,\r\n                direction:\"\",\r\n                wrap:false,\r\n                alignContent:\"\",\r\n                justifyContent:'',\r\n                alignItems:'',\r\n                class:className\r\n              },data) as ModuleContainerAttrType) \r\n            };\r\n          },\r\n          priority: 4\r\n        } : null;\r\n      }\r\n    }\r\n  }\r\n\r\n  constructor(attrs:ModuleContainerAttrType,key?: NodeKey) {\r\n    super(ModuleContainerNode.getType(),key)\r\n    this.__attrs = attrs;\r\n  }\r\n\r\n  /**\r\n   * 设置属性\r\n   * @param pos \r\n   */\r\n  setAttrs(data?:any){\r\n    const writable = this.getWritable();\r\n    Object.assign(writable.__attrs,data)\r\n  }\r\n\r\n  /**\r\n   * 获取属性\r\n   * @param pos \r\n   */\r\n  getAttrs(){\r\n    return this.__attrs;\r\n  }\r\n\r\n  /**\r\n   * 导出JSON\r\n   * @returns \r\n   */\r\n  exportJSON(): SerializedModuleContainerNode {\r\n    return {\r\n      ...super.exportJSON(),\r\n      type: this.getType(),\r\n      attrs:this.__attrs,\r\n      version: 1\r\n    }\r\n  }\r\n\r\n    /**\r\n   * 导出DOM\r\n   * @returns \r\n   */\r\n  exportDOM(): DOMExportOutput {\r\n  \r\n    const out = super.exportDOM();\r\n    const el = out.element as HTMLElement\r\n\r\n    if (this.__attrs.class && !el.classList.contains(this.__attrs.class)) {\r\n      el.classList.add(this.__attrs.class);\r\n    }\r\n\r\n    return out\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 el = super.createDOM(config);\r\n\r\n    if (this.__attrs.class && !el.classList.contains(this.__attrs.class)) {\r\n      el.classList.add(this.__attrs.class);\r\n    }\r\n\r\n    if(this.getChildrenSize() <= 0){\r\n      el.classList.add(\"empty\")\r\n    }\r\n    \r\n    return el;\r\n  }\r\n\r\n}\r\n\r\n/**\r\n * 判断是否是模块容器节点\r\n * @param node \r\n * @returns \r\n */\r\nexport function $isModuleContainerNode(\r\n  node: ModuleContainerNode | LexicalNode | null | undefined,\r\n): node is ModuleContainerNode {\r\n  return node instanceof ModuleContainerNode\r\n}\r\n\r\n\r\n/**\r\n * 创建模块容器\r\n * @param src \r\n * @returns \r\n */\r\nexport function $createModuleContainerNode(data: ModuleContainerAttrType): ModuleContainerNode {\r\n  return new ModuleContainerNode(Object.assign({\r\n    isFlex:false,\r\n    direction:\"\",\r\n    wrap:false,\r\n    alignContent:\"\",\r\n    justifyContent:'',\r\n    alignItems:'',\r\n    class:\"\"\r\n  },data))\r\n}\r\n"],"names":["createCommand","BaseBlockCantainerNode"],"mappings":";;;;;;;AAyBa,MAAA,iCAA0EA,sBAAc,gCAAgC;AAY9H,MAAM,4BAA4BC,uBAAAA,uBAAsB;AAAA,EAoD7D,YAAY,OAA8B,KAAe;AACjD,UAAA,oBAAoB,QAAQ,GAAE,GAAG;AApDzC;AAqDE,SAAK,UAAU;AAAA,EACjB;AAAA,EApDA,OAAO,UAAkB;AAChB,WAAA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA,EAKA,OAAO,mBAA2B;AAChC,WAAOA,uBAAuB,uBAAA,iBAAiB,oBAAoB,QAAS,CAAA;AAAA,EAC9E;AAAA,EAEA,OAAO,MAAM,MAAgD;AAC3D,WAAO,IAAI,oBAAoB,KAAK,SAAQ,KAAK,KAAK;AAAA,EACxD;AAAA,EAEA,OAAO,WAAW,gBAAoE;AAC7E,WAAA,IAAI,oBAAoB,eAAe,KAAK;AAAA,EACrD;AAAA,EAEA,OAAO,YAAqC;AACnC,WAAA;AAAA,MACL,KAAM,CAAC,YAAyB;AAE9B,cAAM,OAAO,CAAA;AAEb,eAAQA,uBAAAA,uBAAuB,eAAe,SAAQ,oBAAoB,QAAS,CAAA,IAAI;AAAA,UACrF,YAAY,MAAI;AAGR,kBAAA,YAAY,QAAQ,UAAU,QAAQ,oBAAoB,oBAAmB,EAAE,EAAE;AAE/E,mBAAA;AAAA,cACN,MAAK,2BAA2B,OAAO,OAAO;AAAA,gBAC5C,QAAO;AAAA,gBACP,WAAU;AAAA,gBACV,MAAK;AAAA,gBACL,cAAa;AAAA,gBACb,gBAAe;AAAA,gBACf,YAAW;AAAA,gBACX,OAAM;AAAA,cACR,GAAE,IAAI,CAA4B;AAAA,YAAA;AAAA,UAEtC;AAAA,UACA,UAAU;AAAA,QACR,IAAA;AAAA,MACN;AAAA,IAAA;AAAA,EAEJ;AAAA;AAAA;AAAA;AAAA;AAAA,EAWA,SAAS,MAAU;AACX,UAAA,WAAW,KAAK;AACf,WAAA,OAAO,SAAS,SAAQ,IAAI;AAAA,EACrC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAU;AACR,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,aAA4C;AACnC,WAAA;AAAA,MACL,GAAG,MAAM,WAAW;AAAA,MACpB,MAAM,KAAK,QAAQ;AAAA,MACnB,OAAM,KAAK;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,EAEb;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,YAA6B;AAErB,UAAA,MAAM,MAAM;AAClB,UAAM,KAAK,IAAI;AAEX,QAAA,KAAK,QAAQ,SAAS,CAAC,GAAG,UAAU,SAAS,KAAK,QAAQ,KAAK,GAAG;AACpE,SAAG,UAAU,IAAI,KAAK,QAAQ,KAAK;AAAA,IACrC;AAEO,WAAA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOA,UAAU,QAAmC;AAErC,UAAA,KAAK,MAAM,UAAU,MAAM;AAE7B,QAAA,KAAK,QAAQ,SAAS,CAAC,GAAG,UAAU,SAAS,KAAK,QAAQ,KAAK,GAAG;AACpE,SAAG,UAAU,IAAI,KAAK,QAAQ,KAAK;AAAA,IACrC;AAEG,QAAA,KAAK,gBAAgB,KAAK,GAAE;AAC1B,SAAA,UAAU,IAAI,OAAO;AAAA,IAC1B;AAEO,WAAA;AAAA,EACT;AAEF;AAOO,SAAS,uBACd,MAC6B;AAC7B,SAAO,gBAAgB;AACzB;AAQO,SAAS,2BAA2B,MAAoD;AACtF,SAAA,IAAI,oBAAoB,OAAO,OAAO;AAAA,IAC3C,QAAO;AAAA,IACP,WAAU;AAAA,IACV,MAAK;AAAA,IACL,cAAa;AAAA,IACb,gBAAe;AAAA,IACf,YAAW;AAAA,IACX,OAAM;AAAA,EAAA,GACN,IAAI,CAAC;AACT;;;;;"}
+{"version":3,"file":"ModuleContainerNode.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ModulePlugin/ModuleContainerNode.ts"],"sourcesContent":["\r\n\r\n\r\n\r\n\r\nimport type { DOMConversionMap, LexicalCommand, LexicalNode, NodeKey, Spread,EditorConfig, DOMExportOutput } from 'lexical'\r\nimport { createCommand } from 'lexical'\r\nimport { BaseBlockCantainerNode,SerializedBlockCantainerNode } from '../RichTextPlugin/nodes/BaseBlockCantainerNode'\r\n\r\n/**\r\n * 容器属性\r\n */\r\nexport type ModuleContainerAttrType = {\r\n  isFlex:boolean,\r\n  direction:'column'|'row'|'row-reverse'|'column-reverse',\r\n  wrap:boolean,\r\n  alignContent:'center'|'flex-start',\r\n  justifyContent:'center'|'flex-start',\r\n  alignItems:'center'|'flex-start',\r\n  class:string\r\n};\r\n\r\n/**\r\n * 插入模块容器\r\n */\r\nexport const INSERT_MODULECONTAINER_COMMAND: LexicalCommand<ModuleContainerAttrType> = createCommand('INSERT_MODULECONTAINER_COMMAND')\r\n\r\n/**\r\n * 图文节点序列化\r\n */\r\nexport type SerializedModuleContainerNode = Spread<{\r\n  attrs:ModuleContainerAttrType\r\n},SerializedBlockCantainerNode>\r\n\r\n/**\r\n * 模块容器\r\n */\r\nexport class ModuleContainerNode extends BaseBlockCantainerNode{\r\n  __attrs:ModuleContainerAttrType\r\n\r\n  static getType(): string {\r\n    return \"module-container\";\r\n  }\r\n  /**\r\n   * 获取模块类标识\r\n   * @returns \r\n   */\r\n  static getMarkClassName(): string {\r\n    return BaseBlockCantainerNode.getMarkClassName(ModuleContainerNode.getType())\r\n  }\r\n\r\n  static clone(node: ModuleContainerNode): ModuleContainerNode {\r\n    return new ModuleContainerNode(node.__attrs,node.__key)\r\n  }\r\n\r\n  static importJSON(serializedNode: SerializedModuleContainerNode): ModuleContainerNode {\r\n    return new ModuleContainerNode(serializedNode.attrs)\r\n  }\r\n\r\n  static importDOM(): DOMConversionMap | null {\r\n    return {\r\n      div : (domNode: HTMLElement) => {\r\n\r\n        const data = {};\r\n\r\n        return  BaseBlockCantainerNode.hasBlockByType(domNode,ModuleContainerNode.getType()) ? {\r\n          conversion: ()=>{ \r\n\r\n            // 标识类名\r\n            const className = domNode.className.replace(ModuleContainerNode.getMarkClassName(),\"\").trim();\r\n\r\n            return  { \r\n              node:$createModuleContainerNode(Object.assign({\r\n                isFlex:false,\r\n                direction:\"\",\r\n                wrap:false,\r\n                alignContent:\"\",\r\n                justifyContent:'',\r\n                alignItems:'',\r\n                class:className\r\n              },data) as ModuleContainerAttrType) \r\n            };\r\n          },\r\n          priority: 4\r\n        } : null;\r\n      }\r\n    }\r\n  }\r\n\r\n  constructor(attrs:ModuleContainerAttrType,key?: NodeKey) {\r\n    super(ModuleContainerNode.getType(),key)\r\n    this.__attrs = attrs;\r\n  }\r\n\r\n  /**\r\n   * 设置属性\r\n   * @param pos \r\n   */\r\n  setAttrs(data?:any){\r\n    const writable = this.getWritable();\r\n    Object.assign(writable.__attrs,data)\r\n  }\r\n\r\n  /**\r\n   * 获取属性\r\n   * @param pos \r\n   */\r\n  getAttrs(){\r\n    return this.__attrs;\r\n  }\r\n\r\n  /**\r\n   * 导出JSON\r\n   * @returns \r\n   */\r\n  exportJSON(): SerializedModuleContainerNode {\r\n    return {\r\n      ...super.exportJSON(),\r\n      type: this.getType(),\r\n      attrs:this.__attrs,\r\n      version: 1\r\n    }\r\n  }\r\n\r\n    /**\r\n   * 导出DOM\r\n   * @returns \r\n   */\r\n  exportDOM(): DOMExportOutput {\r\n  \r\n    const out = super.exportDOM();\r\n    const el = out.element as HTMLElement\r\n\r\n    if (this.__attrs.class && !el.classList.contains(this.__attrs.class)) {\r\n      el.classList.add(this.__attrs.class);\r\n    }\r\n\r\n    return out\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 el = super.createDOM(config);\r\n\r\n    if (this.__attrs.class && !el.classList.contains(this.__attrs.class)) {\r\n      el.classList.add(this.__attrs.class);\r\n    }\r\n\r\n    if(this.getChildrenSize() <= 0){\r\n      el.classList.add(\"empty\")\r\n    }\r\n    \r\n    return el;\r\n  }\r\n\r\n    /**\r\n   * 更新DOM\r\n   * @param prevNode \r\n   * @param el \r\n   * @param config \r\n   * @returns \r\n   */\r\n    updateDOM(node: ModuleContainerNode, el: HTMLElement, config: EditorConfig): boolean {\r\n      if (node.__attrs.class) {\r\n        // 标识类名\r\n        el.className = `${ModuleContainerNode.getMarkClassName()} ${node.__attrs.class}`;\r\n      }\r\n      else{\r\n        el.className = `${ModuleContainerNode.getMarkClassName()}`;\r\n      }\r\n      return false\r\n    }\r\n}\r\n\r\n/**\r\n * 判断是否是模块容器节点\r\n * @param node \r\n * @returns \r\n */\r\nexport function $isModuleContainerNode(\r\n  node: ModuleContainerNode | LexicalNode | null | undefined,\r\n): node is ModuleContainerNode {\r\n  return node instanceof ModuleContainerNode\r\n}\r\n\r\n\r\n/**\r\n * 创建模块容器\r\n * @param src \r\n * @returns \r\n */\r\nexport function $createModuleContainerNode(data: ModuleContainerAttrType): ModuleContainerNode {\r\n  return new ModuleContainerNode(Object.assign({\r\n    isFlex:false,\r\n    direction:\"\",\r\n    wrap:false,\r\n    alignContent:\"\",\r\n    justifyContent:'',\r\n    alignItems:'',\r\n    class:\"\"\r\n  },data))\r\n}\r\n"],"names":["createCommand","BaseBlockCantainerNode"],"mappings":"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"}

package/dist/cjs/components/basic/doc-editor/plugins/ModulePlugin/composables.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const Modules = [];
-const registerModule = (options) => {
+const registerDocModule = (options) => {
   Modules.push(options);
 };
 const useModules = () => {
@@ -15,7 +15,7 @@ const useModule = (name) => {
   return { module: module2 };
 };
 exports.Modules = Modules;
-exports.registerModule = registerModule;
+exports.registerDocModule = registerDocModule;
 exports.useModule = useModule;
 exports.useModules = useModules;
 //# sourceMappingURL=composables.js.map

package/dist/cjs/components/basic/doc-editor/plugins/ModulePlugin/composables.js.map

@@ -1 +1 @@
-{"version":3,"file":"composables.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ModulePlugin/composables.ts"],"sourcesContent":["\r\nimport type {\r\n  DOMConversionMap,\r\n  DOMExportOutput,\r\n  EditorConfig,\r\n  LexicalEditor,\r\n  LexicalNode,\r\n  NodeKey,\r\n  Spread,\r\n  LexicalCommand,\r\n  SerializedLexicalNode\r\n} from 'lexical'\r\nimport { createCommand,DecoratorNode } from 'lexical'\r\nimport { h ,type Component } from 'vue'\r\nimport { DynamicFormItemType } from \"../../../dynamic-form-panel\"\r\n\r\n/**\r\n * 模块模版类型\r\n */\r\nexport type ModuleType = {\r\n  name:string,\r\n  title:string,\r\n  cover:string,\r\n  template:string,\r\n  options:DynamicFormItemType[]\r\n}\r\n\r\n\r\n/**\r\n * 模块模版定义\r\n */\r\nexport const Modules:ModuleType[] = [];\r\n\r\n/**\r\n * 注册模块模版\r\n * @param options \r\n */\r\nexport const registerModule = (options:ModuleType) => {\r\n  Modules.push(options);\r\n}\r\n\r\n/**\r\n * \r\n * @param name \r\n * @returns \r\n */\r\nexport const useModules = () => {\r\n  return Modules;\r\n}\r\n\r\n/**\r\n * \r\n * @param name \r\n * @returns \r\n */\r\nexport const useModule = (name:string) => {\r\n\r\n  const module = Modules.find(item=>item.name == name);\r\n\r\n  if(module == null){\r\n    throw new Error(\"未知的模块模版：【\" + name + \"】\");\r\n  }\r\n\r\n  return { module };\r\n}\r\n"],"names":["module"],"mappings":";;AA+BO,MAAM,UAAuB,CAAC;AAMxB,MAAA,iBAAiB,CAAC,YAAuB;AACpD,UAAQ,KAAK,OAAO;AACtB;AAOO,MAAM,aAAa,MAAM;AACvB,SAAA;AACT;AAOa,MAAA,YAAY,CAAC,SAAgB;AAExC,QAAMA,UAAS,QAAQ,KAAK,CAAM,SAAA,KAAK,QAAQ,IAAI;AAEnD,MAAGA,WAAU,MAAK;AAChB,UAAM,IAAI,MAAM,cAAc,OAAO,GAAG;AAAA,EAC1C;AAEA,SAAO,EAAE,QAAAA,QAAO;AAClB;;;;;"}
+{"version":3,"file":"composables.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ModulePlugin/composables.ts"],"sourcesContent":["import { DynamicFormItemType } from \"../../../dynamic-form-panel\"\r\n\r\n/**\r\n * 模块模版类型\r\n */\r\nexport type ModuleType = {\r\n  name:string,\r\n  title:string,\r\n  cover:string,\r\n  template:string,\r\n  editorCss:string|null|undefined,\r\n  options:DynamicFormItemType[]\r\n}\r\n\r\n\r\n/**\r\n * 模块模版定义\r\n */\r\nexport const Modules:ModuleType[] = [];\r\n\r\n/**\r\n * 注册模块模版\r\n * @param options \r\n */\r\nexport const registerDocModule = (options:ModuleType) => {\r\n  Modules.push(options);\r\n}\r\n\r\n/**\r\n * \r\n * @param name \r\n * @returns \r\n */\r\nexport const useModules = () => {\r\n  return Modules;\r\n}\r\n\r\n/**\r\n * \r\n * @param name \r\n * @returns \r\n */\r\nexport const useModule = (name:string) => {\r\n\r\n  const module = Modules.find(item=>item.name == name);\r\n\r\n  if(module == null){\r\n    throw new Error(\"未知的模块模版：【\" + name + \"】\");\r\n  }\r\n\r\n  return { module };\r\n}\r\n"],"names":["module"],"mappings":";;AAkBO,MAAM,UAAuB,CAAC;AAMxB,MAAA,oBAAoB,CAAC,YAAuB;AACvD,UAAQ,KAAK,OAAO;AACtB;AAOO,MAAM,aAAa,MAAM;AACvB,SAAA;AACT;AAOa,MAAA,YAAY,CAAC,SAAgB;AAExC,QAAMA,UAAS,QAAQ,KAAK,CAAM,SAAA,KAAK,QAAQ,IAAI;AAEnD,MAAGA,WAAU,MAAK;AAChB,UAAM,IAAI,MAAM,cAAc,OAAO,GAAG;AAAA,EAC1C;AAEA,SAAO,EAAE,QAAAA,QAAO;AAClB;;;;;"}

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

@@ -3,14 +3,13 @@ const vue = require("vue");
 const lexicalVue = require("lexical-vue");
 const utils = require("@lexical/utils");
 const lexical = require("lexical");
-const defines = require("../ToolbarPlugin/defines.js");
+const index = require("../../core/index.js");
 const composables = require("./composables.js");
 const ModuleBlockNode = require("./ModuleBlockNode.js");
 const ModuleContainerNode = require("./ModuleContainerNode.js");
 const commands = require("./commands.js");
 const utils$1 = require("./utils.js");
 const utils$2 = require("../../../dynamic-form-panel/utils.js");
-require("../../core/index.js");
 const dialog = require("../../../dynamic-form-panel/dialog.js");
 require("element-plus");
 const elementModule = require("../../core/element-module.js");
@@ -18,7 +17,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "index",
   setup(__props) {
     const editor = lexicalVue.useLexicalComposer();
-    defines.registerDocEditorToolbarExtend({
+    index.registerDocEditorToolbarExtend({
       icon: "Grid",
       text: "模块",
       action: async () => {

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

@@ -1 +1 @@
-{"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ModulePlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\n\r\nimport { useLexicalComposer } from 'lexical-vue'\r\nimport { $insertNodeToNearestRoot,mergeRegister } from '@lexical/utils'\r\nimport { \r\n  COMMAND_PRIORITY_EDITOR,COMMAND_PRIORITY_LOW,CLICK_COMMAND, $getSelection,$isNodeSelection, $getNodeByKey\r\n} from 'lexical'\r\nimport { onMounted, onUnmounted,ref } from 'vue'\r\nimport { registerDocEditorToolbarExtend,type ToolbarExtendPlugin } from \"../ToolbarPlugin/defines\"\r\nimport { ModuleType,useModule } from \"./composables\"\r\nimport { ModuleBlockNode,$createModuleBlockNode,$isModuleBlockNode } from \"./ModuleBlockNode\"\r\nimport { type ModuleContainerAttrType,INSERT_MODULECONTAINER_COMMAND,$createModuleContainerNode,$isModuleContainerNode } from \"./ModuleContainerNode\"\r\nimport { INSERT_MODULE_COMMAND,type ModulePropType } from \"./commands\"\r\nimport { showModuleSelectDialog,findModuleNodeEl,findModuleContainerEl } from \"./utils\"\r\nimport { createDefaultFormData } from \"../../../dynamic-form-panel/utils\"\r\nimport {  useElementModule } from '../../core'\r\nimport { showDynamicFormDialoger } from \"../../../dynamic-form-panel\"\r\n\r\n// 编辑器\r\nconst editor = useLexicalComposer()\r\n\r\n// 注册到工具条\r\nregisterDocEditorToolbarExtend({\r\n  icon:\"Grid\",\r\n  text:\"模块\",\r\n  action:async ()=>{\r\n    // 插入\r\n    editor.dispatchCommand(INSERT_MODULECONTAINER_COMMAND,{ } as ModuleContainerAttrType)\r\n \r\n  },\r\n  sort:9\r\n} as ToolbarExtendPlugin)\r\n\r\n// 是否是选中模块容器\r\nconst isSelectContainer = ref(false);\r\n\r\n// 使用元素模块 集成了模块选中删除以及工具条\r\nconst { isSelected, curSelectKey, curSelectPos,updateActiveViewState } = useElementModule(el=>{\r\n  \r\n  var modelEl = findModuleNodeEl(el);\r\n  var moduleContainerEl = findModuleContainerEl(el);\r\n\r\n\r\n  if(modelEl && moduleContainerEl){\r\n    isSelectContainer.value = false;\r\n    \r\n    return modelEl;\r\n  }\r\n  else if(moduleContainerEl){\r\n\r\n    isSelectContainer.value = true;\r\n\r\n    return moduleContainerEl;\r\n  }\r\n\r\n  isSelectContainer.value = false;\r\n  return null;\r\n\r\n},(selection)=>{\r\n  \r\n  const node = $getNodeByKey(curSelectKey.value)\r\n\r\n  if(node != null){\r\n\r\n    // 工具条\r\n    const toolbarList =  [];\r\n\r\n    // 模块容器\r\n    if($isModuleContainerNode(node)){\r\n      toolbarList.push(...[\r\n      {\r\n          title:`编辑模块容器`,icon:\"Edit\",action:async ()=>{\r\n\r\n            var result = await showDynamicFormDialoger(\"模块容器\",[\r\n            { name:\"class\", title:\"标识类名\", component:\"el-input\",  props:{ clearable:true }, defaultValue:\"\" }\r\n            ],node.getAttrs())\r\n      \r\n            editor.update(() => {\r\n              node.setAttrs(result)\r\n              updateActiveViewState(null);\r\n            })\r\n\r\n          } \r\n        },\r\n        {\r\n          title:\"添加模块\",icon:\"Plus\",action:async ()=>{\r\n            // 打开模块面板\r\n            const result = (await showModuleSelectDialog()) as ModuleType;\r\n            const defaultData = createDefaultFormData(result.options);\r\n            // 插入模块\r\n            editor.dispatchCommand(INSERT_MODULE_COMMAND,{ name:result.name,data:defaultData})\r\n            updateActiveViewState(null);\r\n          } \r\n        }\r\n      ])\r\n    }\r\n    // 选中模块\r\n    else if($isModuleBlockNode(node)){\r\n\r\n      const { module } = useModule(node.__name);\r\n\r\n      toolbarList.push(...[\r\n        {\r\n          title:`编辑【${module.title}】`,icon:\"Edit\",action:async ()=>{\r\n\r\n            var result = await showDynamicFormDialoger(module.title,module.options,node.__data)\r\n      \r\n            editor.update(() => {\r\n              node.setContent(result)\r\n              updateActiveViewState(null);\r\n            })\r\n\r\n          } \r\n        },\r\n        {\r\n          title:`插入【${module.title}】之前`,icon:\"BottomLeft\",action:async ()=>{\r\n\r\n            // 打开模块面板\r\n            const result = (await showModuleSelectDialog()) as ModuleType;\r\n            const defaultData = createDefaultFormData(result.options);\r\n            // 插入模块\r\n            editor.dispatchCommand(INSERT_MODULE_COMMAND,{ name:result.name,data:defaultData})\r\n            updateActiveViewState(null);\r\n      \r\n            editor.update(() => {\r\n              node.insertBefore($createModuleBlockNode(result.name,defaultData))\r\n              updateActiveViewState(null);\r\n            })\r\n\r\n          } \r\n        },\r\n        {\r\n          title:`插入【${module.title}】之后`,icon:\"BottomRight\",action:async ()=>{\r\n\r\n            // 打开模块面板\r\n            const result = (await showModuleSelectDialog()) as ModuleType;\r\n            const defaultData = createDefaultFormData(result.options);\r\n            // 插入模块\r\n            editor.dispatchCommand(INSERT_MODULE_COMMAND,{ name:result.name,data:defaultData})\r\n            updateActiveViewState(null);\r\n      \r\n            editor.update(() => {\r\n              node.insertAfter($createModuleBlockNode(result.name,defaultData))\r\n              updateActiveViewState(null);\r\n            })\r\n\r\n          } \r\n        }\r\n      ])\r\n    }\r\n\r\n    return toolbarList;\r\n  }\r\n\r\n  return null;\r\n})\r\n\r\n\r\nonMounted(() => {\r\n\r\n  if (!editor.hasNodes([ModuleBlockNode])){\r\n    throw new Error('ModuleBlockPlugin: 未注册模块模版节点！')\r\n  }\r\n\r\n  // 注册指令\r\n  const unregister = mergeRegister(\r\n    // 插入模块容器\r\n    editor.registerCommand<ModuleContainerAttrType>(INSERT_MODULECONTAINER_COMMAND,(payload) => { \r\n      $insertNodeToNearestRoot($createModuleContainerNode(payload))\r\n      return true\r\n    },COMMAND_PRIORITY_EDITOR),\r\n    // 插入模块\r\n    editor.registerCommand<ModulePropType>(INSERT_MODULE_COMMAND,(payload) => {\r\n      \r\n      if(curSelectKey.value){\r\n\r\n        const node = $getNodeByKey(curSelectKey.value);\r\n\r\n        if($isModuleContainerNode(node)){\r\n          node.append($createModuleBlockNode(payload.name,payload.data))\r\n        }\r\n      }\r\n     \r\n      return true\r\n    },COMMAND_PRIORITY_EDITOR)\r\n\r\n  );\r\n\r\n  onUnmounted(() => unregister())\r\n})\r\n</script>\r\n\r\n<template>\r\n  <div class=\"mk-doc-active-mark\" :class=\"{box:isSelectContainer}\" v-if=\"isSelected\" :style=\"curSelectPos\">\r\n    \r\n  </div>\r\n</template>\r\n"],"names":["useLexicalComposer","registerDocEditorToolbarExtend","INSERT_MODULECONTAINER_COMMAND","ref","useElementModule","findModuleNodeEl","findModuleContainerEl","$getNodeByKey","$isModuleContainerNode","showDynamicFormDialoger","showModuleSelectDialog","createDefaultFormData","INSERT_MODULE_COMMAND","$isModuleBlockNode","module","useModule","$createModuleBlockNode","onMounted","ModuleBlockNode","mergeRegister","$insertNodeToNearestRoot","$createModuleContainerNode","COMMAND_PRIORITY_EDITOR","onUnmounted"],"mappings":"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"}
+{"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ModulePlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\n\r\nimport { useLexicalComposer } from 'lexical-vue'\r\nimport { $insertNodeToNearestRoot,mergeRegister } from '@lexical/utils'\r\nimport { \r\n  COMMAND_PRIORITY_EDITOR,COMMAND_PRIORITY_LOW,CLICK_COMMAND, $getSelection,$isNodeSelection, $getNodeByKey\r\n} from 'lexical'\r\nimport { onMounted, onUnmounted,ref } from 'vue'\r\nimport { registerDocEditorToolbarExtend,type ToolbarExtendPlugin } from \"../../core\"\r\nimport { ModuleType,useModule } from \"./composables\"\r\nimport { ModuleBlockNode,$createModuleBlockNode,$isModuleBlockNode } from \"./ModuleBlockNode\"\r\nimport { type ModuleContainerAttrType,INSERT_MODULECONTAINER_COMMAND,$createModuleContainerNode,$isModuleContainerNode } from \"./ModuleContainerNode\"\r\nimport { INSERT_MODULE_COMMAND,type ModulePropType } from \"./commands\"\r\nimport { showModuleSelectDialog,findModuleNodeEl,findModuleContainerEl } from \"./utils\"\r\nimport { createDefaultFormData } from \"../../../dynamic-form-panel/utils\"\r\nimport {  useElementModule } from '../../core'\r\nimport { showDynamicFormDialoger } from \"../../../dynamic-form-panel\"\r\n\r\n// 编辑器\r\nconst editor = useLexicalComposer()\r\n\r\n// 注册到工具条\r\nregisterDocEditorToolbarExtend({\r\n  icon:\"Grid\",\r\n  text:\"模块\",\r\n  action:async ()=>{\r\n    // 插入\r\n    editor.dispatchCommand(INSERT_MODULECONTAINER_COMMAND,{ } as ModuleContainerAttrType)\r\n \r\n  },\r\n  sort:9\r\n} as ToolbarExtendPlugin)\r\n\r\n// 是否是选中模块容器\r\nconst isSelectContainer = ref(false);\r\n\r\n// 使用元素模块 集成了模块选中删除以及工具条\r\nconst { isSelected, curSelectKey, curSelectPos,updateActiveViewState } = useElementModule(el=>{\r\n  \r\n  var modelEl = findModuleNodeEl(el);\r\n  var moduleContainerEl = findModuleContainerEl(el);\r\n\r\n\r\n  if(modelEl && moduleContainerEl){\r\n    isSelectContainer.value = false;\r\n    \r\n    return modelEl;\r\n  }\r\n  else if(moduleContainerEl){\r\n\r\n    isSelectContainer.value = true;\r\n\r\n    return moduleContainerEl;\r\n  }\r\n\r\n  isSelectContainer.value = false;\r\n  return null;\r\n\r\n},(selection)=>{\r\n  \r\n  const node = $getNodeByKey(curSelectKey.value)\r\n\r\n  if(node != null){\r\n\r\n    // 工具条\r\n    const toolbarList =  [];\r\n\r\n    // 模块容器\r\n    if($isModuleContainerNode(node)){\r\n      toolbarList.push(...[\r\n      {\r\n          title:`编辑模块容器`,icon:\"Edit\",action:async ()=>{\r\n\r\n            var result = await showDynamicFormDialoger(\"模块容器\",[\r\n            { name:\"class\", title:\"标识类名\", component:\"el-input\",  props:{ clearable:true }, defaultValue:\"\" }\r\n            ],node.getAttrs())\r\n      \r\n            editor.update(() => {\r\n              node.setAttrs(result)\r\n              updateActiveViewState(null);\r\n            })\r\n\r\n          } \r\n        },\r\n        {\r\n          title:\"添加模块\",icon:\"Plus\",action:async ()=>{\r\n            // 打开模块面板\r\n            const result = (await showModuleSelectDialog()) as ModuleType;\r\n            const defaultData = createDefaultFormData(result.options);\r\n            // 插入模块\r\n            editor.dispatchCommand(INSERT_MODULE_COMMAND,{ name:result.name,data:defaultData})\r\n            updateActiveViewState(null);\r\n          } \r\n        }\r\n      ])\r\n    }\r\n    // 选中模块\r\n    else if($isModuleBlockNode(node)){\r\n\r\n      const { module } = useModule(node.__name);\r\n\r\n      toolbarList.push(...[\r\n        {\r\n          title:`编辑【${module.title}】`,icon:\"Edit\",action:async ()=>{\r\n\r\n            var result = await showDynamicFormDialoger(module.title,module.options,node.__data)\r\n      \r\n            editor.update(() => {\r\n              node.setContent(result)\r\n              updateActiveViewState(null);\r\n            })\r\n\r\n          } \r\n        },\r\n        {\r\n          title:`插入【${module.title}】之前`,icon:\"BottomLeft\",action:async ()=>{\r\n\r\n            // 打开模块面板\r\n            const result = (await showModuleSelectDialog()) as ModuleType;\r\n            const defaultData = createDefaultFormData(result.options);\r\n            // 插入模块\r\n            editor.dispatchCommand(INSERT_MODULE_COMMAND,{ name:result.name,data:defaultData})\r\n            updateActiveViewState(null);\r\n      \r\n            editor.update(() => {\r\n              node.insertBefore($createModuleBlockNode(result.name,defaultData))\r\n              updateActiveViewState(null);\r\n            })\r\n\r\n          } \r\n        },\r\n        {\r\n          title:`插入【${module.title}】之后`,icon:\"BottomRight\",action:async ()=>{\r\n\r\n            // 打开模块面板\r\n            const result = (await showModuleSelectDialog()) as ModuleType;\r\n            const defaultData = createDefaultFormData(result.options);\r\n            // 插入模块\r\n            editor.dispatchCommand(INSERT_MODULE_COMMAND,{ name:result.name,data:defaultData})\r\n            updateActiveViewState(null);\r\n      \r\n            editor.update(() => {\r\n              node.insertAfter($createModuleBlockNode(result.name,defaultData))\r\n              updateActiveViewState(null);\r\n            })\r\n\r\n          } \r\n        }\r\n      ])\r\n    }\r\n\r\n    return toolbarList;\r\n  }\r\n\r\n  return null;\r\n})\r\n\r\n\r\nonMounted(() => {\r\n\r\n  if (!editor.hasNodes([ModuleBlockNode])){\r\n    throw new Error('ModuleBlockPlugin: 未注册模块模版节点！')\r\n  }\r\n\r\n  // 注册指令\r\n  const unregister = mergeRegister(\r\n    // 插入模块容器\r\n    editor.registerCommand<ModuleContainerAttrType>(INSERT_MODULECONTAINER_COMMAND,(payload) => { \r\n      $insertNodeToNearestRoot($createModuleContainerNode(payload))\r\n      return true\r\n    },COMMAND_PRIORITY_EDITOR),\r\n    // 插入模块\r\n    editor.registerCommand<ModulePropType>(INSERT_MODULE_COMMAND,(payload) => {\r\n      \r\n      if(curSelectKey.value){\r\n\r\n        const node = $getNodeByKey(curSelectKey.value);\r\n\r\n        if($isModuleContainerNode(node)){\r\n          node.append($createModuleBlockNode(payload.name,payload.data))\r\n        }\r\n      }\r\n     \r\n      return true\r\n    },COMMAND_PRIORITY_EDITOR)\r\n\r\n  );\r\n\r\n  onUnmounted(() => unregister())\r\n})\r\n</script>\r\n\r\n<template>\r\n  <div class=\"mk-doc-active-mark\" :class=\"{box:isSelectContainer}\" v-if=\"isSelected\" :style=\"curSelectPos\">\r\n    \r\n  </div>\r\n</template>\r\n"],"names":["useLexicalComposer","registerDocEditorToolbarExtend","INSERT_MODULECONTAINER_COMMAND","ref","useElementModule","findModuleNodeEl","findModuleContainerEl","$getNodeByKey","$isModuleContainerNode","showDynamicFormDialoger","showModuleSelectDialog","createDefaultFormData","INSERT_MODULE_COMMAND","$isModuleBlockNode","module","useModule","$createModuleBlockNode","onMounted","ModuleBlockNode","mergeRegister","$insertNodeToNearestRoot","$createModuleContainerNode","COMMAND_PRIORITY_EDITOR","onUnmounted"],"mappings":";;;;;;;;;;;;;;;;;;AAmBA,UAAM,SAASA,WAAAA;AAGgBC,yCAAA;AAAA,MAC7B,MAAK;AAAA,MACL,MAAK;AAAA,MACL,QAAO,YAAU;AAER,eAAA,gBAAgBC,oDAA+B,CAAA,CAA8B;AAAA,MAEtF;AAAA,MACA,MAAK;AAAA,IAAA,CACiB;AAGlB,UAAA,oBAAoBC,QAAI,KAAK;AAGnC,UAAM,EAAE,YAAY,cAAc,cAAa,0BAA0BC,cAAAA,iBAAiB,CAAI,OAAA;AAExF,UAAA,UAAUC,yBAAiB,EAAE;AAC7B,UAAA,oBAAoBC,8BAAsB,EAAE;AAGhD,UAAG,WAAW,mBAAkB;AAC9B,0BAAkB,QAAQ;AAEnB,eAAA;AAAA,iBAED,mBAAkB;AAExB,0BAAkB,QAAQ;AAEnB,eAAA;AAAA,MACT;AAEA,wBAAkB,QAAQ;AACnB,aAAA;AAAA,IAET,GAAE,CAAC,cAAY;AAEP,YAAA,OAAOC,QAAAA,cAAc,aAAa,KAAK;AAE7C,UAAG,QAAQ,MAAK;AAGd,cAAM,cAAe,CAAA;AAGlB,YAAAC,oBAAAA,uBAAuB,IAAI,GAAE;AAC9B,sBAAY,KAAK,GAAG;AAAA,YACpB;AAAA,cACI,OAAM;AAAA,cAAS,MAAK;AAAA,cAAO,QAAO,YAAU;AAEtC,oBAAA,SAAS,MAAMC,OAAA,wBAAwB,QAAO;AAAA,kBAClD,EAAE,MAAK,SAAS,OAAM,QAAQ,WAAU,YAAa,OAAM,EAAE,WAAU,QAAQ,cAAa,GAAG;AAAA,gBAAA,GAC7F,KAAK,SAAA,CAAU;AAEjB,uBAAO,OAAO,MAAM;AAClB,uBAAK,SAAS,MAAM;AACpB,wCAAsB,IAAI;AAAA,gBAAA,CAC3B;AAAA,cAEH;AAAA,YACF;AAAA,YACA;AAAA,cACE,OAAM;AAAA,cAAO,MAAK;AAAA,cAAO,QAAO,YAAU;AAElC,sBAAA,SAAU,MAAMC,QAAAA;AAChB,sBAAA,cAAcC,QAAAA,sBAAsB,OAAO,OAAO;AAEjD,uBAAA,gBAAgBC,gCAAsB,EAAE,MAAK,OAAO,MAAK,MAAK,aAAY;AACjF,sCAAsB,IAAI;AAAA,cAC5B;AAAA,YACF;AAAA,UAAA,CACD;AAAA,QAAA,WAGKC,gBAAAA,mBAAmB,IAAI,GAAE;AAE/B,gBAAM,EAAE,QAAAC,QAAW,IAAAC,YAAA,UAAU,KAAK,MAAM;AAExC,sBAAY,KAAK,GAAG;AAAA,YAClB;AAAA,cACE,OAAM,MAAMD,QAAO,KAAK;AAAA,cAAI,MAAK;AAAA,cAAO,QAAO,YAAU;AAEnD,oBAAA,SAAS,MAAML,OAAwB,wBAAAK,QAAO,OAAMA,QAAO,SAAQ,KAAK,MAAM;AAElF,uBAAO,OAAO,MAAM;AAClB,uBAAK,WAAW,MAAM;AACtB,wCAAsB,IAAI;AAAA,gBAAA,CAC3B;AAAA,cAEH;AAAA,YACF;AAAA,YACA;AAAA,cACE,OAAM,MAAMA,QAAO,KAAK;AAAA,cAAM,MAAK;AAAA,cAAa,QAAO,YAAU;AAGzD,sBAAA,SAAU,MAAMJ,QAAAA;AAChB,sBAAA,cAAcC,QAAAA,sBAAsB,OAAO,OAAO;AAEjD,uBAAA,gBAAgBC,gCAAsB,EAAE,MAAK,OAAO,MAAK,MAAK,aAAY;AACjF,sCAAsB,IAAI;AAE1B,uBAAO,OAAO,MAAM;AAClB,uBAAK,aAAaI,gBAAA,uBAAuB,OAAO,MAAK,WAAW,CAAC;AACjE,wCAAsB,IAAI;AAAA,gBAAA,CAC3B;AAAA,cAEH;AAAA,YACF;AAAA,YACA;AAAA,cACE,OAAM,MAAMF,QAAO,KAAK;AAAA,cAAM,MAAK;AAAA,cAAc,QAAO,YAAU;AAG1D,sBAAA,SAAU,MAAMJ,QAAAA;AAChB,sBAAA,cAAcC,QAAAA,sBAAsB,OAAO,OAAO;AAEjD,uBAAA,gBAAgBC,gCAAsB,EAAE,MAAK,OAAO,MAAK,MAAK,aAAY;AACjF,sCAAsB,IAAI;AAE1B,uBAAO,OAAO,MAAM;AAClB,uBAAK,YAAYI,gBAAA,uBAAuB,OAAO,MAAK,WAAW,CAAC;AAChE,wCAAsB,IAAI;AAAA,gBAAA,CAC3B;AAAA,cAEH;AAAA,YACF;AAAA,UAAA,CACD;AAAA,QACH;AAEO,eAAA;AAAA,MACT;AAEO,aAAA;AAAA,IAAA,CACR;AAGDC,QAAAA,UAAU,MAAM;AAEd,UAAI,CAAC,OAAO,SAAS,CAACC,gBAAAA,eAAe,CAAC,GAAE;AAChC,cAAA,IAAI,MAAM,+BAA+B;AAAA,MACjD;AAGA,YAAM,aAAaC,MAAA;AAAA;AAAA,QAEjB,OAAO,gBAAyCjB,oDAA+B,CAAC,YAAY;AACjEkB,yCAAAC,oBAAAA,2BAA2B,OAAO,CAAC;AACrD,iBAAA;AAAA,WACPC,+BAAuB;AAAA;AAAA,QAEzB,OAAO,gBAAgCV,gCAAsB,CAAC,YAAY;AAExE,cAAG,aAAa,OAAM;AAEd,kBAAA,OAAOL,QAAAA,cAAc,aAAa,KAAK;AAE1C,gBAAAC,oBAAAA,uBAAuB,IAAI,GAAE;AAC9B,mBAAK,OAAOQ,uCAAuB,QAAQ,MAAK,QAAQ,IAAI,CAAC;AAAA,YAC/D;AAAA,UACF;AAEO,iBAAA;AAAA,WACPM,+BAAuB;AAAA,MAAA;AAIfC,sBAAA,MAAM,YAAY;AAAA,IAAA,CAC/B;;;;;;;;;;;"}

package/dist/cjs/components/basic/doc-editor/plugins/ModulePlugin/utils.js

@@ -76,6 +76,7 @@ const showModuleSelectDialog = async () => {
     });
   });
 };
+const ElAttrList = ["src", "alt", "poster", "href", "_target"];
 const createHtml = (template, data) => {
   const parser = new DOMParser();
   const element = parser.parseFromString(template, "text/html");
@@ -85,7 +86,7 @@ const createHtml = (template, data) => {
       const el = list[i];
       const val = data[key];
       if (el.nodeType != 3) {
-        if (["src", "alt", "poster"].filter((attr) => el.hasAttribute(`data-${key}-${attr}`)).some((attr) => el.setAttribute(attr, val))) {
+        if (ElAttrList.filter((attr) => el.hasAttribute(`data-${key}-${attr}`)).some((attr) => el.setAttribute(attr, val))) {
           break;
         } else if (el.hasAttribute(`data-${key}`)) {
           el.textContent = val;
@@ -112,7 +113,7 @@ const createModuleMetaData = (html, options) => {
       const el = list[i];
       const val = "";
       if (el.nodeType != 3) {
-        if (["src", "alt", "poster"].filter((attr) => el.hasAttribute(`data-${item.name}-${attr}`)).some((attr) => data[item.name] = el.getAttribute(attr))) {
+        if (ElAttrList.filter((attr) => el.hasAttribute(`data-${item.name}-${attr}`)).some((attr) => data[item.name] = el.getAttribute(attr))) {
           break;
         } else if (el.hasAttribute(`data-${item.name}`)) {
           data[item.name] = el.textContent;

package/dist/cjs/components/basic/doc-editor/plugins/ModulePlugin/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ModulePlugin/utils.tsx"],"sourcesContent":["\r\nimport { Fragment,ref,unref,resolveComponent,h,reactive } from 'vue'\r\nimport { Dialoger } from '@maketribe/dm'\r\nimport {  ElButton,ElCollapse,ElCollapseItem,ElInput } from \"element-plus\";\r\nimport { Search } from \"@element-plus/icons-vue\";\r\nimport { useModules,type ModuleType } from \"./composables\"\r\nimport { DynamicFormItemType } from \"../../../dynamic-form-panel\"\r\n\r\nimport { ModuleBlockNode,$createModuleBlockNode,$isModuleBlockNode } from \"./ModuleBlockNode\"\r\nimport { ModuleContainerNode} from \"./ModuleContainerNode\"\r\n\r\n/**\r\n * 显示模块模版选择\r\n * @returns \r\n */\r\nexport const showModuleSelectDialog = async  () => {\r\n\r\n  return new Promise(resolve => {\r\n\r\n    const Modules = useModules();\r\n    const selectOption = ref<ModuleType|null>(null);\r\n    const searchInputValue = ref(\"\");\r\n\r\n    // 取消编辑\r\n    const handleCancelClick = () => {\r\n      dialogInstance.destroy();\r\n    };\r\n\r\n    // 确认编辑\r\n    const handleConfirmClick = () => {\r\n      dialogInstance.destroy();\r\n      resolve({...selectOption.value as any});\r\n    };\r\n\r\n    // 点击块\r\n    const clickHandle = (item:any)=>{\r\n      selectOption.value = item;\r\n    }\r\n\r\n    const dialogInstance = Dialoger.customRender({\r\n      title: \"模版选择\",\r\n      class: \"mk-doc-editor__module-template_dialog\",\r\n      width: \"700px\",\r\n      onClose: () => {\r\n        dialogInstance.destroy();\r\n      },\r\n      body: () => {\r\n\r\n        // 循环体\r\n        const templateListComponent = Modules.filter(item=>{\r\n          if(searchInputValue.value){\r\n            return item.name.indexOf(searchInputValue.value) >= 0 || item.title.indexOf(searchInputValue.value) >= 0\r\n          }\r\n          else{\r\n            return true;\r\n          }\r\n        }).map(item=>{\r\n\r\n          return <div \r\n          class={`mk-doc-editor__module-template_dialog_list-item ${(item.cover ? 'cover':'')} ${(selectOption.value?.name == item.name ? 'active':'')}`} \r\n          onClick={()=>clickHandle(item)}>\r\n            {item.cover ?  <img src={item.cover}  /> :null}\r\n            <div class=\"mk-doc-editor__module-template_dialog_list-item_title\">{item.title}</div>\r\n          </div>\r\n        })\r\n\r\n        return <div class=\"mk-doc-editor__module-template_dialog_warp\">\r\n          <ElInput v-model={searchInputValue.value} prefix-icon={Search} clearable={true} />\r\n          <div class=\"mk-doc-editor__module-template_dialog_list-body\">\r\n            {templateListComponent}\r\n          </div>\r\n        </div>\r\n      },\r\n      footer: () => {\r\n        return <Fragment>\r\n          <ElButton onClick={handleCancelClick}>取消</ElButton>\r\n          <ElButton type=\"primary\" onClick={handleConfirmClick} disabled={!selectOption.value}>\r\n            确定\r\n          </ElButton>\r\n      </Fragment>\r\n      },\r\n    });\r\n  });\r\n}\r\n\r\n/**\r\n * 创建html\r\n * @param template \r\n * @param data \r\n */\r\nexport const createHtml = (template:string,data:any)=>{\r\n\r\n  const parser = new DOMParser();\r\n  const element = parser.parseFromString(template,\"text/html\")\r\n  const list = [element.body];\r\n\r\n  Object.keys(data).forEach(key=>{\r\n\r\n    for(let i=0;i<list.length;i++){\r\n\r\n      const el = list[i];\r\n      const val = data[key] as any;\r\n  \r\n      // 忽略文本节点\r\n      if(el.nodeType != 3){\r\n        // 属性解析\r\n        if( [\"src\",\"alt\",\"poster\"].filter(attr=>el.hasAttribute(`data-${key}-${attr}`)).\r\n        some(attr=> el.setAttribute(attr,val))){  break; }\r\n        // 文本解析\r\n        else if(el.hasAttribute(`data-${key}`)){\r\n          el.textContent = val;\r\n          break;\r\n        }\r\n        else if(el.hasAttribute(`data-${key}-html`)){\r\n          el.innerHTML = val;\r\n          break;\r\n        } \r\n      }\r\n\r\n      // 广域递归\r\n      if(el.childNodes.length){\r\n        el.childNodes.forEach((sub:any)=>list.push(sub))\r\n      }\r\n    }\r\n  })\r\n\r\n  return element.body.innerHTML.replaceAll(/[\\r|\\n|\\r\\n]+/g,\"\")\r\n}\r\n\r\n/**\r\n * 创建html\r\n * @param template \r\n * @param data \r\n */\r\nexport const createModuleMetaData = (html:string,options:DynamicFormItemType[])=>{\r\n\r\n\r\n  const parser = new DOMParser();\r\n  const element = parser.parseFromString(html,\"text/html\")\r\n  const list = [element.body];\r\n  const data:any = {};\r\n  // const template = element.body.innerHTML;\r\n\r\n  options.forEach(item=>{\r\n\r\n    for(let i=0;i<list.length;i++){\r\n\r\n      const el = list[i];\r\n      const val = \"\";\r\n\r\n      // 忽略文本节点\r\n      if(el.nodeType != 3){\r\n        // 属性解析\r\n        if( [\"src\",\"alt\",\"poster\"].filter(attr=>el.hasAttribute(`data-${item.name}-${attr}`)).\r\n        some(attr=> data[item.name] = el.getAttribute(attr))){  break; }\r\n        // 文本解析\r\n        else if(el.hasAttribute(`data-${item.name}`)){\r\n          data[item.name] = el.textContent;\r\n          break;\r\n        }\r\n        // html 解析\r\n        else if(el.hasAttribute(`data-${item.name}-html`)){\r\n          data[item.name] = el.innerHTML;\r\n          break;\r\n        } \r\n      }\r\n\r\n      // 广域递归\r\n      if(el.childNodes.length){\r\n        el.childNodes.forEach((sub:any)=>list.push(sub))\r\n      }\r\n\r\n      data[item.name] = val;\r\n    }\r\n  })\r\n\r\n  return { data }\r\n}\r\n\r\n/**\r\n * 查找容器节点\r\n * @param element \r\n * @returns \r\n */\r\nexport const findModuleContainerEl = (element:HTMLElement):HTMLElement|null => {\r\n\r\n    var el:HTMLElement|null = element\r\n\r\n    if(el.classList.contains(ModuleContainerNode.getMarkClassName())){\r\n      return el;\r\n    }\r\n\r\n    while (el != null && !el.classList.contains(ModuleContainerNode.getMarkClassName())) {\r\n      el = el.parentElement;\r\n    }\r\n\r\n  return el\r\n}\r\n\r\n/**\r\n * 查找模块节点\r\n * @param element \r\n * @returns \r\n */\r\nexport const findModuleNodeEl = (element:HTMLElement):HTMLElement|null => {\r\n\r\n  var el:HTMLElement|null = element\r\n\r\n  if(el.classList.contains(ModuleBlockNode.getMarkClassName())){\r\n    return el;\r\n  }\r\n\r\n  while (el != null && !el.classList.contains(ModuleBlockNode.getMarkClassName())) {\r\n    el = el.parentElement;\r\n  }\r\n\r\nreturn el\r\n}\r\n\r\n// 测试代码\r\n// console.log(createHtml(\"<div data-title>111</div>\",{title:\"asdasdasdasd\"}))\r\n// console.log(createModuleMetaData(\"<div data-title>asdasdasd<img  data-path-src src='aaa.jpg'></div>\",[\r\n//   { name:\"title\", title:\"标题\", component:\"el-input\", props:{ clearable:true }, defaultValue:\"测试标题\" },\r\n//   { name:\"path\", title:\"标题\", component:\"el-input\", props:{ clearable:true }, defaultValue:\"111\" }\r\n// ]))\r\n"],"names":["showModuleSelectDialog","Promise","resolve","Modules","useModules","selectOption","ref","searchInputValue","handleCancelClick","dialogInstance","destroy","handleConfirmClick","value","clickHandle","item","Dialoger","customRender","title","class","width","onClose","body","templateListComponent","filter","name","indexOf","map","_createVNode","cover","onClick","ElInput","$event","Search","footer","_Fragment","ElButton","default","_createTextVNode","createHtml","template","data","parser","DOMParser","element","parseFromString","list","Object","keys","forEach","key","i","length","el","val","nodeType","attr","hasAttribute","some","setAttribute","textContent","innerHTML","childNodes","sub","push","replaceAll","createModuleMetaData","html","options","getAttribute","findModuleContainerEl","classList","contains","ModuleContainerNode","getMarkClassName","parentElement","findModuleNodeEl","ModuleBlockNode"],"mappings":"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"}
+{"version":3,"file":"utils.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ModulePlugin/utils.tsx"],"sourcesContent":["\r\nimport { Fragment,ref,unref,resolveComponent,h,reactive } from 'vue'\r\nimport { Dialoger } from '@maketribe/dm'\r\nimport {  ElButton,ElCollapse,ElCollapseItem,ElInput } from \"element-plus\";\r\nimport { Search } from \"@element-plus/icons-vue\";\r\nimport { useModules,type ModuleType } from \"./composables\"\r\nimport { DynamicFormItemType } from \"../../../dynamic-form-panel\"\r\n\r\nimport { ModuleBlockNode,$createModuleBlockNode,$isModuleBlockNode } from \"./ModuleBlockNode\"\r\nimport { ModuleContainerNode} from \"./ModuleContainerNode\"\r\n\r\n/**\r\n * 显示模块模版选择\r\n * @returns \r\n */\r\nexport const showModuleSelectDialog = async  () => {\r\n\r\n  return new Promise(resolve => {\r\n\r\n    const Modules = useModules();\r\n    const selectOption = ref<ModuleType|null>(null);\r\n    const searchInputValue = ref(\"\");\r\n\r\n    // 取消编辑\r\n    const handleCancelClick = () => {\r\n      dialogInstance.destroy();\r\n    };\r\n\r\n    // 确认编辑\r\n    const handleConfirmClick = () => {\r\n      dialogInstance.destroy();\r\n      resolve({...selectOption.value as any});\r\n    };\r\n\r\n    // 点击块\r\n    const clickHandle = (item:any)=>{\r\n      selectOption.value = item;\r\n    }\r\n\r\n    const dialogInstance = Dialoger.customRender({\r\n      title: \"模版选择\",\r\n      class: \"mk-doc-editor__module-template_dialog\",\r\n      width: \"700px\",\r\n      onClose: () => {\r\n        dialogInstance.destroy();\r\n      },\r\n      body: () => {\r\n\r\n        // 循环体\r\n        const templateListComponent = Modules.filter(item=>{\r\n          if(searchInputValue.value){\r\n            return item.name.indexOf(searchInputValue.value) >= 0 || item.title.indexOf(searchInputValue.value) >= 0\r\n          }\r\n          else{\r\n            return true;\r\n          }\r\n        }).map(item=>{\r\n\r\n          return <div \r\n          class={`mk-doc-editor__module-template_dialog_list-item ${(item.cover ? 'cover':'')} ${(selectOption.value?.name == item.name ? 'active':'')}`} \r\n          onClick={()=>clickHandle(item)}>\r\n            {item.cover ?  <img src={item.cover}  /> :null}\r\n            <div class=\"mk-doc-editor__module-template_dialog_list-item_title\">{item.title}</div>\r\n          </div>\r\n        })\r\n\r\n        return <div class=\"mk-doc-editor__module-template_dialog_warp\">\r\n          <ElInput v-model={searchInputValue.value} prefix-icon={Search} clearable={true} />\r\n          <div class=\"mk-doc-editor__module-template_dialog_list-body\">\r\n            {templateListComponent}\r\n          </div>\r\n        </div>\r\n      },\r\n      footer: () => {\r\n        return <Fragment>\r\n          <ElButton onClick={handleCancelClick}>取消</ElButton>\r\n          <ElButton type=\"primary\" onClick={handleConfirmClick} disabled={!selectOption.value}>\r\n            确定\r\n          </ElButton>\r\n      </Fragment>\r\n      },\r\n    });\r\n  });\r\n}\r\n\r\n// 元素属性列表\r\nconst ElAttrList = [\"src\",\"alt\",\"poster\",\"href\",\"_target\"];\r\n\r\n/**\r\n * 创建html\r\n * @param template \r\n * @param data \r\n */\r\nexport const createHtml = (template:string,data:any)=>{\r\n\r\n  const parser = new DOMParser();\r\n  const element = parser.parseFromString(template,\"text/html\")\r\n  const list = [element.body];\r\n\r\n  Object.keys(data).forEach(key=>{\r\n\r\n    for(let i=0;i<list.length;i++){\r\n\r\n      const el = list[i];\r\n      const val = data[key] as any;\r\n  \r\n      // 忽略文本节点\r\n      if(el.nodeType != 3){\r\n        // 属性解析\r\n        if(ElAttrList.filter(attr=>el.hasAttribute(`data-${key}-${attr}`)).\r\n        some(attr=> el.setAttribute(attr,val))){  break; }\r\n        // 文本解析\r\n        else if(el.hasAttribute(`data-${key}`)){\r\n          el.textContent = val;\r\n          break;\r\n        }\r\n        else if(el.hasAttribute(`data-${key}-html`)){\r\n          el.innerHTML = val;\r\n          break;\r\n        } \r\n      }\r\n\r\n      // 广域递归\r\n      if(el.childNodes.length){\r\n        el.childNodes.forEach((sub:any)=>list.push(sub))\r\n      }\r\n    }\r\n  })\r\n\r\n  return element.body.innerHTML.replaceAll(/[\\r|\\n|\\r\\n]+/g,\"\")\r\n}\r\n\r\n/**\r\n * 创建html\r\n * @param template \r\n * @param data \r\n */\r\nexport const createModuleMetaData = (html:string,options:DynamicFormItemType[])=>{\r\n\r\n\r\n  const parser = new DOMParser();\r\n  const element = parser.parseFromString(html,\"text/html\")\r\n  const list = [element.body];\r\n  const data:any = {};\r\n\r\n  options.forEach(item=>{\r\n\r\n    for(let i=0;i<list.length;i++){\r\n\r\n      const el = list[i];\r\n      const val = \"\";\r\n\r\n      // 忽略文本节点\r\n      if(el.nodeType != 3){\r\n        // 属性解析\r\n        if(ElAttrList.filter(attr=>el.hasAttribute(`data-${item.name}-${attr}`)).\r\n        some(attr=> data[item.name] = el.getAttribute(attr))){  break; }\r\n        // 文本解析\r\n        else if(el.hasAttribute(`data-${item.name}`)){\r\n          data[item.name] = el.textContent;\r\n          break;\r\n        }\r\n        // html 解析\r\n        else if(el.hasAttribute(`data-${item.name}-html`)){\r\n          data[item.name] = el.innerHTML;\r\n          break;\r\n        } \r\n      }\r\n\r\n      // 广域递归\r\n      if(el.childNodes.length){\r\n        el.childNodes.forEach((sub:any)=>list.push(sub))\r\n      }\r\n\r\n      data[item.name] = val;\r\n    }\r\n  })\r\n\r\n  return { data }\r\n}\r\n\r\n/**\r\n * 查找容器节点\r\n * @param element \r\n * @returns \r\n */\r\nexport const findModuleContainerEl = (element:HTMLElement):HTMLElement|null => {\r\n\r\n    var el:HTMLElement|null = element\r\n\r\n    if(el.classList.contains(ModuleContainerNode.getMarkClassName())){\r\n      return el;\r\n    }\r\n\r\n    while (el != null && !el.classList.contains(ModuleContainerNode.getMarkClassName())) {\r\n      el = el.parentElement;\r\n    }\r\n\r\n  return el\r\n}\r\n\r\n/**\r\n * 查找模块节点\r\n * @param element \r\n * @returns \r\n */\r\nexport const findModuleNodeEl = (element:HTMLElement):HTMLElement|null => {\r\n\r\n  var el:HTMLElement|null = element\r\n\r\n  if(el.classList.contains(ModuleBlockNode.getMarkClassName())){\r\n    return el;\r\n  }\r\n\r\n  while (el != null && !el.classList.contains(ModuleBlockNode.getMarkClassName())) {\r\n    el = el.parentElement;\r\n  }\r\n\r\nreturn el\r\n}\r\n\r\n// 测试代码\r\n// console.log(createHtml(\"<div data-title>111</div>\",{title:\"asdasdasdasd\"}))\r\n// console.log(createModuleMetaData(\"<div data-title>asdasdasd<img  data-path-src src='aaa.jpg'></div>\",[\r\n//   { name:\"title\", title:\"标题\", component:\"el-input\", props:{ clearable:true }, defaultValue:\"测试标题\" },\r\n//   { name:\"path\", title:\"标题\", component:\"el-input\", props:{ clearable:true }, defaultValue:\"111\" }\r\n// ]))\r\n"],"names":["showModuleSelectDialog","Promise","resolve","Modules","useModules","selectOption","ref","searchInputValue","handleCancelClick","dialogInstance","destroy","handleConfirmClick","value","clickHandle","item","Dialoger","customRender","title","class","width","onClose","body","templateListComponent","filter","name","indexOf","map","_createVNode","cover","onClick","ElInput","$event","Search","footer","_Fragment","ElButton","default","_createTextVNode","ElAttrList","createHtml","template","data","parser","DOMParser","element","parseFromString","list","Object","keys","forEach","key","i","length","el","val","nodeType","attr","hasAttribute","some","setAttribute","textContent","innerHTML","childNodes","sub","push","replaceAll","createModuleMetaData","html","options","getAttribute","findModuleContainerEl","classList","contains","ModuleContainerNode","getMarkClassName","parentElement","findModuleNodeEl","ModuleBlockNode"],"mappings":"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"}

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

@@ -3,6 +3,7 @@ const vue = require("vue");
 const lexical = require("lexical");
 const selection = require("@lexical/selection");
 const richText = require("@lexical/rich-text");
+const list = require("@lexical/list");
 const utils = require("@lexical/utils");
 const lexicalVue = require("lexical-vue");
 const _hoisted_1 = {
@@ -16,6 +17,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
     const editor = lexicalVue.useLexicalComposer();
     const CONTENT_TYPE_DEFINES = [
       { value: "paragraph", label: "正文" },
+      { value: "bullet", label: "无序列表" },
+      { value: "number", label: "有序列表" },
       { value: "h1", label: "标题 1" },
       { value: "h2", label: "标题 2" },
       { value: "h3", label: "标题 3" }
@@ -52,6 +55,12 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           selection.$patchStyleText(selection$1, { ["font-size"]: "" });
           if (type.value == "paragraph") {
             selection.$setBlocksType(selection$1, () => lexical.$createParagraphNode());
+          } else if (type.value == "bullet") {
+            editor.dispatchCommand(list.INSERT_UNORDERED_LIST_COMMAND, void 0);
+          } else if (type.value == "bullet") {
+            editor.dispatchCommand(list.INSERT_ORDERED_LIST_COMMAND, void 0);
+          } else if (type.value == "check-list") {
+            editor.dispatchCommand(list.INSERT_CHECK_LIST_COMMAND, void 0);
           } else {
             selection.$setBlocksType(selection$1, () => {
               return richText.$createHeadingNode(type.value);
@@ -88,7 +97,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
                   onClick: ($event) => setContentType(item)
                 }, {
                   default: vue.withCtx(() => [
-                    item.value == "paragraph" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, vue.toDisplayString(item.label), 1)) : (vue.openBlock(), vue.createElementBlock("div", {
+                    item.value.indexOf("h") != 0 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, vue.toDisplayString(item.label), 1)) : (vue.openBlock(), vue.createElementBlock("div", {
                       key: 1,
                       class: "mk-doc-editor-toolbar-content-style-item",
                       innerHTML: `<${item.value}>${item.label}</${item.value}>`

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

@@ -1 +1 @@
-{"version":3,"file":"ContentStyleTool.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ToolbarPlugin/ContentStyleTool.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport {\r\n  $applyNodeReplacement,\r\n  $createParagraphNode, $createTextNode,\r\n  $getSelection,\r\n  $isRangeSelection,\r\n  $isRootOrShadowRoot\r\n} from 'lexical'\r\nimport { $patchStyleText,$setBlocksType } from '@lexical/selection'\r\nimport type { HeadingTagType } from '@lexical/rich-text'\r\nimport { $createHeadingNode,$isHeadingNode } from '@lexical/rich-text'\r\nimport { $findMatchingParent } from '@lexical/utils'\r\nimport {  useLexicalComposer } from 'lexical-vue'\r\nimport { onMounted, onUnmounted, ref } from 'vue'\r\n\r\nconst editor = useLexicalComposer()\r\n\r\n// 内容类型\r\nconst CONTENT_TYPE_DEFINES = [\r\n  {value:\"paragraph\",label:\"正文\"},\r\n  {value:\"h1\",label:\"标题 1\"},\r\n  {value:\"h2\",label:\"标题 2\"},\r\n  {value:\"h3\",label:\"标题 3\"}\r\n];\r\nconst disabled = ref(false)\r\n\r\nconst contentType = ref<any>(CONTENT_TYPE_DEFINES[0]);\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\r\n        = 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    if (element === null){ element = anchorNode.getTopLevelElementOrThrow() }\r\n      \r\n    const elementKey = element.getKey()\r\n    const elementDOM = editor.getElementByKey(elementKey)\r\n\r\n    if (elementDOM !== null) {\r\n      const type = $isHeadingNode(element) ? element.getTag() : element.getType();\r\n      contentType.value = CONTENT_TYPE_DEFINES.find(item=>item.value == type) || CONTENT_TYPE_DEFINES[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 setContentType = (type:any)=>{\r\n\r\n  contentType.value = type;\r\n   \r\n  editor.update(() => {\r\n\r\n      const selection = $getSelection()\r\n   \r\n      if ($isRangeSelection(selection)){\r\n\r\n        // 清空字体大小\r\n        $patchStyleText(selection, { [\"font-size\"]:\"\" })\r\n   \r\n        if(type.value == \"paragraph\"){\r\n          $setBlocksType(selection, () => $createParagraphNode())\r\n        }\r\n        else{\r\n          $setBlocksType(selection, () => {\r\n            return $createHeadingNode(type.value as  HeadingTagType)\r\n          })\r\n        }\r\n      }\r\n  })\r\n}\r\n\r\n// 挂载的时候\r\nonMounted(() => {\r\n\r\nconst unregisterMergeListener = editor.registerUpdateListener(({ editorState }) => {\r\n  editorState.read(() => updateToolbar())\r\n})\r\n\r\nonUnmounted(() => unregisterMergeListener());\r\n})\r\n\r\n</script>\r\n\r\n<template>\r\n  <el-dropdown max-height=\"300px\" trigger=\"click\" :disabled=\"disabled\">\r\n    <el-button text :disabled=\"disabled\">\r\n      {{contentType.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:contentType.label == item.label}\" :disabled=\"disabled\" v-for=\"item in CONTENT_TYPE_DEFINES\" :value=\"item.value\" @click=\"setContentType(item)\">\r\n          <template v-if=\"item.value == 'paragraph'\">\r\n            <div class=\"mk-doc-editor-toolbar-content-style-item text\">{{item.label}}</div>\r\n          </template>\r\n          <template v-else>\r\n           <div class=\"mk-doc-editor-toolbar-content-style-item\" v-html=\"`<${item.value}>${item.label}</${item.value}>`\"></div>\r\n          </template>\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","selection","$getSelection","$isRangeSelection","$findMatchingParent","$isRootOrShadowRoot","$isHeadingNode","$patchStyleText","$setBlocksType","$createParagraphNode","$createHeadingNode","onMounted","onUnmounted"],"mappings":";;;;;;;;;;;;;;;AAeA,UAAM,SAASA,WAAAA;AAGf,UAAM,uBAAuB;AAAA,MAC3B,EAAC,OAAM,aAAY,OAAM,KAAI;AAAA,MAC7B,EAAC,OAAM,MAAK,OAAM,OAAM;AAAA,MACxB,EAAC,OAAM,MAAK,OAAM,OAAM;AAAA,MACxB,EAAC,OAAM,MAAK,OAAM,OAAM;AAAA,IAAA;AAEpB,UAAA,WAAWC,QAAI,KAAK;AAE1B,UAAM,cAAcA,IAAA,IAAS,qBAAqB,CAAC,CAAC;AAGpD,aAAS,gBAAgB;AAEvB,YAAMC,aAAYC,QAAAA;AAEd,UAAAC,QAAAA,kBAAkBF,UAAS,GAAG;AAE1B,cAAA,aAAaA,WAAU,OAAO,QAAQ;AAExC,YAAA,UACE,WAAW,aAAa,SACtB,aACAG,MAAA,oBAAoB,YAAY,CAAC,MAAM;AACjC,gBAAA,SAAS,EAAE;AACV,iBAAA,WAAW,QAAQC,QAAA,oBAAoB,MAAM;AAAA,QAAA,CACrD;AAEP,YAAI,YAAY,MAAK;AAAE,oBAAU,WAAW;QAA4B;AAElE,cAAA,aAAa,QAAQ;AACrB,cAAA,aAAa,OAAO,gBAAgB,UAAU;AAEpD,YAAI,eAAe,MAAM;AACjB,gBAAA,OAAOC,wBAAe,OAAO,IAAI,QAAQ,OAAO,IAAI,QAAQ;AACtD,sBAAA,QAAQ,qBAAqB,KAAK,CAAA,SAAM,KAAK,SAAS,IAAI,KAAK,qBAAqB,CAAC;AAAA,QACnG;AACA,iBAAS,QAAQ;AAAA,MAAA,OAEf;AAEF,iBAAS,QAAQ;AAAA,MACnB;AAAA,IACF;AAGM,UAAA,iBAAiB,CAAC,SAAW;AAEjC,kBAAY,QAAQ;AAEpB,aAAO,OAAO,MAAM;AAEhB,cAAML,cAAYC,QAAAA;AAEd,YAAAC,QAAAA,kBAAkBF,WAAS,GAAE;AAG/BM,oBAAAA,gBAAgBN,aAAW,EAAE,CAAC,WAAW,GAAE,GAAI,CAAA;AAE5C,cAAA,KAAK,SAAS,aAAY;AACZO,sBAAAA,eAAAP,aAAW,MAAMQ,QAAA,qBAAA,CAAsB;AAAA,UAAA,OAEpD;AACFD,sBAAA,eAAeP,aAAW,MAAM;AACvB,qBAAAS,SAAA,mBAAmB,KAAK,KAAwB;AAAA,YAAA,CACxD;AAAA,UACH;AAAA,QACF;AAAA,MAAA,CACH;AAAA,IAAA;AAIHC,QAAAA,UAAU,MAAM;AAEhB,YAAM,0BAA0B,OAAO,uBAAuB,CAAC,EAAE,kBAAkB;AACrE,oBAAA,KAAK,MAAM,cAAA,CAAe;AAAA,MAAA,CACvC;AAEWC,sBAAA,MAAM,yBAAyB;AAAA,IAAA,CAC1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ContentStyleTool.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ToolbarPlugin/ContentStyleTool.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport {\r\n  $createParagraphNode,\r\n  $getSelection,\r\n  $isRangeSelection,\r\n  $isRootOrShadowRoot\r\n} from 'lexical'\r\nimport { $patchStyleText,$setBlocksType } from '@lexical/selection'\r\nimport type { HeadingTagType } from '@lexical/rich-text'\r\nimport { $createHeadingNode,$isHeadingNode } from '@lexical/rich-text'\r\nimport { \r\n  INSERT_CHECK_LIST_COMMAND, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, \r\n} from '@lexical/list'\r\nimport { $findMatchingParent } from '@lexical/utils'\r\nimport {  useLexicalComposer } from 'lexical-vue'\r\nimport { onMounted, onUnmounted, ref } from 'vue'\r\n\r\nconst editor = useLexicalComposer()\r\n\r\n// 内容类型\r\nconst CONTENT_TYPE_DEFINES = [\r\n  {value:\"paragraph\",label:\"正文\"},\r\n  {value:\"bullet\",label:\"无序列表\"},\r\n  {value:\"number\",label:\"有序列表\"},\r\n  {value:\"h1\",label:\"标题 1\"},\r\n  {value:\"h2\",label:\"标题 2\"},\r\n  {value:\"h3\",label:\"标题 3\"}\r\n];\r\n\r\nconst disabled = ref(false)\r\n\r\nconst contentType = ref<any>(CONTENT_TYPE_DEFINES[0]);\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\r\n        = 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    if (element === null){ element = anchorNode.getTopLevelElementOrThrow() }\r\n      \r\n    const elementKey = element.getKey()\r\n    const elementDOM = editor.getElementByKey(elementKey)\r\n\r\n    if (elementDOM !== null) {\r\n      const type = $isHeadingNode(element) ? element.getTag() : element.getType();\r\n      contentType.value = CONTENT_TYPE_DEFINES.find(item=>item.value == type) || CONTENT_TYPE_DEFINES[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 setContentType = (type:any)=>{\r\n\r\n  contentType.value = type;\r\n   \r\n  editor.update(() => {\r\n\r\n      const selection = $getSelection()\r\n   \r\n      if ($isRangeSelection(selection)){\r\n\r\n        // 清空字体大小\r\n        $patchStyleText(selection, { [\"font-size\"]:\"\" })\r\n   \r\n        if(type.value == \"paragraph\"){\r\n          $setBlocksType(selection, () => $createParagraphNode())\r\n        }\r\n        else if(type.value == \"bullet\"){\r\n          editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, undefined)\r\n        }\r\n        else if(type.value == \"bullet\"){\r\n          editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, undefined)\r\n        }\r\n        else if(type.value == \"check-list\"){\r\n          editor.dispatchCommand(INSERT_CHECK_LIST_COMMAND, undefined)\r\n        }\r\n        else{\r\n          $setBlocksType(selection, () => {\r\n            return $createHeadingNode(type.value as  HeadingTagType)\r\n          })\r\n        }\r\n      }\r\n  })\r\n}\r\n\r\n// 挂载的时候\r\nonMounted(() => {\r\n\r\nconst unregisterMergeListener = editor.registerUpdateListener(({ editorState }) => {\r\n  editorState.read(() => updateToolbar())\r\n})\r\n\r\n\r\nonUnmounted(() => unregisterMergeListener());\r\n})\r\n\r\n</script>\r\n\r\n<template>\r\n  <el-dropdown max-height=\"300px\" trigger=\"click\" :disabled=\"disabled\">\r\n    <el-button text :disabled=\"disabled\">\r\n      {{contentType.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:contentType.label == item.label}\" :disabled=\"disabled\" v-for=\"item in CONTENT_TYPE_DEFINES\" :value=\"item.value\" @click=\"setContentType(item)\">\r\n          <template v-if=\"item.value.indexOf('h')!=0 \">\r\n            <div class=\"mk-doc-editor-toolbar-content-style-item text\">{{item.label}}</div>\r\n          </template>\r\n          <template v-else>\r\n           <div class=\"mk-doc-editor-toolbar-content-style-item\" v-html=\"`<${item.value}>${item.label}</${item.value}>`\"></div>\r\n          </template>\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","selection","$getSelection","$isRangeSelection","$findMatchingParent","$isRootOrShadowRoot","$isHeadingNode","$patchStyleText","$setBlocksType","$createParagraphNode","INSERT_UNORDERED_LIST_COMMAND","INSERT_ORDERED_LIST_COMMAND","INSERT_CHECK_LIST_COMMAND","$createHeadingNode","onMounted","onUnmounted"],"mappings":";;;;;;;;;;;;;;;;AAiBA,UAAM,SAASA,WAAAA;AAGf,UAAM,uBAAuB;AAAA,MAC3B,EAAC,OAAM,aAAY,OAAM,KAAI;AAAA,MAC7B,EAAC,OAAM,UAAS,OAAM,OAAM;AAAA,MAC5B,EAAC,OAAM,UAAS,OAAM,OAAM;AAAA,MAC5B,EAAC,OAAM,MAAK,OAAM,OAAM;AAAA,MACxB,EAAC,OAAM,MAAK,OAAM,OAAM;AAAA,MACxB,EAAC,OAAM,MAAK,OAAM,OAAM;AAAA,IAAA;AAGpB,UAAA,WAAWC,QAAI,KAAK;AAE1B,UAAM,cAAcA,IAAA,IAAS,qBAAqB,CAAC,CAAC;AAKpD,aAAS,gBAAgB;AAEvB,YAAMC,aAAYC,QAAAA;AAEd,UAAAC,QAAAA,kBAAkBF,UAAS,GAAG;AAE1B,cAAA,aAAaA,WAAU,OAAO,QAAQ;AAExC,YAAA,UACE,WAAW,aAAa,SACtB,aACAG,MAAA,oBAAoB,YAAY,CAAC,MAAM;AACjC,gBAAA,SAAS,EAAE;AACV,iBAAA,WAAW,QAAQC,QAAA,oBAAoB,MAAM;AAAA,QAAA,CACrD;AAEP,YAAI,YAAY,MAAK;AAAE,oBAAU,WAAW;QAA4B;AAElE,cAAA,aAAa,QAAQ;AACrB,cAAA,aAAa,OAAO,gBAAgB,UAAU;AAEpD,YAAI,eAAe,MAAM;AACjB,gBAAA,OAAOC,wBAAe,OAAO,IAAI,QAAQ,OAAO,IAAI,QAAQ;AACtD,sBAAA,QAAQ,qBAAqB,KAAK,CAAA,SAAM,KAAK,SAAS,IAAI,KAAK,qBAAqB,CAAC;AAAA,QACnG;AACA,iBAAS,QAAQ;AAAA,MAAA,OAEf;AAEF,iBAAS,QAAQ;AAAA,MACnB;AAAA,IACF;AAGM,UAAA,iBAAiB,CAAC,SAAW;AAEjC,kBAAY,QAAQ;AAEpB,aAAO,OAAO,MAAM;AAEhB,cAAML,cAAYC,QAAAA;AAEd,YAAAC,QAAAA,kBAAkBF,WAAS,GAAE;AAG/BM,oBAAAA,gBAAgBN,aAAW,EAAE,CAAC,WAAW,GAAE,GAAI,CAAA;AAE5C,cAAA,KAAK,SAAS,aAAY;AACZO,sBAAAA,eAAAP,aAAW,MAAMQ,QAAA,qBAAA,CAAsB;AAAA,UAAA,WAEhD,KAAK,SAAS,UAAS;AACtB,mBAAA,gBAAgBC,oCAA+B,MAAS;AAAA,UAAA,WAEzD,KAAK,SAAS,UAAS;AACtB,mBAAA,gBAAgBC,kCAA6B,MAAS;AAAA,UAAA,WAEvD,KAAK,SAAS,cAAa;AAC1B,mBAAA,gBAAgBC,gCAA2B,MAAS;AAAA,UAAA,OAEzD;AACFJ,sBAAA,eAAeP,aAAW,MAAM;AACvB,qBAAAY,SAAA,mBAAmB,KAAK,KAAwB;AAAA,YAAA,CACxD;AAAA,UACH;AAAA,QACF;AAAA,MAAA,CACH;AAAA,IAAA;AAIHC,QAAAA,UAAU,MAAM;AAEhB,YAAM,0BAA0B,OAAO,uBAAuB,CAAC,EAAE,kBAAkB;AACrE,oBAAA,KAAK,MAAM,cAAA,CAAe;AAAA,MAAA,CACvC;AAGWC,sBAAA,MAAM,yBAAyB;AAAA,IAAA,CAC1C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -5,7 +5,8 @@ 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"];
+const composables = require("../ModulePlugin/composables.js");
+const _hoisted_1 = /* @__PURE__ */ vue.createElementVNode("div", null, null, -1);
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "PreviewToolbar",
   props: {
@@ -21,35 +22,45 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       return (_c = (_b = (_a = iframeContentRef.value) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.document) == null ? void 0 : _c.body;
     });
     const codeDialogVisible = vue.ref(false);
-    const srcdoc = vue.ref("");
-    const linkStr = props.css.split(",").map((path) => {
-      return `<link crossorigin href="${path}" />`;
-    }).join("");
-    const createViewContent = (content) => {
-      srcdoc.value = `
-    <html>
-      <head>
-        <style type="text/css">
-          ${docEditor}
-          ${docTheme}
-        </style>
-        ${linkStr}
-      </head>
-      <body style="font-size:${index.DEVICE_VIEW_MODE.value == "pc" ? "14px" : "18px"}">${content}</body>
-    </html>
-  `;
-    };
+    vue.ref("");
+    props.css.split(",").map((path) => {
+      return `<link crossorigin href="${path}" type="text/xml" />`;
+    }).join("\r\n");
     const show = function() {
-      editor.getEditorState().read(() => {
-        createViewContent(html.$generateHtmlFromNodes(editor));
-        setTimeout(() => {
-          var _a;
-          if (iframeBody.value.scrollHeight > iframeBody.value.offsetHeight) {
-            iframeContentRef.value.style.height = ((_a = iframeBody.value) == null ? void 0 : _a.scrollHeight) + 10 + "px";
-          }
-        }, 100);
-      });
       codeDialogVisible.value = true;
+      vue.nextTick(() => {
+        editor.getEditorState().read(() => {
+          var _a, _b;
+          const doc = (_b = (_a = iframeContentRef.value) == null ? void 0 : _a.contentWindow) == null ? void 0 : _b.document;
+          console.log(doc, doc.head);
+          const style = document.createElement("style");
+          style.setAttribute("type", "text/css");
+          style.innerHTML = [docEditor, docTheme].join("\r\n");
+          style.innerHTML += composables.useModules().filter((item) => item.editorCss).map((item) => item.editorCss).join("\r\n");
+          doc.head.append(style);
+          props.js.split(",").filter((item) => !!item).forEach((path) => {
+            const script = document.createElement("script");
+            script.src = path;
+            script.setAttribute("crossorigin", "true");
+            doc.head.append(script);
+          });
+          props.css.split(",").filter((item) => !!item).forEach((path) => {
+            const link = document.createElement("link");
+            link.href = path;
+            link.setAttribute("rel", "stylesheet");
+            link.setAttribute("crossorigin", "true");
+            doc.head.append(link);
+          });
+          iframeBody.value.style.fontSize = index.DEVICE_VIEW_MODE.value == "pc" ? "14px" : "18px";
+          doc.body.innerHTML = html.$generateHtmlFromNodes(editor);
+          setTimeout(() => {
+            var _a2;
+            if (iframeBody.value.scrollHeight > iframeBody.value.offsetHeight) {
+              iframeContentRef.value.style.height = ((_a2 = iframeBody.value) == null ? void 0 : _a2.scrollHeight) + 10 + "px";
+            }
+          }, 100);
+        });
+      });
     };
     return (_ctx, _cache) => {
       const _component_MKSvgIcon = vue.resolveComponent("MKSvgIcon");
@@ -74,17 +85,21 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           fullscreen: ""
         }, {
           default: vue.withCtx(() => [
-            codeDialogVisible.value ? (vue.openBlock(), vue.createElementBlock("div", {
-              key: 0,
+            vue.createElementVNode("div", {
               class: vue.normalizeClass(["mk-doc-editor__view_warp", vue.unref(index.DEVICE_VIEW_MODE)])
             }, [
               vue.createElementVNode("iframe", {
                 class: "mk-doc-editor__view_iframe",
                 ref_key: "iframeContentRef",
-                ref: iframeContentRef,
-                srcdoc: srcdoc.value
-              }, null, 8, _hoisted_1)
-            ], 2)) : vue.createCommentVNode("", true)
+                ref: iframeContentRef
+              }, null, 512),
+              iframeBody.value ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
+                key: 0,
+                to: iframeBody.value
+              }, [
+                _hoisted_1
+              ], 8, ["to"])) : vue.createCommentVNode("", true)
+            ], 2)
           ]),
           _: 1
         }, 8, ["modelValue"])

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 { $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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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,watch, nextTick } 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\nimport { useModules } from \"../ModulePlugin/composables\"\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}\" type=\"text/xml\" />`\r\n}).join(\"\\r\\n\");\r\n\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 show = function(){\r\n\r\n  codeDialogVisible.value = true;\r\n\r\n  nextTick(()=>{\r\n\r\n    editor.getEditorState().read(() => {\r\n\r\n      const doc = iframeContentRef.value?.contentWindow?.document;\r\n\r\n      console.log(doc,doc.head)\r\n\r\n      // 样式\r\n      const style = document.createElement(\"style\");\r\n      style.setAttribute(\"type\",\"text/css\")\r\n\r\n      // 默认样式\r\n      style.innerHTML = [DocEditorCss,DocThemeCss].join(\"\\r\\n\");\r\n      //模块渲染样式\r\n      style.innerHTML += useModules().filter(item=>item.editorCss).map(item=>item.editorCss).join(\"\\r\\n\");\r\n      doc.head.append(style);\r\n\r\n      // 扩展的js和css\r\n      props.js.split(\",\").filter(item=>!!item).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(\",\").filter(item=>!!item).forEach(path=>{\r\n        const link = document.createElement(\"link\");\r\n        link.href = path;\r\n        link.setAttribute(\"rel\",\"stylesheet\")\r\n        link.setAttribute(\"crossorigin\",\"true\")\r\n        doc.head.append(link);\r\n      })\r\n\r\n      // 预览显示\r\n      iframeBody.value.style.fontSize = DEVICE_VIEW_MODE.value == \"pc\" ? \"14px\" : \"18px\";\r\n\r\n      // 预览内容\r\n      doc.body.innerHTML = $generateHtmlFromNodes(editor);\r\n\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\r\n\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\">\r\n      <iframe class=\"mk-doc-editor__view_iframe\" ref=\"iframeContentRef\"></iframe>\r\n      <Teleport v-if=\"iframeBody\" :to=\"iframeBody\">\r\n           <div></div>\r\n      </Teleport>\r\n    </div>\r\n  </el-dialog>\r\n</template>\r\n"],"names":["useLexicalComposer","ref","computed","nextTick","DocEditorCss","DocThemeCss","useModules","DEVICE_VIEW_MODE","$generateHtmlFromNodes","_a"],"mappings":";;;;;;;;;;;;;;;;AAUA,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;AACpBA,QAAAA,IAAI,EAAE;AACL,UAAM,IAAI,MAAM,GAAG,EAAE,IAAI,CAAM,SAAA;AAC7C,aAAO,2BAA2B,IAAI;AAAA,IAAA,CACvC,EAAE,KAAK,MAAM;AAQd,UAAM,OAAO,WAAU;AAErB,wBAAkB,QAAQ;AAE1BE,UAAAA,SAAS,MAAI;AAEJ,eAAA,iBAAiB,KAAK,MAAM;;AAE3B,gBAAA,OAAM,4BAAiB,UAAjB,mBAAwB,kBAAxB,mBAAuC;AAE3C,kBAAA,IAAI,KAAI,IAAI,IAAI;AAGlB,gBAAA,QAAQ,SAAS,cAAc,OAAO;AACtC,gBAAA,aAAa,QAAO,UAAU;AAGpC,gBAAM,YAAY,CAACC,WAAaC,QAAW,EAAE,KAAK,MAAM;AAExD,gBAAM,aAAaC,YAAA,WAAA,EAAa,OAAO,UAAM,KAAK,SAAS,EAAE,IAAI,CAAM,SAAA,KAAK,SAAS,EAAE,KAAK,MAAM;AAC9F,cAAA,KAAK,OAAO,KAAK;AAGf,gBAAA,GAAG,MAAM,GAAG,EAAE,OAAO,CAAM,SAAA,CAAC,CAAC,IAAI,EAAE,QAAQ,CAAM,SAAA;AAC/C,kBAAA,SAAS,SAAS,cAAc,QAAQ;AAC9C,mBAAO,MAAM;AACN,mBAAA,aAAa,eAAc,MAAM;AACpC,gBAAA,KAAK,OAAO,MAAM;AAAA,UAAA,CACvB;AACK,gBAAA,IAAI,MAAM,GAAG,EAAE,OAAO,CAAM,SAAA,CAAC,CAAC,IAAI,EAAE,QAAQ,CAAM,SAAA;AAChD,kBAAA,OAAO,SAAS,cAAc,MAAM;AAC1C,iBAAK,OAAO;AACP,iBAAA,aAAa,OAAM,YAAY;AAC/B,iBAAA,aAAa,eAAc,MAAM;AAClC,gBAAA,KAAK,OAAO,IAAI;AAAA,UAAA,CACrB;AAGD,qBAAW,MAAM,MAAM,WAAWC,MAAiB,iBAAA,SAAS,OAAO,SAAS;AAGxE,cAAA,KAAK,YAAYC,KAAA,uBAAuB,MAAM;AAElD,qBAAW,MAAM;;AACf,gBAAG,WAAW,MAAM,eAAe,WAAW,MAAM,cAAa;AAC/D,+BAAiB,MAAM,MAAM,WAAUC,MAAA,WAAW,UAAX,gBAAAA,IAAkB,gBAAe,KAAI;AAAA,YAC9E;AAAA,aACC,GAAG;AAAA,QAAA,CACP;AAAA,MAAA,CACF;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -7,7 +7,6 @@ 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 LowPriority = 1;
 const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "index",
@@ -40,7 +39,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
         )
       );
       vue.onUnmounted(() => {
-        defines.ToolbarExtendPlugins.length = 0;
+        index.ToolbarExtendPlugins.length = 0;
         unregisterMergeListener();
       });
     });
@@ -117,7 +116,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
           dropdown: vue.withCtx(() => [
             vue.createVNode(_component_el_dropdown_menu, null, {
               default: vue.withCtx(() => [
-                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(defines.ToolbarExtendPlugins), (item) => {
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(index.ToolbarExtendPlugins), (item) => {
                   return vue.openBlock(), vue.createBlock(_component_el_dropdown_item, {
                     key: item,
                     onClick: ($event) => item.action()

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\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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 \"../../core\"\r\n// 参数\r\ndefineProps({\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,cAAA,qBAAqB,SAAS;AACN;MAAA,CACzB;AAAA,IAAA,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/components/basic/doc-editor/themes/doc-editor-edit.css.js

@@ -1,4 +1,4 @@
 "use strict";
-const DocEditorEditCss = '\r\n.mk-doc__img {\r\n  cursor: pointer;\r\n  z-index: 1;\r\n  position: relative;\r\n}\r\n\r\n\r\n.mk-doc__image-text{\r\n  outline: 2px solid #eff5ff;\r\n}\r\n\r\n.mk-doc-block-container__module-container{\r\n  cursor: pointer;\r\n  position: relative;\r\n  padding: 1px;\r\n  box-sizing: border-box;\r\n  outline: 2px solid #eff5ff;\r\n}\r\n\r\n.mk-doc-block-container__module-container.empty{\r\n  min-height: 200px;\r\n}\r\n.mk-doc-block-container__module-container::before{\r\n  content:"点此选中模块";\r\n  text-align: center;\r\n  background-color: #eff5ff;\r\n  color: #4284ff;\r\n  position: absolute;\r\n  width: 20px;\r\n  line-height: 25px;\r\n  left: -22px;\r\n  outline: 2px solid #eff5ff;\r\n  top: 50%;\r\n  transform: translateY(-50%);\r\n  pointer-events: all;\r\n}\r\n\r\n.mk-doc__embedBlock {\r\n  position: relative;\r\n  z-index: 1;\r\n  padding: 1px;\r\n  cursor: pointer;\r\n}\r\n.mk-doc__embedBlockFocus {\r\n  outline: 2px solid rgb(60, 132, 244);\r\n}\r\n\r\n.mk-doc__embedBlock >*{\r\n  pointer-events: none;\r\n}\r\n\r\n.mk-doc-active-mark{\r\n  position: absolute;\r\n  box-sizing:border-box;\r\n  background-color:#2776f63b;\r\n  z-index: 99;\r\n}\r\n.mk-doc-active-mark.box{\r\n  outline: 2px solid #2776f63b;\r\n  background-color: transparent;\r\n  pointer-events: none;\r\n}\r\n';
+const DocEditorEditCss = '\r\n.mk-doc__img {\r\n  cursor: pointer;\r\n  z-index: 1;\r\n  position: relative;\r\n}\r\n\r\n\r\n.mk-doc-block-container__module-container{\r\n  cursor: pointer;\r\n  position: relative;\r\n  padding: 1px;\r\n  box-sizing: border-box;\r\n  outline: 2px solid #eff5ff;\r\n  white-space:initial;\r\n  word-break:initial;\r\n}\r\n\r\n.mk-doc-block-container__module-container.empty{\r\n  min-height: 200px;\r\n}\r\n.mk-doc-block-container__module-container::before{\r\n  content: "点此选中模块";\r\n  text-align: center;\r\n  background-color: #eff5ff;\r\n  color: #4284ff;\r\n  position: sticky;\r\n  width: 200px;\r\n  height: 20px;\r\n  left: 0;\r\n  outline: 2px solid #eff5ff;\r\n  top: 0px;\r\n  pointer-events: all;\r\n  white-space: pre-wrap;\r\n  word-break: break-word;\r\n  font-size: 14px;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n.mk-doc__embedBlock {\r\n  position: relative;\r\n  z-index: 1;\r\n  padding: 1px;\r\n  cursor: pointer;\r\n}\r\n.mk-doc__embedBlockFocus {\r\n  outline: 2px solid rgb(60, 132, 244);\r\n}\r\n\r\n.mk-doc__embedBlock >*{\r\n  pointer-events: none;\r\n}\r\n\r\n.mk-doc-active-mark{\r\n  position: absolute;\r\n  box-sizing:border-box;\r\n  background-color:#2776f63b;\r\n  z-index: 99;\r\n}\r\n.mk-doc-active-mark.box{\r\n  outline: 2px solid #2776f63b;\r\n  background-color: transparent;\r\n  pointer-events: none;\r\n}\r\n';
 module.exports = DocEditorEditCss;
 //# sourceMappingURL=doc-editor-edit.css.js.map