When rendering <tr> tags inside <template> tags, tags are trimmed off and only string content is remained.

[hasan-aa]

GrapesJS version

• I confirm to use the latest version of GrapesJS

What browser are you using?

Chrome v121

Reproducible demo link

https://jsfiddle.net/L27powtg/30/ (the fix it also there, commented out)

Describe the bug

How to reproduce the bug?

1. Create a custom GJS component for template tags as explained here: custom competent <template> missing inner html when creating a block with it #244 (comment)
2. Add a template component that has a table row as a child. eg:

<template><tr><td>Cell content</td></tr></template>

4. check the result of editor.toHTML().

What is the expected behavior?
The result of toHTML should not trim of the tr, td tags.

What is the current behavior?
resulting html string is missing the tr, td tags.

If is necessary to execute some code in order to reproduce the bug, paste it here below:

let comp = editor.DomComponents.addComponent('<template><tr><td>Cell content </td></tr></template>')	
alert(comp.toHTML())

I've implemented a fix for this as a custom parserHtml function. This can be integrated in BrowserParserHtml.ts file if that makes sense.

Actually DOMParser is trimming of the tags as it considers a tr tag invalid as a root tag.
Wrapping the content in a template tag makes it a valid HTML again and no trimming happens. This would probably fix most if not all similar issues:

parserHtml(input, options) {
      const template = document.createElement('template');
      template.innerHTML = input;
      return template.content;
    }

Thanks for this great tool by the way!

Code of Conduct

• I agree to follow this project's Code of Conduct