Allow comment Components in Text. Fixes #5657

src/dom_components/model/ComponentComment.ts

@@ -13,7 +13,6 @@ export default class ComponentComment extends ComponentTextNode {
   static isComponent(el: HTMLElement) {
     if (el.nodeType == 8) {
       return {
-        tagName: 'NULL',
         type: 'comment',
         content: el.textContent ?? '',
       };

src/parser/config/config.ts

@@ -46,6 +46,12 @@ export interface ParserConfig {
    */
   textTags?: string[];
 
+  /**
+   * Let the editor know which Component types should be treated as part of the text component.
+   * @default ['text', 'textnode', 'comment']
+   */
+  textTypes?: string[];
+
   /**
    * Custom CSS parser.
    * @see https://grapesjs.com/docs/guides/Custom-CSS-parser.html
@@ -71,6 +77,7 @@ export interface ParserConfig {
 
 const config: ParserConfig = {
   textTags: ['br', 'b', 'i', 'u', 'a', 'ul', 'ol'],
+  textTypes: ['text', 'textnode', 'comment'],
   parserCss: undefined,
   parserHtml: undefined,
   optionsHtml: {

src/parser/model/ParserHtml.ts

@@ -260,6 +260,7 @@ const ParserHtml = (em?: EditorModel, config: ParserConfig & { returnArray?: boo
         // be text too otherwise I'm unable to edit texnodes
         const comps = model.components;
         if (!model.type && comps) {
+          const { textTypes = [], textTags = [] } = config;
           let allTxt = 1;
           let foundTextNode = 0;
 
@@ -267,7 +268,7 @@ const ParserHtml = (em?: EditorModel, config: ParserConfig & { returnArray?: boo
             const comp = comps[ci];
             const cType = comp.type;
 
-            if (['text', 'textnode'].indexOf(cType) < 0 && config.textTags!.indexOf(comp.tagName) < 0) {
+            if (!textTypes.includes(cType) && !textTags.includes(comp.tagName)) {
               allTxt = 0;
               break;
             }
@@ -283,7 +284,7 @@ const ParserHtml = (em?: EditorModel, config: ParserConfig & { returnArray?: boo
         }
 
         // If tagName is still empty and is not a textnode, do not push it
-        if (!model.tagName && model.type != 'textnode') {
+        if (!model.tagName && isUndefined(model.content)) {
           continue;
         }
 

test/specs/parser/model/ParserHtml.ts

@@ -12,6 +12,7 @@ describe('ParserHtml', () => {
     var dom = new DomComponents(em);
     obj = ParserHtml(em, {
       textTags: ['br', 'b', 'i', 'u'],
+      textTypes: ['text', 'textnode', 'comment'],
       returnArray: true,
     });
     obj.compTypes = dom.componentTypes as any;
@@ -267,6 +268,36 @@ describe('ParserHtml', () => {
     expect(obj.parse(str).html).toEqual(result);
   });
 
+  test('Parse text with few text tags and comment', () => {
+    var str = '<div id="test1">Some text <br/><!-- comment --><b>Bold</b></div>';
+    var result = [
+      {
+        tagName: 'div',
+        attributes: { id: 'test1' },
+        type: 'text',
+        components: [
+          {
+            content: 'Some text ',
+            type: 'textnode',
+            tagName: '',
+          },
+          { tagName: 'br' },
+          {
+            content: ' comment ',
+            type: 'comment',
+            tagName: '',
+          },
+          {
+            components: { type: 'textnode', content: 'Bold' },
+            type: 'text',
+            tagName: 'b',
+          },
+        ],
+      },
+    ];
+    expect(obj.parse(str).html).toEqual(result);
+  });
+
   test('Parse nested nodes', () => {
     var str =
       '<article id="test1">   <div></div> <footer id="test2"></footer>  Text mid <div id="last"></div></article>';