Add support for parsing properly <template> elements. Closes Grapes…

…JS#5857
lexoyo · May 21, 2024 · a7d4942 · a7d4942
1 parent 88c6d22
commit a7d4942
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 2 deletions.
diff --git a/src/parser/model/ParserHtml.ts b/src/parser/model/ParserHtml.ts
@@ -192,7 +192,7 @@ const ParserHtml = (em?: EditorModel, config: ParserConfig & { returnArray?: boo
     },
 
     parseNode(node: HTMLElement, opts: ParseNodeOptions = {}) {
-      const nodes = node.childNodes;
+      const nodes = (node as HTMLTemplateElement).content?.childNodes || node.childNodes;
       const nodesLen = nodes.length;
       let model = this.detectNode(node, opts);
 
@@ -267,7 +267,7 @@ const ParserHtml = (em?: EditorModel, config: ParserConfig & { returnArray?: boo
      */
     parseNodes(el: HTMLElement, opts: ParseNodeOptions = {}) {
       const result: ComponentDefinitionDefined[] = [];
-      const nodes = el.childNodes;
+      const nodes = (el as HTMLTemplateElement).content?.childNodes || el.childNodes;
       const nodesLen = nodes.length;
 
       for (let i = 0; i < nodesLen; i++) {

diff --git a/test/specs/parser/model/ParserHtml.ts b/test/specs/parser/model/ParserHtml.ts
@@ -599,6 +599,34 @@ describe('ParserHtml', () => {
     expect(obj.parse(str).html).toEqual(result);
   });
 
+  test('<template> with content is properly parsed', () => {
+    const str = `<template class="test">
+      <tr>
+        <td>Cell</td>
+      </tr>
+    </template>`;
+    const result = [
+      {
+        tagName: 'template',
+        classes: ['test'],
+        components: [
+          {
+            type: 'row',
+            tagName: 'tr',
+            components: [
+              {
+                type: 'cell',
+                tagName: 'td',
+                components: { type: 'textnode', content: 'Cell' },
+              },
+            ],
+          },
+        ],
+      },
+    ];
+    expect(obj.parse(str).html).toEqual(result);
+  });
+
   describe('Options', () => {
     test('Remove unsafe attributes', () => {
       const str = '<img src="path/img" data-test="1" class="test" onload="unsafe"/>';