@maketribe/ms-app 3.2.23 → 3.2.24

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

@@ -0,0 +1,128 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { createCommand } from "lexical";
+import { BaseBlockCantainerNode } from "../RichTextPlugin/nodes/BaseBlockCantainerNode.js";
+const INSERT_MODULECONTAINER_COMMAND = createCommand("INSERT_MODULECONTAINER_COMMAND");
+class ModuleContainerNode extends BaseBlockCantainerNode {
+  constructor(attrs, key) {
+    super(ModuleContainerNode.getType(), key);
+    __publicField(this, "__attrs");
+    this.__attrs = attrs;
+  }
+  static getType() {
+    return "module-container";
+  }
+  /**
+   * 获取模块类标识
+   * @returns 
+   */
+  static getMarkClassName() {
+    return BaseBlockCantainerNode.getMarkClassName(ModuleContainerNode.getType());
+  }
+  static clone(node) {
+    return new ModuleContainerNode(node.__attrs, node.__key);
+  }
+  static importJSON(serializedNode) {
+    return new ModuleContainerNode(serializedNode.attrs);
+  }
+  static importDOM() {
+    return {
+      div: (domNode) => {
+        const data = {};
+        return BaseBlockCantainerNode.hasBlockByType(domNode, ModuleContainerNode.getType()) ? {
+          conversion: () => {
+            const className = domNode.className.replace(ModuleContainerNode.getMarkClassName(), "").trim();
+            return {
+              node: $createModuleContainerNode(Object.assign({
+                isFlex: false,
+                direction: "",
+                wrap: false,
+                alignContent: "",
+                justifyContent: "",
+                alignItems: "",
+                class: className
+              }, data))
+            };
+          },
+          priority: 4
+        } : null;
+      }
+    };
+  }
+  /**
+   * 设置属性
+   * @param pos 
+   */
+  setAttrs(data) {
+    const writable = this.getWritable();
+    Object.assign(writable.__attrs, data);
+  }
+  /**
+   * 获取属性
+   * @param pos 
+   */
+  getAttrs() {
+    return this.__attrs;
+  }
+  /**
+   * 导出JSON
+   * @returns 
+   */
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      type: this.getType(),
+      attrs: this.__attrs,
+      version: 1
+    };
+  }
+  /**
+  * 导出DOM
+  * @returns 
+  */
+  exportDOM() {
+    const out = super.exportDOM();
+    const el = out.element;
+    if (this.__attrs.class && !el.classList.contains(this.__attrs.class)) {
+      el.classList.add(this.__attrs.class);
+    }
+    return out;
+  }
+  /**
+   * 创建渲染DOM
+   * @param config 
+   * @returns 
+   */
+  createDOM(config) {
+    const el = super.createDOM(config);
+    if (this.__attrs.class && !el.classList.contains(this.__attrs.class)) {
+      el.classList.add(this.__attrs.class);
+    }
+    if (this.getChildrenSize() <= 0) {
+      el.classList.add("empty");
+    }
+    return el;
+  }
+}
+function $isModuleContainerNode(node) {
+  return node instanceof ModuleContainerNode;
+}
+function $createModuleContainerNode(data) {
+  return new ModuleContainerNode(Object.assign({
+    isFlex: false,
+    direction: "",
+    wrap: false,
+    alignContent: "",
+    justifyContent: "",
+    alignItems: "",
+    class: ""
+  }, data));
+}
+export {
+  $createModuleContainerNode,
+  $isModuleContainerNode,
+  INSERT_MODULECONTAINER_COMMAND,
+  ModuleContainerNode
+};
+//# sourceMappingURL=ModuleContainerNode.js.map

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

@@ -0,0 +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":[],"mappings":";;;;;AAyBa,MAAA,iCAA0E,cAAc,gCAAgC;AAY9H,MAAM,4BAA4B,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,WAAO,uBAAuB,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,eAAQ,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;"}

package/dist/esm/components/basic/doc-editor/plugins/ModulePlugin/commands.js

@@ -0,0 +1,6 @@
+import { createCommand } from "lexical";
+const INSERT_MODULE_COMMAND = createCommand("INSERT_MODULE_COMMAND");
+export {
+  INSERT_MODULE_COMMAND
+};
+//# sourceMappingURL=commands.js.map

package/dist/esm/components/basic/doc-editor/plugins/ModulePlugin/commands.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"commands.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ModulePlugin/commands.ts"],"sourcesContent":["\r\n\r\nimport { type LexicalCommand, createCommand} from 'lexical'\r\n\r\n/**\r\n * 属性类型\r\n */\r\nexport type ModulePropType = { name:string,data:object };\r\n\r\n/**\r\n * 插入模块模版块指令\r\n */\r\nexport const INSERT_MODULE_COMMAND: LexicalCommand<ModulePropType> = createCommand('INSERT_MODULE_COMMAND')\r\n"],"names":[],"mappings":";AAYa,MAAA,wBAAwD,cAAc,uBAAuB;"}

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

@@ -0,0 +1,21 @@
+const Modules = [];
+const registerModule = (options) => {
+  Modules.push(options);
+};
+const useModules = () => {
+  return Modules;
+};
+const useModule = (name) => {
+  const module = Modules.find((item) => item.name == name);
+  if (module == null) {
+    throw new Error("未知的模块模版：【" + name + "】");
+  }
+  return { module };
+};
+export {
+  Modules,
+  registerModule,
+  useModule,
+  useModules
+};
+//# sourceMappingURL=composables.js.map

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

@@ -0,0 +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":[],"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,QAAM,SAAS,QAAQ,KAAK,CAAM,SAAA,KAAK,QAAQ,IAAI;AAEnD,MAAG,UAAU,MAAK;AAChB,UAAM,IAAI,MAAM,cAAc,OAAO,GAAG;AAAA,EAC1C;AAEA,SAAO,EAAE,OAAO;AAClB;"}

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

@@ -0,0 +1,154 @@
+import { defineComponent, ref, onMounted, onUnmounted, unref, openBlock, createElementBlock, normalizeClass, normalizeStyle, createCommentVNode } from "vue";
+import { useLexicalComposer } from "lexical-vue";
+import { mergeRegister, $insertNodeToNearestRoot } from "@lexical/utils";
+import { COMMAND_PRIORITY_EDITOR, $getNodeByKey } from "lexical";
+import { registerDocEditorToolbarExtend } from "../ToolbarPlugin/defines.js";
+import { useModule } from "./composables.js";
+import { ModuleBlockNode, $createModuleBlockNode, $isModuleBlockNode } from "./ModuleBlockNode.js";
+import { INSERT_MODULECONTAINER_COMMAND, $createModuleContainerNode, $isModuleContainerNode } from "./ModuleContainerNode.js";
+import { INSERT_MODULE_COMMAND } from "./commands.js";
+import { findModuleNodeEl, findModuleContainerEl, showModuleSelectDialog } from "./utils.js";
+import { createDefaultFormData } from "../../../dynamic-form-panel/utils.js";
+import "../../core/index.js";
+import { showDynamicFormDialoger } from "../../../dynamic-form-panel/dialog.js";
+import "element-plus";
+import { useElementModule } from "../../core/element-module.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  setup(__props) {
+    const editor = useLexicalComposer();
+    registerDocEditorToolbarExtend({
+      icon: "Grid",
+      text: "模块",
+      action: async () => {
+        editor.dispatchCommand(INSERT_MODULECONTAINER_COMMAND, {});
+      },
+      sort: 9
+    });
+    const isSelectContainer = ref(false);
+    const { isSelected, curSelectKey, curSelectPos, updateActiveViewState } = useElementModule((el) => {
+      var modelEl = findModuleNodeEl(el);
+      var moduleContainerEl = findModuleContainerEl(el);
+      if (modelEl && moduleContainerEl) {
+        isSelectContainer.value = false;
+        return modelEl;
+      } else if (moduleContainerEl) {
+        isSelectContainer.value = true;
+        return moduleContainerEl;
+      }
+      isSelectContainer.value = false;
+      return null;
+    }, (selection) => {
+      const node = $getNodeByKey(curSelectKey.value);
+      if (node != null) {
+        const toolbarList = [];
+        if ($isModuleContainerNode(node)) {
+          toolbarList.push(...[
+            {
+              title: `编辑模块容器`,
+              icon: "Edit",
+              action: async () => {
+                var result = await showDynamicFormDialoger("模块容器", [
+                  { name: "class", title: "标识类名", component: "el-input", props: { clearable: true }, defaultValue: "" }
+                ], node.getAttrs());
+                editor.update(() => {
+                  node.setAttrs(result);
+                  updateActiveViewState(null);
+                });
+              }
+            },
+            {
+              title: "添加模块",
+              icon: "Plus",
+              action: async () => {
+                const result = await showModuleSelectDialog();
+                const defaultData = createDefaultFormData(result.options);
+                editor.dispatchCommand(INSERT_MODULE_COMMAND, { name: result.name, data: defaultData });
+                updateActiveViewState(null);
+              }
+            }
+          ]);
+        } else if ($isModuleBlockNode(node)) {
+          const { module } = useModule(node.__name);
+          toolbarList.push(...[
+            {
+              title: `编辑【${module.title}】`,
+              icon: "Edit",
+              action: async () => {
+                var result = await showDynamicFormDialoger(module.title, module.options, node.__data);
+                editor.update(() => {
+                  node.setContent(result);
+                  updateActiveViewState(null);
+                });
+              }
+            },
+            {
+              title: `插入【${module.title}】之前`,
+              icon: "BottomLeft",
+              action: async () => {
+                const result = await showModuleSelectDialog();
+                const defaultData = createDefaultFormData(result.options);
+                editor.dispatchCommand(INSERT_MODULE_COMMAND, { name: result.name, data: defaultData });
+                updateActiveViewState(null);
+                editor.update(() => {
+                  node.insertBefore($createModuleBlockNode(result.name, defaultData));
+                  updateActiveViewState(null);
+                });
+              }
+            },
+            {
+              title: `插入【${module.title}】之后`,
+              icon: "BottomRight",
+              action: async () => {
+                const result = await showModuleSelectDialog();
+                const defaultData = createDefaultFormData(result.options);
+                editor.dispatchCommand(INSERT_MODULE_COMMAND, { name: result.name, data: defaultData });
+                updateActiveViewState(null);
+                editor.update(() => {
+                  node.insertAfter($createModuleBlockNode(result.name, defaultData));
+                  updateActiveViewState(null);
+                });
+              }
+            }
+          ]);
+        }
+        return toolbarList;
+      }
+      return null;
+    });
+    onMounted(() => {
+      if (!editor.hasNodes([ModuleBlockNode])) {
+        throw new Error("ModuleBlockPlugin: 未注册模块模版节点！");
+      }
+      const unregister = mergeRegister(
+        // 插入模块容器
+        editor.registerCommand(INSERT_MODULECONTAINER_COMMAND, (payload) => {
+          $insertNodeToNearestRoot($createModuleContainerNode(payload));
+          return true;
+        }, COMMAND_PRIORITY_EDITOR),
+        // 插入模块
+        editor.registerCommand(INSERT_MODULE_COMMAND, (payload) => {
+          if (curSelectKey.value) {
+            const node = $getNodeByKey(curSelectKey.value);
+            if ($isModuleContainerNode(node)) {
+              node.append($createModuleBlockNode(payload.name, payload.data));
+            }
+          }
+          return true;
+        }, COMMAND_PRIORITY_EDITOR)
+      );
+      onUnmounted(() => unregister());
+    });
+    return (_ctx, _cache) => {
+      return unref(isSelected) ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: normalizeClass(["mk-doc-active-mark", { box: isSelectContainer.value }]),
+        style: normalizeStyle(unref(curSelectPos))
+      }, null, 6)) : createCommentVNode("", true);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=index.vue.js.map

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

@@ -0,0 +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":[],"mappings":"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"}

package/dist/esm/components/basic/doc-editor/plugins/ModulePlugin/index.vue2.js

@@ -0,0 +1,5 @@
+import _sfc_main from "./index.vue.js";
+export {
+  _sfc_main as default
+};
+//# sourceMappingURL=index.vue2.js.map

package/dist/esm/components/basic/doc-editor/plugins/ModulePlugin/index.vue2.js.map

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

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

@@ -0,0 +1,160 @@
+import { ref, createVNode, Fragment, createTextVNode } from "vue";
+import { Dialoger } from "@maketribe/dm";
+import { ElInput, ElButton } from "element-plus";
+import { Search } from "@element-plus/icons-vue";
+import { useModules } from "./composables.js";
+import { ModuleBlockNode } from "./ModuleBlockNode.js";
+import { ModuleContainerNode } from "./ModuleContainerNode.js";
+const showModuleSelectDialog = async () => {
+  return new Promise((resolve) => {
+    const Modules = useModules();
+    const selectOption = ref(null);
+    const searchInputValue = ref("");
+    const handleCancelClick = () => {
+      dialogInstance.destroy();
+    };
+    const handleConfirmClick = () => {
+      dialogInstance.destroy();
+      resolve({
+        ...selectOption.value
+      });
+    };
+    const clickHandle = (item) => {
+      selectOption.value = item;
+    };
+    const dialogInstance = Dialoger.customRender({
+      title: "模版选择",
+      class: "mk-doc-editor__module-template_dialog",
+      width: "700px",
+      onClose: () => {
+        dialogInstance.destroy();
+      },
+      body: () => {
+        const templateListComponent = Modules.filter((item) => {
+          if (searchInputValue.value) {
+            return item.name.indexOf(searchInputValue.value) >= 0 || item.title.indexOf(searchInputValue.value) >= 0;
+          } else {
+            return true;
+          }
+        }).map((item) => {
+          var _a;
+          return createVNode("div", {
+            "class": `mk-doc-editor__module-template_dialog_list-item ${item.cover ? "cover" : ""} ${((_a = selectOption.value) == null ? void 0 : _a.name) == item.name ? "active" : ""}`,
+            "onClick": () => clickHandle(item)
+          }, [item.cover ? createVNode("img", {
+            "src": item.cover
+          }, null) : null, createVNode("div", {
+            "class": "mk-doc-editor__module-template_dialog_list-item_title"
+          }, [item.title])]);
+        });
+        return createVNode("div", {
+          "class": "mk-doc-editor__module-template_dialog_warp"
+        }, [createVNode(ElInput, {
+          "modelValue": searchInputValue.value,
+          "onUpdate:modelValue": ($event) => searchInputValue.value = $event,
+          "prefix-icon": Search,
+          "clearable": true
+        }, null), createVNode("div", {
+          "class": "mk-doc-editor__module-template_dialog_list-body"
+        }, [templateListComponent])]);
+      },
+      footer: () => {
+        return createVNode(Fragment, null, [createVNode(ElButton, {
+          "onClick": handleCancelClick
+        }, {
+          default: () => [createTextVNode("取消")]
+        }), createVNode(ElButton, {
+          "type": "primary",
+          "onClick": handleConfirmClick,
+          "disabled": !selectOption.value
+        }, {
+          default: () => [createTextVNode("确定")]
+        })]);
+      }
+    });
+  });
+};
+const createHtml = (template, data) => {
+  const parser = new DOMParser();
+  const element = parser.parseFromString(template, "text/html");
+  const list = [element.body];
+  Object.keys(data).forEach((key) => {
+    for (let i = 0; i < list.length; i++) {
+      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))) {
+          break;
+        } else if (el.hasAttribute(`data-${key}`)) {
+          el.textContent = val;
+          break;
+        } else if (el.hasAttribute(`data-${key}-html`)) {
+          el.innerHTML = val;
+          break;
+        }
+      }
+      if (el.childNodes.length) {
+        el.childNodes.forEach((sub) => list.push(sub));
+      }
+    }
+  });
+  return element.body.innerHTML.replaceAll(/[\r|\n|\r\n]+/g, "");
+};
+const createModuleMetaData = (html, options) => {
+  const parser = new DOMParser();
+  const element = parser.parseFromString(html, "text/html");
+  const list = [element.body];
+  const data = {};
+  options.forEach((item) => {
+    for (let i = 0; i < list.length; i++) {
+      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))) {
+          break;
+        } else if (el.hasAttribute(`data-${item.name}`)) {
+          data[item.name] = el.textContent;
+          break;
+        } else if (el.hasAttribute(`data-${item.name}-html`)) {
+          data[item.name] = el.innerHTML;
+          break;
+        }
+      }
+      if (el.childNodes.length) {
+        el.childNodes.forEach((sub) => list.push(sub));
+      }
+      data[item.name] = val;
+    }
+  });
+  return {
+    data
+  };
+};
+const findModuleContainerEl = (element) => {
+  var el = element;
+  if (el.classList.contains(ModuleContainerNode.getMarkClassName())) {
+    return el;
+  }
+  while (el != null && !el.classList.contains(ModuleContainerNode.getMarkClassName())) {
+    el = el.parentElement;
+  }
+  return el;
+};
+const findModuleNodeEl = (element) => {
+  var el = element;
+  if (el.classList.contains(ModuleBlockNode.getMarkClassName())) {
+    return el;
+  }
+  while (el != null && !el.classList.contains(ModuleBlockNode.getMarkClassName())) {
+    el = el.parentElement;
+  }
+  return el;
+};
+export {
+  createHtml,
+  createModuleMetaData,
+  findModuleContainerEl,
+  findModuleNodeEl,
+  showModuleSelectDialog
+};
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +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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"}

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

@@ -15,7 +15,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     content: { type: String, default: `` },
     placeholder: { type: String, default: `` }
   },
-  emits: ["change", "init"],
+  emits: ["change"],
   setup(__props, { emit: __emit }) {
     const emit = __emit;
     const props = __props;
@@ -31,19 +31,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         editor.update(() => {
           var _a, _b;
           if (html.trim()) {
-            nodes = [...$generateNodesFromDOM(editor, parser.parseFromString(html.trim(), "text/html"))];
+            nodes = $generateNodesFromDOM(editor, parser.parseFromString(html.trim(), "text/html"));
           }
           $selectAll();
+          (_a = $getSelection()) == null ? void 0 : _a.insertText("");
           if (nodes.length > 0) {
-            (_a = $getSelection()) == null ? void 0 : _a.insertNodes(nodes);
-          } else {
-            (_b = $getSelection()) == null ? void 0 : _b.insertText("");
+            (_b = $getSelection()) == null ? void 0 : _b.insertNodes(nodes);
           }
         });
       }
     };
     onMounted(() => {
-      emit("init", editor);
       watch(() => props.content, setHtml, { immediate: true });
       watch(htmlContent, (value) => emit("change", value));
       const unregisterMergeListener = editor.registerUpdateListener(({ editorState }) => {

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

@@ -1 +1 @@
-{"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/RichTextPlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\n\r\nimport { ref,defineProps,computed,defineEmits,onMounted,onUnmounted,watch } from \"vue\"\r\nimport { useCanShowPlaceholder, useLexicalComposer, useRichTextSetup} from 'lexical-vue'\r\nimport { $getRoot, $getSelection ,$createRangeSelection,$selectAll } from 'lexical'\r\nimport { $generateHtmlFromNodes,$generateNodesFromDOM } from '@lexical/html'\r\nimport ContentEditable from \"./ContentEditable.vue\"\r\nimport DecoratedTeleports from \"./DecoratedTeleports\"\r\n\r\n// 事件\r\nconst emit = defineEmits([\"change\",\"init\"]);\r\n\r\n// 参数\r\nconst props = defineProps({\r\n  content:{ type:String,default:`` },\r\n  placeholder:{ type:String,default:`` }\r\n})\r\n\r\nconst editor = useLexicalComposer()\r\n\r\nconst canShowPlaceholder = useCanShowPlaceholder(editor)\r\n\r\nconst parser = new DOMParser();\r\n\r\n// html 内容\r\nconst htmlContent = ref(\"\");\r\n\r\n// 空内容\r\nconst contentIsEmpty = computed(()=>htmlContent.value == `<p class=\"mk-doc__paragraph\"><br></p>` || !htmlContent.value);\r\n\r\n// 设置 HTML\r\nconst setHtml = (html : any)=>{\r\n\r\n    // 内容不同则重置 \r\n    if(htmlContent.value != html){\r\n\r\n      let nodes : Array<any> = [];\r\n\r\n      htmlContent.value = html;\r\n\r\n      editor.update(()=>{\r\n\r\n        if(html.trim()){\r\n        \r\n          // Once you have the DOM instance it's easy to generate LexicalNodes.\r\n          nodes = [...$generateNodesFromDOM(editor,parser.parseFromString(html.trim(),\"text/html\"))];\r\n\r\n        }\r\n        // 设置权限替换\r\n        $selectAll();\r\n\r\n        if(nodes.length > 0){\r\n          $getSelection()?.insertNodes(nodes);\r\n        }\r\n        else{\r\n          $getSelection()?.insertText(\"\")\r\n        }\r\n      })\r\n    }\r\n}\r\n\r\n\r\nonMounted(()=>{\r\n\r\n  emit(\"init\",editor)\r\n  \r\n  // 初始化\r\n  watch(()=>props.content,setHtml,{ immediate:true });\r\n\r\n  // 监听内容变化\r\n  watch(htmlContent,(value:any)=>emit('change',value));\r\n\r\n  // 更新操作\r\n  const unregisterMergeListener = editor.registerUpdateListener(({ editorState }) => {\r\n    editorState.read(() => {\r\n      htmlContent.value = $generateHtmlFromNodes(editor);\r\n    })\r\n  })\r\n\r\n  // 取消\r\n  onUnmounted(() => unregisterMergeListener());\r\n\r\n})\r\n\r\n// 使用富文本\r\nuseRichTextSetup(editor)\r\n\r\n</script>\r\n\r\n<template>\r\n <div class=\"mk-doc-editor__stage__editable\">\r\n    <ContentEditable />\r\n    <template v-if=\"canShowPlaceholder && contentIsEmpty\">\r\n      <div class=\"mk-doc-editor__stage__placeholder mk-doc__paragraph\">\r\n        {{props.placeholder}}\r\n      </div>\r\n    </template>\r\n    <DecoratedTeleports />\r\n  </div>\r\n\r\n</template>\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAUA,UAAM,OAAO;AAGb,UAAM,QAAQ;AAKd,UAAM,SAAS;AAET,UAAA,qBAAqB,sBAAsB,MAAM;AAEjD,UAAA,SAAS,IAAI;AAGb,UAAA,cAAc,IAAI,EAAE;AAGpB,UAAA,iBAAiB,SAAS,MAAI,YAAY,SAAS,2CAA2C,CAAC,YAAY,KAAK;AAGhH,UAAA,UAAU,CAAC,SAAa;AAGvB,UAAA,YAAY,SAAS,MAAK;AAE3B,YAAI,QAAqB,CAAA;AAEzB,oBAAY,QAAQ;AAEpB,eAAO,OAAO,MAAI;;AAEb,cAAA,KAAK,QAAO;AAGL,oBAAA,CAAC,GAAG,sBAAsB,QAAO,OAAO,gBAAgB,KAAK,KAAK,GAAE,WAAW,CAAC,CAAC;AAAA,UAE3F;AAEW;AAER,cAAA,MAAM,SAAS,GAAE;AACJ,gCAAA,MAAA,mBAAG,YAAY;AAAA,UAAK,OAEhC;AACY,gCAAA,MAAA,mBAAG,WAAW;AAAA,UAC9B;AAAA,QAAA,CACD;AAAA,MACH;AAAA,IAAA;AAIJ,cAAU,MAAI;AAEZ,WAAK,QAAO,MAAM;AAGlB,YAAM,MAAI,MAAM,SAAQ,SAAQ,EAAE,WAAU,MAAM;AAGlD,YAAM,aAAY,CAAC,UAAY,KAAK,UAAS,KAAK,CAAC;AAGnD,YAAM,0BAA0B,OAAO,uBAAuB,CAAC,EAAE,kBAAkB;AACjF,oBAAY,KAAK,MAAM;AACT,sBAAA,QAAQ,uBAAuB,MAAM;AAAA,QAAA,CAClD;AAAA,MAAA,CACF;AAGW,kBAAA,MAAM,yBAAyB;AAAA,IAAA,CAE5C;AAGD,qBAAiB,MAAM;;;;;;;;;;"}
+{"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/RichTextPlugin/index.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\n\r\nimport { ref,defineProps,computed,defineEmits,onMounted,onUnmounted,watch } from \"vue\"\r\nimport { useCanShowPlaceholder, useLexicalComposer, useRichTextSetup} from 'lexical-vue'\r\nimport { $getRoot, $getSelection ,$createRangeSelection,$selectAll } from 'lexical'\r\nimport { $generateHtmlFromNodes,$generateNodesFromDOM } from '@lexical/html'\r\nimport ContentEditable from \"./ContentEditable.vue\"\r\nimport DecoratedTeleports from \"./DecoratedTeleports\"\r\n\r\n// 事件\r\nconst emit = defineEmits([\"change\"]);\r\n\r\n// 参数\r\nconst props = defineProps({\r\n  content:{ type:String,default:`` },\r\n  placeholder:{ type:String,default:`` }\r\n})\r\n\r\nconst editor = useLexicalComposer()\r\n\r\nconst canShowPlaceholder = useCanShowPlaceholder(editor)\r\n\r\nconst parser = new DOMParser();\r\n\r\n// html 内容\r\nconst htmlContent = ref(\"\");\r\n\r\n// 空内容\r\nconst contentIsEmpty = computed(()=>htmlContent.value == `<p class=\"mk-doc__paragraph\"><br></p>` || !htmlContent.value);\r\n\r\n// 设置 HTML\r\nconst setHtml = (html : any)=>{\r\n\r\n    // 内容不同则重置 \r\n    if(htmlContent.value != html){\r\n\r\n      let nodes : Array<any> = [];\r\n\r\n      htmlContent.value = html;\r\n\r\n      editor.update(()=>{\r\n\r\n        if(html.trim()){\r\n          // Once you have the DOM instance it's easy to generate LexicalNodes.\r\n          nodes = $generateNodesFromDOM(editor,parser.parseFromString(html.trim(),\"text/html\"));\r\n          // console.log(nodes,parser.parseFromString(html.trim(),\"text/html\"));\r\n        }\r\n        // 设置权限替换\r\n        $selectAll();\r\n        $getSelection()?.insertText(\"\")\r\n        if(nodes.length > 0){\r\n          $getSelection()?.insertNodes(nodes);\r\n        }\r\n      })\r\n    }\r\n}\r\n\r\n\r\nonMounted(()=>{\r\n  \r\n  // 初始化\r\n  watch(()=>props.content,setHtml,{ immediate:true });\r\n\r\n  // 监听内容变化\r\n  watch(htmlContent,(value:any)=>emit('change',value));\r\n\r\n  // 更新操作\r\n  const unregisterMergeListener = editor.registerUpdateListener(({ editorState }) => {\r\n    editorState.read(() => {\r\n      htmlContent.value = $generateHtmlFromNodes(editor);\r\n    })\r\n  })\r\n\r\n  // 取消\r\n  onUnmounted(() => unregisterMergeListener());\r\n\r\n})\r\n\r\n// 使用富文本\r\nuseRichTextSetup(editor)\r\n\r\n</script>\r\n\r\n<template>\r\n <div class=\"mk-doc-editor__stage__editable\">\r\n    <ContentEditable />\r\n    <template v-if=\"canShowPlaceholder && contentIsEmpty\">\r\n      <div class=\"mk-doc-editor__stage__placeholder mk-doc__paragraph\">\r\n        {{props.placeholder}}\r\n      </div>\r\n    </template>\r\n    <DecoratedTeleports />\r\n  </div>\r\n\r\n</template>\r\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAUA,UAAM,OAAO;AAGb,UAAM,QAAQ;AAKd,UAAM,SAAS;AAET,UAAA,qBAAqB,sBAAsB,MAAM;AAEjD,UAAA,SAAS,IAAI;AAGb,UAAA,cAAc,IAAI,EAAE;AAGpB,UAAA,iBAAiB,SAAS,MAAI,YAAY,SAAS,2CAA2C,CAAC,YAAY,KAAK;AAGhH,UAAA,UAAU,CAAC,SAAa;AAGvB,UAAA,YAAY,SAAS,MAAK;AAE3B,YAAI,QAAqB,CAAA;AAEzB,oBAAY,QAAQ;AAEpB,eAAO,OAAO,MAAI;;AAEb,cAAA,KAAK,QAAO;AAEL,oBAAA,sBAAsB,QAAO,OAAO,gBAAgB,KAAK,KAAK,GAAE,WAAW,CAAC;AAAA,UAEtF;AAEW;AACG,8BAAA,MAAA,mBAAG,WAAW;AACzB,cAAA,MAAM,SAAS,GAAE;AACJ,gCAAA,MAAA,mBAAG,YAAY;AAAA,UAC/B;AAAA,QAAA,CACD;AAAA,MACH;AAAA,IAAA;AAIJ,cAAU,MAAI;AAGZ,YAAM,MAAI,MAAM,SAAQ,SAAQ,EAAE,WAAU,MAAM;AAGlD,YAAM,aAAY,CAAC,UAAY,KAAK,UAAS,KAAK,CAAC;AAGnD,YAAM,0BAA0B,OAAO,uBAAuB,CAAC,EAAE,kBAAkB;AACjF,oBAAY,KAAK,MAAM;AACT,sBAAA,QAAQ,uBAAuB,MAAM;AAAA,QAAA,CAClD;AAAA,MAAA,CACF;AAGW,kBAAA,MAAM,yBAAyB;AAAA,IAAA,CAE5C;AAGD,qBAAiB,MAAM;;;;;;;;;;"}