Do not remove HTML comment

[SwithFr]

Whene you put some content to edit with grapesjs, the editor remove all HTML comment like <!--[if !mso]><!-- --> so it's impossible to create good responsive template.

Can you fix that behavior ?

[IceCrystal0k]

Use the grapesjs-preset-mjml for responsive templates. It's quite good for that.

Yet i still need the comments for a template engine, to hide the conditions and loops.

[IceCrystal0k]

Found it on grapesjs issues. To preserve html comments, create a new component, compile it and include it in the grapesjs. This way, all html comments will be kept. [el.nodeType == 8 -> COMMENT_NODE ]

export default function(editor, opt = {}) {
const c = opt;
const domc = editor.DomComponents;
var textnodeType = domc.getType('textnode');
domc.addType('html-comment', {
      model: textnodeType.model.extend({
        toHTML() {
          return `<!--${this.get('content')}-->`;
        },
      },{
        isComponent(el) {
          if (el.nodeType == 8) {
            return {
              tagName: 'NULL', // just need this to avoid some parser rule
              type: 'html-comment',
              content: el.textContent
            }
          }
        },
      }),
      view: textnodeType.view,
    });
}

[jereddanielson]

@IceCrystal0k when you say "include it in the grapejs" do you mean as a plugin? Could you give an example? I too am running into this issue. Thanks!

[jereddanielson]

I see, you simply run that function with the editor instance as the argument and it will add the HTML comment node type to the dom components? Thanks!

[IceCrystal0k]

You can either create a component with the code above and add it in the plugin list when you initialize grapes. You gonna need node js to compile the component.

Or you could use it directly in your code, after initializing the editor, passing the editor as an argument. In this case just give a name to the function, instead of exporting it.

[ghost]

@artf could you advice in here ?

This is mandatory behaviour to keep HTML comments within email HTML body. Otherwise, outlook will not show our template properly.

@IceCrystal0k your solution works when getting HTML body, but when email is being edited in Grapes - it shows up without comments.

[artf]

This is mandatory behaviour to keep HTML comments within email HTML body. Otherwise, outlook will not show our template properly.

Yes, the comment node is not included by default.

your solution works when getting HTML body, but when email is being edited in Grapes - it shows up without comments.

I don't get it

[alxcas1]

Hello and thank you for this really nice editor which is Grapejs.

I'm using it with grapejs newsletter and have the same issue as @SwithFr and the conditional comment tag in the editor.

We try to implement the component mentioned above and it works well but in the edition mode, all the comments are displayed.

I didn't found if a commit is plan to let grapejs editor read the conditional comment tag or if someone can help on fixing that displaying comment bug.

Thank you all !

[artf]

Closing as the comment component was introduced in the core long time ago