Assert that cards are rendered in the editor, and are noneditable

src/js/editor/editor.js

@@ -39,7 +39,7 @@ import { getData, setData } from '../utils/element-utils';
 import mixin from '../utils/mixin';
 import EventListenerMixin from '../utils/event-listener';
 
-var defaults = {
+const defaults = {
   placeholder: 'Write here...',
   spellcheck: true,
   autofocus: true,

src/js/renderers/editor-dom.js

@@ -103,7 +103,9 @@ class Visitor {
     const card = detect(this.cards, card => card.name === section.name);
 
     const env = { name: section.name };
-    renderNode.element = document.createElement('div');
+    const element = document.createElement('div');
+    element.contentEditable = 'false';
+    renderNode.element = element;
     renderNode.parentNode.element.appendChild(renderNode.element);
 
     if (card) {

tests/unit/renderers/editor-dom-test.js

@@ -7,8 +7,8 @@ import RenderTree from 'content-kit-editor/models/render-tree';
 const DATA_URL = "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=";
 let builder;
 
-function render(renderTree) {
-  let renderer = new Renderer([]);
+function render(renderTree, cards=[]) {
+  let renderer = new Renderer(cards);
   return renderer.render(renderTree);
 }
 
@@ -139,6 +139,55 @@ test('renders a post with image', (assert) => {
   assert.equal(node.element.innerHTML, `<img src="${url}">`);
 });
 
+test('renders a card section', (assert) => {
+  let post = builder.generatePost();
+  let cardSection = builder.generateCardSection('my-card');
+  let card = {
+    name: 'my-card',
+    display: {
+      setup(element) {
+        element.innerHTML = 'I am a card';
+      }
+    }
+  };
+  post.appendSection(cardSection);
+
+  let node = new RenderNode(post);
+  let renderTree = new RenderTree(node);
+  node.renderTree = renderTree;
+  render(renderTree, [card]);
+
+  assert.equal(node.element.firstChild.innerHTML, 'I am a card',
+              'card is rendered');
+});
+
+test('renders a card section into a non-contenteditable element', (assert) => {
+  assert.expect(2);
+
+  let post = builder.generatePost();
+  let cardSection = builder.generateCardSection('my-card');
+  let card = {
+    name: 'my-card',
+    display: {
+      setup(element) {
+        element.setAttribute('id', 'my-card-div');
+      }
+    }
+  };
+  post.appendSection(cardSection);
+
+  let node = new RenderNode(post);
+  let renderTree = new RenderTree(node);
+  node.renderTree = renderTree;
+  render(renderTree, [card]);
+
+  let element = node.element.firstChild;
+  assert.equal(element.getAttribute('id'), 'my-card-div',
+               'precond - correct element selected');
+  assert.equal(element.contentEditable, 'false', 'is not contenteditable');
+});
+
+
 /*
 test("It renders a renderTree with rendered dirty section", (assert) => {
   /*