Add Comment component

src/dom_components/index.js

@@ -107,6 +107,11 @@ module.exports = () => {
       model: require('./model/ComponentSvg'),
       view: require('./view/ComponentSvgView')
     },
+    {
+      id: 'comment',
+      model: require('./model/ComponentComment'),
+      view: require('./view/ComponentCommentView')
+    },
     {
       id: 'textnode',
       model: require('./model/ComponentTextNode'),

src/dom_components/model/ComponentComment.js

@@ -0,0 +1,24 @@
+const Component = require('./ComponentTextNode');
+
+module.exports = Component.extend(
+  {
+    defaults: {
+      ...Component.prototype.defaults
+    },
+
+    toHTML() {
+      return `<!--${this.get('content')}-->`;
+    }
+  },
+  {
+    isComponent(el) {
+      if (el.nodeType == 8) {
+        return {
+          tagName: 'NULL',
+          type: 'comment',
+          content: el.textContent
+        };
+      }
+    }
+  }
+);

src/dom_components/model/ComponentTextNode.js

@@ -5,6 +5,7 @@ module.exports = Component.extend(
     defaults: {
       ...Component.prototype.defaults,
       droppable: false,
+      layerable: false,
       editable: true
     },
 

src/dom_components/view/ComponentCommentView.js

@@ -0,0 +1,7 @@
+const ComponentView = require('./ComponentTextNodeView');
+
+module.exports = ComponentView.extend({
+  _createElement() {
+    return document.createComment(this.model.get('content'));
+  }
+});