From a7d4942e57ebf43344fe386b49a425f585fb25e5 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Tue, 21 May 2024 14:44:38 +0400
Subject: [PATCH] Add support for parsing properly `<template>` elements.
 Closes #5857

---
 src/parser/model/ParserHtml.ts        |  4 ++--
 test/specs/parser/model/ParserHtml.ts | 28 +++++++++++++++++++++++++++
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/parser/model/ParserHtml.ts b/src/parser/model/ParserHtml.ts
index b30525a32b..f91e3ac954 100644
--- 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
index 4b917ea986..ca619f1859 100644
--- 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"/>';