Prototype serializer for posts

demo/demo.js

@@ -26,11 +26,8 @@ var ContentKitDemo = exports.ContentKitDemo = {
   syncCodePane: function(editor) {
     var codePaneJSON = document.getElementById('code-json');
     var codePaneHTML = document.getElementById('code-html');
-    var json = editor.model;
-    //var html = editor.compiler.render(json);
-
+    var json = editor.serialize();
     codePaneJSON.innerHTML = this.syntaxHighlight(json);
-    //codePaneHTML.textContent = this.formatXML(html);
   },
 
   formatXML: function(xml) {
@@ -95,7 +92,7 @@ var ContentKitDemo = exports.ContentKitDemo = {
 // Initialize
 if (window.editor) {
   ContentKitDemo.syncCodePane(editor);
-  editor.on('update', function(data) {
+  editor.on('update', function() {
     ContentKitDemo.syncCodePane(this);
   });
   var settingsBtn = document.getElementById('settings-btn');

src/js/editor/editor.js

@@ -23,6 +23,7 @@ import {
 import { toArray, merge, mergeWithOptions } from 'content-kit-utils';
 import { win, doc } from 'content-kit-editor/utils/compat';
 import { detectParentNode } from '../utils/dom-utils';
+import Serializer from '../renderers/new-serializer';
 
 var defaults = {
   placeholder: 'Write here...',
@@ -364,6 +365,15 @@ merge(Editor.prototype, {
 
     // reparse the section(s) with the cursor
     const sectionsWithCursor = this.getSectionsWithCursor();
+    // FIXME: This is a hack to ensure a previous section is parsed when the
+    // user presses enter (or pastes a newline)
+    let firstSection = sectionsWithCursor[0];
+    if (firstSection) {
+      let previousSection = this.model.getPreviousSection(firstSection);
+      if (previousSection) {
+        sectionsWithCursor.unshift(previousSection);
+      }
+    }
     sectionsWithCursor.forEach((section) => {
       if (newSections.indexOf(section) === -1) {
         this.reparseSection(section);
@@ -403,6 +413,10 @@ merge(Editor.prototype, {
     this.model.setSectionElement(newSection, sectionElement);
 
     this.trigger('update');
+  },
+
+  serialize() {
+    return Serializer.serialize(this.model);
   }
 
 });

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

@@ -58,13 +58,13 @@ NewDOMRenderer.prototype.render = function NewDOMRenderer_render(post, target) {
   for (i=0, l=sections.length;i<l;i++) {
     section = sections[i];
     switch (section.type) {
-    case 1:
-      node = renderMarkupSection(this.document, section, section.markups);
+    case 'markupSection':
+      node = renderMarkupSection(this.document, section, section.markers);
       break;
     case 5:
       throw new Error('unimplemented');
       var componentFn = this.cards[section[1]];
-      node = componentFn(this.document, section.markups);
+      node = componentFn(this.document, section.markers);
       break;
     }
     post.setSectionElement(section, node);

src/js/renderers/new-serializer.js

@@ -0,0 +1,66 @@
+import {visit, visitArray, compile} from "../utils/compiler";
+
+let visitor = {
+  post(node, opcodes) {
+    opcodes.push(['openPost']);
+    visitArray(visitor, node.sections, opcodes);
+  },
+  markupSection(node, opcodes) {
+    opcodes.push(['openMarkupSection', node.tagName]);
+    visitArray(visitor, node.markers, opcodes);
+  },
+  marker(node, opcodes) {
+    opcodes.push(['openMarker', node.close, node.value]);
+    visitArray(visitor, node.open, opcodes);
+  },
+  markerType(node, opcodes) {
+    opcodes.push(['openMarkerType', node.tagName, node.attributes]);
+  }
+};
+
+let postOpcodeCompiler = {
+  openMarker(closeCount, value) {
+    this.markupMarkerIds = [];
+    this.markers.push([
+      this.markupMarkerIds,
+      closeCount,
+      value
+    ]);
+  },
+  openMarkupSection(tagName) {
+    this.markers = [];
+    this.sections.push([1, tagName, this.markers]);
+  },
+  openPost() {
+    this.markerTypes = [];
+    this.sections = [];
+    this.result = [this.markerTypes, this.sections];
+  },
+  openMarkerType(tagName, attributes) {
+    if (!this._seenMarkerTypes) {
+      this._seenMarkerTypes = {};
+    }
+    let index;
+    if (attributes) {
+      this.markerTypes.push([tagName, attributes]);
+      index = this.markerTypes.length - 1;
+    } else {
+      index = this._seenMarkerTypes[tagName];
+      if (index === undefined) {
+        this.markerTypes.push([tagName]);
+        this._seenMarkerTypes[tagName] = index = this.markerTypes.length-1;
+      }
+    }
+    this.markupMarkerIds.push(index);
+  }
+};
+
+export default {
+  serialize(post) {
+    let opcodes = [];
+    visit(visitor, post, opcodes);
+    let compiler = Object.create(postOpcodeCompiler);
+    compile(compiler, opcodes);
+    return compiler.result;
+  }
+}

src/js/utils/compiler.js

@@ -0,0 +1,23 @@
+export function visit(visitor, node, opcodes) {
+  visitor[node.type](node, opcodes);
+}
+
+export function compile(compiler, opcodes) {
+  for (var i=0, l=opcodes.length; i<l; i++) {
+    let [method, ...params] = opcodes[i];
+    if (params.length) {
+      compiler[method].apply(compiler, params);
+    } else {
+      compiler[method].call(compiler);
+    }
+  }
+}
+
+export function visitArray(visitor, nodes, opcodes) {
+  if (!nodes || nodes.length === 0) {
+    return;
+  }
+  for (var i=0, l=nodes.length; i<l; i++) {
+    visit(visitor, nodes[i], opcodes);
+  }
+}