While editing the template, conditional comment removed by auto rendering but works when we try to import and save

function email_editor(id) {
 ShowProg();
 $.getJSON(hostname + 'source/data.php', function (gjs_images) {
  HideProg();
  localStorage.clear();
  var cid = 'gjs';
  var content = $('#' + id).val();
  if (typeof tinymce != 'undefined') {
   if (tinymce.get(id) != null) {
    content = tinymce.get(id).getContent();
   }
  }

  var wrapperStyle = '';
  if (content) {
   var c = $(content),
           wrapperId = c.attr('id');
   if (wrapperId == 'wrapper') {
    wrapperStyle = c.attr('style');
    content = c[0].innerHTML;
   }
  }
  
  var ws = wrapperStyle.split(';');

  $('body').addClass('gjs-overflow').append('<div id="' + cid + '" style="height: 0px; overflow: hidden;">' +
          content +
          '\n <style>' +
          //'#wrapper { ' + wrapperStyle + ' }\n ' +
          '.container {\n width: 600px; margin: 0 auto;\n }\n ' +
          '.button {\n font-size: 20px;\n padding: 10px 25px;\n background-color: #673AB7;\n color: #fff;\n text-align: center;\n border-radius: 4px;\n font-weight: 300; \n display: inline-block; margin: 10px;\n }\n ' +
          '.list-item {\n height: auto;\n width: 100%;\n margin: 0 auto 10px auto;\n padding: 5px;\n }\n ' +
          '.list-item-cell {\n background-color: rgb(255, 255, 255);\n border-radius: 3px;\n overflow: hidden;\n padding: 0;\n }\n ' +
          '.list-cell-left {\n width: 30%;\n padding: 0;\n display: inline-block;\n }\n ' +
          '.list-cell-right {\n width: 70%;\n color: rgb(111, 119, 125);\n font-size: 13px;\n line-height: 20px;\n padding: 10px 20px 0px 20px;\n display: inline-block;\n vertical-align: top;\n }\n ' +
          '.list-item-content {\n border-collapse: collapse;\n margin: 0 auto;\n padding: 5px;\n width: 100%;\n }\n ' +
          '.list-item-image {\n color: rgb(217, 131, 166);\n font-size: 45px;\n width: 100%;\n }\n ' +
          '.grid-item-image {\n line-height: 150px;\n font-size: 50px;\n color: rgb(120, 197, 214);\n margin-bottom: 15px;\n width: 100%;\n }' +
          '.grid-item-row {\n margin: 0 auto 10px;\n padding: 5px 0;\n width: 100%;\n }\n ' +
          '.grid-item-card {\n width: 100%;\n padding: 5px 0;\n margin-bottom: 10px;\n }\n ' +
          '.grid-item-card-cell {\n background-color:rgb(255, 255, 255);\n overflow: hidden;\n border-radius: 3px;\n text-align: center;\n padding: 0;\n }\n ' +
          '.grid-item-card-content {\n font-size: 13px;\n color: rgb(111, 119, 125);\n padding: 0 10px 20px 10px;\n width: 100%;\n line-height: 20px;\n }\n ' +
          '.grid-item-cell2-l {\n vertical-align: top;\n padding-right: 10px;\n width: 50%;\n display: inline-block;\n }\n ' +
          '.grid-item-cell2-r {\n vertical-align: top;\n padding-left: 10px;\n width: 50%;\n display: inline-block;\n }\n ' +
          'img {\n width: 100%;\n }\n ' +
          '.form-control{display: block; width: 100%; padding: .5rem .75rem; font-size: 1rem; line-height: 1.25; color: #55595c; background-color: #fff; background-image: none; -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid rgba(0,0,0,.15); border-radius: .25rem;}\n ' +
          '.form-group { position: relative; margin-bottom: 1rem; }\n ' +
          '.input-group { position: relative; width: 100%; display: table; border-collapse: separate; }\n ' +
          '.input-group-addon { display: table-cell; padding: .5rem .75rem; margin-bottom: 0; font-size: 1rem; font-weight: 400; line-height: 1.25; color: #55595c; text-align: center; background-color: #eceeef; border: 1px solid rgba(0,0,0,.15); border-radius: .25rem; }\n ' +
          '.btn { display: inline-block; font-weight: 400; line-height: 1.25; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: 1px solid transparent; padding: .5rem 1rem; font-size: 1rem; border-radius: .25rem; } \n' +
          '.btn-primary { background-color: #3662b1; color:#fff; } \n' +
          '</style>' +
          '</div>');
  // Set up GrapesJS editor with the Newsletter plugin
  
  editor = grapesjs.init({
   autorender: true,
   clearOnRender: true,
   height: '100%',
   storageManager: {
    id: 'gjs-nl-',
   },
   assetManager: {
    assets: gjs_images,
    upload: hostname + 'source/upload.php'
   },
   container: '#' + cid,
   fromElement: true,
   plugins: ['gjs-preset-newsletter', 'gjs-plugin-ckeditor', 'html-block','gjs-blocks-basic'], //, 'gjs-aviary'
   pluginsOpts: {
    'gjs-preset-newsletter': {
     modalLabelImport: 'Paste all your code here below and click import',
     modalLabelExport: 'Copy the code and use it wherever you want',
     codeViewerTheme: 'material',
     importPlaceholder: '',
    }, 'gjs-plugin-ckeditor': {
     position: 'center',
     options: {
      startupFocus: true,
      //extraAllowedContent: '*(*);*{*}', // Allows any class and any inline style
      //allowedContent: true, // Disable auto-formatting, class removing, etc.
      enterMode: CKEDITOR.ENTER_BR,
      extraPlugins: 'sharedspace,justify,colorbutton,colordialog,panelbutton,font,shortcodes,emojione',
      toolbar: [
       {name: 'styles', items: ['Font', 'FontSize', 'ProspectShortcodes', 'StaticShortcodes', 'CustomShortcodes', 'Emojione']},
       ['Bold', 'Italic', 'Underline', 'Strike'],
       {name: 'paragraph', groups: ['align'], items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock']},
       {name: 'links', items: ['Link', 'Unlink']},
       {name: 'colors', items: ['TextColor', 'BGColor']}
      ],
     }
    }/*, 'gjs-aviary': {
     key: '1',
     onApply: function (url, filename, imageModel) {
     console.log(url, filename, imageModel);
     // editor.AssetManager.add({ src: newUrl, name: filename });
     // imageModel.set('src', newURL); // Update the image component
     }
     }*/
   }
  });

  if (ws) {
   var wc = editor.DomComponents.getWrapper();
   var wstyles = {};
   for (var i = 0; i < ws.length; i++) {
    var st = ws[i].split(': ');
    st[0] = st[0].trim();
    if (st[0] != 'undefined' && st[0] != '') {
     wstyles[st[0]] = st[1];
    }
   }
   wc.set({
    style: wstyles
   });
  }

  bm = editor.BlockManager;
  if (templates != undefined) {
   $.each(templates, function (k, v) {
    create_template_block(v);
   });
  }

  // Categories Toggle
  var categories = editor.BlockManager.getCategories();
  categories.each(category => {
   category.set('open', false).on('change:open', opened => {
    opened.get('open') && categories.each(category => {
     category !== opened && category.set('open', false);
    })
   })
  });




  // Let's add in this demo the possibility to test our newsletters
  var pnm = editor.Panels;
  pnm.addButton('options', [{
    id: 'preview',
    context: f,
    className: 'fa fa-eye',
    attributes: {
     title: 'Preview',
     'data-tooltip-pos': 'bottom'
    },
    command: function () {
     return editor.runCommand('preview')
    }
   }, {
    id: 'undo',
    className: 'fa fa-undo',
    attributes: {
     title: 'Undo',
     'data-tooltip-pos': 'bottom'
    },
    command: function () {
     editor.runCommand('core:undo')
    }
   }, {
    id: 'redo',
    className: 'fa fa-repeat',
    attributes: {
     title: 'Redo',
     'data-tooltip-pos': 'bottom'
    },
    command: function () {
     editor.runCommand('core:redo')
    }
   }, {
    id: 'clear-all',
    className: 'fa fa-trash icon-blank',
    attributes: {
     title: 'Clear Canvas',
     'data-tooltip-pos': 'bottom'
    },
    command: {
     run: function (editor, sender) {
      sender && sender.set('active', false);
      if (confirm('Are you sure to clean the canvas?')) {
       editor.DomComponents.clear();
       setTimeout(function () {
        localStorage.clear()
       }, 0)
      }
     }
    }
   }, {
    id: 'save_template',
    className: 'fa fa-save',
    attributes: {
     title: 'Save Template',
     'data-tooltip-pos': 'bottom',
    },
    command: {
     run: function () {
      var ihtml = editor.runCommand('gjs-get-inlined-html');
      if (!ihtml) {
       return false;
      }
      ihtml = ihtml.replace(' id="wrapper"', '');
      ihtml = ihtml.replace('<html><body>', '');
      ihtml = ihtml.replace('</body></html>', '');

      senddata('composer/template_create', {html: ihtml}, 'modal-body', '', JSON.stringify({title: 'Save Template', modal: 'modal'}), function () {
       // Toggle
       var a = $('.modal-body #addcategory'),
               c = $('.modal-body #category'),
               n = $('.modal-body #new_category');
       a.hide();
       c.change(function () {
        var that = $(this),
                campaign = that.val();
        if (campaign == 'new') {
         a.show();
         n.attr('disabled', false);
        } else {
         a.hide();
         n.attr('disabled', true);
        }
       });
      });
     }
    }
   }, {
    id: 'submit',
    className: 'fa fa-check icon-check',
    attributes: {
     title: 'Save & Close',
     'data-tooltip-pos': 'bottom',
    },
    command: {
     run: function (editor, sender) {
      var inlined_html = editor.runCommand('gjs-get-inlined-html');
      if (typeof tinymce != 'undefined') {
       if (tinymce.get(id) != null) {
        tinyMCE.get(id).setContent(inlined_html);
       } else {
        $('#' + id).val(inlined_html);
        UpdateIframe(id);
        //$('#' + id + '-preview').html(inlined_html);
       }
      } else {
       $('#' + id).val(inlined_html);
       UpdateIframe(id);
       //$('#' + id + '-preview').html(inlined_html);
      }


      editor.DomComponents.clear();
      setTimeout(function () {
       localStorage.clear()
      }, 0);
      $('#' + cid).remove();
      $('body').removeClass('gjs-overflow');
     }
    }
   }, {
    id: 'close',
    className: 'fa fa-close icon-close',
    attributes: {
     title: 'Close',
     'data-tooltip-pos': 'bottom',
    },
    command: {
     run: function (editor, sender) {
      if (confirm('Are you sure you want to close this?')) {
       editor.DomComponents.clear();
       setTimeout(function () {
        localStorage.clear();
       }, 0);
       $('#' + cid).remove();
       $('body').removeClass('gjs-overflow');
      }
     }
    }
   }]);
   
   var textnodeType = editor.DomComponents.getType('textnode');
   
   editor.DomComponents.addType('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: 'comment',
              content: el.textContent
            }
          }
        },
      }),
	  view: textnodeType.view.extend({
		  render: function () {
			  this.el.style.display = "none";
			  return this;
		}
	}),
  });
  
  
  // Beautify tooltips
  var titles = document.querySelectorAll('*[title]');
  for (var i = 0; i < titles.length; i++) {
   var el = titles[i];
   var title = el.getAttribute('title');
   title = title ? title.trim() : '';
   if (!title)
    break;
   el.setAttribute('data-tooltip', title);
   el.setAttribute('title', '');
  }
 });
}