Test that editor can accept mobiledoc format and render it

src/js/editor/editor.js

@@ -19,6 +19,7 @@ import EventEmitter from '../utils/event-emitter';
 import {
   Type,
   Compiler,
+  MobiledocParser
 } from 'content-kit-compiler';
 import { toArray, merge, mergeWithOptions } from 'content-kit-utils';
 import { win, doc } from 'content-kit-editor/utils/compat';
@@ -50,7 +51,8 @@ var defaults = {
     new OrderedListCommand()
   ],
   compiler: null,
-  cards: {}
+  cards: {},
+  mobiledoc: null
 };
 
 function forEachChildNode(parentNode, callback) {
@@ -60,20 +62,7 @@ function forEachChildNode(parentNode, callback) {
   }
 }
 
-function replaceInArray(array, original, replacement) {
-  var i, l, possibleOriginal;
-  for (i=0,l=array.length;i<l;i++) {
-    possibleOriginal = array[i];
-    if (possibleOriginal === original) {
-      array[i] = replacement;
-      return;
-    }
-  }
-}
-
 function bindContentEditableTypingListeners(editor) {
-
-
   editor.element.addEventListener('keyup', function(e) {
     // Assure there is always a supported block tag, and not empty text nodes or divs.
     // On a carrage return, make sure to always generate a 'p' tag
@@ -197,7 +186,12 @@ function Editor(element, options) {
 
   // FIXME: We should be able to pass a serialized payload and disregard
   // whatever is in DOM
-  this.syncModel();
+  if (this.mobiledoc) {
+    this.parseModelFromMobiledoc(this.mobiledoc);
+  } else {
+    this.parseModelFromDOM(this.element);
+  }
+
   clearChildNodes(element);
   this.syncVisual();
 
@@ -234,8 +228,13 @@ merge(Editor.prototype, {
     this.trigger('update');
   },
 
-  syncModel() {
-    this.model = this.compiler.parse(this.element);
+  parseModelFromDOM(element) {
+    this.model = this.compiler.parse(element);
+    this.trigger('update');
+  },
+
+  parseModelFromMobiledoc(mobiledoc) {
+    this.model = new MobiledocParser().parse(mobiledoc);
     this.trigger('update');
   },
 
@@ -244,7 +243,7 @@ merge(Editor.prototype, {
   },
 
   getCurrentBlockIndex() {
-    var selectionEl = element || getSelectionBlockElement();
+    var selectionEl = this.element || getSelectionBlockElement();
     var blockElements = toArray(this.element.children);
     return blockElements.indexOf(selectionEl);
   },

src/js/renderers/new-dom-renderer.js

@@ -1,10 +1,20 @@
+function createElementFromMarkerType(doc, markerType) {
+  var element = doc.createElement(markerType.tagName);
+  if (markerType.attributes) {
+    for (var i=0, l=markerType.attributes.length;i<l;i=i+2) {
+      element.setAttribute(markerType.attributes[i], markerType.attributes[i+1]);
+    }
+  }
+  return element;
+}
+
 function renderMarkupSection(doc, section, markers) {
   var element = doc.createElement(section.tagName);
   var elements = [element];
   var currentElement = element;
   var i, l, j, m, marker, openTypes, closeTypes, text;
-  var markerType, markerTypeAttrs;
-  var openedElement, openedTagName;
+  var markerType;
+  var openedElement;
   for (i=0, l=markers.length;i<l;i++) {
     marker = markers[i];
     openTypes = marker.open;
@@ -31,16 +41,6 @@ function renderMarkupSection(doc, section, markers) {
   return element;
 }
 
-function createElementFromMarkerType(doc, markerType) {
-  var element = doc.createElement(markerType.tagName);
-  if (markerType.attributes) {
-    for (var i=0, l=markerType.attributes.length;i<l;i=i+2) {
-      element.setAttribute(markerType.attributes[i], markerType.attributes[i+1]);
-    }
-  }
-  return element;
-}
-
 function NewDOMRenderer(doc, cards) {
   if (!doc) {
     throw new Error('renderer must be created with a document');
@@ -50,7 +50,7 @@ function NewDOMRenderer(doc, cards) {
     throw new Error('renderer must be created with cards');
   }
   this.cards = cards;
-};
+}
 
 NewDOMRenderer.prototype.render = function NewDOMRenderer_render(post, target) {
   var sections = post.sections;
@@ -63,9 +63,11 @@ NewDOMRenderer.prototype.render = function NewDOMRenderer_render(post, target) {
       break;
     case 5:
       throw new Error('unimplemented');
-      var componentFn = this.cards[section[1]];
-      node = componentFn(this.document, section.markers);
-      break;
+      //var componentFn = this.cards[section[1]];
+      //node = componentFn(this.document, section.markers);
+      //break;
+    default:
+      throw new Error('attempt to render unknown type:' +section.type);
     }
     post.setSectionElement(section, node);
     target.appendChild(node);

src/js/renderers/new-serializer.js

@@ -63,4 +63,4 @@ export default {
     compile(compiler, opcodes);
     return compiler.result;
   }
-}
+};

tests/acceptance/basic-editor-test.js

@@ -26,8 +26,8 @@ test('sets element as contenteditable', (assert) => {
   assert.equal(editorElement.getAttribute('contenteditable'),
                'true',
                'element is contenteditable');
-  assert.equal(editorElement.firstChild.tagName, 'SECTION',
-               `editor element has a section as its first child`);
+  assert.equal(editorElement.firstChild.tagName, 'P',
+               `editor element has a P as its first child`);
 });
 
 test('editing element changes editor post model', (assert) => {

tests/unit/editor-test.js

@@ -1,4 +1,4 @@
-/* global QUnit, test, asyncTest, ok, equal, expect, start */
+/* global QUnit, asyncTest, ok, equal, expect, start */
 
 var fixture = document.getElementById('qunit-fixture');
 var editorElement = document.createElement('div');
@@ -7,6 +7,8 @@ editorElement.className = 'editor';
 
 import { Editor } from 'content-kit-editor';
 
+const { test } = QUnit;
+
 QUnit.module('Editor', {
   setup: function() {
     fixture.appendChild(editorElement);
@@ -16,11 +18,6 @@ QUnit.module('Editor', {
   }
 });
 
-test('can create an editor', function() {
-  var editor = new Editor();
-  ok(editor instanceof Editor);
-});
-
 test('can create an editor via dom node reference', function() {
   var editor = new Editor(editorElement);
   equal(editor.element, editorElement);
@@ -67,11 +64,31 @@ test('creating an editor without a class name adds appropriate class', function(
 asyncTest('editor fires update event', function() {
   expect(2);
 
-  var editor = new Editor();
+  var editor = new Editor(editorElement);
   editor.on('update', function(data) {
     equal (this, editor);
     equal (data.index, 99);
     start();
   });
   editor.trigger('update', { index: 99 });
 });
+
+test('editor parses and renders mobiledoc format', (assert) => {
+  const mobiledoc = [
+    [],
+    [
+      [1, 'P', [
+        [[], 0, 'hello world']
+      ]]
+    ]
+  ];
+  editorElement.innerHTML = '<p>something here</p>';
+  let editor = new Editor(editorElement, {mobiledoc});
+
+  assert.ok(editor.mobiledoc, 'editor has mobiledoc');
+  assert.equal(editorElement.innerHTML,
+               `<p>hello world</p>`);
+
+  assert.deepEqual(editor.serialize(), mobiledoc,
+                   'serialized editor === mobiledoc');
+});