@maketribe/ms-app 3.2.44 → 3.2.45
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/lexical-editor/nodes/ModuleDecoratorNode.js +1 -1
- package/dist/cjs/components/basic/lexical-editor/nodes/ModuleDecoratorNode.js.map +1 -1
- package/dist/esm/components/basic/lexical-editor/nodes/ModuleDecoratorNode.js +1 -1
- package/dist/esm/components/basic/lexical-editor/nodes/ModuleDecoratorNode.js.map +1 -1
- package/dist/types/components/basic/lexical-editor/nodes/ModuleDecoratorNode.d.ts +1 -3
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModuleDecoratorNode.js","sources":["../../../../../../src/components/basic/lexical-editor/nodes/ModuleDecoratorNode.ts"],"sourcesContent":["\r\nimport {\r\n type DOMConversionMap,\r\n type DOMExportOutput,\r\n type EditorConfig,\r\n type LexicalNode,\r\n type NodeKey,\r\n type Spread,\r\n type LexicalEditor,\r\n type DOMConversion,\r\n type LexicalCommand,\r\n createCommand\r\n} from 'lexical'\r\nimport { Component } from 'vue';\r\nimport { HtmlElementDecoratorNode,SerializedHtmlElementDecoratorNode } from \"./HtmlElementDecoratorNode\"\r\nimport { ModuleDecoratorWarpNode } from './ModuleDecoratorWarpNode';\r\n\r\n\r\n/**\r\n * 属性类型\r\n */\r\nexport type ModulePropType = { name:string,data:object };\r\n\r\n/**\r\n * 插入模块模版块指令\r\n */\r\nexport const INSERT_MODULE_COMMAND: LexicalCommand<ModulePropType> = createCommand('INSERT_MODULE_COMMAND')\r\n\r\n/**\r\n * 节点序列化 \r\n */\r\nexport type SerializedModuleDecoratorNode = Spread<{ moduleName:string,moduleHtml:any }, SerializedHtmlElementDecoratorNode>\r\n\r\n\r\n// 属性标识\r\nexport const AttrMarkName = \"module-name\";\r\n\r\n/**\r\n * 模块\r\n * 会导致\r\n */\r\nexport class ModuleDecoratorNode extends HtmlElementDecoratorNode {\r\n\r\n __moduleName: string\r\n __moduleHtml: string\r\n\r\n\r\n static getType(): string { return \"module\"; }\r\n\r\n static clone(node: ModuleDecoratorNode): ModuleDecoratorNode {\r\n return new ModuleDecoratorNode(node.__moduleName,node.__moduleHtml,node.__class,node.__style,node.__key);\r\n }\r\n\r\n static importJSON(serializedNode: SerializedModuleDecoratorNode): ModuleDecoratorNode {\r\n return new ModuleDecoratorNode(serializedNode.moduleName,serializedNode.moduleHtml,serializedNode.class, serializedNode.style)\r\n }\r\n\r\n static importDOM(): DOMConversionMap | null {\r\n return {\r\n div: $covertModuleDecoratorNode,\r\n section: $covertModuleDecoratorNode,\r\n main : $covertModuleDecoratorNode ,\r\n header : $covertModuleDecoratorNode \r\n }\r\n }\r\n\r\n /**\r\n * \r\n * @param name \r\n * @param data \r\n * @param className \r\n * @param style \r\n * @param key \r\n */\r\n constructor(name:string,html:string,className?: string , style?: string, key?: NodeKey) {\r\n super(\"div\",className,style,key)\r\n this.__moduleName = name;\r\n this.__moduleHtml = html;\r\n }\r\n\r\n /**\r\n * 导出JSON\r\n * @returns \r\n */\r\n exportJSON(): SerializedModuleDecoratorNode {\r\n return {\r\n ...super.exportJSON(),\r\n type: this.getType(),\r\n moduleName:this.__moduleName,\r\n moduleHtml:this.__moduleHtml,\r\n version: 1\r\n }\r\n }\r\n\r\n /**\r\n * 创建渲染DOM\r\n * @param config \r\n * @returns \r\n */\r\n createDOM(config: EditorConfig): HTMLElement {\r\n\r\n const warpEl = super.createDOM(config)\r\n\r\n warpEl.innerHTML = this.__moduleHtml;\r\n\r\n if(warpEl.children.length > 1){\r\n throw new Error(\"定义模块模版的时候请用一个容器将模版内容包裹起来,不能有多个并列的元素!\");\r\n }\r\n\r\n const element = warpEl.children[0] as HTMLElement;\r\n\r\n // 模块名称标识\r\n element.setAttribute(AttrMarkName,this.__moduleName)\r\n element.setAttribute(\"node-key\",this.__key);\r\n\r\n return element;\r\n }\r\n\r\n /**\r\n * 隔离渲染函数\r\n * @param editor \r\n * @param config \r\n * @returns \r\n */\r\n decorate(editor: LexicalEditor, config: EditorConfig): Component | null {\r\n return null;\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: LexicalNode, dom: HTMLElement, config: EditorConfig): boolean {\r\n dom.innerHTML = this.__moduleHtml;\r\n return false;\r\n }\r\n\r\n /**\r\n * 设置 html\r\n * @param html \r\n * @returns \r\n */\r\n setHtml(html:string) {\r\n const self = this.getWritable();\r\n self.__moduleHtml = html || \"\";\r\n return this;\r\n }\r\n // /**\r\n // * 创建父亲\r\n // * */\r\n // createParentElementNode() {\r\n // return new ModuleDecoratorWarpNode();\r\n // }\r\n // /**\r\n // * 必须有父亲\r\n // * @returns \r\n // */\r\n // isParentRequired() { return true; }\r\n}\r\n\r\n/**\r\n * 转换隔离节点DOM\r\n * @param node \r\n * @returns \r\n */\r\nconst $covertModuleDecoratorNode = (domNode: HTMLElement): DOMConversion<HTMLElement> | null => {\r\n\r\n try{\r\n \r\n const moduleName = domNode.getAttribute(AttrMarkName);\r\n const moduleHtml = domNode.outerHTML;\r\n\r\n return moduleName ? {\r\n conversion: () => {\r\n return {\r\n node: new ModuleDecoratorNode(moduleName,moduleHtml,domNode.getAttribute(\"class\") || \"\", domNode.getAttribute(\"style\") || \"\")\r\n };\r\n },\r\n priority: 3\r\n } : null;\r\n }\r\n catch(e){\r\n console.log(e)\r\n return null;\r\n }\r\n \r\n}\r\n\r\n\r\n/**\r\n * 判断是否是模块节点\r\n * @param node \r\n * @returns \r\n */\r\nexport function $isModuleDecoratorNode(\r\n node: ModuleDecoratorNode | LexicalNode | null | undefined,\r\n): node is ModuleDecoratorNode {\r\n return node instanceof ModuleDecoratorNode\r\n}\r\n\r\n\r\n// 元素属性列表\r\nconst ElAttrList = [\"src\",\"alt\",\"poster\",\"href\",\"_target\"];\r\n\r\n/**\r\n * 创建 模块 html\r\n * @param template \r\n * @param data \r\n */\r\nexport const createModuleHtml = (template:string,data:any)=>{\r\n\r\n const parser = new DOMParser();\r\n const element = parser.parseFromString(template,\"text/html\")\r\n const list = [element.body];\r\n\r\n Object.keys(data).forEach(key=>{\r\n\r\n for(let i=0;i<list.length;i++){\r\n\r\n const el = list[i];\r\n const val = data[key] as any;\r\n \r\n // 忽略文本节点\r\n if(el.nodeType != 3){\r\n // 属性解析\r\n if(ElAttrList.filter(attr=>el.hasAttribute(`data-${key}-${attr}`)).\r\n some(attr=> el.setAttribute(attr,val))){ break; }\r\n // 文本解析\r\n else if(el.hasAttribute(`data-${key}`)){\r\n el.textContent = val;\r\n break;\r\n }\r\n else if(el.hasAttribute(`data-${key}-html`)){\r\n el.innerHTML = val;\r\n break;\r\n } \r\n }\r\n\r\n // 广域递归\r\n if(el.childNodes.length){\r\n el.childNodes.forEach((sub:any)=>list.push(sub))\r\n }\r\n }\r\n })\r\n\r\n return element.body.innerHTML.replaceAll(/[\\r|\\n|\\r\\n]+/g,\"\")\r\n}\r\n\r\n/**\r\n * 获取模块数据 \r\n * @param template \r\n * @param data \r\n */\r\nexport const getModuleData = (html:string,options:Array<any>)=>{\r\n\r\n\r\n const parser = new DOMParser();\r\n const element = parser.parseFromString(html,\"text/html\")\r\n const list = [element.body];\r\n const data:any = {};\r\n\r\n options.forEach(item=>{\r\n\r\n for(let i=0;i<list.length;i++){\r\n\r\n const el = list[i];\r\n const val = \"\";\r\n\r\n // 忽略文本节点\r\n if(el.nodeType != 3){\r\n // 属性解析\r\n if(ElAttrList.filter(attr=>el.hasAttribute(`data-${item.name}-${attr}`)).\r\n some(attr=> data[item.name] = el.getAttribute(attr))){ break; }\r\n // 文本解析\r\n else if(el.hasAttribute(`data-${item.name}`)){\r\n data[item.name] = el.textContent;\r\n break;\r\n }\r\n // html 解析\r\n else if(el.hasAttribute(`data-${item.name}-html`)){\r\n data[item.name] = el.innerHTML;\r\n break;\r\n } \r\n }\r\n\r\n // 广域递归\r\n if(el.childNodes.length){\r\n el.childNodes.forEach((sub:any)=>list.push(sub))\r\n }\r\n\r\n data[item.name] = val;\r\n }\r\n })\r\n\r\n return { data }\r\n}\r\n"],"names":["createCommand","HtmlElementDecoratorNode"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ModuleDecoratorNode.js","sources":["../../../../../../src/components/basic/lexical-editor/nodes/ModuleDecoratorNode.ts"],"sourcesContent":["\r\nimport {\r\n type DOMConversionMap,\r\n type DOMExportOutput,\r\n type EditorConfig,\r\n type LexicalNode,\r\n type NodeKey,\r\n type Spread,\r\n type LexicalEditor,\r\n type DOMConversion,\r\n type LexicalCommand,\r\n createCommand\r\n} from 'lexical'\r\nimport { Component } from 'vue';\r\nimport { HtmlElementDecoratorNode,SerializedHtmlElementDecoratorNode } from \"./HtmlElementDecoratorNode\"\r\nimport { ModuleDecoratorWarpNode } from './ModuleDecoratorWarpNode';\r\n\r\n\r\n/**\r\n * 属性类型\r\n */\r\nexport type ModulePropType = { name:string,data:object };\r\n\r\n/**\r\n * 插入模块模版块指令\r\n */\r\nexport const INSERT_MODULE_COMMAND: LexicalCommand<ModulePropType> = createCommand('INSERT_MODULE_COMMAND')\r\n\r\n/**\r\n * 节点序列化 \r\n */\r\nexport type SerializedModuleDecoratorNode = Spread<{ moduleName:string,moduleHtml:any }, SerializedHtmlElementDecoratorNode>\r\n\r\n\r\n// 属性标识\r\nexport const AttrMarkName = \"module-name\";\r\n\r\n/**\r\n * 模块\r\n * 会导致\r\n */\r\nexport class ModuleDecoratorNode extends HtmlElementDecoratorNode {\r\n\r\n __moduleName: string\r\n __moduleHtml: string\r\n\r\n\r\n static getType(): string { return \"module\"; }\r\n\r\n static clone(node: ModuleDecoratorNode): ModuleDecoratorNode {\r\n return new ModuleDecoratorNode(node.__moduleName,node.__moduleHtml,node.__class,node.__style,node.__key);\r\n }\r\n\r\n static importJSON(serializedNode: SerializedModuleDecoratorNode): ModuleDecoratorNode {\r\n return new ModuleDecoratorNode(serializedNode.moduleName,serializedNode.moduleHtml,serializedNode.class, serializedNode.style)\r\n }\r\n\r\n static importDOM(): DOMConversionMap | null {\r\n return {\r\n div: $covertModuleDecoratorNode,\r\n section: $covertModuleDecoratorNode,\r\n main : $covertModuleDecoratorNode ,\r\n header : $covertModuleDecoratorNode \r\n }\r\n }\r\n\r\n /**\r\n * \r\n * @param name \r\n * @param data \r\n * @param className \r\n * @param style \r\n * @param key \r\n */\r\n constructor(name:string,html:string,className?: string , style?: string, key?: NodeKey) {\r\n super(\"div\",className,style,key)\r\n this.__moduleName = name;\r\n this.__moduleHtml = html;\r\n }\r\n\r\n /**\r\n * 导出JSON\r\n * @returns \r\n */\r\n exportJSON(): SerializedModuleDecoratorNode {\r\n return {\r\n ...super.exportJSON(),\r\n type: this.getType(),\r\n moduleName:this.__moduleName,\r\n moduleHtml:this.__moduleHtml,\r\n version: 1\r\n }\r\n }\r\n\r\n /**\r\n * 创建渲染DOM\r\n * @param config \r\n * @returns \r\n */\r\n createDOM(config: EditorConfig): HTMLElement {\r\n\r\n const warpEl = super.createDOM(config)\r\n\r\n warpEl.innerHTML = this.__moduleHtml;\r\n\r\n if(warpEl.children.length > 1){\r\n throw new Error(\"定义模块模版的时候请用一个容器将模版内容包裹起来,不能有多个并列的元素!\");\r\n }\r\n\r\n const element = warpEl.children[0] as HTMLElement;\r\n\r\n // 模块名称标识\r\n element.setAttribute(AttrMarkName,this.__moduleName)\r\n element.setAttribute(\"node-key\",this.__key);\r\n\r\n return element;\r\n }\r\n\r\n /**\r\n * 隔离渲染函数\r\n * @param editor \r\n * @param config \r\n * @returns \r\n */\r\n decorate(editor: LexicalEditor, config: EditorConfig): Component | null {\r\n return null;\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: LexicalNode, dom: HTMLElement, config: EditorConfig): boolean {\r\n dom.innerHTML = this.__moduleHtml;\r\n return false;\r\n }\r\n\r\n /**\r\n * 设置 html\r\n * @param html \r\n * @returns \r\n */\r\n setHtml(html:string) {\r\n const self = this.getWritable();\r\n self.__moduleHtml = html || \"\";\r\n return this;\r\n }\r\n // /**\r\n // * 创建父亲\r\n // * */\r\n // createParentElementNode() {\r\n // return new ModuleDecoratorWarpNode();\r\n // }\r\n // /**\r\n // * 必须有父亲\r\n // * @returns \r\n // */\r\n // isParentRequired() { return true; }\r\n}\r\n\r\n/**\r\n * 转换隔离节点DOM\r\n * @param node \r\n * @returns \r\n */\r\nconst $covertModuleDecoratorNode = (domNode: HTMLElement): DOMConversion<HTMLElement> | null => {\r\n\r\n try{\r\n \r\n const moduleName = domNode.getAttribute(AttrMarkName);\r\n const moduleHtml = domNode.outerHTML;\r\n\r\n return moduleName ? {\r\n conversion: () => {\r\n return {\r\n node: new ModuleDecoratorNode(moduleName,moduleHtml,domNode.getAttribute(\"class\") || \"\", domNode.getAttribute(\"style\") || \"\")\r\n };\r\n },\r\n priority: 3\r\n } : null;\r\n }\r\n catch(e){\r\n console.log(e)\r\n return null;\r\n }\r\n \r\n}\r\n\r\n\r\n/**\r\n * 判断是否是模块节点\r\n * @param node \r\n * @returns \r\n */\r\nexport function $isModuleDecoratorNode(\r\n node: ModuleDecoratorNode | LexicalNode | null | undefined,\r\n): node is ModuleDecoratorNode {\r\n return node instanceof ModuleDecoratorNode\r\n}\r\n\r\n\r\n// 元素属性列表\r\nconst ElAttrList = [\"src\",\"alt\",\"poster\",\"href\",\"_target\"];\r\n\r\n/**\r\n * 创建 模块 html\r\n * @param template \r\n * @param data \r\n */\r\nexport const createModuleHtml = (template:string,data:any)=>{\r\n\r\n const parser = new DOMParser();\r\n const element = parser.parseFromString(template,\"text/html\")\r\n const list = [element.body];\r\n\r\n Object.keys(data).forEach(key=>{\r\n\r\n for(let i=0;i<list.length;i++){\r\n\r\n const el = list[i];\r\n const val = data[key] as any;\r\n \r\n // 忽略文本节点\r\n if(el.nodeType != 3){\r\n // 属性解析\r\n if(ElAttrList.filter(attr=>el.hasAttribute(`data-${key}-${attr}`)).\r\n some(attr=> el.setAttribute(attr,val))){ break; }\r\n // 文本解析\r\n else if(el.hasAttribute(`data-${key}`)){\r\n el.textContent = val;\r\n break;\r\n }\r\n else if(el.hasAttribute(`data-${key}-html`)){\r\n el.innerHTML = val;\r\n break;\r\n } \r\n }\r\n\r\n // 广域递归\r\n if(el.childNodes.length){\r\n el.childNodes.forEach((sub:any)=>list.push(sub))\r\n }\r\n }\r\n })\r\n\r\n return element.body.innerHTML.replaceAll(/[\\r|\\n|\\r\\n]+/g,\"\")\r\n}\r\n\r\n/**\r\n * 获取模块数据 \r\n * @param template \r\n * @param data \r\n */\r\nexport const getModuleData = (html:string,options:Array<any>)=>{\r\n\r\n\r\n const parser = new DOMParser();\r\n const element = parser.parseFromString(html,\"text/html\")\r\n const list = [element.body];\r\n const data:any = {};\r\n\r\n options.forEach(item=>{\r\n\r\n for(let i=0;i<list.length;i++){\r\n\r\n const el = list[i];\r\n const val = \"\";\r\n\r\n // 忽略文本节点\r\n if(el.nodeType != 3){\r\n // 属性解析\r\n if(ElAttrList.filter(attr=>el.hasAttribute(`data-${item.name}-${attr}`)).\r\n some(attr=> data[item.name] = el.getAttribute(attr))){ break; }\r\n // 文本解析\r\n else if(el.hasAttribute(`data-${item.name}`)){\r\n data[item.name] = el.textContent;\r\n break;\r\n }\r\n // html 解析\r\n else if(el.hasAttribute(`data-${item.name}-html`)){\r\n data[item.name] = el.innerHTML;\r\n break;\r\n } \r\n }\r\n\r\n // 广域递归\r\n if(el.childNodes.length){\r\n el.childNodes.forEach((sub:any)=>list.push(sub))\r\n }\r\n\r\n data[item.name] = val;\r\n }\r\n })\r\n\r\n return data\r\n}\r\n"],"names":["createCommand","HtmlElementDecoratorNode"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModuleDecoratorNode.js","sources":["../../../../../../src/components/basic/lexical-editor/nodes/ModuleDecoratorNode.ts"],"sourcesContent":["\r\nimport {\r\n type DOMConversionMap,\r\n type DOMExportOutput,\r\n type EditorConfig,\r\n type LexicalNode,\r\n type NodeKey,\r\n type Spread,\r\n type LexicalEditor,\r\n type DOMConversion,\r\n type LexicalCommand,\r\n createCommand\r\n} from 'lexical'\r\nimport { Component } from 'vue';\r\nimport { HtmlElementDecoratorNode,SerializedHtmlElementDecoratorNode } from \"./HtmlElementDecoratorNode\"\r\nimport { ModuleDecoratorWarpNode } from './ModuleDecoratorWarpNode';\r\n\r\n\r\n/**\r\n * 属性类型\r\n */\r\nexport type ModulePropType = { name:string,data:object };\r\n\r\n/**\r\n * 插入模块模版块指令\r\n */\r\nexport const INSERT_MODULE_COMMAND: LexicalCommand<ModulePropType> = createCommand('INSERT_MODULE_COMMAND')\r\n\r\n/**\r\n * 节点序列化 \r\n */\r\nexport type SerializedModuleDecoratorNode = Spread<{ moduleName:string,moduleHtml:any }, SerializedHtmlElementDecoratorNode>\r\n\r\n\r\n// 属性标识\r\nexport const AttrMarkName = \"module-name\";\r\n\r\n/**\r\n * 模块\r\n * 会导致\r\n */\r\nexport class ModuleDecoratorNode extends HtmlElementDecoratorNode {\r\n\r\n __moduleName: string\r\n __moduleHtml: string\r\n\r\n\r\n static getType(): string { return \"module\"; }\r\n\r\n static clone(node: ModuleDecoratorNode): ModuleDecoratorNode {\r\n return new ModuleDecoratorNode(node.__moduleName,node.__moduleHtml,node.__class,node.__style,node.__key);\r\n }\r\n\r\n static importJSON(serializedNode: SerializedModuleDecoratorNode): ModuleDecoratorNode {\r\n return new ModuleDecoratorNode(serializedNode.moduleName,serializedNode.moduleHtml,serializedNode.class, serializedNode.style)\r\n }\r\n\r\n static importDOM(): DOMConversionMap | null {\r\n return {\r\n div: $covertModuleDecoratorNode,\r\n section: $covertModuleDecoratorNode,\r\n main : $covertModuleDecoratorNode ,\r\n header : $covertModuleDecoratorNode \r\n }\r\n }\r\n\r\n /**\r\n * \r\n * @param name \r\n * @param data \r\n * @param className \r\n * @param style \r\n * @param key \r\n */\r\n constructor(name:string,html:string,className?: string , style?: string, key?: NodeKey) {\r\n super(\"div\",className,style,key)\r\n this.__moduleName = name;\r\n this.__moduleHtml = html;\r\n }\r\n\r\n /**\r\n * 导出JSON\r\n * @returns \r\n */\r\n exportJSON(): SerializedModuleDecoratorNode {\r\n return {\r\n ...super.exportJSON(),\r\n type: this.getType(),\r\n moduleName:this.__moduleName,\r\n moduleHtml:this.__moduleHtml,\r\n version: 1\r\n }\r\n }\r\n\r\n /**\r\n * 创建渲染DOM\r\n * @param config \r\n * @returns \r\n */\r\n createDOM(config: EditorConfig): HTMLElement {\r\n\r\n const warpEl = super.createDOM(config)\r\n\r\n warpEl.innerHTML = this.__moduleHtml;\r\n\r\n if(warpEl.children.length > 1){\r\n throw new Error(\"定义模块模版的时候请用一个容器将模版内容包裹起来,不能有多个并列的元素!\");\r\n }\r\n\r\n const element = warpEl.children[0] as HTMLElement;\r\n\r\n // 模块名称标识\r\n element.setAttribute(AttrMarkName,this.__moduleName)\r\n element.setAttribute(\"node-key\",this.__key);\r\n\r\n return element;\r\n }\r\n\r\n /**\r\n * 隔离渲染函数\r\n * @param editor \r\n * @param config \r\n * @returns \r\n */\r\n decorate(editor: LexicalEditor, config: EditorConfig): Component | null {\r\n return null;\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: LexicalNode, dom: HTMLElement, config: EditorConfig): boolean {\r\n dom.innerHTML = this.__moduleHtml;\r\n return false;\r\n }\r\n\r\n /**\r\n * 设置 html\r\n * @param html \r\n * @returns \r\n */\r\n setHtml(html:string) {\r\n const self = this.getWritable();\r\n self.__moduleHtml = html || \"\";\r\n return this;\r\n }\r\n // /**\r\n // * 创建父亲\r\n // * */\r\n // createParentElementNode() {\r\n // return new ModuleDecoratorWarpNode();\r\n // }\r\n // /**\r\n // * 必须有父亲\r\n // * @returns \r\n // */\r\n // isParentRequired() { return true; }\r\n}\r\n\r\n/**\r\n * 转换隔离节点DOM\r\n * @param node \r\n * @returns \r\n */\r\nconst $covertModuleDecoratorNode = (domNode: HTMLElement): DOMConversion<HTMLElement> | null => {\r\n\r\n try{\r\n \r\n const moduleName = domNode.getAttribute(AttrMarkName);\r\n const moduleHtml = domNode.outerHTML;\r\n\r\n return moduleName ? {\r\n conversion: () => {\r\n return {\r\n node: new ModuleDecoratorNode(moduleName,moduleHtml,domNode.getAttribute(\"class\") || \"\", domNode.getAttribute(\"style\") || \"\")\r\n };\r\n },\r\n priority: 3\r\n } : null;\r\n }\r\n catch(e){\r\n console.log(e)\r\n return null;\r\n }\r\n \r\n}\r\n\r\n\r\n/**\r\n * 判断是否是模块节点\r\n * @param node \r\n * @returns \r\n */\r\nexport function $isModuleDecoratorNode(\r\n node: ModuleDecoratorNode | LexicalNode | null | undefined,\r\n): node is ModuleDecoratorNode {\r\n return node instanceof ModuleDecoratorNode\r\n}\r\n\r\n\r\n// 元素属性列表\r\nconst ElAttrList = [\"src\",\"alt\",\"poster\",\"href\",\"_target\"];\r\n\r\n/**\r\n * 创建 模块 html\r\n * @param template \r\n * @param data \r\n */\r\nexport const createModuleHtml = (template:string,data:any)=>{\r\n\r\n const parser = new DOMParser();\r\n const element = parser.parseFromString(template,\"text/html\")\r\n const list = [element.body];\r\n\r\n Object.keys(data).forEach(key=>{\r\n\r\n for(let i=0;i<list.length;i++){\r\n\r\n const el = list[i];\r\n const val = data[key] as any;\r\n \r\n // 忽略文本节点\r\n if(el.nodeType != 3){\r\n // 属性解析\r\n if(ElAttrList.filter(attr=>el.hasAttribute(`data-${key}-${attr}`)).\r\n some(attr=> el.setAttribute(attr,val))){ break; }\r\n // 文本解析\r\n else if(el.hasAttribute(`data-${key}`)){\r\n el.textContent = val;\r\n break;\r\n }\r\n else if(el.hasAttribute(`data-${key}-html`)){\r\n el.innerHTML = val;\r\n break;\r\n } \r\n }\r\n\r\n // 广域递归\r\n if(el.childNodes.length){\r\n el.childNodes.forEach((sub:any)=>list.push(sub))\r\n }\r\n }\r\n })\r\n\r\n return element.body.innerHTML.replaceAll(/[\\r|\\n|\\r\\n]+/g,\"\")\r\n}\r\n\r\n/**\r\n * 获取模块数据 \r\n * @param template \r\n * @param data \r\n */\r\nexport const getModuleData = (html:string,options:Array<any>)=>{\r\n\r\n\r\n const parser = new DOMParser();\r\n const element = parser.parseFromString(html,\"text/html\")\r\n const list = [element.body];\r\n const data:any = {};\r\n\r\n options.forEach(item=>{\r\n\r\n for(let i=0;i<list.length;i++){\r\n\r\n const el = list[i];\r\n const val = \"\";\r\n\r\n // 忽略文本节点\r\n if(el.nodeType != 3){\r\n // 属性解析\r\n if(ElAttrList.filter(attr=>el.hasAttribute(`data-${item.name}-${attr}`)).\r\n some(attr=> data[item.name] = el.getAttribute(attr))){ break; }\r\n // 文本解析\r\n else if(el.hasAttribute(`data-${item.name}`)){\r\n data[item.name] = el.textContent;\r\n break;\r\n }\r\n // html 解析\r\n else if(el.hasAttribute(`data-${item.name}-html`)){\r\n data[item.name] = el.innerHTML;\r\n break;\r\n } \r\n }\r\n\r\n // 广域递归\r\n if(el.childNodes.length){\r\n el.childNodes.forEach((sub:any)=>list.push(sub))\r\n }\r\n\r\n data[item.name] = val;\r\n }\r\n })\r\n\r\n return { data }\r\n}\r\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ModuleDecoratorNode.js","sources":["../../../../../../src/components/basic/lexical-editor/nodes/ModuleDecoratorNode.ts"],"sourcesContent":["\r\nimport {\r\n type DOMConversionMap,\r\n type DOMExportOutput,\r\n type EditorConfig,\r\n type LexicalNode,\r\n type NodeKey,\r\n type Spread,\r\n type LexicalEditor,\r\n type DOMConversion,\r\n type LexicalCommand,\r\n createCommand\r\n} from 'lexical'\r\nimport { Component } from 'vue';\r\nimport { HtmlElementDecoratorNode,SerializedHtmlElementDecoratorNode } from \"./HtmlElementDecoratorNode\"\r\nimport { ModuleDecoratorWarpNode } from './ModuleDecoratorWarpNode';\r\n\r\n\r\n/**\r\n * 属性类型\r\n */\r\nexport type ModulePropType = { name:string,data:object };\r\n\r\n/**\r\n * 插入模块模版块指令\r\n */\r\nexport const INSERT_MODULE_COMMAND: LexicalCommand<ModulePropType> = createCommand('INSERT_MODULE_COMMAND')\r\n\r\n/**\r\n * 节点序列化 \r\n */\r\nexport type SerializedModuleDecoratorNode = Spread<{ moduleName:string,moduleHtml:any }, SerializedHtmlElementDecoratorNode>\r\n\r\n\r\n// 属性标识\r\nexport const AttrMarkName = \"module-name\";\r\n\r\n/**\r\n * 模块\r\n * 会导致\r\n */\r\nexport class ModuleDecoratorNode extends HtmlElementDecoratorNode {\r\n\r\n __moduleName: string\r\n __moduleHtml: string\r\n\r\n\r\n static getType(): string { return \"module\"; }\r\n\r\n static clone(node: ModuleDecoratorNode): ModuleDecoratorNode {\r\n return new ModuleDecoratorNode(node.__moduleName,node.__moduleHtml,node.__class,node.__style,node.__key);\r\n }\r\n\r\n static importJSON(serializedNode: SerializedModuleDecoratorNode): ModuleDecoratorNode {\r\n return new ModuleDecoratorNode(serializedNode.moduleName,serializedNode.moduleHtml,serializedNode.class, serializedNode.style)\r\n }\r\n\r\n static importDOM(): DOMConversionMap | null {\r\n return {\r\n div: $covertModuleDecoratorNode,\r\n section: $covertModuleDecoratorNode,\r\n main : $covertModuleDecoratorNode ,\r\n header : $covertModuleDecoratorNode \r\n }\r\n }\r\n\r\n /**\r\n * \r\n * @param name \r\n * @param data \r\n * @param className \r\n * @param style \r\n * @param key \r\n */\r\n constructor(name:string,html:string,className?: string , style?: string, key?: NodeKey) {\r\n super(\"div\",className,style,key)\r\n this.__moduleName = name;\r\n this.__moduleHtml = html;\r\n }\r\n\r\n /**\r\n * 导出JSON\r\n * @returns \r\n */\r\n exportJSON(): SerializedModuleDecoratorNode {\r\n return {\r\n ...super.exportJSON(),\r\n type: this.getType(),\r\n moduleName:this.__moduleName,\r\n moduleHtml:this.__moduleHtml,\r\n version: 1\r\n }\r\n }\r\n\r\n /**\r\n * 创建渲染DOM\r\n * @param config \r\n * @returns \r\n */\r\n createDOM(config: EditorConfig): HTMLElement {\r\n\r\n const warpEl = super.createDOM(config)\r\n\r\n warpEl.innerHTML = this.__moduleHtml;\r\n\r\n if(warpEl.children.length > 1){\r\n throw new Error(\"定义模块模版的时候请用一个容器将模版内容包裹起来,不能有多个并列的元素!\");\r\n }\r\n\r\n const element = warpEl.children[0] as HTMLElement;\r\n\r\n // 模块名称标识\r\n element.setAttribute(AttrMarkName,this.__moduleName)\r\n element.setAttribute(\"node-key\",this.__key);\r\n\r\n return element;\r\n }\r\n\r\n /**\r\n * 隔离渲染函数\r\n * @param editor \r\n * @param config \r\n * @returns \r\n */\r\n decorate(editor: LexicalEditor, config: EditorConfig): Component | null {\r\n return null;\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: LexicalNode, dom: HTMLElement, config: EditorConfig): boolean {\r\n dom.innerHTML = this.__moduleHtml;\r\n return false;\r\n }\r\n\r\n /**\r\n * 设置 html\r\n * @param html \r\n * @returns \r\n */\r\n setHtml(html:string) {\r\n const self = this.getWritable();\r\n self.__moduleHtml = html || \"\";\r\n return this;\r\n }\r\n // /**\r\n // * 创建父亲\r\n // * */\r\n // createParentElementNode() {\r\n // return new ModuleDecoratorWarpNode();\r\n // }\r\n // /**\r\n // * 必须有父亲\r\n // * @returns \r\n // */\r\n // isParentRequired() { return true; }\r\n}\r\n\r\n/**\r\n * 转换隔离节点DOM\r\n * @param node \r\n * @returns \r\n */\r\nconst $covertModuleDecoratorNode = (domNode: HTMLElement): DOMConversion<HTMLElement> | null => {\r\n\r\n try{\r\n \r\n const moduleName = domNode.getAttribute(AttrMarkName);\r\n const moduleHtml = domNode.outerHTML;\r\n\r\n return moduleName ? {\r\n conversion: () => {\r\n return {\r\n node: new ModuleDecoratorNode(moduleName,moduleHtml,domNode.getAttribute(\"class\") || \"\", domNode.getAttribute(\"style\") || \"\")\r\n };\r\n },\r\n priority: 3\r\n } : null;\r\n }\r\n catch(e){\r\n console.log(e)\r\n return null;\r\n }\r\n \r\n}\r\n\r\n\r\n/**\r\n * 判断是否是模块节点\r\n * @param node \r\n * @returns \r\n */\r\nexport function $isModuleDecoratorNode(\r\n node: ModuleDecoratorNode | LexicalNode | null | undefined,\r\n): node is ModuleDecoratorNode {\r\n return node instanceof ModuleDecoratorNode\r\n}\r\n\r\n\r\n// 元素属性列表\r\nconst ElAttrList = [\"src\",\"alt\",\"poster\",\"href\",\"_target\"];\r\n\r\n/**\r\n * 创建 模块 html\r\n * @param template \r\n * @param data \r\n */\r\nexport const createModuleHtml = (template:string,data:any)=>{\r\n\r\n const parser = new DOMParser();\r\n const element = parser.parseFromString(template,\"text/html\")\r\n const list = [element.body];\r\n\r\n Object.keys(data).forEach(key=>{\r\n\r\n for(let i=0;i<list.length;i++){\r\n\r\n const el = list[i];\r\n const val = data[key] as any;\r\n \r\n // 忽略文本节点\r\n if(el.nodeType != 3){\r\n // 属性解析\r\n if(ElAttrList.filter(attr=>el.hasAttribute(`data-${key}-${attr}`)).\r\n some(attr=> el.setAttribute(attr,val))){ break; }\r\n // 文本解析\r\n else if(el.hasAttribute(`data-${key}`)){\r\n el.textContent = val;\r\n break;\r\n }\r\n else if(el.hasAttribute(`data-${key}-html`)){\r\n el.innerHTML = val;\r\n break;\r\n } \r\n }\r\n\r\n // 广域递归\r\n if(el.childNodes.length){\r\n el.childNodes.forEach((sub:any)=>list.push(sub))\r\n }\r\n }\r\n })\r\n\r\n return element.body.innerHTML.replaceAll(/[\\r|\\n|\\r\\n]+/g,\"\")\r\n}\r\n\r\n/**\r\n * 获取模块数据 \r\n * @param template \r\n * @param data \r\n */\r\nexport const getModuleData = (html:string,options:Array<any>)=>{\r\n\r\n\r\n const parser = new DOMParser();\r\n const element = parser.parseFromString(html,\"text/html\")\r\n const list = [element.body];\r\n const data:any = {};\r\n\r\n options.forEach(item=>{\r\n\r\n for(let i=0;i<list.length;i++){\r\n\r\n const el = list[i];\r\n const val = \"\";\r\n\r\n // 忽略文本节点\r\n if(el.nodeType != 3){\r\n // 属性解析\r\n if(ElAttrList.filter(attr=>el.hasAttribute(`data-${item.name}-${attr}`)).\r\n some(attr=> data[item.name] = el.getAttribute(attr))){ break; }\r\n // 文本解析\r\n else if(el.hasAttribute(`data-${item.name}`)){\r\n data[item.name] = el.textContent;\r\n break;\r\n }\r\n // html 解析\r\n else if(el.hasAttribute(`data-${item.name}-html`)){\r\n data[item.name] = el.innerHTML;\r\n break;\r\n } \r\n }\r\n\r\n // 广域递归\r\n if(el.childNodes.length){\r\n el.childNodes.forEach((sub:any)=>list.push(sub))\r\n }\r\n\r\n data[item.name] = val;\r\n }\r\n })\r\n\r\n return data\r\n}\r\n"],"names":[],"mappings":"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"}
|
|
@@ -90,6 +90,4 @@ export declare const createModuleHtml: (template: string, data: any) => string;
|
|
|
90
90
|
* @param template
|
|
91
91
|
* @param data
|
|
92
92
|
*/
|
|
93
|
-
export declare const getModuleData: (html: string, options: Array<any>) =>
|
|
94
|
-
data: any;
|
|
95
|
-
};
|
|
93
|
+
export declare const getModuleData: (html: string, options: Array<any>) => any;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@maketribe/ms-app",
|
|
3
|
-
"version": "3.2.
|
|
3
|
+
"version": "3.2.45",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/cjs",
|
|
6
6
|
"module": "dist/esm",
|
|
@@ -51,8 +51,8 @@
|
|
|
51
51
|
"vue-cropper": "^1.1.4",
|
|
52
52
|
"vue-router": "^4.2.4",
|
|
53
53
|
"@maketribe/dm": "^3.2.12",
|
|
54
|
-
"@maketribe/utils": "^3.2.1",
|
|
55
54
|
"@maketribe/request": "^3.2.4",
|
|
55
|
+
"@maketribe/utils": "^3.2.1",
|
|
56
56
|
"@maketribe/locale": "^3.2.0"
|
|
57
57
|
},
|
|
58
58
|
"devDependencies": {
|