@maketribe/ms-app 3.2.28 → 3.2.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/basic/doc-editor/plugins/GridPlugin/GridNode.js +9 -9
- package/dist/cjs/components/basic/doc-editor/plugins/GridPlugin/GridNode.js.map +1 -1
- package/dist/cjs/components/basic/doc-editor/plugins/GridPlugin/ModuleGridNode.js +0 -1
- package/dist/cjs/components/basic/doc-editor/plugins/GridPlugin/ModuleGridNode.js.map +1 -1
- package/dist/cjs/components/basic/doc-editor/plugins/GridPlugin/index.vue.js +2 -0
- package/dist/cjs/components/basic/doc-editor/plugins/GridPlugin/index.vue.js.map +1 -1
- package/dist/cjs/components/basic/doc-editor/plugins/ModulePlugin/ModuleBlockNode.js +15 -7
- package/dist/cjs/components/basic/doc-editor/plugins/ModulePlugin/ModuleBlockNode.js.map +1 -1
- package/dist/cjs/components/basic/doc-editor/themes/doc-editor-edit.css.js +1 -1
- package/dist/cjs/components/basic/doc-editor/themes/doc-editor-edit.css.js.map +1 -1
- package/dist/cjs/modules/cms/pages/cms-contents/index.vue2.js +17 -19
- package/dist/cjs/modules/cms/pages/cms-contents/index.vue2.js.map +1 -1
- package/dist/esm/components/basic/doc-editor/plugins/GridPlugin/GridNode.js +9 -9
- package/dist/esm/components/basic/doc-editor/plugins/GridPlugin/GridNode.js.map +1 -1
- package/dist/esm/components/basic/doc-editor/plugins/GridPlugin/ModuleGridNode.js +0 -1
- package/dist/esm/components/basic/doc-editor/plugins/GridPlugin/ModuleGridNode.js.map +1 -1
- package/dist/esm/components/basic/doc-editor/plugins/GridPlugin/index.vue.js +2 -0
- package/dist/esm/components/basic/doc-editor/plugins/GridPlugin/index.vue.js.map +1 -1
- package/dist/esm/components/basic/doc-editor/plugins/ModulePlugin/ModuleBlockNode.js +16 -8
- package/dist/esm/components/basic/doc-editor/plugins/ModulePlugin/ModuleBlockNode.js.map +1 -1
- package/dist/esm/components/basic/doc-editor/themes/doc-editor-edit.css.js +1 -1
- package/dist/esm/components/basic/doc-editor/themes/doc-editor-edit.css.js.map +1 -1
- package/dist/esm/modules/cms/pages/cms-contents/index.vue2.js +17 -19
- package/dist/esm/modules/cms/pages/cms-contents/index.vue2.js.map +1 -1
- package/dist/style/components/basic/doc-editor/index.css +1 -1
- package/dist/style/components/index.css +1 -1
- package/dist/style/index.css +2 -2
- package/dist/style/modules/cms/index.css +1 -1
- package/dist/style/modules/cms/pages/cms-contents/components/mk-cms-part-banner.css +1 -1
- package/dist/style/modules/cms/pages/cms-contents/index.css +1 -1
- package/dist/style/src/components/basic/doc-editor/index.scss +2 -1
- package/dist/style/src/modules/cms/pages/cms-contents/components/mk-cms-part-banner.scss +6 -2
- package/dist/types/components/basic/doc-editor/plugins/ModulePlugin/ModuleBlockNode.d.ts +8 -7
- package/package.json +3 -3
|
@@ -86,6 +86,15 @@ class GridNode extends lexical.ElementNode {
|
|
|
86
86
|
el.style[key] = this.__attrs[key];
|
|
87
87
|
}
|
|
88
88
|
});
|
|
89
|
+
let extraClassName = GridNode.getExtraClassName(el);
|
|
90
|
+
if (extraClassName != this.__attrs.class) {
|
|
91
|
+
if (extraClassName) {
|
|
92
|
+
el.classList.remove(extraClassName);
|
|
93
|
+
}
|
|
94
|
+
if (this.__attrs.class) {
|
|
95
|
+
el.classList.add(this.__attrs.class);
|
|
96
|
+
}
|
|
97
|
+
}
|
|
89
98
|
}
|
|
90
99
|
/**
|
|
91
100
|
* 获取标识类
|
|
@@ -101,15 +110,6 @@ class GridNode extends lexical.ElementNode {
|
|
|
101
110
|
exportDOM() {
|
|
102
111
|
const element = document.createElement("div");
|
|
103
112
|
this.updateElementAttr(element);
|
|
104
|
-
let extraClassName = GridNode.getExtraClassName(element);
|
|
105
|
-
if (extraClassName != this.__attrs.class) {
|
|
106
|
-
if (extraClassName) {
|
|
107
|
-
element.classList.remove(extraClassName);
|
|
108
|
-
}
|
|
109
|
-
if (this.__attrs.class) {
|
|
110
|
-
element.classList.add(this.__attrs.class);
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
113
|
if (!element.classList.contains(GridNode.getMarkClassName())) {
|
|
114
114
|
element.classList.add(GridNode.getMarkClassName());
|
|
115
115
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GridNode.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/GridPlugin/GridNode.ts"],"sourcesContent":["\r\n\r\n\r\n\r\n\r\nimport type { DOMConversionMap, SerializedElementNode, LexicalNode, NodeKey, Spread,EditorConfig, DOMExportOutput } from 'lexical'\r\nimport { ElementNode } from 'lexical'\r\n\r\n/**\r\n * 容器属性\r\n */\r\nexport type GridNodeAttrType = {\r\n class:string,\r\n width:string,\r\n height:string,\r\n maxWidth:string,\r\n maxHeight:string,\r\n flex:string\r\n};\r\n\r\n/**\r\n * 节点序列化 \r\n */\r\nexport type SerializedGridNode = Spread<{ attrs:GridNodeAttrType },SerializedElementNode>\r\n\r\n/**\r\n * 格子\r\n */\r\nexport class GridNode extends ElementNode{\r\n\r\n __attrs:GridNodeAttrType\r\n\r\n static getType(): string { return \"grid\"; }\r\n\r\n static hasGridNodeByElement(el:HTMLElement):HTMLElement|null{\r\n return el.classList.contains(GridNode.getMarkClassName()) ? el : null;\r\n }\r\n\r\n static getMarkClassName(): string {\r\n return `mk-doc__${GridNode.getType()}`\r\n }\r\n\r\n static getExtraClassName(el:HTMLElement){\r\n return el.className.replace(GridNode.getMarkClassName(),\"\").trim();\r\n }\r\n\r\n static clone(node: GridNode): GridNode {\r\n \r\n return new GridNode(node.__attrs,node.__key)\r\n }\r\n\r\n static importJSON(serializedNode: SerializedGridNode): GridNode {\r\n return new GridNode(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 GridNode.hasGridNodeByElement(domNode) ? {\r\n\r\n conversion: ()=>{ \r\n\r\n return { \r\n\r\n node:new GridNode({\r\n class:GridNode.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 GridNodeAttrType) \r\n };\r\n },\r\n priority: 1\r\n } : null;\r\n }\r\n }\r\n }\r\n\r\n constructor(attrs:GridNodeAttrType,key?: NodeKey) {\r\n super(key)\r\n this.__attrs = attrs;\r\n }\r\n\r\n /**\r\n * 设置属性\r\n * @param pos \r\n */\r\n setAttrs(data?:GridNodeAttrType){\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():GridNodeAttrType{\r\n return this.__attrs;\r\n }\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 // 更新属性\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 }\r\n\r\n /**\r\n * 获取标识类\r\n * @returns \r\n */\r\n getMarkClassName(): string {\r\n return `mk-doc__${this.getType()}`\r\n }\r\n\r\n /**\r\n * 导出DOM\r\n * @returns \r\n */\r\n exportDOM(): DOMExportOutput {\r\n \r\n const element = document.createElement('div')\r\n\r\n this.updateElementAttr(element);\r\n\r\n
|
|
1
|
+
{"version":3,"file":"GridNode.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/GridPlugin/GridNode.ts"],"sourcesContent":["\r\n\r\n\r\n\r\n\r\nimport type { DOMConversionMap, SerializedElementNode, LexicalNode, NodeKey, Spread,EditorConfig, DOMExportOutput } from 'lexical'\r\nimport { ElementNode } from 'lexical'\r\n\r\n/**\r\n * 容器属性\r\n */\r\nexport type GridNodeAttrType = {\r\n class:string,\r\n width:string,\r\n height:string,\r\n maxWidth:string,\r\n maxHeight:string,\r\n flex:string\r\n};\r\n\r\n/**\r\n * 节点序列化 \r\n */\r\nexport type SerializedGridNode = Spread<{ attrs:GridNodeAttrType },SerializedElementNode>\r\n\r\n/**\r\n * 格子\r\n */\r\nexport class GridNode extends ElementNode{\r\n\r\n __attrs:GridNodeAttrType\r\n\r\n static getType(): string { return \"grid\"; }\r\n\r\n static hasGridNodeByElement(el:HTMLElement):HTMLElement|null{\r\n return el.classList.contains(GridNode.getMarkClassName()) ? el : null;\r\n }\r\n\r\n static getMarkClassName(): string {\r\n return `mk-doc__${GridNode.getType()}`\r\n }\r\n\r\n static getExtraClassName(el:HTMLElement){\r\n return el.className.replace(GridNode.getMarkClassName(),\"\").trim();\r\n }\r\n\r\n static clone(node: GridNode): GridNode {\r\n \r\n return new GridNode(node.__attrs,node.__key)\r\n }\r\n\r\n static importJSON(serializedNode: SerializedGridNode): GridNode {\r\n return new GridNode(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 GridNode.hasGridNodeByElement(domNode) ? {\r\n\r\n conversion: ()=>{ \r\n\r\n return { \r\n\r\n node:new GridNode({\r\n class:GridNode.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 GridNodeAttrType) \r\n };\r\n },\r\n priority: 1\r\n } : null;\r\n }\r\n }\r\n }\r\n\r\n constructor(attrs:GridNodeAttrType,key?: NodeKey) {\r\n super(key)\r\n this.__attrs = attrs;\r\n }\r\n\r\n /**\r\n * 设置属性\r\n * @param pos \r\n */\r\n setAttrs(data?:GridNodeAttrType){\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():GridNodeAttrType{\r\n return this.__attrs;\r\n }\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 // 更新属性\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 // 移除老标识\r\n let extraClassName = GridNode.getExtraClassName(el);\r\n\r\n if(extraClassName != this.__attrs.class){\r\n\r\n if(extraClassName){\r\n el.classList.remove(extraClassName);\r\n }\r\n\r\n // 添加样式\r\n if (this.__attrs.class) {\r\n el.classList.add(this.__attrs.class);\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * 获取标识类\r\n * @returns \r\n */\r\n getMarkClassName(): string {\r\n return `mk-doc__${this.getType()}`\r\n }\r\n\r\n /**\r\n * 导出DOM\r\n * @returns \r\n */\r\n exportDOM(): DOMExportOutput {\r\n \r\n const element = document.createElement('div')\r\n\r\n this.updateElementAttr(element);\r\n\r\n \r\n\r\n // 标识格子\r\n if (!element.classList.contains(GridNode.getMarkClassName())) {\r\n element.classList.add(GridNode.getMarkClassName());\r\n }\r\n\r\n // 标识指定\r\n if (!element.classList.contains(this.getMarkClassName())) {\r\n element.classList.add(this.getMarkClassName());\r\n }\r\n\r\n return { element }\r\n }\r\n\r\n /**\r\n * 创建渲染DOM\r\n * @param config \r\n * @returns \r\n */\r\n createDOM(config: EditorConfig): HTMLElement {\r\n\r\n const el = this.exportDOM().element as HTMLElement;\r\n\r\n el.setAttribute(\"node-key\",this.__key)\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 \r\n this.updateElementAttr(el);\r\n\r\n // 移除老标识\r\n let extraClassName = GridNode.getExtraClassName(el).replace(this.getMarkClassName(),\"\").trim();\r\n\r\n if(extraClassName != this.__attrs.class){\r\n\r\n if(extraClassName){\r\n el.classList.remove(extraClassName);\r\n }\r\n\r\n if (this.__attrs.class) {\r\n el.classList.add(this.__attrs.class);\r\n }\r\n }\r\n return false\r\n }\r\n\r\n /**\r\n * 非内联\r\n * @returns \r\n */\r\n isInline(): boolean {\r\n return false;\r\n }\r\n}\r\n\r\n/**\r\n * 是否是格子\r\n * @param node \r\n * @returns \r\n */\r\nexport function $isGridNode(\r\n node: GridNode | LexicalNode | null | undefined,\r\n): node is GridNode {\r\n return node instanceof GridNode\r\n}\r\n\r\n"],"names":["ElementNode"],"mappings":"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"}
|
|
@@ -79,7 +79,6 @@ class ModuleGridNode extends GridNode.GridNode {
|
|
|
79
79
|
* @param el
|
|
80
80
|
*/
|
|
81
81
|
updateElementAttr(el) {
|
|
82
|
-
super.updateElementAttr(el);
|
|
83
82
|
Object.keys(this.__attrs).forEach((key) => {
|
|
84
83
|
if (["class", "overflowX"].indexOf(key) < 0) {
|
|
85
84
|
el.style[key] = this.__attrs[key];
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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 // 更新属性\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;AAE/B,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;;;;"}
|
|
@@ -63,6 +63,8 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
63
63
|
}
|
|
64
64
|
if (el != null && el.parentElement != null && TextGridNode.TextGridNode.hasGridNodeByElement(el) && ImageTextGridNode.ImageTextGridNode.hasGridNodeByElement(el.parentElement)) {
|
|
65
65
|
return el.parentElement;
|
|
66
|
+
} else if (el != null && el.parentElement != null && ModuleGridNode.ModuleGridNode.hasGridNodeByElement(el.parentElement)) {
|
|
67
|
+
return el.parentElement;
|
|
66
68
|
}
|
|
67
69
|
return el;
|
|
68
70
|
};
|
|
@@ -1 +1 @@
|
|
|
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":";;;;;;;;;;;;;;;;;;;;;AAwBA,UAAM,SAASA,WAAAA;AAGgBC,yCAAA;AAAA,MAC7B,MAAK;AAAA,MACL,MAAK;AAAA,MACL,QAAO,YAAU;AACf,eAAO,gBAAgBC,kBAAA,8BAA6B,EAAE,OAAM,OAAqC,CAAA;AAAA,MACnG;AAAA,MACA,MAAK;AAAA,IAAA,CACiB;AACOD,yCAAA;AAAA,MAC7B,MAAK;AAAA,MACL,MAAK;AAAA,MACL,QAAO,YAAU;AACf,eAAO,gBAAgBE,aAAA,yBAAwB,EAAE,OAAM,OAAgC,CAAA;AAAA,MACzF;AAAA,MACA,MAAK;AAAA,IAAA,CACiB;AACOF,yCAAA;AAAA,MAC7B,MAAK;AAAA,MACL,MAAK;AAAA,MACL,QAAO,YAAU;AACf,eAAO,gBAAgBG,eAAA,2BAA0B,EAAG,OAAM,OAAmC,CAAA;AAAA,MAC/F;AAAA,MACA,MAAK;AAAA,IAAA,CACiB;AACOH,yCAAA;AAAA,MAC7B,MAAK;AAAA,MACL,MAAK;AAAA,MACL,QAAO,YAAU;AACf,eAAO,gBAAgBI,eAAAA,2BAA0B,EAAE,SAAQ,QAAO,OAAM,QAAkC;AAAA,MAC5G;AAAA,MACA,MAAK;AAAA,IAAA,CACiB;AAGxB,QAAI,cAA+B;AAE7B,UAAA,iBAAiB,CAAC,YAAyC;AAE/D,UAAI,KAAsB;AAEvB,UAAAC,SAAA,SAAS,qBAAqB,EAAE,GAAE;AAC5B,eAAA;AAAA,MACT;AAEA,aAAO,MAAM,QAAQ,CAACA,SAAS,SAAA,qBAAqB,EAAE,GAAG;AACvD,aAAK,GAAG;AAAA,MACV;AAGA,UAAG,MAAM,QAAQ,GAAG,iBAAiB,QAAQC,aAAA,aAAa,qBAAqB,EAAE,KAAKC,kBAAA,kBAAkB,qBAAqB,GAAG,aAAa,GAAE;AAC7I,eAAO,GAAG;AAAA,MACZ;AAEO,aAAA;AAAA,IAAA;AAGH,UAAA,uBAAuB,CAAC,OAAsB;AAElD,UAAG,IAAG;AACD,WAAA,UAAU,IAAI,iBAAiB;AAC/B,YAAA,eAAe,eAAe,IAAG;AACtB,sBAAA,UAAU,OAAO,iBAAiB;AAAA,QAChD;AACc,sBAAA;AAAA,MAAA,OAEZ;AACa,uBAAA,YAAY,UAAU,OAAO,iBAAiB;AAC/C,sBAAA;AAAA,MAChB;AAAA,IAAA;AAGI,UAAA,EAAE,YAAY,cAAc,cAAa,iBAAiBC,aAAAA,yBAAyB,CAAC,OAAK;AAIxE,2BAAA,eAAe,EAAE,CAAC;AAGvC,UAAG,MAAM,QAAQ,GAAG,iBAAiB,QAAQF,aAAA,aAAa,qBAAqB,EAAE,KAAKC,kBAAA,kBAAkB,qBAAqB,GAAG,aAAa,GAAE;AAC7I,eAAO,GAAG;AAAA,MACZ;AAGO,aAAAF,SAAA,SAAS,qBAAqB,EAAE;AAAA,IAAA,GACvC,MAAI;AAEE,YAAA,OAAOI,QAAAA,cAAc,aAAa,KAAK;AAE1C,UAAAC,SAAAA,YAAY,IAAI,GAAE;AAEb,cAAA,SAAS,KAAK;AAEpB,cAAM,WAAW;AAAA,UACf;AAAA,YACE,OAAM;AAAA,YAAO,MAAK;AAAA,YAAO,QAAO,YAAU;AAExC,kBAAI,SAAS,MAAMC,6BAAqB,MAAK,QAAO,KAAK,UAAU;AAEnE,qBAAO,OAAO,MAAM,KAAK,SAAS,MAAa,CAAC;AAAA,YAClD;AAAA,UACF;AAAA,UACA;AAAA,YACE,OAAM;AAAA,YAAa,MAAK;AAAA,YAAa,QAAO,YAAU;AACpD,qBAAO,OAAO,MAAM;AACb,qBAAA,aAAa,IAAIC,eAAAA,eAAe,EAAE,SAAQ,SAAQ,OAAM,OAAe,CAAA,CAAC;AAAA,cAAA,CAC9E;AAAA,YACH;AAAA,UACF;AAAA,UACA;AAAA,YACE,OAAM;AAAA,YAAa,MAAK;AAAA,YAAc,QAAO,YAAU;AACrD,qBAAO,OAAO,MAAM;AACb,qBAAA,YAAY,IAAIA,eAAAA,eAAe,EAAE,SAAQ,SAAQ,OAAM,OAAe,CAAA,CAAC;AAAA,cAAA,CAC7E;AAAA,YACH;AAAA,UACF;AAAA,QAAA;AAIC,YAAAF,SAAAA,YAAY,MAAM,GAAE;AACrB,mBAAS,KAAK,GAAG;AAAA,YACf;AAAA,cACE,OAAM;AAAA,cAAS,MAAK;AAAA,cAAS,QAAQ,YAAW;AAC9C,oBAAI,WAAW,OAAO,gBAAgB,OAAO,OAAQ,CAAA;AACrD,oBAAG,UAAS;AACV,uCAAqB,QAAQ;AAChB,+BAAA,OAAO,OAAM,QAAQ;AAAA,gBACpC;AAAA,cAEF;AAAA,YACF;AAAA,UAAA,CACD;AAAA,QACH;AAGG,YAAAG,eAAAA,kBAAkB,IAAI,GAAE;AACzB,mBAAS,KAAK,GAAG;AAAA,YACf;AAAA,cACE,OAAM;AAAA,cAAO,MAAK;AAAA,cAAO,QAAO,YAAU;AAElC,sBAAA,SAAU,MAAMC,QAAAA;AAChB,sBAAA,cAAcC,QAAAA,sBAAsB,OAAO,OAAO;AAEjD,uBAAA,gBAAgBC,gCAAsB,EAAE,MAAK,OAAO,MAAK,MAAK,aAAY;AAAA,cACnF;AAAA,YACF;AAAA,UAAA,CACD;AAAA,QACH;AAEO,eAAA;AAAA,MACT;AAEO,aAAA;AAAA,IAAA,CACR;AAGDC,QAAAA,UAAU,MAAM;AAGR,YAAA,mBAAmB,CAAC,eAAsB;AAC9C,cAAM,YAAYC,QAAAA;AACZ,cAAA,cAAcC,yBAAiB,SAAS,IAAI,uCAAW,WAAW,KAAoB;AAC5F,YAAI,aAAa;AACf,sBAAY,OAAO,UAAU;AAAA,QAAA,OAE3B;AACFC,gBAAA,yBAAyB,UAAU;AAAA,QACrC;AAAA,MAAA;AAIF,YAAM,aAAaC,MAAA;AAAA;AAAA,QAEjB,OAAO,gBAAwCjB,0CAA0B,CAAC,YAAY;AAEnE,2BAAA,IAAIQ,eAAAA,eAAe,OAAO,CAAC;AAErC,iBAAA;AAAA,WACPU,+BAAuB;AAAA;AAAA,QAEzB,OAAO,gBAAsCpB,sCAAwB,CAAC,YAAY;AAE1E,gBAAA,WAAW,IAAII,0BAAa,OAAO;AAChC,mBAAA,OAAOiB,8BAAsB;AAC7B,mBAAA,OAAOA,8BAAsB;AAC7B,mBAAA,OAAOA,8BAAsB;AAC7B,mBAAA,OAAOA,8BAAsB;AAC7B,mBAAA,OAAOA,8BAAsB;AAC7B,mBAAA,OAAOA,8BAAsB;AACtC,2BAAiB,QAAQ;AAElB,iBAAA;AAAA,WACPD,+BAAuB;AAAA;AAAA,QAEzB,OAAO,gBAAwCnB,0CAA0B,CAAC,YAAY;AACnE,2BAAA,IAAIqB,eAAAA,eAAe,OAAO,CAAC;AACrC,iBAAA;AAAA,WACPF,+BAAuB;AAAA;AAAA,QAEzB,OAAO,gBAA2CrB,gDAA6B,CAAC,YAAY;AAEpF,gBAAA,gBAAgB,IAAIM,oCAAkB,OAAO;AACnD,gBAAM,WAAW,IAAID,0BAAa,CAAA,CAA0B;AAEnD,mBAAA,OAAOiB,8BAAsB;AAC7B,mBAAA,OAAOA,8BAAsB;AAC7B,mBAAA,OAAOA,8BAAsB;AAC7B,mBAAA,OAAOA,8BAAsB;AAC7B,mBAAA,OAAOA,8BAAsB;AAC7B,mBAAA,OAAOA,8BAAsB;AAExB,wBAAA,OAAO,IAAIE,0BAAgB;AAAA,YACvC,KAAI;AAAA,YACJ,OAAM;AAAA,YACN,OAAM;AAAA,YACN,QAAO;AAAA,UACS,CAAA,CAAC;AACnB,wBAAc,OAAO,QAAQ;AAG7B,2BAAiB,aAAa;AAEvB,iBAAA;AAAA,WACPH,+BAAuB;AAAA,MAAA;AAGfI,sBAAA,MAAM,YAAY;AAAA,IAAA,CAC/B;;;;;;;;;;;"}
|
|
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 else if(el != null && el.parentElement != null && ModuleGridNode.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 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","ModuleGridNode","useElementBlockSelection","$getNodeByKey","$isGridNode","showGridEditDialoger","LayoutGridNode","$isModuleGridNode","showModuleSelectDialog","createDefaultFormData","INSERT_MODULE_COMMAND","onMounted","$getSelection","$isNodeSelection","$insertNodeToNearestRoot","mergeRegister","COMMAND_PRIORITY_EDITOR","$createParagraphNode","InlineImageNode","onUnmounted"],"mappings":"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"}
|
|
@@ -8,9 +8,9 @@ const composables = require("./composables.js");
|
|
|
8
8
|
const utils = require("./utils.js");
|
|
9
9
|
const ClassMarkName = "mk-doc-block__module";
|
|
10
10
|
const AttrMarkName = "module-name";
|
|
11
|
-
class ModuleBlockNode extends lexical.
|
|
11
|
+
class ModuleBlockNode extends lexical.DecoratorNode {
|
|
12
12
|
constructor(name, data, key) {
|
|
13
|
-
super(
|
|
13
|
+
super(key);
|
|
14
14
|
__publicField(this, "__name");
|
|
15
15
|
__publicField(this, "__data");
|
|
16
16
|
this.__name = name;
|
|
@@ -137,13 +137,21 @@ class ModuleBlockNode extends lexical.TextNode {
|
|
|
137
137
|
dom.innerHTML = el.innerHTML;
|
|
138
138
|
return false;
|
|
139
139
|
}
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
isInline() {
|
|
140
|
+
decorate(editor, config) {
|
|
141
|
+
return null;
|
|
142
|
+
}
|
|
143
|
+
isEmpty() {
|
|
145
144
|
return false;
|
|
146
145
|
}
|
|
146
|
+
isIsolated() {
|
|
147
|
+
return false;
|
|
148
|
+
}
|
|
149
|
+
isInline() {
|
|
150
|
+
return true;
|
|
151
|
+
}
|
|
152
|
+
isKeyboardSelectable() {
|
|
153
|
+
return true;
|
|
154
|
+
}
|
|
147
155
|
}
|
|
148
156
|
function $createModuleBlockNode(name, data) {
|
|
149
157
|
return new ModuleBlockNode(name, data);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModuleBlockNode.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ModulePlugin/ModuleBlockNode.ts"],"sourcesContent":["\r\nimport {\r\n type DOMConversionMap,\r\n type DOMExportOutput,\r\n type LexicalNode,\r\n type NodeKey,\r\n type Spread,\r\n type EditorConfig,\r\n type DOMConversion,\r\n type
|
|
1
|
+
{"version":3,"file":"ModuleBlockNode.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/ModulePlugin/ModuleBlockNode.ts"],"sourcesContent":["\r\nimport {\r\n type DOMConversionMap,\r\n type DOMExportOutput,\r\n type LexicalNode,\r\n type NodeKey,\r\n type Spread,\r\n type EditorConfig,\r\n type DOMConversion,\r\n type SerializedLexicalNode,\r\n DecoratorNode,\r\n LexicalEditor,\r\n} from 'lexical'\r\nimport { useModule } from \"./composables\"\r\nimport { createHtml,createModuleMetaData } from \"./utils\"\r\nimport { Component } from 'vue'\r\n\r\n/**\r\n * 模块模版节点序列化\r\n */\r\nexport type SerializedModuleBlockNode = Spread<\r\n {\r\n name:string,\r\n data: object\r\n },\r\n SerializedLexicalNode\r\n>\r\n\r\n// 类标识\r\nconst ClassMarkName = \"mk-doc-block__module\";\r\n// 属性标识\r\nconst AttrMarkName = \"module-name\";\r\n\r\n/**\r\n * 模块节点\r\n */\r\nexport class ModuleBlockNode extends DecoratorNode<Component|null> {\r\n __name: string\r\n __data: object\r\n\r\n static getType(): string { return \"module\"; }\r\n\r\n /**\r\n * 克隆\r\n * @param node \r\n * @returns \r\n */\r\n static clone(node: ModuleBlockNode): ModuleBlockNode {\r\n return new ModuleBlockNode(node.__name,node.__data,node.__key)\r\n }\r\n\r\n /**\r\n * 获取模块类标识\r\n * @returns \r\n */\r\n static getMarkClassName(): string { return ClassMarkName }\r\n\r\n /**\r\n * 导入\r\n * @param serializedNode \r\n * @returns \r\n */\r\n static importJSON(serializedNode: SerializedModuleBlockNode): ModuleBlockNode {\r\n return $createModuleBlockNode(serializedNode.name,serializedNode.data)\r\n }\r\n\r\n constructor(name: string, data: object, key?: NodeKey) {\r\n super(key)\r\n this.__name = name\r\n this.__data = data\r\n }\r\n\r\n /**\r\n * 获取html内容\r\n */\r\n getHtml(){\r\n const { module } = useModule(this.__name);\r\n return createHtml(module.template,this.__data)\r\n }\r\n\r\n /**\r\n * 设置内容\r\n * @param html \r\n */\r\n setContent(data:any){\r\n const writable = this.getWritable();\r\n writable.__data = data;\r\n }\r\n\r\n /**\r\n * 导出JSON\r\n * @returns \r\n */\r\n exportJSON(): SerializedModuleBlockNode {\r\n\r\n return {\r\n ...super.exportJSON(),\r\n type: this.getType(),\r\n version: 1,\r\n name:this.__name,\r\n data: this.__data\r\n }\r\n }\r\n\r\n\r\n static importDOM(): DOMConversionMap | null {\r\n return {\r\n div : $covertModuleBlockDOM,\r\n section : $covertModuleBlockDOM \r\n }\r\n }\r\n\r\n /**\r\n * 获取文本内容\r\n * @param _includeInert \r\n * @param _includeDirectionless \r\n * @returns \r\n */\r\n getTextContent(\r\n _includeInert?: boolean | undefined,\r\n _includeDirectionless?: false | undefined,\r\n ): string {\r\n\r\n const element = document.createElement('div')\r\n const { module } = useModule(this.__name);\r\n element.innerHTML = createHtml(module.template,this.__data);\r\n\r\n return element.textContent as string;\r\n }\r\n\r\n /**\r\n * 创建模块的el\r\n * @returns \r\n */\r\n createModuleElement(): HTMLElement {\r\n\r\n const element = document.createElement('div')\r\n const { module } = useModule(this.__name);\r\n\r\n element.innerHTML = createHtml(module.template,this.__data);\r\n\r\n if(element.children.length > 1){\r\n throw new Error(\"定义模块模版的时候请用一个容器将模版内容包裹起来，不能有多个并列的元素！\");\r\n }\r\n\r\n const contentEl = element.children[0] as HTMLElement;\r\n\r\n if (!contentEl.classList.contains(ClassMarkName)) {\r\n contentEl.classList.add(ClassMarkName);\r\n }\r\n\r\n // 模块名称标识\r\n contentEl.setAttribute(AttrMarkName,this.__name)\r\n \r\n return contentEl;\r\n }\r\n\r\n /**\r\n * 导出DOM结构\r\n * @returns \r\n */\r\n exportDOM(): DOMExportOutput {\r\n return { element:this.createModuleElement() }\r\n }\r\n\r\n /**\r\n * 渲染\r\n * @param config \r\n * @returns \r\n */\r\n createDOM(config: EditorConfig): HTMLElement {\r\n const el = this.createModuleElement();\r\n el.setAttribute(\"node-key\",this.__key)\r\n el.setAttribute(\"contenteditable\",\"false\")\r\n el.setAttribute(\"data-lexical-decorator\",\"true\")\r\n return el;\r\n }\r\n\r\n /**\r\n * 更新DOM\r\n * @param prevNode \r\n * @param dom \r\n * @param config \r\n * @returns \r\n */\r\n updateDOM(prevNode: ModuleBlockNode, dom: HTMLElement, config: EditorConfig): boolean {\r\n const el = this.createModuleElement();\r\n dom.innerHTML = el.innerHTML;\r\n return false\r\n }\r\n decorate(editor: LexicalEditor, config: EditorConfig): Component | null {\r\n return null;\r\n }\r\n isEmpty(){\r\n return false;\r\n }\r\n isIsolated() {\r\n return false;\r\n }\r\n isInline() {\r\n return true;\r\n }\r\n isKeyboardSelectable() {\r\n return true;\r\n }\r\n}\r\n\r\n/**\r\n * 创建节点\r\n * @param src \r\n * @returns \r\n */\r\nexport function $createModuleBlockNode(name:string,data: object): ModuleBlockNode {\r\n return new ModuleBlockNode(name,data)\r\n}\r\n\r\n/**\r\n * 判断节点\r\n * @param node \r\n * @returns \r\n */\r\nexport function $isModuleBlockNode(\r\n node: ModuleBlockNode | LexicalNode | null | undefined,\r\n): node is ModuleBlockNode {\r\n return node instanceof ModuleBlockNode\r\n}\r\n\r\n\r\n/**\r\n * 转换模块DOM\r\n * @param node \r\n * @returns \r\n */\r\nexport const $covertModuleBlockDOM = (domNode: HTMLElement):DOMConversion<HTMLElement> | null => {\r\n\r\n const name = domNode.getAttribute(AttrMarkName) as string;\r\n const isModule = domNode.classList.contains(ClassMarkName);\r\n const moduleContent = domNode.innerHTML ;\r\n\r\n if(isModule && name){ domNode.innerHTML = \"\"; }\r\n\r\n return isModule && name ? {\r\n conversion: ()=>{ \r\n const { module } = useModule(name);\r\n const { data } = createModuleMetaData(moduleContent,module.options);\r\n return { \r\n node:$createModuleBlockNode(name,data)\r\n };\r\n },\r\n priority: 4\r\n } : null;\r\n}\r\n"],"names":["DecoratorNode","module","useModule","createHtml","createModuleMetaData"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
const DocEditorEditCss = '\r\n.mk-doc__img {\r\n cursor: pointer;\r\n z-index: 1;\r\n position: relative;\r\n}\r\n\r\n.mk-doc__grid{\r\n outline: 2px solid #eff5ff;\r\n position: relative;\r\n cursor: pointer;\r\n white-space:initial;\r\n word-break:initial;\r\n min-height: 150px;\r\n}\r\n.mk-doc__grid.
|
|
2
|
+
const DocEditorEditCss = '\r\n.mk-doc__img {\r\n cursor: pointer;\r\n z-index: 1;\r\n position: relative;\r\n}\r\n\r\n.mk-doc__grid{\r\n outline: 2px solid #eff5ff;\r\n position: relative;\r\n cursor: pointer;\r\n white-space:initial;\r\n word-break:initial;\r\n min-height: 150px;\r\n}\r\n.mk-doc__grid.doc-edit-active::before{\r\n text-align: center;\r\n background-color: #eff5ff;\r\n color: #4284ff;\r\n left: -20px;\r\n top: 0px;\r\n pointer-events: all;\r\n font-size: 14px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 999; \r\n width: 20px;\r\n cursor: pointer;\r\n font-size: 12px;\r\n padding: 5px 0;\r\n}\r\n\r\n.mk-doc__grid.doc-edit-active::before{\r\n content: "容器";\r\n position: absolute;\r\n}\r\n.mk-doc__grid.mk-doc__layout-grid.doc-edit-active::before{\r\n content: "布局容器";\r\n}\r\n/* 文本框可编辑文字 */\r\n.mk-doc__grid.mk-doc__text-grid :not(.mk-doc__grid){\r\n cursor: text;\r\n}\r\n.mk-doc__grid.mk-doc__text-grid.doc-edit-active::before{\r\n content: "文本容器";\r\n}\r\n\r\n/* 图文环绕容器 */\r\n.mk-doc__grid.mk-doc__image-text.doc-edit-active::before{\r\n content: "图文环绕容器";\r\n}\r\n\r\n/* 图文环绕容器下的文本框不做选中 */\r\n.mk-doc__grid.mk-doc__image-text .mk-doc__text-grid{\r\n outline: 0;\r\n padding-top: 0;\r\n}\r\n.mk-doc__grid.mk-doc__image-text .mk-doc__text-grid::before{\r\n display: none;\r\n}\r\n\r\n/* 模块容器 */\r\n.mk-doc__grid.mk-doc__module-grid.doc-edit-active::before{\r\n content: "模块容器";\r\n top: -20px;\r\n left: -2px;\r\n height: 20px;\r\n width: auto;\r\n padding: 0 5px;\r\n}\r\n\r\n/* 避免模块下的a标签点击 */\r\n.mk-doc__grid.mk-doc__module-grid a{\r\n pointer-events: none;\r\n}\r\n\r\n/* 给布局下的格子加内边距方便编辑 */\r\n.mk-doc__grid.mk-doc__layout-grid >.mk-doc__grid{\r\n margin: 10px;\r\n}\r\n\r\n/* 块选中 */\r\n.mk-doc__embedBlock {\r\n position: relative;\r\n z-index: 1;\r\n padding: 1px;\r\n cursor: pointer;\r\n}\r\n.mk-doc__embedBlockFocus {\r\n outline: 2px solid rgb(60, 132, 244);\r\n}\r\n\r\n.mk-doc__embedBlock >*{\r\n pointer-events: none;\r\n}\r\n\r\n.mk-doc-active-element-block-mark{\r\n position: absolute;\r\n box-sizing:border-box;\r\n background-color:#2776f63b;\r\n z-index: 99;\r\n pointer-events: none;\r\n}\r\n.mk-doc-active-element-block-mark.box{\r\n outline: 2px solid #2776f63b;\r\n background-color: transparent;\r\n}\r\n';
|
|
3
3
|
module.exports = DocEditorEditCss;
|
|
4
4
|
//# sourceMappingURL=doc-editor-edit.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"doc-editor-edit.css.js","sources":["../../../../../../src/components/basic/doc-editor/themes/doc-editor-edit.css?raw"],"sourcesContent":["export default \"\\r\\n.mk-doc__img {\\r\\n cursor: pointer;\\r\\n z-index: 1;\\r\\n position: relative;\\r\\n}\\r\\n\\r\\n.mk-doc__grid{\\r\\n outline: 2px solid #eff5ff;\\r\\n position: relative;\\r\\n cursor: pointer;\\r\\n white-space:initial;\\r\\n word-break:initial;\\r\\n min-height: 150px;\\r\\n}\\r\\n.mk-doc__grid.
|
|
1
|
+
{"version":3,"file":"doc-editor-edit.css.js","sources":["../../../../../../src/components/basic/doc-editor/themes/doc-editor-edit.css?raw"],"sourcesContent":["export default \"\\r\\n.mk-doc__img {\\r\\n cursor: pointer;\\r\\n z-index: 1;\\r\\n position: relative;\\r\\n}\\r\\n\\r\\n.mk-doc__grid{\\r\\n outline: 2px solid #eff5ff;\\r\\n position: relative;\\r\\n cursor: pointer;\\r\\n white-space:initial;\\r\\n word-break:initial;\\r\\n min-height: 150px;\\r\\n}\\r\\n.mk-doc__grid.doc-edit-active::before{\\r\\n text-align: center;\\r\\n background-color: #eff5ff;\\r\\n color: #4284ff;\\r\\n left: -20px;\\r\\n top: 0px;\\r\\n pointer-events: all;\\r\\n font-size: 14px;\\r\\n display: flex;\\r\\n align-items: center;\\r\\n justify-content: center;\\r\\n z-index: 999; \\r\\n width: 20px;\\r\\n cursor: pointer;\\r\\n font-size: 12px;\\r\\n padding: 5px 0;\\r\\n}\\r\\n\\r\\n.mk-doc__grid.doc-edit-active::before{\\r\\n content: \\\"容器\\\";\\r\\n position: absolute;\\r\\n}\\r\\n.mk-doc__grid.mk-doc__layout-grid.doc-edit-active::before{\\r\\n content: \\\"布局容器\\\";\\r\\n}\\r\\n/* 文本框可编辑文字 */\\r\\n.mk-doc__grid.mk-doc__text-grid :not(.mk-doc__grid){\\r\\n cursor: text;\\r\\n}\\r\\n.mk-doc__grid.mk-doc__text-grid.doc-edit-active::before{\\r\\n content: \\\"文本容器\\\";\\r\\n}\\r\\n\\r\\n/* 图文环绕容器 */\\r\\n.mk-doc__grid.mk-doc__image-text.doc-edit-active::before{\\r\\n content: \\\"图文环绕容器\\\";\\r\\n}\\r\\n\\r\\n/* 图文环绕容器下的文本框不做选中 */\\r\\n.mk-doc__grid.mk-doc__image-text .mk-doc__text-grid{\\r\\n outline: 0;\\r\\n padding-top: 0;\\r\\n}\\r\\n.mk-doc__grid.mk-doc__image-text .mk-doc__text-grid::before{\\r\\n display: none;\\r\\n}\\r\\n\\r\\n/* 模块容器 */\\r\\n.mk-doc__grid.mk-doc__module-grid.doc-edit-active::before{\\r\\n content: \\\"模块容器\\\";\\r\\n top: -20px;\\r\\n left: -2px;\\r\\n height: 20px;\\r\\n width: auto;\\r\\n padding: 0 5px;\\r\\n}\\r\\n\\r\\n/* 避免模块下的a标签点击 */\\r\\n.mk-doc__grid.mk-doc__module-grid a{\\r\\n pointer-events: none;\\r\\n}\\r\\n\\r\\n/* 给布局下的格子加内边距方便编辑 */\\r\\n.mk-doc__grid.mk-doc__layout-grid >.mk-doc__grid{\\r\\n margin: 10px;\\r\\n}\\r\\n\\r\\n/* 块选中 */\\r\\n.mk-doc__embedBlock {\\r\\n position: relative;\\r\\n z-index: 1;\\r\\n padding: 1px;\\r\\n cursor: pointer;\\r\\n}\\r\\n.mk-doc__embedBlockFocus {\\r\\n outline: 2px solid rgb(60, 132, 244);\\r\\n}\\r\\n\\r\\n.mk-doc__embedBlock >*{\\r\\n pointer-events: none;\\r\\n}\\r\\n\\r\\n.mk-doc-active-element-block-mark{\\r\\n position: absolute;\\r\\n box-sizing:border-box;\\r\\n background-color:#2776f63b;\\r\\n z-index: 99;\\r\\n pointer-events: none;\\r\\n}\\r\\n.mk-doc-active-element-block-mark.box{\\r\\n outline: 2px solid #2776f63b;\\r\\n background-color: transparent;\\r\\n}\\r\\n\""],"names":[],"mappings":";AAAA,MAAe,mBAAA;;"}
|
|
@@ -271,25 +271,23 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
|
271
271
|
}, 1032, ["onClick"])) : vue.createCommentVNode("", true)
|
|
272
272
|
], 64);
|
|
273
273
|
}), 256)),
|
|
274
|
-
vue.
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
]),
|
|
292
|
-
vue.unref(CmsSettings).publish.mode == "static" && curSelectPartItem.value.coverTemplate || curSelectPartItem.value.listTemplate || curSelectPartItem.value.contentTemplate ? (vue.openBlock(), vue.createBlock(_component_el_dropdown, { key: 0 }, {
|
|
274
|
+
activeTabName.value == "part" || activeTabName.value == "part-content" ? (vue.openBlock(), vue.createBlock(_component_el_button, {
|
|
275
|
+
key: 0,
|
|
276
|
+
type: "primary",
|
|
277
|
+
text: "",
|
|
278
|
+
onClick: _cache[0] || (_cache[0] = ($event) => savePartHandle()),
|
|
279
|
+
disabled: !(partDataForm == null ? void 0 : partDataForm.isChanged)
|
|
280
|
+
}, {
|
|
281
|
+
default: vue.withCtx(() => [
|
|
282
|
+
vue.createVNode(_component_MKSvgIcon, {
|
|
283
|
+
iconClass: "save",
|
|
284
|
+
style: { "margin-right": "5px" }
|
|
285
|
+
}),
|
|
286
|
+
vue.createTextVNode(" 保存 ")
|
|
287
|
+
]),
|
|
288
|
+
_: 1
|
|
289
|
+
}, 8, ["disabled"])) : vue.createCommentVNode("", true),
|
|
290
|
+
vue.unref(CmsSettings).publish.mode == "static" && curSelectPartItem.value.coverTemplate || curSelectPartItem.value.listTemplate || curSelectPartItem.value.contentTemplate ? (vue.openBlock(), vue.createBlock(_component_el_dropdown, { key: 1 }, {
|
|
293
291
|
dropdown: vue.withCtx(() => [
|
|
294
292
|
vue.createVNode(_component_el_dropdown_menu, null, {
|
|
295
293
|
default: vue.withCtx(() => [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.vue2.js","sources":["../../../../../../src/modules/cms/pages/cms-contents/index.vue"],"sourcesContent":["<template>\r\n <div class=\"mk-cms-contents__warp\" v-loading=\"loading\">\r\n <el-page-header style=\"background-color: #fff; padding: 10px\" :icon=\"null\">\r\n <template #title>\r\n <h3 style=\"color: var(--el-text-color-regular); margin-left: 10px\">\r\n <MKSvgIcon iconClass=\"richtext-outline\" style=\"margin-right: 5px\" />\r\n 内容管理\r\n </h3>\r\n </template>\r\n <template #extra>\r\n <div class=\"flex items-center\">\r\n <el-button-group>\r\n <el-button type=\"primary\" size=\"large\" text v-if=\"CmsSettings.publish.mode == 'static'\" @click=\"publishAllPartHandle\">\r\n <MKSvgIcon iconClass=\"Promotion\" style=\"margin-right: 10px\" />\r\n 整站发布\r\n </el-button>\r\n <el-button type=\"primary\" size=\"large\" text @click=\"showPartFormHandle\">\r\n <MKSvgIcon iconClass=\"Plus\" style=\"margin-right: 10px\" />\r\n 新增栏目\r\n </el-button>\r\n </el-button-group>\r\n </div>\r\n </template>\r\n </el-page-header>\r\n <div class=\"mk-cms-contents__body\">\r\n <MKPartTree class=\"mk-cms-contents__body__left\" @select=\"selectPartHandle\" @edit=\"editPartHandle\"\r\n @add=\"showPartFormHandle\" @deleteSuccessfully=\"deletePartHandle\" ref=\"partTreeRef\"\r\n :curSelectId=\"curSelectPartId\" />\r\n <el-tabs v-if=\"curSelectPartItem\" v-model=\"activeTabName\" class=\"mk-cms-contents__body__right\">\r\n <div class=\"mk-cms-contents__body__right__action\">\r\n\r\n <template v-for=\"(ext,i) in partExList\" :label=\"ext.title || `页面扩展设置 ${i+1}`\" :name=\"\">\r\n <el-button type=\"primary\" text @click=\"ext.save()\" v-if=\"activeTabName == `part-ext${i}` && ext.save\">\r\n <MKSvgIcon iconClass=\"save\" style=\"margin-right: 5px\" />\r\n 保存{{ext.title}}\r\n </el-button>\r\n </template>\r\n <template>\r\n <el-button type=\"primary\" text @click=\"savePartHandle()\" :disabled=\"!partDataForm?.isChanged\"\r\n v-if=\"activeTabName != 'article-list'\">\r\n <MKSvgIcon iconClass=\"save\" style=\"margin-right: 5px\" />\r\n 保存\r\n </el-button>\r\n </template>\r\n <el-dropdown v-if=\"CmsSettings.publish.mode == 'static' && curSelectPartItem.coverTemplate || curSelectPartItem.listTemplate || curSelectPartItem.contentTemplate\">\r\n <span class=\"el-dropdown-link\">\r\n <el-button type=\"primary\" text>\r\n <MKSvgIcon iconClass=\"MoreFilled\" />\r\n </el-button>\r\n </span>\r\n <template #dropdown>\r\n <el-dropdown-menu>\r\n <el-dropdown-item @click=\"CmsPartForm.openPreview(curSelectPartItem.id)\" v-if=\"CmsSettings.publish.mode == 'static' && curSelectPartItem.coverTemplate\">\r\n <MKSvgIcon iconClass=\"View\" style=\"margin-left: 10px;\" />\r\n 预览封面\r\n </el-dropdown-item>\r\n <el-dropdown-item @click=\"CmsPartForm.openPreview(curSelectPartItem.id,'1')\" v-if=\"curSelectPartItem.listTemplate\">\r\n <MKSvgIcon iconClass=\"View\" style=\"margin-left: 10px;\" />\r\n 预览列表\r\n </el-dropdown-item>\r\n <el-dropdown-item @click=\"showPublish = true\">\r\n <MKSvgIcon iconClass=\"Promotion\" style=\"margin-left: 10px;\" />\r\n 发布当前栏目\r\n </el-dropdown-item>\r\n </el-dropdown-menu>\r\n </template>\r\n </el-dropdown>\r\n </div>\r\n <el-tab-pane label=\"文章列表\" name=\"article-list\" v-if=\"curSelectPartItem.contentTemplate\">\r\n <ArticleList v-if=\"activeTabName == 'article-list'\" :part=\"curSelectPartItem\" />\r\n </el-tab-pane>\r\n <el-tab-pane label=\"栏目设置\" name=\"part\" v-loading=\"partDataForm.loading\">\r\n <PartInfo v-if=\"activeTabName == 'part'\" :part=\"curSelectPartItem\" ref=\"partInfoRef\"\r\n :partDataForm=\"partDataForm\" />\r\n </el-tab-pane>\r\n <el-tab-pane label=\"页面内容\" name=\"part-content\" style=\"background-color: #f4f4f4\"\r\n v-if=\"curSelectPartItem.cmsPartTypeId != 1\" v-loading=\"partDataForm.loading\">\r\n <MKDocEditor v-if=\"activeTabName == 'part-content'\" :css=\"CmsSettings.part.doc.css\" :js=\"CmsSettings.part.doc.js\" :content=\"partDataForm.data?.content\"\r\n placeholder=\"从这里开始写正文...\" @change=\"EditorChangeHandle\">\r\n <template #before-extentions>\r\n <PartBannerEdit v-if=\"partDataForm.data?.id\" :partId=\"partDataForm.data?.id\" :title=\"partDataForm.data?.title\" />\r\n </template>\r\n </MKDocEditor>\r\n </el-tab-pane>\r\n <el-tab-pane v-for=\"(ext,i) in partExList\" :label=\"ext.title || `页面扩展设置 ${i==0 ?'':i}`\" :name=\"`part-ext${i}`\">\r\n <component :is=\"ext.component\" />\r\n </el-tab-pane>\r\n \r\n </el-tabs>\r\n <el-empty v-else description=\"请选择栏目\" style=\"width: 100%\" />\r\n </div>\r\n <el-dialog v-model=\"showPublish\" title=\"栏目发布\" width=\"475px\" :append-to-body=\"false\">\r\n <div class=\"mk-cms-contents__publish\">\r\n <div><span>是否发布列表：</span> <el-switch v-model=\"optionData.isPublishList\"\r\n :disabled=\"!curSelectPartItem.listTemplate\" /></div>\r\n <div><span>是否发布封面：</span> <el-switch v-model=\"optionData.isPublishCover\"\r\n :disabled=\"!curSelectPartItem.coverTemplate\" /></div>\r\n <div><span>是否发布内容：</span> <el-switch v-model=\"optionData.isPublishContent\"\r\n :disabled=\"!curSelectPartItem.contentTemplate\" /></div>\r\n <div><span>是否发布资源：</span> <el-switch v-model=\"optionData.isPublishAssets\" /></div>\r\n <div><span>是否强制发布：</span> <el-switch v-model=\"optionData.isCompulsion\" /></div>\r\n </div>\r\n <template #footer>\r\n <el-button @click=\"showPublish = false\">取消</el-button>\r\n <el-button type=\"primary\" @click=\"publishPartHandle\" :loading=\"publishLoading\">确定</el-button>\r\n </template>\r\n </el-dialog>\r\n </div>\r\n</template>\r\n<script setup lang=\"ts\" >\r\nimport { MKPartTree } from \"../../components\";\r\nimport ArticleList from \"./components/article-list.vue\";\r\nimport PartInfo from \"./components/part-info.vue\";\r\nimport PartBannerEdit from \"./components/part-banner-edit.vue\";\r\nimport { MKDocEditor } from \"../../../../components\";\r\nimport { reactive, ref, watch,watchEffect } from \"vue\";\r\nimport { Dialoger } from \"@maketribe/dm\";\r\nimport { CmsContentManPartForm,CmsPartForm, CmsPartMiniForm } from \"../../dataviews/cms-parts\";\r\nimport { useRoute, useRouter } from \"vue-router\";\r\nimport { usePartExtensionList, type PartExtension } from \"../../composables/part-extensions\"\r\nimport { ElSwitch } from \"element-plus\";\r\nimport { useCmsSettings } from \"../../cms-settings\"\r\n//路由 \r\nconst route = useRoute();\r\nconst router = useRouter();\r\n\r\n// 当前选中的栏目id\r\nconst curSelectPartId = ref<string>(route.query.pid as string)\r\nwatch(()=>route.query.pid,(v:any)=>{\r\n curSelectPartId.value = v \r\n},{ immediate:true });\r\n\r\n//栏目Mini表单\r\nconst partMiniForm = reactive<CmsPartMiniForm>(new CmsPartMiniForm());\r\n\r\n// cms 配置\r\nconst CmsSettings = useCmsSettings(true);\r\n\r\n//发布栏目时的配置\r\nconst showPublish = ref(false)\r\n\r\n//发布配置项\r\nconst optionData = ref({\r\n isPublishList: false,\r\n isPublishCover: false,\r\n isPublishContent: false,\r\n isPublishAssets: false,\r\n isCompulsion: true\r\n});\r\n\r\n//发布加载状态\r\nconst publishLoading = ref(false);\r\n\r\n// 数据加载状态\r\nconst loading = ref(false)\r\n\r\n// 激活的tab\r\nconst activeTabName = ref(\"article-list\");\r\n\r\n// 当前选中的菜单\r\nconst curSelectPartItem = ref(null as any);\r\n\r\n// 栏目树ref\r\nconst partTreeRef = ref(null);\r\n\r\n//栏目扩展\r\nconst partExList = ref<Array<PartExtension>>([]);\r\n\r\n//栏目数据\r\nconst partDataForm = reactive(new CmsContentManPartForm()) as CmsContentManPartForm;\r\n\r\n// 初始化表单\r\npartDataForm.init();\r\n\r\n// 切换tab 加载栏目表单数据\r\nlet beforeInitFormPart:any = null;\r\nwatchEffect(async ()=>{\r\n if((activeTabName.value == \"part\" || activeTabName.value == \"part-content\") && curSelectPartItem.value != beforeInitFormPart){\r\n try {\r\n beforeInitFormPart = curSelectPartItem.value;\r\n await partDataForm.editRecord(curSelectPartItem.value.id);\r\n } catch (error) {\r\n console.log(error)\r\n }\r\n }\r\n});\r\n\r\n// 选择栏目\r\nconst selectPartHandle = async (item: any) => {\r\n\r\n if (curSelectPartItem.value != item) {\r\n\r\n curSelectPartItem.value = item;\r\n\r\n if (!curSelectPartItem.value.contentTemplate) {\r\n activeTabName.value = \"part\";\r\n }\r\n else{\r\n activeTabName.value = \"article-list\";\r\n }\r\n router.replace({ name: 'cms/contents', query: { pid: curSelectPartItem.value.id } } as any)\r\n partExList.value = usePartExtensionList(curSelectPartItem.value.id).concat(usePartExtensionList(curSelectPartItem.value.name));\r\n }\r\n};\r\n\r\n//删除栏目\r\nconst deletePartHandle = (item: any) => {\r\n if (item.id == curSelectPartItem.value.id) {\r\n curSelectPartItem.value = null;\r\n }\r\n};\r\n\r\n//编辑栏目\r\nconst editPartHandle = (item: any) => {\r\n curSelectPartItem.value = item;\r\n activeTabName.value = \"part\";\r\n};\r\n\r\n/**\r\n * 显示添加栏目表单\r\n */\r\nconst showPartFormHandle = async (item?: any) => {\r\n await Dialoger.dataFormDialog({\r\n dataForm: partMiniForm as CmsContentManPartForm,\r\n });\r\n\r\n if (item.id) {\r\n partMiniForm.addRecord({ parentId: item.id });\r\n }\r\n\r\n};\r\n\r\nwatch(showPublish, async (v) => {\r\n if(v){\r\n optionData.value.isPublishList = !!curSelectPartItem.value.listTemplate\r\n optionData.value.isPublishCover = !!curSelectPartItem.value.coverTemplate\r\n optionData.value.isPublishContent = !!curSelectPartItem.value.contentTemplate\r\n }\r\n})\r\n \r\n//监听表单完成事件\r\npartMiniForm.submittedEvent.on(({ response }:any) => {\r\n if(response.data.data){\r\n // 重置选中\r\n curSelectPartId.value = response.data.data;\r\n // 刷新完成直接选中\r\n (partTreeRef.value! as any).dataTree?.load();\r\n }\r\n \r\n});\r\n\r\n//栏目发布\r\nconst publishAllPartHandle = async () => {\r\n\r\n try {\r\n\r\n loading.value = true;\r\n \r\n await CmsPartForm.publishAll()\r\n } \r\n finally {\r\n loading.value = false;\r\n }\r\n\r\n}\r\nconst publishPartHandle = async () => {\r\n \r\n try {\r\n\r\n publishLoading.value = true\r\n\r\n await CmsPartForm.publish(curSelectPartItem.value.id,optionData.value);\r\n\r\n showPublish.value = false;\r\n\r\n } finally {\r\n publishLoading.value = false\r\n }\r\n}\r\n\r\n/**\r\n * 保存栏目信息\r\n */\r\nconst savePartHandle = async () => {\r\n curSelectPartItem.value = partDataForm.data;\r\n await partDataForm.submit();\r\n}\r\n\r\n/**\r\n * 更新编辑器内容\r\n * @param v 内容\r\n */\r\nconst EditorChangeHandle = (v: any) => {\r\n partDataForm.data.content = v\r\n}\r\n</script>\r\n"],"names":["useRoute","useRouter","ref","watch","reactive","CmsPartMiniForm","useCmsSettings","CmsContentManPartForm","watchEffect","usePartExtensionList","Dialoger","CmsPartForm"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.vue2.js","sources":["../../../../../../src/modules/cms/pages/cms-contents/index.vue"],"sourcesContent":["<template>\r\n <div class=\"mk-cms-contents__warp\" v-loading=\"loading\">\r\n <el-page-header style=\"background-color: #fff; padding: 10px\" :icon=\"null\">\r\n <template #title>\r\n <h3 style=\"color: var(--el-text-color-regular); margin-left: 10px\">\r\n <MKSvgIcon iconClass=\"richtext-outline\" style=\"margin-right: 5px\" />\r\n 内容管理\r\n </h3>\r\n </template>\r\n <template #extra>\r\n <div class=\"flex items-center\">\r\n <el-button-group>\r\n <el-button type=\"primary\" size=\"large\" text v-if=\"CmsSettings.publish.mode == 'static'\" @click=\"publishAllPartHandle\">\r\n <MKSvgIcon iconClass=\"Promotion\" style=\"margin-right: 10px\" />\r\n 整站发布\r\n </el-button>\r\n <el-button type=\"primary\" size=\"large\" text @click=\"showPartFormHandle\">\r\n <MKSvgIcon iconClass=\"Plus\" style=\"margin-right: 10px\" />\r\n 新增栏目\r\n </el-button>\r\n </el-button-group>\r\n </div>\r\n </template>\r\n </el-page-header>\r\n <div class=\"mk-cms-contents__body\">\r\n <MKPartTree class=\"mk-cms-contents__body__left\" @select=\"selectPartHandle\" @edit=\"editPartHandle\"\r\n @add=\"showPartFormHandle\" @deleteSuccessfully=\"deletePartHandle\" ref=\"partTreeRef\"\r\n :curSelectId=\"curSelectPartId\" />\r\n <el-tabs v-if=\"curSelectPartItem\" v-model=\"activeTabName\" class=\"mk-cms-contents__body__right\">\r\n <div class=\"mk-cms-contents__body__right__action\">\r\n\r\n <template v-for=\"(ext,i) in partExList\" :label=\"ext.title || `页面扩展设置 ${i+1}`\" :name=\"\">\r\n <el-button type=\"primary\" text @click=\"ext.save()\" v-if=\"activeTabName == `part-ext${i}` && ext.save\">\r\n <MKSvgIcon iconClass=\"save\" style=\"margin-right: 5px\" />\r\n 保存{{ext.title}}\r\n </el-button>\r\n </template>\r\n <template v-if=\"activeTabName == 'part' || activeTabName == 'part-content'\">\r\n <el-button type=\"primary\" text @click=\"savePartHandle()\" :disabled=\"!partDataForm?.isChanged\">\r\n <MKSvgIcon iconClass=\"save\" style=\"margin-right: 5px\" />\r\n 保存\r\n </el-button>\r\n </template>\r\n <el-dropdown v-if=\"CmsSettings.publish.mode == 'static' && curSelectPartItem.coverTemplate || curSelectPartItem.listTemplate || curSelectPartItem.contentTemplate\">\r\n <span class=\"el-dropdown-link\">\r\n <el-button type=\"primary\" text>\r\n <MKSvgIcon iconClass=\"MoreFilled\" />\r\n </el-button>\r\n </span>\r\n <template #dropdown>\r\n <el-dropdown-menu>\r\n <el-dropdown-item @click=\"CmsPartForm.openPreview(curSelectPartItem.id)\" v-if=\"CmsSettings.publish.mode == 'static' && curSelectPartItem.coverTemplate\">\r\n <MKSvgIcon iconClass=\"View\" style=\"margin-left: 10px;\" />\r\n 预览封面\r\n </el-dropdown-item>\r\n <el-dropdown-item @click=\"CmsPartForm.openPreview(curSelectPartItem.id,'1')\" v-if=\"curSelectPartItem.listTemplate\">\r\n <MKSvgIcon iconClass=\"View\" style=\"margin-left: 10px;\" />\r\n 预览列表\r\n </el-dropdown-item>\r\n <el-dropdown-item @click=\"showPublish = true\">\r\n <MKSvgIcon iconClass=\"Promotion\" style=\"margin-left: 10px;\" />\r\n 发布当前栏目\r\n </el-dropdown-item>\r\n </el-dropdown-menu>\r\n </template>\r\n </el-dropdown>\r\n </div>\r\n <el-tab-pane label=\"文章列表\" name=\"article-list\" v-if=\"curSelectPartItem.contentTemplate\">\r\n <ArticleList v-if=\"activeTabName == 'article-list'\" :part=\"curSelectPartItem\" />\r\n </el-tab-pane>\r\n <el-tab-pane label=\"栏目设置\" name=\"part\" v-loading=\"partDataForm.loading\">\r\n <PartInfo v-if=\"activeTabName == 'part'\" :part=\"curSelectPartItem\" ref=\"partInfoRef\"\r\n :partDataForm=\"partDataForm\" />\r\n </el-tab-pane>\r\n <el-tab-pane label=\"页面内容\" name=\"part-content\" style=\"background-color: #f4f4f4\"\r\n v-if=\"curSelectPartItem.cmsPartTypeId != 1\" v-loading=\"partDataForm.loading\">\r\n <MKDocEditor v-if=\"activeTabName == 'part-content'\" :css=\"CmsSettings.part.doc.css\" :js=\"CmsSettings.part.doc.js\" :content=\"partDataForm.data?.content\"\r\n placeholder=\"从这里开始写正文...\" @change=\"EditorChangeHandle\">\r\n <template #before-extentions>\r\n <PartBannerEdit v-if=\"partDataForm.data?.id\" :partId=\"partDataForm.data?.id\" :title=\"partDataForm.data?.title\" />\r\n </template>\r\n </MKDocEditor>\r\n </el-tab-pane>\r\n <el-tab-pane v-for=\"(ext,i) in partExList\" :label=\"ext.title || `页面扩展设置 ${i==0 ?'':i}`\" :name=\"`part-ext${i}`\">\r\n <component :is=\"ext.component\" />\r\n </el-tab-pane>\r\n \r\n </el-tabs>\r\n <el-empty v-else description=\"请选择栏目\" style=\"width: 100%\" />\r\n </div>\r\n <el-dialog v-model=\"showPublish\" title=\"栏目发布\" width=\"475px\" :append-to-body=\"false\">\r\n <div class=\"mk-cms-contents__publish\">\r\n <div><span>是否发布列表：</span> <el-switch v-model=\"optionData.isPublishList\"\r\n :disabled=\"!curSelectPartItem.listTemplate\" /></div>\r\n <div><span>是否发布封面：</span> <el-switch v-model=\"optionData.isPublishCover\"\r\n :disabled=\"!curSelectPartItem.coverTemplate\" /></div>\r\n <div><span>是否发布内容：</span> <el-switch v-model=\"optionData.isPublishContent\"\r\n :disabled=\"!curSelectPartItem.contentTemplate\" /></div>\r\n <div><span>是否发布资源：</span> <el-switch v-model=\"optionData.isPublishAssets\" /></div>\r\n <div><span>是否强制发布：</span> <el-switch v-model=\"optionData.isCompulsion\" /></div>\r\n </div>\r\n <template #footer>\r\n <el-button @click=\"showPublish = false\">取消</el-button>\r\n <el-button type=\"primary\" @click=\"publishPartHandle\" :loading=\"publishLoading\">确定</el-button>\r\n </template>\r\n </el-dialog>\r\n </div>\r\n</template>\r\n<script setup lang=\"ts\" >\r\nimport { MKPartTree } from \"../../components\";\r\nimport ArticleList from \"./components/article-list.vue\";\r\nimport PartInfo from \"./components/part-info.vue\";\r\nimport PartBannerEdit from \"./components/part-banner-edit.vue\";\r\nimport { MKDocEditor } from \"../../../../components\";\r\nimport { reactive, ref, watch,watchEffect } from \"vue\";\r\nimport { Dialoger } from \"@maketribe/dm\";\r\nimport { CmsContentManPartForm,CmsPartForm, CmsPartMiniForm } from \"../../dataviews/cms-parts\";\r\nimport { useRoute, useRouter } from \"vue-router\";\r\nimport { usePartExtensionList, type PartExtension } from \"../../composables/part-extensions\"\r\nimport { ElSwitch } from \"element-plus\";\r\nimport { useCmsSettings } from \"../../cms-settings\"\r\n//路由 \r\nconst route = useRoute();\r\nconst router = useRouter();\r\n\r\n// 当前选中的栏目id\r\nconst curSelectPartId = ref<string>(route.query.pid as string)\r\nwatch(()=>route.query.pid,(v:any)=>{\r\n curSelectPartId.value = v \r\n},{ immediate:true });\r\n\r\n//栏目Mini表单\r\nconst partMiniForm = reactive<CmsPartMiniForm>(new CmsPartMiniForm());\r\n\r\n// cms 配置\r\nconst CmsSettings = useCmsSettings(true);\r\n\r\n//发布栏目时的配置\r\nconst showPublish = ref(false)\r\n\r\n//发布配置项\r\nconst optionData = ref({\r\n isPublishList: false,\r\n isPublishCover: false,\r\n isPublishContent: false,\r\n isPublishAssets: false,\r\n isCompulsion: true\r\n});\r\n\r\n//发布加载状态\r\nconst publishLoading = ref(false);\r\n\r\n// 数据加载状态\r\nconst loading = ref(false)\r\n\r\n// 激活的tab\r\nconst activeTabName = ref(\"article-list\");\r\n\r\n// 当前选中的菜单\r\nconst curSelectPartItem = ref(null as any);\r\n\r\n// 栏目树ref\r\nconst partTreeRef = ref(null);\r\n\r\n//栏目扩展\r\nconst partExList = ref<Array<PartExtension>>([]);\r\n\r\n//栏目数据\r\nconst partDataForm = reactive(new CmsContentManPartForm()) as CmsContentManPartForm;\r\n\r\n// 初始化表单\r\npartDataForm.init();\r\n\r\n// 切换tab 加载栏目表单数据\r\nlet beforeInitFormPart:any = null;\r\nwatchEffect(async ()=>{\r\n if((activeTabName.value == \"part\" || activeTabName.value == \"part-content\") && curSelectPartItem.value != beforeInitFormPart){\r\n try {\r\n beforeInitFormPart = curSelectPartItem.value;\r\n await partDataForm.editRecord(curSelectPartItem.value.id);\r\n } catch (error) {\r\n console.log(error)\r\n }\r\n }\r\n});\r\n\r\n// 选择栏目\r\nconst selectPartHandle = async (item: any) => {\r\n\r\n if (curSelectPartItem.value != item) {\r\n\r\n curSelectPartItem.value = item;\r\n\r\n if (!curSelectPartItem.value.contentTemplate) {\r\n activeTabName.value = \"part\";\r\n }\r\n else{\r\n activeTabName.value = \"article-list\";\r\n }\r\n router.replace({ name: 'cms/contents', query: { pid: curSelectPartItem.value.id } } as any)\r\n partExList.value = usePartExtensionList(curSelectPartItem.value.id).concat(usePartExtensionList(curSelectPartItem.value.name));\r\n }\r\n};\r\n\r\n//删除栏目\r\nconst deletePartHandle = (item: any) => {\r\n if (item.id == curSelectPartItem.value.id) {\r\n curSelectPartItem.value = null;\r\n }\r\n};\r\n\r\n//编辑栏目\r\nconst editPartHandle = (item: any) => {\r\n curSelectPartItem.value = item;\r\n activeTabName.value = \"part\";\r\n};\r\n\r\n/**\r\n * 显示添加栏目表单\r\n */\r\nconst showPartFormHandle = async (item?: any) => {\r\n await Dialoger.dataFormDialog({\r\n dataForm: partMiniForm as CmsContentManPartForm,\r\n });\r\n\r\n if (item.id) {\r\n partMiniForm.addRecord({ parentId: item.id });\r\n }\r\n\r\n};\r\n\r\nwatch(showPublish, async (v) => {\r\n if(v){\r\n optionData.value.isPublishList = !!curSelectPartItem.value.listTemplate\r\n optionData.value.isPublishCover = !!curSelectPartItem.value.coverTemplate\r\n optionData.value.isPublishContent = !!curSelectPartItem.value.contentTemplate\r\n }\r\n})\r\n \r\n//监听表单完成事件\r\npartMiniForm.submittedEvent.on(({ response }:any) => {\r\n if(response.data.data){\r\n // 重置选中\r\n curSelectPartId.value = response.data.data;\r\n // 刷新完成直接选中\r\n (partTreeRef.value! as any).dataTree?.load();\r\n }\r\n \r\n});\r\n\r\n//栏目发布\r\nconst publishAllPartHandle = async () => {\r\n\r\n try {\r\n\r\n loading.value = true;\r\n \r\n await CmsPartForm.publishAll()\r\n } \r\n finally {\r\n loading.value = false;\r\n }\r\n\r\n}\r\nconst publishPartHandle = async () => {\r\n \r\n try {\r\n\r\n publishLoading.value = true\r\n\r\n await CmsPartForm.publish(curSelectPartItem.value.id,optionData.value);\r\n\r\n showPublish.value = false;\r\n\r\n } finally {\r\n publishLoading.value = false\r\n }\r\n}\r\n\r\n/**\r\n * 保存栏目信息\r\n */\r\nconst savePartHandle = async () => {\r\n curSelectPartItem.value = partDataForm.data;\r\n await partDataForm.submit();\r\n}\r\n\r\n/**\r\n * 更新编辑器内容\r\n * @param v 内容\r\n */\r\nconst EditorChangeHandle = (v: any) => {\r\n partDataForm.data.content = v\r\n}\r\n</script>\r\n"],"names":["useRoute","useRouter","ref","watch","reactive","CmsPartMiniForm","useCmsSettings","CmsContentManPartForm","watchEffect","usePartExtensionList","Dialoger","CmsPartForm"],"mappings":"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"}
|
|
@@ -84,6 +84,15 @@ class GridNode extends ElementNode {
|
|
|
84
84
|
el.style[key] = this.__attrs[key];
|
|
85
85
|
}
|
|
86
86
|
});
|
|
87
|
+
let extraClassName = GridNode.getExtraClassName(el);
|
|
88
|
+
if (extraClassName != this.__attrs.class) {
|
|
89
|
+
if (extraClassName) {
|
|
90
|
+
el.classList.remove(extraClassName);
|
|
91
|
+
}
|
|
92
|
+
if (this.__attrs.class) {
|
|
93
|
+
el.classList.add(this.__attrs.class);
|
|
94
|
+
}
|
|
95
|
+
}
|
|
87
96
|
}
|
|
88
97
|
/**
|
|
89
98
|
* 获取标识类
|
|
@@ -99,15 +108,6 @@ class GridNode extends ElementNode {
|
|
|
99
108
|
exportDOM() {
|
|
100
109
|
const element = document.createElement("div");
|
|
101
110
|
this.updateElementAttr(element);
|
|
102
|
-
let extraClassName = GridNode.getExtraClassName(element);
|
|
103
|
-
if (extraClassName != this.__attrs.class) {
|
|
104
|
-
if (extraClassName) {
|
|
105
|
-
element.classList.remove(extraClassName);
|
|
106
|
-
}
|
|
107
|
-
if (this.__attrs.class) {
|
|
108
|
-
element.classList.add(this.__attrs.class);
|
|
109
|
-
}
|
|
110
|
-
}
|
|
111
111
|
if (!element.classList.contains(GridNode.getMarkClassName())) {
|
|
112
112
|
element.classList.add(GridNode.getMarkClassName());
|
|
113
113
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GridNode.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/GridPlugin/GridNode.ts"],"sourcesContent":["\r\n\r\n\r\n\r\n\r\nimport type { DOMConversionMap, SerializedElementNode, LexicalNode, NodeKey, Spread,EditorConfig, DOMExportOutput } from 'lexical'\r\nimport { ElementNode } from 'lexical'\r\n\r\n/**\r\n * 容器属性\r\n */\r\nexport type GridNodeAttrType = {\r\n class:string,\r\n width:string,\r\n height:string,\r\n maxWidth:string,\r\n maxHeight:string,\r\n flex:string\r\n};\r\n\r\n/**\r\n * 节点序列化 \r\n */\r\nexport type SerializedGridNode = Spread<{ attrs:GridNodeAttrType },SerializedElementNode>\r\n\r\n/**\r\n * 格子\r\n */\r\nexport class GridNode extends ElementNode{\r\n\r\n __attrs:GridNodeAttrType\r\n\r\n static getType(): string { return \"grid\"; }\r\n\r\n static hasGridNodeByElement(el:HTMLElement):HTMLElement|null{\r\n return el.classList.contains(GridNode.getMarkClassName()) ? el : null;\r\n }\r\n\r\n static getMarkClassName(): string {\r\n return `mk-doc__${GridNode.getType()}`\r\n }\r\n\r\n static getExtraClassName(el:HTMLElement){\r\n return el.className.replace(GridNode.getMarkClassName(),\"\").trim();\r\n }\r\n\r\n static clone(node: GridNode): GridNode {\r\n \r\n return new GridNode(node.__attrs,node.__key)\r\n }\r\n\r\n static importJSON(serializedNode: SerializedGridNode): GridNode {\r\n return new GridNode(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 GridNode.hasGridNodeByElement(domNode) ? {\r\n\r\n conversion: ()=>{ \r\n\r\n return { \r\n\r\n node:new GridNode({\r\n class:GridNode.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 GridNodeAttrType) \r\n };\r\n },\r\n priority: 1\r\n } : null;\r\n }\r\n }\r\n }\r\n\r\n constructor(attrs:GridNodeAttrType,key?: NodeKey) {\r\n super(key)\r\n this.__attrs = attrs;\r\n }\r\n\r\n /**\r\n * 设置属性\r\n * @param pos \r\n */\r\n setAttrs(data?:GridNodeAttrType){\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():GridNodeAttrType{\r\n return this.__attrs;\r\n }\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 // 更新属性\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 }\r\n\r\n /**\r\n * 获取标识类\r\n * @returns \r\n */\r\n getMarkClassName(): string {\r\n return `mk-doc__${this.getType()}`\r\n }\r\n\r\n /**\r\n * 导出DOM\r\n * @returns \r\n */\r\n exportDOM(): DOMExportOutput {\r\n \r\n const element = document.createElement('div')\r\n\r\n this.updateElementAttr(element);\r\n\r\n
|
|
1
|
+
{"version":3,"file":"GridNode.js","sources":["../../../../../../../src/components/basic/doc-editor/plugins/GridPlugin/GridNode.ts"],"sourcesContent":["\r\n\r\n\r\n\r\n\r\nimport type { DOMConversionMap, SerializedElementNode, LexicalNode, NodeKey, Spread,EditorConfig, DOMExportOutput } from 'lexical'\r\nimport { ElementNode } from 'lexical'\r\n\r\n/**\r\n * 容器属性\r\n */\r\nexport type GridNodeAttrType = {\r\n class:string,\r\n width:string,\r\n height:string,\r\n maxWidth:string,\r\n maxHeight:string,\r\n flex:string\r\n};\r\n\r\n/**\r\n * 节点序列化 \r\n */\r\nexport type SerializedGridNode = Spread<{ attrs:GridNodeAttrType },SerializedElementNode>\r\n\r\n/**\r\n * 格子\r\n */\r\nexport class GridNode extends ElementNode{\r\n\r\n __attrs:GridNodeAttrType\r\n\r\n static getType(): string { return \"grid\"; }\r\n\r\n static hasGridNodeByElement(el:HTMLElement):HTMLElement|null{\r\n return el.classList.contains(GridNode.getMarkClassName()) ? el : null;\r\n }\r\n\r\n static getMarkClassName(): string {\r\n return `mk-doc__${GridNode.getType()}`\r\n }\r\n\r\n static getExtraClassName(el:HTMLElement){\r\n return el.className.replace(GridNode.getMarkClassName(),\"\").trim();\r\n }\r\n\r\n static clone(node: GridNode): GridNode {\r\n \r\n return new GridNode(node.__attrs,node.__key)\r\n }\r\n\r\n static importJSON(serializedNode: SerializedGridNode): GridNode {\r\n return new GridNode(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 GridNode.hasGridNodeByElement(domNode) ? {\r\n\r\n conversion: ()=>{ \r\n\r\n return { \r\n\r\n node:new GridNode({\r\n class:GridNode.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 GridNodeAttrType) \r\n };\r\n },\r\n priority: 1\r\n } : null;\r\n }\r\n }\r\n }\r\n\r\n constructor(attrs:GridNodeAttrType,key?: NodeKey) {\r\n super(key)\r\n this.__attrs = attrs;\r\n }\r\n\r\n /**\r\n * 设置属性\r\n * @param pos \r\n */\r\n setAttrs(data?:GridNodeAttrType){\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():GridNodeAttrType{\r\n return this.__attrs;\r\n }\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 // 更新属性\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 // 移除老标识\r\n let extraClassName = GridNode.getExtraClassName(el);\r\n\r\n if(extraClassName != this.__attrs.class){\r\n\r\n if(extraClassName){\r\n el.classList.remove(extraClassName);\r\n }\r\n\r\n // 添加样式\r\n if (this.__attrs.class) {\r\n el.classList.add(this.__attrs.class);\r\n }\r\n }\r\n }\r\n\r\n /**\r\n * 获取标识类\r\n * @returns \r\n */\r\n getMarkClassName(): string {\r\n return `mk-doc__${this.getType()}`\r\n }\r\n\r\n /**\r\n * 导出DOM\r\n * @returns \r\n */\r\n exportDOM(): DOMExportOutput {\r\n \r\n const element = document.createElement('div')\r\n\r\n this.updateElementAttr(element);\r\n\r\n \r\n\r\n // 标识格子\r\n if (!element.classList.contains(GridNode.getMarkClassName())) {\r\n element.classList.add(GridNode.getMarkClassName());\r\n }\r\n\r\n // 标识指定\r\n if (!element.classList.contains(this.getMarkClassName())) {\r\n element.classList.add(this.getMarkClassName());\r\n }\r\n\r\n return { element }\r\n }\r\n\r\n /**\r\n * 创建渲染DOM\r\n * @param config \r\n * @returns \r\n */\r\n createDOM(config: EditorConfig): HTMLElement {\r\n\r\n const el = this.exportDOM().element as HTMLElement;\r\n\r\n el.setAttribute(\"node-key\",this.__key)\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 \r\n this.updateElementAttr(el);\r\n\r\n // 移除老标识\r\n let extraClassName = GridNode.getExtraClassName(el).replace(this.getMarkClassName(),\"\").trim();\r\n\r\n if(extraClassName != this.__attrs.class){\r\n\r\n if(extraClassName){\r\n el.classList.remove(extraClassName);\r\n }\r\n\r\n if (this.__attrs.class) {\r\n el.classList.add(this.__attrs.class);\r\n }\r\n }\r\n return false\r\n }\r\n\r\n /**\r\n * 非内联\r\n * @returns \r\n */\r\n isInline(): boolean {\r\n return false;\r\n }\r\n}\r\n\r\n/**\r\n * 是否是格子\r\n * @param node \r\n * @returns \r\n */\r\nexport function $isGridNode(\r\n node: GridNode | LexicalNode | null | undefined,\r\n): node is GridNode {\r\n return node instanceof GridNode\r\n}\r\n\r\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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 // 更新属性\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":[],"mappings":";;AAca,MAAA,4BAAoE,cAAc,2BAA2B;AAWnH,MAAM,uBAAuB,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,WAAA,SAAS,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;AAE/B,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;"}
|
|
@@ -62,6 +62,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
62
62
|
}
|
|
63
63
|
if (el != null && el.parentElement != null && TextGridNode.hasGridNodeByElement(el) && ImageTextGridNode.hasGridNodeByElement(el.parentElement)) {
|
|
64
64
|
return el.parentElement;
|
|
65
|
+
} else if (el != null && el.parentElement != null && ModuleGridNode.hasGridNodeByElement(el.parentElement)) {
|
|
66
|
+
return el.parentElement;
|
|
65
67
|
}
|
|
66
68
|
return el;
|
|
67
69
|
};
|