@maketribe/ms-app 3.2.25 → 3.2.27

package/dist/cjs/components/basic/doc-editor/plugins/GridPlugin/LayoutGridNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutGridNode.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/GridPlugin/LayoutGridNode.ts"],"sourcesContent":["import { type DOMConversionMap,type NodeKey, type Spread, type DOMExportOutput, type LexicalCommand, createCommand, LexicalNode, EditorConfig } from 'lexical'\r\nimport { type GridNodeAttrType , GridNode,SerializedGridNode } from \"./GridNode\"\r\n\r\n/**\r\n * 属性\r\n */\r\nexport type LayoutGridNodeAttrType  = GridNodeAttrType & {\r\n  display:'flex'|'block'\r\n  flexDirection:'column'|'row'|'row-reverse'|'column-reverse',\r\n  flexWrap:'nowrap'|'warp',\r\n  alignContent:'center'|'flex-start',\r\n  justifyContent:'center'|'flex-start',\r\n  alignItems:'center'|'flex-start'\r\n};\r\n\r\n\r\n/**\r\n * 插入布局格子\r\n */\r\nexport const INSERT_LAYOUTGRID_COMMAND: LexicalCommand<LayoutGridNodeAttrType> = createCommand('INSERT_LAYOUTGRID_COMMAND')\r\n\r\n\r\n/**\r\n * 节点序列化 \r\n */\r\nexport type SerializedLayoutGridNode = Spread<{ attrs:LayoutGridNodeAttrType },SerializedGridNode>\r\n\r\n/**\r\n * 布局格子\r\n */\r\nexport class LayoutGridNode extends GridNode{\r\n\r\n  declare __attrs:LayoutGridNodeAttrType\r\n\r\n  static getType(): string { return \"layout-grid\"; }\r\n\r\n  static hasGridNodeByElement(el:HTMLElement):HTMLElement|null{\r\n    return el.classList.contains(LayoutGridNode.getMarkClassName()) ? el : null;\r\n  }\r\n \r\n  static getMarkClassName(): string {\r\n    return `mk-doc__${LayoutGridNode.getType()}`\r\n  }\r\n  static getExtraClassName(el:HTMLElement){\r\n    return GridNode.getExtraClassName(el).replace(LayoutGridNode.getMarkClassName(),\"\").trim();\r\n  }\r\n  static clone(node: LayoutGridNode): LayoutGridNode {\r\n    return new LayoutGridNode(node.__attrs,node.__key)\r\n  }\r\n\r\n  static importJSON(serializedNode: SerializedLayoutGridNode): LayoutGridNode {\r\n    return new LayoutGridNode(serializedNode.attrs)\r\n  }\r\n\r\n  static importDOM(): DOMConversionMap | null {\r\n    return {\r\n      div : (domNode: HTMLElement) => {\r\n\r\n        return  LayoutGridNode.hasGridNodeByElement(domNode) ? {\r\n\r\n          conversion: ()=>{ \r\n\r\n            return  { \r\n              node:new LayoutGridNode({\r\n                class:LayoutGridNode.getExtraClassName(domNode),\r\n                display:domNode.style.display || \"block\",\r\n                width:domNode.style.width || \"100%\",\r\n                height:domNode.style.height,\r\n                maxWidth:domNode.style.maxWidth,\r\n                maxHeight:domNode.style.maxHeight,\r\n                flex:domNode.style.flex,\r\n                flexDirection:domNode.style.flexDirection,\r\n                flexWrap:domNode.style.flexWrap,\r\n                alignContent:domNode.style.alignContent,\r\n                justifyContent:domNode.style.justifyContent,\r\n                alignItems:domNode.style.alignItems\r\n              } as LayoutGridNodeAttrType) \r\n            };\r\n          },\r\n          priority: 4\r\n        } : null;\r\n      }\r\n    }\r\n  }\r\n\r\n  constructor(attrs:LayoutGridNodeAttrType,key?: NodeKey) {\r\n    super(attrs,key)\r\n  }\r\n\r\n  /**\r\n   * 设置属性\r\n   * @param pos \r\n   */\r\n  setAttrs(data?:LayoutGridNodeAttrType){\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():LayoutGridNodeAttrType{\r\n    return this.__attrs;\r\n  }\r\n  /**\r\n   * 导出JSON\r\n   * @returns \r\n   */\r\n  exportJSON(): SerializedGridNode {\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   * @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.getChildrenSize() <= 0 ){\r\n      el.setAttribute(\"contenteditable\",\"false\")\r\n      el.setAttribute(\"data-lexical-decorator\",\"true\")\r\n    }\r\n\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: GridNode, el: HTMLElement, config: EditorConfig): boolean {\r\n      // 更新属性\r\n      super.updateDOM(prevNode,el,config);\r\n      if(this.getChildrenSize() <= 0 ){\r\n        el.setAttribute(\"contenteditable\",\"false\")\r\n        el.setAttribute(\"data-lexical-decorator\",\"true\")\r\n      }\r\n      else{\r\n        el.removeAttribute(\"contenteditable\")\r\n        el.removeAttribute(\"data-lexical-decorator\")\r\n      }\r\n      return false\r\n    }\r\n \r\n}\r\n\r\n/**\r\n * 是否是模块格子\r\n * @param node \r\n * @returns \r\n */\r\nexport function $isLayoutGridNode(\r\n  node: LayoutGridNode | LexicalNode | null | undefined,\r\n): node is LayoutGridNode {\r\n  return node instanceof LayoutGridNode\r\n}\r\n"],"names":["createCommand","GridNode"],"mappings":"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"}

package/dist/cjs/components/basic/doc-editor/plugins/GridPlugin/ModuleGridNode.js

@@ -0,0 +1,128 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lexical = require("lexical");
+const GridNode = require("./GridNode.js");
+const INSERT_MODULEGRID_COMMAND = lexical.createCommand("INSERT_MODULEGRID_COMMAND");
+class ModuleGridNode extends GridNode.GridNode {
+  static getType() {
+    return "module-grid";
+  }
+  static hasGridNodeByElement(el) {
+    return el.classList.contains(ModuleGridNode.getMarkClassName()) ? el : null;
+  }
+  static getMarkClassName() {
+    return `mk-doc__${ModuleGridNode.getType()}`;
+  }
+  static getExtraClassName(el) {
+    return GridNode.GridNode.getExtraClassName(el).replace(ModuleGridNode.getMarkClassName(), "").trim();
+  }
+  static clone(node) {
+    return new ModuleGridNode(node.__attrs, node.__key);
+  }
+  static importJSON(serializedNode) {
+    return new ModuleGridNode(serializedNode.attrs);
+  }
+  static importDOM() {
+    return {
+      div: (domNode) => {
+        return ModuleGridNode.hasGridNodeByElement(domNode) ? {
+          conversion: () => {
+            return {
+              node: new ModuleGridNode({
+                class: ModuleGridNode.getExtraClassName(domNode),
+                width: domNode.style.width || "100%",
+                height: domNode.style.height,
+                flex: domNode.style.flex,
+                maxWidth: domNode.style.maxWidth,
+                maxHeight: domNode.style.maxHeight,
+                overflowX: domNode.style.overflowX == "auto"
+              })
+            };
+          },
+          priority: 4
+        } : null;
+      }
+    };
+  }
+  constructor(attrs, key) {
+    super(attrs, key);
+  }
+  /**
+   * 设置属性
+   * @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
+    };
+  }
+  /**
+  * 更新元素属性
+  * @param el 
+  */
+  updateElementAttr(el) {
+    super.updateElementAttr(el);
+    Object.keys(this.__attrs).forEach((key) => {
+      if (["class", "overflowX"].indexOf(key) < 0) {
+        el.style[key] = this.__attrs[key];
+      }
+    });
+    if (this.__attrs.overflowX) {
+      el.style.overflowX = "auto";
+      el.style.whiteSpace = "nowrap";
+    } else {
+      el.style.overflowX = "";
+      el.style.whiteSpace = "";
+    }
+  }
+  /**
+  * 创建渲染DOM
+  * @param config 
+  * @returns 
+  */
+  createDOM(config) {
+    const el = super.createDOM(config);
+    el.setAttribute("contenteditable", "false");
+    el.setAttribute("data-lexical-decorator", "true");
+    return el;
+  }
+  // /**
+  //  * 非内联
+  //  * @returns 
+  //  */
+  // isInline(): boolean {
+  //   return false;
+  // }
+  // /**
+  //  * 定义为影子根
+  //  * @returns 
+  //  */
+  // isShadowRoot(): boolean {
+  //   return true;
+  // }
+}
+function $isModuleGridNode(node) {
+  return node instanceof ModuleGridNode;
+}
+exports.$isModuleGridNode = $isModuleGridNode;
+exports.INSERT_MODULEGRID_COMMAND = INSERT_MODULEGRID_COMMAND;
+exports.ModuleGridNode = ModuleGridNode;
+//# sourceMappingURL=ModuleGridNode.js.map

package/dist/cjs/components/basic/doc-editor/plugins/GridPlugin/ModuleGridNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModuleGridNode.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/GridPlugin/ModuleGridNode.ts"],"sourcesContent":["import { type DOMConversionMap,type NodeKey, type Spread, type DOMExportOutput, type LexicalCommand, createCommand, LexicalNode, EditorConfig } from 'lexical'\r\nimport { type GridNodeAttrType , GridNode,SerializedGridNode } from \"./GridNode\"\r\n\r\n/**\r\n * 属性\r\n */\r\nexport type ModuleGridNodeAttrType  = GridNodeAttrType & {\r\n  overflowX:boolean\r\n};\r\n\r\n\r\n/**\r\n * 插入模块格子\r\n */\r\nexport const INSERT_MODULEGRID_COMMAND: LexicalCommand<ModuleGridNodeAttrType> = createCommand('INSERT_MODULEGRID_COMMAND')\r\n\r\n\r\n/**\r\n * 节点序列化 \r\n */\r\nexport type SerializedModuleGridNode = Spread<{ attrs:ModuleGridNodeAttrType },SerializedGridNode>\r\n\r\n/**\r\n * 模块格子\r\n */\r\nexport class ModuleGridNode extends GridNode{\r\n\r\n  declare __attrs:ModuleGridNodeAttrType\r\n\r\n  static getType(): string { return \"module-grid\"; }\r\n\r\n  static hasGridNodeByElement(el:HTMLElement):HTMLElement|null{\r\n    return el.classList.contains(ModuleGridNode.getMarkClassName()) ? el : null;\r\n  }\r\n \r\n  static getMarkClassName(): string {\r\n    return `mk-doc__${ModuleGridNode.getType()}`\r\n  }\r\n  static getExtraClassName(el:HTMLElement){\r\n    return GridNode.getExtraClassName(el).replace(ModuleGridNode.getMarkClassName(),\"\").trim();\r\n  }\r\n  static clone(node: ModuleGridNode): ModuleGridNode {\r\n    return new ModuleGridNode(node.__attrs,node.__key)\r\n  }\r\n\r\n  static importJSON(serializedNode: SerializedModuleGridNode): ModuleGridNode {\r\n    return new ModuleGridNode(serializedNode.attrs)\r\n  }\r\n\r\n  static importDOM(): DOMConversionMap | null {\r\n    return {\r\n      div : (domNode: HTMLElement) => {\r\n\r\n        return  ModuleGridNode.hasGridNodeByElement(domNode) ? {\r\n\r\n          conversion: ()=>{ \r\n\r\n            return  { \r\n              node:new ModuleGridNode({\r\n                class:ModuleGridNode.getExtraClassName(domNode),\r\n                width:domNode.style.width || \"100%\",\r\n                height:domNode.style.height,\r\n                flex:domNode.style.flex,\r\n                maxWidth:domNode.style.maxWidth,\r\n                maxHeight:domNode.style.maxHeight,\r\n                overflowX:domNode.style.overflowX == \"auto\"\r\n              } as ModuleGridNodeAttrType) \r\n            };\r\n          },\r\n          priority: 4\r\n        } : null;\r\n      }\r\n    }\r\n  }\r\n\r\n  constructor(attrs:ModuleGridNodeAttrType,key?: NodeKey) {\r\n    super(attrs,key)\r\n  }\r\n\r\n  /**\r\n   * 设置属性\r\n   * @param pos \r\n   */\r\n  setAttrs(data?:ModuleGridNodeAttrType){\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():ModuleGridNodeAttrType{\r\n    return this.__attrs;\r\n  }\r\n  /**\r\n   * 导出JSON\r\n   * @returns \r\n   */\r\n  exportJSON(): SerializedGridNode {\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   * 更新元素属性\r\n   * @param el \r\n   */\r\n  updateElementAttr(el:HTMLElement){\r\n    super.updateElementAttr(el);\r\n    // 更新属性\r\n    Object.keys(this.__attrs).forEach((key:any)=>{\r\n      if([\"class\",\"overflowX\"].indexOf(key) < 0){\r\n        el.style[key] = (this.__attrs as any)[key];\r\n      }\r\n    })\r\n    if(this.__attrs.overflowX){\r\n      el.style.overflowX = \"auto\";\r\n      el.style.whiteSpace = \"nowrap\";\r\n    }\r\n    else{\r\n      el.style.overflowX = \"\";\r\n      el.style.whiteSpace = \"\";\r\n    }\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    el.setAttribute(\"contenteditable\",\"false\")\r\n    el.setAttribute(\"data-lexical-decorator\",\"true\")\r\n\r\n    return el;\r\n  }\r\n  \r\n  // /**\r\n  //  * 非内联\r\n  //  * @returns \r\n  //  */\r\n  // isInline(): boolean {\r\n  //   return false;\r\n  // }\r\n\r\n  // /**\r\n  //  * 定义为影子根\r\n  //  * @returns \r\n  //  */\r\n  // isShadowRoot(): boolean {\r\n  //   return true;\r\n  // }\r\n}\r\n\r\n/**\r\n * 是否是模块格子\r\n * @param node \r\n * @returns \r\n */\r\nexport function $isModuleGridNode(\r\n  node: ModuleGridNode | LexicalNode | null | undefined,\r\n): node is ModuleGridNode {\r\n  return node instanceof ModuleGridNode\r\n}\r\n"],"names":["createCommand","GridNode"],"mappings":";;;;AAca,MAAA,4BAAoEA,sBAAc,2BAA2B;AAWnH,MAAM,uBAAuBC,SAAAA,SAAQ;AAAA,EAI1C,OAAO,UAAkB;AAAS,WAAA;AAAA,EAAe;AAAA,EAEjD,OAAO,qBAAqB,IAAgC;AAC1D,WAAO,GAAG,UAAU,SAAS,eAAe,kBAAkB,IAAI,KAAK;AAAA,EACzE;AAAA,EAEA,OAAO,mBAA2B;AACzB,WAAA,WAAW,eAAe,QAAA,CAAS;AAAA,EAC5C;AAAA,EACA,OAAO,kBAAkB,IAAe;AAC/B,WAAAA,kBAAS,kBAAkB,EAAE,EAAE,QAAQ,eAAe,oBAAmB,EAAE,EAAE;EACtF;AAAA,EACA,OAAO,MAAM,MAAsC;AACjD,WAAO,IAAI,eAAe,KAAK,SAAQ,KAAK,KAAK;AAAA,EACnD;AAAA,EAEA,OAAO,WAAW,gBAA0D;AACnE,WAAA,IAAI,eAAe,eAAe,KAAK;AAAA,EAChD;AAAA,EAEA,OAAO,YAAqC;AACnC,WAAA;AAAA,MACL,KAAM,CAAC,YAAyB;AAEtB,eAAA,eAAe,qBAAqB,OAAO,IAAI;AAAA,UAErD,YAAY,MAAI;AAEN,mBAAA;AAAA,cACN,MAAK,IAAI,eAAe;AAAA,gBACtB,OAAM,eAAe,kBAAkB,OAAO;AAAA,gBAC9C,OAAM,QAAQ,MAAM,SAAS;AAAA,gBAC7B,QAAO,QAAQ,MAAM;AAAA,gBACrB,MAAK,QAAQ,MAAM;AAAA,gBACnB,UAAS,QAAQ,MAAM;AAAA,gBACvB,WAAU,QAAQ,MAAM;AAAA,gBACxB,WAAU,QAAQ,MAAM,aAAa;AAAA,cAAA,CACZ;AAAA,YAAA;AAAA,UAE/B;AAAA,UACA,UAAU;AAAA,QACR,IAAA;AAAA,MACN;AAAA,IAAA;AAAA,EAEJ;AAAA,EAEA,YAAY,OAA6B,KAAe;AACtD,UAAM,OAAM,GAAG;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,SAAS,MAA6B;AAC9B,UAAA,WAAW,KAAK;AACf,WAAA,OAAO,SAAS,SAAQ,IAAI;AAAA,EACrC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAAiC;AAC/B,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA,EAKA,aAAiC;AACxB,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,kBAAkB,IAAe;AAC/B,UAAM,kBAAkB,EAAE;AAE1B,WAAO,KAAK,KAAK,OAAO,EAAE,QAAQ,CAAC,QAAU;AAC3C,UAAG,CAAC,SAAQ,WAAW,EAAE,QAAQ,GAAG,IAAI,GAAE;AACxC,WAAG,MAAM,GAAG,IAAK,KAAK,QAAgB,GAAG;AAAA,MAC3C;AAAA,IAAA,CACD;AACE,QAAA,KAAK,QAAQ,WAAU;AACxB,SAAG,MAAM,YAAY;AACrB,SAAG,MAAM,aAAa;AAAA,IAAA,OAEpB;AACF,SAAG,MAAM,YAAY;AACrB,SAAG,MAAM,aAAa;AAAA,IACxB;AAAA,EACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOC,UAAU,QAAmC;AAEtC,UAAA,KAAK,MAAM,UAAU,MAAM;AAE9B,OAAA,aAAa,mBAAkB,OAAO;AACtC,OAAA,aAAa,0BAAyB,MAAM;AAExC,WAAA;AAAA,EACT;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBF;AAOO,SAAS,kBACd,MACwB;AACxB,SAAO,gBAAgB;AACzB;;;;"}

package/dist/cjs/components/basic/doc-editor/plugins/GridPlugin/TextGridNode.js

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const lexical = require("lexical");
+const GridNode = require("./GridNode.js");
+const INSERT_TEXTGRID_COMMAND = lexical.createCommand("INSERT_TEXTGRID_COMMAND");
+class TextGridNode extends GridNode.GridNode {
+  static getType() {
+    return "text-grid";
+  }
+  static hasGridNodeByElement(el) {
+    return el.classList.contains(TextGridNode.getMarkClassName()) ? el : null;
+  }
+  static getMarkClassName() {
+    return `mk-doc__${TextGridNode.getType()}`;
+  }
+  static getExtraClassName(el) {
+    return GridNode.GridNode.getExtraClassName(el).replace(TextGridNode.getMarkClassName(), "").trim();
+  }
+  static clone(node) {
+    return new TextGridNode(node.__attrs, node.__key);
+  }
+  static importJSON(serializedNode) {
+    return new TextGridNode(serializedNode.attrs);
+  }
+  static importDOM() {
+    return {
+      div: (domNode) => {
+        return TextGridNode.hasGridNodeByElement(domNode) ? {
+          conversion: () => {
+            return {
+              node: new TextGridNode({
+                class: TextGridNode.getExtraClassName(domNode),
+                width: domNode.style.width || "100%",
+                height: domNode.style.height,
+                flex: domNode.style.flex,
+                maxWidth: domNode.style.maxWidth,
+                maxHeight: domNode.style.maxHeight
+              })
+            };
+          },
+          priority: 4
+        } : null;
+      }
+    };
+  }
+  constructor(attrs, key) {
+    super(attrs, key);
+  }
+  /**
+   * 设置属性
+   * @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
+  //  * @param config 
+  //  * @returns 
+  //  */
+  //  createDOM(config: EditorConfig): HTMLElement {
+  //   const el = super.createDOM(config);
+  //   el.setAttribute("contenteditable","true")
+  //   el.setAttribute("data-lexical-decorator","true")
+  //   return el;
+  // }
+}
+function $isTextGridNode(node) {
+  return node instanceof TextGridNode;
+}
+exports.$isTextGridNode = $isTextGridNode;
+exports.INSERT_TEXTGRID_COMMAND = INSERT_TEXTGRID_COMMAND;
+exports.TextGridNode = TextGridNode;
+//# sourceMappingURL=TextGridNode.js.map

package/dist/cjs/components/basic/doc-editor/plugins/GridPlugin/TextGridNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextGridNode.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/GridPlugin/TextGridNode.ts"],"sourcesContent":["import { type DOMConversionMap,  type NodeKey, type Spread, type DOMExportOutput, type LexicalCommand, createCommand, LexicalNode, EditorConfig } from 'lexical'\r\nimport { type GridNodeAttrType , GridNode,SerializedGridNode } from \"./GridNode\"\r\n\r\n\r\n/**\r\n * 插入文本格子\r\n */\r\nexport const INSERT_TEXTGRID_COMMAND: LexicalCommand<GridNodeAttrType> = createCommand('INSERT_TEXTGRID_COMMAND')\r\n\r\n/**\r\n * 属性\r\n */\r\nexport type TextGridNodeAttrType  = GridNodeAttrType & {};\r\n\r\n/**\r\n * 节点序列化 \r\n */\r\nexport type SerializedTextGridNode= Spread<{ attrs:TextGridNodeAttrType },SerializedGridNode>\r\n\r\n/**\r\n * 布局格子\r\n */\r\nexport class TextGridNode extends GridNode{\r\n\r\n  declare __attrs:TextGridNodeAttrType\r\n\r\n  static getType(): string { return \"text-grid\"; }\r\n\r\n  static hasGridNodeByElement(el:HTMLElement):HTMLElement|null{\r\n    return el.classList.contains(TextGridNode.getMarkClassName()) ? el : null;\r\n  }\r\n \r\n  static getMarkClassName(): string {\r\n    return `mk-doc__${TextGridNode.getType()}`\r\n  }\r\n  static getExtraClassName(el:HTMLElement){\r\n    return GridNode.getExtraClassName(el).replace(TextGridNode.getMarkClassName(),\"\").trim();\r\n  }\r\n  static clone(node: TextGridNode): TextGridNode{\r\n    return new TextGridNode(node.__attrs,node.__key)\r\n  }\r\n\r\n  static importJSON(serializedNode: SerializedTextGridNode): TextGridNode{\r\n    return new TextGridNode(serializedNode.attrs)\r\n  }\r\n\r\n  static importDOM(): DOMConversionMap | null {\r\n    return {\r\n      div : (domNode: HTMLElement) => {\r\n\r\n        return  TextGridNode.hasGridNodeByElement(domNode) ? {\r\n\r\n          conversion: ()=>{ \r\n\r\n            return  { \r\n              node:new TextGridNode({\r\n                class:TextGridNode.getExtraClassName(domNode),\r\n                width:domNode.style.width || \"100%\",\r\n                height:domNode.style.height,\r\n                flex:domNode.style.flex,\r\n                maxWidth:domNode.style.maxWidth,\r\n                maxHeight:domNode.style.maxHeight\r\n              } as TextGridNodeAttrType) \r\n            };\r\n          },\r\n          priority: 4\r\n        } : null;\r\n      }\r\n    }\r\n  }\r\n\r\n  constructor(attrs:TextGridNodeAttrType,key?: NodeKey) {\r\n    super(attrs,key)\r\n  }\r\n\r\n  /**\r\n   * 设置属性\r\n   * @param pos \r\n   */\r\n  setAttrs(data?:TextGridNodeAttrType){\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():TextGridNodeAttrType{\r\n    return this.__attrs;\r\n  }\r\n  /**\r\n   * 导出JSON\r\n   * @returns \r\n   */\r\n  exportJSON(): SerializedGridNode {\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  //  * @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  //   el.setAttribute(\"contenteditable\",\"true\")\r\n  //   el.setAttribute(\"data-lexical-decorator\",\"true\")\r\n\r\n  //   return el;\r\n  // }\r\n}\r\n\r\n/**\r\n * 是否是文本格子\r\n * @param node \r\n * @returns \r\n */\r\nexport function $isTextGridNode(\r\n  node: TextGridNode | LexicalNode | null | undefined,\r\n): node is TextGridNode {\r\n  return node instanceof TextGridNode\r\n}\r\n"],"names":["createCommand","GridNode"],"mappings":";;;;AAOa,MAAA,0BAA4DA,sBAAc,yBAAyB;AAezG,MAAM,qBAAqBC,SAAAA,SAAQ;AAAA,EAIxC,OAAO,UAAkB;AAAS,WAAA;AAAA,EAAa;AAAA,EAE/C,OAAO,qBAAqB,IAAgC;AAC1D,WAAO,GAAG,UAAU,SAAS,aAAa,kBAAkB,IAAI,KAAK;AAAA,EACvE;AAAA,EAEA,OAAO,mBAA2B;AACzB,WAAA,WAAW,aAAa,QAAA,CAAS;AAAA,EAC1C;AAAA,EACA,OAAO,kBAAkB,IAAe;AAC/B,WAAAA,kBAAS,kBAAkB,EAAE,EAAE,QAAQ,aAAa,oBAAmB,EAAE,EAAE;EACpF;AAAA,EACA,OAAO,MAAM,MAAiC;AAC5C,WAAO,IAAI,aAAa,KAAK,SAAQ,KAAK,KAAK;AAAA,EACjD;AAAA,EAEA,OAAO,WAAW,gBAAqD;AAC9D,WAAA,IAAI,aAAa,eAAe,KAAK;AAAA,EAC9C;AAAA,EAEA,OAAO,YAAqC;AACnC,WAAA;AAAA,MACL,KAAM,CAAC,YAAyB;AAEtB,eAAA,aAAa,qBAAqB,OAAO,IAAI;AAAA,UAEnD,YAAY,MAAI;AAEN,mBAAA;AAAA,cACN,MAAK,IAAI,aAAa;AAAA,gBACpB,OAAM,aAAa,kBAAkB,OAAO;AAAA,gBAC5C,OAAM,QAAQ,MAAM,SAAS;AAAA,gBAC7B,QAAO,QAAQ,MAAM;AAAA,gBACrB,MAAK,QAAQ,MAAM;AAAA,gBACnB,UAAS,QAAQ,MAAM;AAAA,gBACvB,WAAU,QAAQ,MAAM;AAAA,cAAA,CACD;AAAA,YAAA;AAAA,UAE7B;AAAA,UACA,UAAU;AAAA,QACR,IAAA;AAAA,MACN;AAAA,IAAA;AAAA,EAEJ;AAAA,EAEA,YAAY,OAA2B,KAAe;AACpD,UAAM,OAAM,GAAG;AAAA,EACjB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,SAAS,MAA2B;AAC5B,UAAA,WAAW,KAAK;AACf,WAAA,OAAO,SAAS,SAAQ,IAAI;AAAA,EACrC;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,WAA+B;AAC7B,WAAO,KAAK;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA,EAKA,aAAiC;AACxB,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBF;AAOO,SAAS,gBACd,MACsB;AACtB,SAAO,gBAAgB;AACzB;;;;"}

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

@@ -0,0 +1,217 @@
+"use strict";
+const vue = require("vue");
+const lexicalVue = require("lexical-vue");
+const utils = require("@lexical/utils");
+const lexical = require("lexical");
+const index = require("../../core/index.js");
+const GridNode = require("./GridNode.js");
+const LayoutGridNode = require("./LayoutGridNode.js");
+const TextGridNode = require("./TextGridNode.js");
+const ImageTextGridNode = require("./ImageTextGridNode.js");
+const ModuleGridNode = require("./ModuleGridNode.js");
+const commands = require("../ModulePlugin/commands.js");
+const utils$1 = require("../ModulePlugin/utils.js");
+require("../ImagePlugin/commands.js");
+const ImageNode = require("../ImagePlugin/ImageNode.js");
+const utils$2 = require("../../../dynamic-form-panel/utils.js");
+const utils$3 = require("./utils.js");
+const elementBlock = require("../../core/element-block.js");
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "index",
+  setup(__props) {
+    const editor = lexicalVue.useLexicalComposer();
+    index.registerDocEditorToolbarExtend({
+      icon: "richtext-outline",
+      text: "图文环绕",
+      action: async () => {
+        editor.dispatchCommand(ImageTextGridNode.INSERT_IMAGETEXTGRID_COMMAND, { width: "100%" });
+      },
+      sort: 80
+    });
+    index.registerDocEditorToolbarExtend({
+      icon: "Grid",
+      text: "文本容器",
+      action: async () => {
+        editor.dispatchCommand(TextGridNode.INSERT_TEXTGRID_COMMAND, { width: "100%" });
+      },
+      sort: 81
+    });
+    index.registerDocEditorToolbarExtend({
+      icon: "Grid",
+      text: "模块容器",
+      action: async () => {
+        editor.dispatchCommand(ModuleGridNode.INSERT_MODULEGRID_COMMAND, { width: "100%" });
+      },
+      sort: 70
+    });
+    index.registerDocEditorToolbarExtend({
+      icon: "Grid",
+      text: "布局容器",
+      action: async () => {
+        editor.dispatchCommand(LayoutGridNode.INSERT_LAYOUTGRID_COMMAND, { display: "flex", width: "100%" });
+      },
+      sort: 1
+    });
+    let curActiveEl = null;
+    const findGridNodeEl = (element) => {
+      var el = element;
+      if (GridNode.GridNode.hasGridNodeByElement(el)) {
+        return el;
+      }
+      while (el != null && !GridNode.GridNode.hasGridNodeByElement(el)) {
+        el = el.parentElement;
+      }
+      if (el != null && el.parentElement != null && TextGridNode.TextGridNode.hasGridNodeByElement(el) && ImageTextGridNode.ImageTextGridNode.hasGridNodeByElement(el.parentElement)) {
+        return el.parentElement;
+      }
+      return el;
+    };
+    const setActiveGridElement = (el) => {
+      if (el) {
+        el.classList.add("doc-edit-active");
+        if (curActiveEl && curActiveEl != el) {
+          curActiveEl.classList.remove("doc-edit-active");
+        }
+        curActiveEl = el;
+      } else {
+        curActiveEl && curActiveEl.classList.remove("doc-edit-active");
+        curActiveEl = null;
+      }
+    };
+    const { isSelected, curSelectKey, curSelectPos, setSelection } = elementBlock.useElementBlockSelection((el) => {
+      setActiveGridElement(findGridNodeEl(el));
+      if (el != null && el.parentElement != null && TextGridNode.TextGridNode.hasGridNodeByElement(el) && ImageTextGridNode.ImageTextGridNode.hasGridNodeByElement(el.parentElement)) {
+        return el.parentElement;
+      }
+      return GridNode.GridNode.hasGridNodeByElement(el);
+    }, () => {
+      const node = lexical.$getNodeByKey(curSelectKey.value);
+      if (GridNode.$isGridNode(node)) {
+        const parent = node.getParent();
+        const toolbars = [
+          {
+            title: `编辑容器`,
+            icon: "Edit",
+            action: async () => {
+              var result = await utils$3.showGridEditDialoger(node, parent, node.getAttrs());
+              editor.update(() => node.setAttrs(result));
+            }
+          },
+          {
+            title: `在此之前插入布局容器`,
+            icon: "BottomLeft",
+            action: async () => {
+              editor.update(() => {
+                node.insertBefore(new LayoutGridNode.LayoutGridNode({ display: "block", width: "100%" }));
+              });
+            }
+          },
+          {
+            title: `在此之后插入布局容器`,
+            icon: "BottomRight",
+            action: async () => {
+              editor.update(() => {
+                node.insertAfter(new LayoutGridNode.LayoutGridNode({ display: "block", width: "100%" }));
+              });
+            }
+          }
+        ];
+        if (GridNode.$isGridNode(parent)) {
+          toolbars.push(...[
+            {
+              title: "选中上层容器",
+              icon: "Upload",
+              action: async () => {
+                let parentEl = editor.getElementByKey(parent.getKey());
+                if (parentEl) {
+                  setActiveGridElement(parentEl);
+                  setSelection(parent.__key, parentEl);
+                }
+              }
+            }
+          ]);
+        }
+        if (ModuleGridNode.$isModuleGridNode(node)) {
+          toolbars.push(...[
+            {
+              title: "添加模块",
+              icon: "Plus",
+              action: async () => {
+                const result = await utils$1.showModuleSelectDialog();
+                const defaultData = utils$2.createDefaultFormData(result.options);
+                editor.dispatchCommand(commands.INSERT_MODULE_COMMAND, { name: result.name, data: defaultData });
+              }
+            }
+          ]);
+        }
+        return toolbars;
+      }
+      return null;
+    });
+    vue.onMounted(() => {
+      const insertGridHandle = (layoutGrid) => {
+        const selection = lexical.$getSelection();
+        const elementNode = lexical.$isNodeSelection(selection) ? selection == null ? void 0 : selection.getNodes()[0] : null;
+        if (elementNode) {
+          elementNode.append(layoutGrid);
+        } else {
+          utils.$insertNodeToNearestRoot(layoutGrid);
+        }
+      };
+      const unregister = utils.mergeRegister(
+        // 插入布局格子
+        editor.registerCommand(LayoutGridNode.INSERT_LAYOUTGRID_COMMAND, (payload) => {
+          insertGridHandle(new LayoutGridNode.LayoutGridNode(payload));
+          return true;
+        }, lexical.COMMAND_PRIORITY_EDITOR),
+        // 插入文本格子
+        editor.registerCommand(TextGridNode.INSERT_TEXTGRID_COMMAND, (payload) => {
+          const textGrid = new TextGridNode.TextGridNode(payload);
+          textGrid.append(lexical.$createParagraphNode());
+          textGrid.append(lexical.$createParagraphNode());
+          textGrid.append(lexical.$createParagraphNode());
+          textGrid.append(lexical.$createParagraphNode());
+          textGrid.append(lexical.$createParagraphNode());
+          textGrid.append(lexical.$createParagraphNode());
+          insertGridHandle(textGrid);
+          return true;
+        }, lexical.COMMAND_PRIORITY_EDITOR),
+        // 插入模块格子
+        editor.registerCommand(ModuleGridNode.INSERT_MODULEGRID_COMMAND, (payload) => {
+          insertGridHandle(new ModuleGridNode.ModuleGridNode(payload));
+          return true;
+        }, lexical.COMMAND_PRIORITY_EDITOR),
+        // 插入图文环绕格子
+        editor.registerCommand(ImageTextGridNode.INSERT_IMAGETEXTGRID_COMMAND, (payload) => {
+          const textImageGrid = new ImageTextGridNode.ImageTextGridNode(payload);
+          const textGrid = new TextGridNode.TextGridNode({});
+          textGrid.append(lexical.$createParagraphNode());
+          textGrid.append(lexical.$createParagraphNode());
+          textGrid.append(lexical.$createParagraphNode());
+          textGrid.append(lexical.$createParagraphNode());
+          textGrid.append(lexical.$createParagraphNode());
+          textGrid.append(lexical.$createParagraphNode());
+          textImageGrid.append(new ImageNode.InlineImageNode({
+            src: "",
+            float: "left",
+            width: "200px",
+            margin: "0 10px 10px 0"
+          }));
+          textImageGrid.append(textGrid);
+          insertGridHandle(textImageGrid);
+          return true;
+        }, lexical.COMMAND_PRIORITY_EDITOR)
+      );
+      vue.onUnmounted(() => unregister());
+    });
+    return (_ctx, _cache) => {
+      return vue.unref(isSelected) ? (vue.openBlock(), vue.createElementBlock("div", {
+        key: 0,
+        class: "mk-doc-active-element-block-mark box",
+        style: vue.normalizeStyle(vue.unref(curSelectPos))
+      }, null, 4)) : vue.createCommentVNode("", true);
+    };
+  }
+});
+module.exports = _sfc_main;
+//# sourceMappingURL=index.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.vue.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/GridPlugin/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  $getNodeByKey,$createParagraphNode,$isNodeSelection, $getSelection,\r\n  ElementNode,COMMAND_PRIORITY_EDITOR\r\n} from 'lexical'\r\nimport { onMounted, onUnmounted,ref } from 'vue'\r\nimport { registerDocEditorToolbarExtend,type ToolbarExtendPlugin } from \"../../core\"\r\nimport { GridNode,$isGridNode } from \"./GridNode\"\r\nimport { type LayoutGridNodeAttrType,LayoutGridNode,INSERT_LAYOUTGRID_COMMAND } from \"./LayoutGridNode\"\r\nimport { type TextGridNodeAttrType,TextGridNode,INSERT_TEXTGRID_COMMAND } from \"./TextGridNode\"\r\nimport { type ImageTextGridNodeAttrType,ImageTextGridNode,INSERT_IMAGETEXTGRID_COMMAND } from \"./ImageTextGridNode\"\r\nimport { type ModuleGridNodeAttrType,ModuleGridNode,INSERT_MODULEGRID_COMMAND,$isModuleGridNode } from \"./ModuleGridNode\"\r\nimport { INSERT_MODULE_COMMAND } from \"../ModulePlugin/commands\"\r\nimport { showModuleSelectDialog } from \"../ModulePlugin/utils\"\r\nimport { ModuleType,useModule } from \"../ModulePlugin/composables\"\r\nimport { ImageAttrType,InlineImageNode } from '../ImagePlugin'\r\nimport {  useElementBlockSelection } from '../../core'\r\nimport { createDefaultFormData } from \"../../../dynamic-form-panel/utils\"\r\nimport { showGridEditDialoger } from \"./utils\"\r\n\r\n// 编辑器\r\nconst editor = useLexicalComposer()\r\n\r\n// 注册到工具条\r\nregisterDocEditorToolbarExtend({\r\n  icon:\"richtext-outline\",\r\n  text:\"图文环绕\",\r\n  action:async ()=>{\r\n    editor.dispatchCommand(INSERT_IMAGETEXTGRID_COMMAND,{ width:\"100%\" } as ImageTextGridNodeAttrType)\r\n  },\r\n  sort:80\r\n} as ToolbarExtendPlugin)\r\nregisterDocEditorToolbarExtend({\r\n  icon:\"Grid\",\r\n  text:\"文本容器\",\r\n  action:async ()=>{\r\n    editor.dispatchCommand(INSERT_TEXTGRID_COMMAND,{ width:\"100%\" } as TextGridNodeAttrType)\r\n  },\r\n  sort:81\r\n} as ToolbarExtendPlugin)\r\nregisterDocEditorToolbarExtend({\r\n  icon:\"Grid\",\r\n  text:\"模块容器\",\r\n  action:async ()=>{\r\n    editor.dispatchCommand(INSERT_MODULEGRID_COMMAND,{  width:\"100%\"  } as ModuleGridNodeAttrType)\r\n  },\r\n  sort:70\r\n} as ToolbarExtendPlugin)\r\nregisterDocEditorToolbarExtend({\r\n  icon:\"Grid\",\r\n  text:\"布局容器\",\r\n  action:async ()=>{\r\n    editor.dispatchCommand(INSERT_LAYOUTGRID_COMMAND,{ display:\"flex\",width:\"100%\" } as LayoutGridNodeAttrType)\r\n  },\r\n  sort:1\r\n} as ToolbarExtendPlugin)\r\n\r\n// 当前激活的元素\r\nlet curActiveEl:HTMLElement|null = null;\r\n// 找格子\r\nconst findGridNodeEl = (element:HTMLElement):HTMLElement|null => {\r\n\r\n  var el:HTMLElement|null = element\r\n\r\n  if(GridNode.hasGridNodeByElement(el)){\r\n    return el;\r\n  }\r\n\r\n  while (el != null && !GridNode.hasGridNodeByElement(el)) {\r\n    el = el.parentElement;\r\n  }\r\n\r\n  // 文本环绕的文本框不做激活处理\r\n  if(el != null && el.parentElement != null && TextGridNode.hasGridNodeByElement(el) && ImageTextGridNode.hasGridNodeByElement(el.parentElement)){\r\n    return el.parentElement;\r\n  }\r\n\r\n  return el;\r\n}\r\n// 设置激活\r\nconst setActiveGridElement = (el:HTMLElement|null)=>{\r\n  // 激活对应的格子\r\n  if(el){\r\n    el.classList.add(\"doc-edit-active\")\r\n    if(curActiveEl && curActiveEl != el){\r\n      curActiveEl.classList.remove(\"doc-edit-active\")\r\n    }\r\n    curActiveEl = el;\r\n  }\r\n  else{\r\n    curActiveEl && curActiveEl.classList.remove(\"doc-edit-active\")\r\n    curActiveEl = null;\r\n  }\r\n}\r\n// 使用元素模块 集成了模块选中删除以及工具条\r\nconst { isSelected, curSelectKey, curSelectPos,setSelection } = useElementBlockSelection((el)=>{\r\n\r\n\r\n  // 设置激活\r\n  setActiveGridElement(findGridNodeEl(el));\r\n\r\n  // 文本环绕的文本框不做选中处理\r\n  if(el != null && el.parentElement != null && TextGridNode.hasGridNodeByElement(el) && ImageTextGridNode.hasGridNodeByElement(el.parentElement)){\r\n    return el.parentElement;\r\n  }\r\n\r\n\r\n  return GridNode.hasGridNodeByElement(el);\r\n},()=>{\r\n  \r\n  const node = $getNodeByKey(curSelectKey.value)\r\n  \r\n  if($isGridNode(node)){\r\n\r\n    const parent = node.getParent() as ElementNode\r\n\r\n    const toolbars = [\r\n      {\r\n        title:`编辑容器`,icon:\"Edit\",action:async ()=>{\r\n\r\n          var result = await showGridEditDialoger(node,parent,node.getAttrs());\r\n    \r\n          editor.update(() => node.setAttrs(result as any))\r\n        } \r\n      },\r\n      {\r\n        title:`在此之前插入布局容器`,icon:\"BottomLeft\",action:async ()=>{\r\n          editor.update(() => {\r\n            node.insertBefore(new LayoutGridNode({ display:\"block\",width:\"100%\" } as any))\r\n          })\r\n        } \r\n      },\r\n      {\r\n        title:`在此之后插入布局容器`,icon:\"BottomRight\",action:async ()=>{\r\n          editor.update(() => {\r\n            node.insertAfter(new LayoutGridNode({ display:\"block\",width:\"100%\" } as any))\r\n          })\r\n        } \r\n      }\r\n    ];\r\n\r\n    // 有父亲\r\n    if($isGridNode(parent)){\r\n      toolbars.push(...[\r\n        {\r\n          title:\"选中上层容器\",icon:\"Upload\",action: async ()=> {\r\n            let parentEl = editor.getElementByKey(parent.getKey());\r\n            if(parentEl){\r\n              setActiveGridElement(parentEl);\r\n              setSelection(parent.__key,parentEl)\r\n            }\r\n            \r\n          }\r\n        }\r\n      ])\r\n    }\r\n\r\n    // 模块容器\r\n    if($isModuleGridNode(node)){\r\n      toolbars.push(...[\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          } \r\n        }\r\n      ])\r\n    }\r\n\r\n    return toolbars;\r\n  }\r\n\r\n  return null;\r\n})\r\n\r\n\r\nonMounted(() => {\r\n\r\n  // 插入格子\r\n  const insertGridHandle = (layoutGrid:GridNode)=>{\r\n    const selection = $getSelection()\r\n    const elementNode = $isNodeSelection(selection) ? selection?.getNodes()[0] as ElementNode : null;\r\n    if (elementNode) {\r\n      elementNode.append(layoutGrid);\r\n    }\r\n    else{\r\n      $insertNodeToNearestRoot(layoutGrid)\r\n    }\r\n  }\r\n \r\n  // 注册指令\r\n  const unregister = mergeRegister(\r\n    // 插入布局格子\r\n    editor.registerCommand<LayoutGridNodeAttrType>(INSERT_LAYOUTGRID_COMMAND,(payload) => { \r\n   \r\n      insertGridHandle(new LayoutGridNode(payload));\r\n     \r\n      return true\r\n    },COMMAND_PRIORITY_EDITOR),\r\n    // 插入文本格子\r\n    editor.registerCommand<TextGridNodeAttrType>(INSERT_TEXTGRID_COMMAND,(payload) => { \r\n   \r\n      const textGrid = new TextGridNode(payload)\r\n      textGrid.append($createParagraphNode())\r\n      textGrid.append($createParagraphNode())\r\n      textGrid.append($createParagraphNode())\r\n      textGrid.append($createParagraphNode())\r\n      textGrid.append($createParagraphNode())\r\n      textGrid.append($createParagraphNode())\r\n      insertGridHandle(textGrid);\r\n     \r\n      return true\r\n    },COMMAND_PRIORITY_EDITOR),\r\n     // 插入模块格子\r\n    editor.registerCommand<ModuleGridNodeAttrType>(INSERT_MODULEGRID_COMMAND,(payload) => { \r\n      insertGridHandle(new ModuleGridNode(payload));\r\n      return true\r\n    },COMMAND_PRIORITY_EDITOR),\r\n    // 插入图文环绕格子\r\n    editor.registerCommand<ImageTextGridNodeAttrType>(INSERT_IMAGETEXTGRID_COMMAND,(payload) => { \r\n   \r\n      const textImageGrid = new ImageTextGridNode(payload)\r\n      const textGrid = new TextGridNode({} as TextGridNodeAttrType)\r\n\r\n      textGrid.append($createParagraphNode())\r\n      textGrid.append($createParagraphNode())\r\n      textGrid.append($createParagraphNode())\r\n      textGrid.append($createParagraphNode())\r\n      textGrid.append($createParagraphNode())\r\n      textGrid.append($createParagraphNode())\r\n\r\n      textImageGrid.append(new InlineImageNode({\r\n        src:\"\",\r\n        float:\"left\",\r\n        width:\"200px\",\r\n        margin:\"0 10px 10px 0\"\r\n      } as ImageAttrType))\r\n      textImageGrid.append(textGrid)\r\n\r\n\r\n      insertGridHandle(textImageGrid);\r\n     \r\n      return true\r\n    },COMMAND_PRIORITY_EDITOR)\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-element-block-mark box\" v-if=\"isSelected\" :style=\"curSelectPos\">\r\n    \r\n  </div>\r\n</template>\r\n./GridNode\r\n"],"names":["useLexicalComposer","registerDocEditorToolbarExtend","INSERT_IMAGETEXTGRID_COMMAND","INSERT_TEXTGRID_COMMAND","INSERT_MODULEGRID_COMMAND","INSERT_LAYOUTGRID_COMMAND","GridNode","TextGridNode","ImageTextGridNode","useElementBlockSelection","$getNodeByKey","$isGridNode","showGridEditDialoger","LayoutGridNode","$isModuleGridNode","showModuleSelectDialog","createDefaultFormData","INSERT_MODULE_COMMAND","onMounted","$getSelection","$isNodeSelection","$insertNodeToNearestRoot","mergeRegister","COMMAND_PRIORITY_EDITOR","$createParagraphNode","ModuleGridNode","InlineImageNode","onUnmounted"],"mappings":"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"}

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

@@ -0,0 +1,140 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const dialog = require("../../../dynamic-form-panel/dialog.js");
+require("vue");
+require("element-plus");
+require("@maketribe/dm");
+require("@element-plus/icons-vue");
+require("@maketribe/utils");
+require("../../../../../core/DataModelDefines.js");
+require("vue-router");
+require("@maketribe/request");
+require("@maketribe/locale");
+require("../../../../../modules/ms/dataviews/ms-config/MsConfigTable.js");
+require("lodash-es");
+require("../../../../../modules/ms/components/material-list/index.js");
+require("../../../image-cropper/index.js");
+require("../../../upload-file/upload-file.js");
+require("../../../upload-file/context/web-file-upload-context.js");
+require("../../../upload-file/context/web-file-upload-context-options.js");
+require("../../../upload-file/ui/upload-image/index.js");
+require("../../../upload-file/ui/upload-file/index.js");
+require("../../../upload-file/ui/upload-video/index.js");
+require("../../../upload-file/upload-file-options.js");
+const LayoutGridNode = require("./LayoutGridNode.js");
+const ModuleGridNode = require("./ModuleGridNode.js");
+const showGridEditDialoger = async (node, parent, data) => {
+  const options = [
+    { name: "class", title: "标识类名 : ", component: "el-input", props: { clearable: true }, defaultValue: "" },
+    { name: "width", title: "宽度（支持%） : ", component: "el-input", props: { clearable: true }, defaultValue: "" },
+    { name: "height", title: "高度度（支持%） : ", component: "el-input", props: { clearable: true }, defaultValue: "" },
+    { name: "maxWidth", title: "最大宽度（支持%） : ", component: "el-input", props: { clearable: true }, defaultValue: "" },
+    { name: "maxHeight", title: "最大高度（支持%） : ", component: "el-input", props: { clearable: true }, defaultValue: "" }
+  ];
+  let title = "容器";
+  if (LayoutGridNode.$isLayoutGridNode(parent)) {
+    options.push({ name: "flex", title: "弹性比例（Flex） : ", component: "el-input", props: { clearable: true }, defaultValue: "" });
+    if (LayoutGridNode.$isLayoutGridNode(node)) {
+      options.push({
+        name: "display",
+        title: "容器类型 : ",
+        component: "el-radio-group",
+        props: {
+          data: [
+            { value: "block", label: "普通快（block）" },
+            { value: "flex", label: "弹性格子（Flex）" }
+          ]
+        },
+        defaultValue: ""
+      });
+    }
+  }
+  if (LayoutGridNode.$isLayoutGridNode(node)) {
+    options.push(...[
+      {
+        name: "flexDirection",
+        title: "flex-direction : ",
+        component: "el-radio-group",
+        props: {
+          data: [
+            { value: "column", label: "column" },
+            { value: "row", label: "row" },
+            { value: "row-reverse", label: "row-reverse" },
+            { value: "column-reverse", label: "column-reverse" }
+          ]
+        },
+        defaultValue: "",
+        condition: (data2) => data2["display"] == "flex"
+      },
+      {
+        name: "flexWrap",
+        title: "是否换行 : ",
+        component: "el-radio-group",
+        props: {
+          data: [
+            { value: "warp", label: "换行" },
+            { value: "nowrap", label: "不换行" }
+          ]
+        },
+        defaultValue: "",
+        condition: (data2) => data2["display"] == "flex"
+      },
+      {
+        name: "alignContent",
+        title: "align-content : ",
+        component: "el-radio-group",
+        props: {
+          data: [
+            { value: "flex-start", label: "左" },
+            { value: "center", label: "居中" },
+            { value: "flex-end", label: "右" },
+            { value: "space-between", label: "两边" },
+            { value: "space-around", label: "space-around" },
+            { value: "stretch", label: "stretch" }
+          ]
+        },
+        defaultValue: "",
+        condition: (data2) => data2["display"] == "flex"
+      },
+      {
+        name: "justifyContent",
+        title: "justify-content : ",
+        component: "el-radio-group",
+        props: {
+          data: [
+            { value: "flex-start", label: "顶部" },
+            { value: "center", label: "居中" },
+            { value: "flex-end", label: "底部" },
+            { value: "space-between", label: "两边" },
+            { value: "space-around", label: "space-around" },
+            { value: "space-evenly", label: "space-evenly" }
+          ]
+        },
+        defaultValue: "",
+        condition: (data2) => data2["display"] == "flex"
+      },
+      {
+        name: "alignItems",
+        title: "align-items : ",
+        component: "el-radio-group",
+        props: {
+          data: [
+            { value: "flex-start", label: "左" },
+            { value: "center", label: "居中" },
+            { value: "flex-end", label: "右" },
+            { value: "stretch", label: "stretch" },
+            { value: "baseline", label: "baseline" }
+          ]
+        },
+        defaultValue: "",
+        condition: (data2) => data2["display"] == "flex"
+      }
+    ]);
+  }
+  if (ModuleGridNode.$isModuleGridNode(node)) {
+    options.push({ name: "overflowX", title: "横向滚动 : ", component: "el-switch", props: {}, defaultValue: false });
+  }
+  return await dialog.showDynamicFormDialoger(title, options, data);
+};
+exports.showGridEditDialoger = showGridEditDialoger;
+//# sourceMappingURL=utils.js.map