Post nodes no longer store closed and open, but all their markups

src/js/models/image.js

@@ -1,6 +1,8 @@
+export const IMAGE_SECTION_TYPE = 'image-section';
+
 export default class Image {
   constructor() {
-    this.type = 'imageSection';
+    this.type = IMAGE_SECTION_TYPE;
     this.src = null;
   }
 }

src/js/models/marker.js

@@ -1,5 +1,4 @@
-export const MARKUP_TAG_NAMES = ['b', 'a', 'i', 'em', 'strong'];
-const MARKER_TYPE = 'marker';
+export const MARKER_TYPE = 'marker';
 
 import { detect } from 'content-kit-editor/utils/array-utils';
 
@@ -9,7 +8,9 @@ const Marker = class Marker {
     this.markups = [];
     this.type = MARKER_TYPE;
 
-    markups.forEach(m => this.addMarkup(m));
+    if (markups && markups.length) {
+      markups.forEach(m => this.addMarkup(m));
+    }
   }
 
   get length() {
@@ -25,15 +26,7 @@ const Marker = class Marker {
   }
 
   addMarkup(markup) {
-    const {tagName} = markup;
-
-    if (MARKUP_TAG_NAMES.indexOf(tagName) === -1) {
-      throw new Error(`Cannot add markup of tagName ${tagName}`);
-    }
-
-    if (!this.hasMarkup(tagName)) {
-      this.markups.push(markup);
-    }
+    this.markups.push(markup);
   }
 
   hasMarkup(tagName) {
@@ -62,6 +55,32 @@ const Marker = class Marker {
 
     return [m1, m2];
   }
+
+  get openedMarkups() {
+    if (!this.previousSibling) {
+      return this.markups.slice();
+    }
+    let i;
+    for (i=0; i<this.markups.length; i++) {
+      if (this.markups[i] !== this.previousSibling.markups[i]) {
+        return this.markups.slice(i);
+      }
+    }
+    return [];
+  }
+
+  get closedMarkups() {
+    if (!this.nextSibling) {
+      return this.markups.slice();
+    }
+    let i;
+    for (i=0; i<this.markups.length; i++) {
+      if (this.markups[i] !== this.nextSibling.markups[i]) {
+        return this.markups.slice(i);
+      }
+    }
+    return [];
+  }
 };
 
 export default Marker;

src/js/models/markup-section.js

@@ -1,12 +1,12 @@
 export const DEFAULT_TAG_NAME = 'p';
-export const SECTION_TAG_NAMES = [
-  'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'div'
+export const VALID_MARKUP_SECTION_TAGNAMES = [
+  'p', 'h3', 'h2', 'h1', 'blockquote', 'ul', 'ol'
 ];
 export const MARKUP_SECTION_TYPE = 'markup-section';
 
 export default class Section {
   constructor(tagName, markers=[]) {
-    this.markers = markers;
+    this.markers = [];
     this.tagName = tagName || DEFAULT_TAG_NAME;
     this.type = MARKUP_SECTION_TYPE;
 

src/js/models/markup.js

@@ -1,9 +1,21 @@
-const MARKUP_TYPE = 'markup';
+export const MARKUP_TYPE = 'markup';
+export const VALID_MARKUP_TAGNAMES = [
+  'b',
+  'i',
+  'strong',
+  'em',
+  'a',
+  'li'
+];
 
 export default class Markup {
-  constructor(tagName, attributes={}) {
+  constructor(tagName, attributes=[]) {
     this.tagName = tagName.toLowerCase();
     this.attributes = attributes;
     this.type = MARKUP_TYPE;
+
+    if (VALID_MARKUP_TAGNAMES.indexOf(this.tagName) === -1) {
+      throw new Error(`Cannot create markup of tagName ${tagName}`);
+    }
   }
 }

src/js/parsers/dom.js

@@ -1,11 +1,11 @@
 import { generateBuilder } from '../utils/post-builder';
 import { trim } from 'content-kit-utils';
+import { VALID_MARKUP_SECTION_TAGNAMES } from '../models/markup-section';
+import { VALID_MARKUP_TAGNAMES } from '../models/markup';
 
 const ELEMENT_NODE = 1;
 const TEXT_NODE = 3;
 
-const MARKUP_SECTION_TAG_NAMES = ['P', 'H3', 'H2', 'H1', 'BLOCKQUOTE', 'UL', 'OL'];
-
 const ALLOWED_ATTRIBUTES = ['href', 'rel', 'src'];
 
 function isEmptyTextNode(node) {
@@ -57,28 +57,19 @@ function readAttributes(node) {
   return null;
 }
 
-const VALID_MARKER_ELEMENTS = [
-  'B',
-  'I',
-  'STRONG',
-  'EM',
-  'A',
-  'LI'
-];
-
 function isValidMarkerElement(element) {
-  return VALID_MARKER_ELEMENTS.indexOf(element.tagName) !== -1;
+  return VALID_MARKUP_TAGNAMES.indexOf(element.tagName.toLowerCase()) !== -1;
 }
 
 function parseMarkers(section, postBuilder, topNode) {
-  var markerTypes = [];
+  var markups = [];
   var text = null;
   var currentNode = topNode;
   while (currentNode) {
     switch(currentNode.nodeType) {
     case ELEMENT_NODE:
       if (isValidMarkerElement(currentNode)) {
-        markerTypes.push(postBuilder.generateMarkerType(currentNode.tagName, readAttributes(currentNode)));
+        markups.push(postBuilder.generateMarkup(currentNode.tagName, readAttributes(currentNode)));
       }
       break;
     case TEXT_NODE:
@@ -88,34 +79,31 @@ function parseMarkers(section, postBuilder, topNode) {
 
     if (currentNode.firstChild) {
       if (isValidMarkerElement(currentNode) && text !== null) {
-        section.markers.push(postBuilder.generateMarker(markerTypes, 0, text));
-        markerTypes = [];
+        section.markers.push(postBuilder.generateMarker(markups.slice(), text));
         text = null;
       }
       currentNode = currentNode.firstChild;
     } else if (currentNode.nextSibling) {
       if (currentNode === topNode) {
-        section.markers.push(postBuilder.generateMarker(markerTypes, markerTypes.length, text));
+        section.markers.push(postBuilder.generateMarker(markups.slice(), text));
         break;
       } else {
         currentNode = currentNode.nextSibling;
         if (currentNode.nodeType === ELEMENT_NODE && isValidMarkerElement(currentNode) && text !== null) {
-          section.markers.push(postBuilder.generateMarker(markerTypes, 0, text));
-          markerTypes = [];
+          section.markers.push(postBuilder.generateMarker(markups.slice(), text));
           text = null;
         }
       }
     } else {
-      var toClose = 0;
+      section.markers.push(postBuilder.generateMarker(markups.slice(), text));
+
       while (currentNode && !currentNode.nextSibling && currentNode !== topNode) {
         currentNode = currentNode.parentNode;
         if (isValidMarkerElement(currentNode)) {
-          toClose++;
+          markups.pop();
         }
       }
 
-      section.markers.push(postBuilder.generateMarker(markerTypes, toClose, text));
-      markerTypes = [];
       text = null;
 
       if (currentNode === topNode) {
@@ -142,7 +130,7 @@ NewHTMLParser.prototype = {
     case ELEMENT_NODE:
       var tagName = sectionElement.tagName;
       // <p> <h2>, etc
-      if (MARKUP_SECTION_TAG_NAMES.indexOf(tagName) !== -1) {
+      if (VALID_MARKUP_SECTION_TAGNAMES.indexOf(tagName.toLowerCase()) !== -1) {
         section = postBuilder.generateMarkupSection(tagName, readAttributes(sectionElement));
         var node = sectionElement.firstChild;
         while (node) {

src/js/parsers/mobiledoc.js

@@ -18,6 +18,7 @@ export default class MobiledocParser {
 
     const post = this.builder.generatePost();
 
+    this.markups = [];
     this.markerTypes = this.parseMarkerTypes(markerTypes);
     this.parseSections(sections, post);
 
@@ -29,7 +30,7 @@ export default class MobiledocParser {
   }
 
   parseMarkerType([tagName, attributes]) {
-    return this.builder.generateMarkerType(tagName, attributes);
+    return this.builder.generateMarkup(tagName, attributes);
   }
 
   parseSections(sections, post) {
@@ -77,8 +78,11 @@ export default class MobiledocParser {
   }
 
   parseMarker([markerTypeIndexes, closeCount, value], section) {
-    const markerTypes = markerTypeIndexes.map(index => this.markerTypes[index]);
-    const marker = this.builder.generateMarker(markerTypes, closeCount, value);
+    markerTypeIndexes.forEach(index => {
+      this.markups.push(this.markerTypes[index]);
+    });
+    const marker = this.builder.generateMarker(this.markups.slice(), value);
     section.markers.push(marker);
+    this.markups = this.markups.slice(0, this.markups.length-closeCount);
   }
 }

src/js/parsers/section.js

@@ -4,12 +4,12 @@ const ELEMENT_NODE = 1;
 import MarkupSection from 'content-kit-editor/models/markup-section';
 import {
   DEFAULT_TAG_NAME,
-  SECTION_TAG_NAMES
-} from 'content-kit-editor/models/section';
+  VALID_MARKUP_SECTION_TAGNAMES
+} from 'content-kit-editor/models/markup-section';
 
 import Marker from 'content-kit-editor/models/marker';
 import Markup from 'content-kit-editor/models/markup';
-import { MARKUP_TAG_NAMES } from 'content-kit-editor/models/marker';
+import { VALID_MARKUP_TAGNAMES } from 'content-kit-editor/models/markup';
 import { getAttributes } from 'content-kit-editor/utils/dom-utils';
 import { forEach } from 'content-kit-editor/utils/array-utils';
 
@@ -93,19 +93,19 @@ export default {
 
   isSectionElement(element) {
     return element.nodeType === ELEMENT_NODE &&
-      SECTION_TAG_NAMES.indexOf(element.tagName.toLowerCase()) !== -1;
+      VALID_MARKUP_SECTION_TAGNAMES.indexOf(element.tagName.toLowerCase()) !== -1;
   },
 
   markupFromElement(element) {
     const tagName = element.tagName.toLowerCase();
-    if (MARKUP_TAG_NAMES.indexOf(tagName) === -1) { return null; }
+    if (VALID_MARKUP_TAGNAMES.indexOf(tagName) === -1) { return null; }
 
     return new Markup(tagName, getAttributes(element));
   },
 
   sectionTagNameFromElement(element) {
     let tagName = element.tagName.toLowerCase();
-    if (SECTION_TAG_NAMES.indexOf(tagName) === -1) { tagName = DEFAULT_TAG_NAME; }
+    if (VALID_MARKUP_SECTION_TAGNAMES.indexOf(tagName) === -1) { tagName = DEFAULT_TAG_NAME; }
     return tagName;
   }
 };

src/js/renderers/editor-dom.js

@@ -2,7 +2,8 @@ import RenderNode from "content-kit-editor/models/render-node";
 import CardNode from "content-kit-editor/models/card-node";
 import { detect } from 'content-kit-editor/utils/array-utils';
 import { POST_TYPE } from "../models/post";
-import { MARKUP_SECTION_TYPE } from "../models/section";
+import { MARKUP_SECTION_TYPE } from "../models/markup-section";
+import { IMAGE_SECTION_TYPE } from "../models/image";
 
 function createElementFromMarkerType(doc, markerType) {
   var element = doc.createElement(markerType.tagName);
@@ -23,7 +24,7 @@ function renderMarkupSection(doc, section, markers) {
   var openedElement;
   for (i=0, l=markers.length;i<l;i++) {
     marker = markers[i];
-    openTypes = marker.open;
+    openTypes = marker.markups;
     closeTypes = marker.close;
     text = marker.value;
 
@@ -77,13 +78,9 @@ class Visitor {
       }
       renderNode.element = element;
     }
-  } 
-
-  section(renderNode, section) {
-    this.markupSection(renderNode, section);
   }
 
-  imageSection(renderNode, section) {
+  [IMAGE_SECTION_TYPE](renderNode, section) {
     if (renderNode.element) {
       if (renderNode.element.src !== section.src) {
         renderNode.element.src = section.src;
@@ -137,7 +134,7 @@ let destroyHooks = {
       renderNode.element.parentNode.removeChild(renderNode.element);
     }
   },
-  imageSection(renderNode, section) {
+  [IMAGE_SECTION_TYPE](renderNode, section) {
     let post = renderNode.parentNode.postNode;
     post.removeSection(section);
     renderNode.element.parentNode.removeChild(renderNode.element);

src/js/renderers/mobiledoc.js

@@ -1,28 +1,31 @@
 import {visit, visitArray, compile} from "../utils/compiler";
 import { POST_TYPE } from "../models/post";
-import { SECTION_TYPE } from "../models/section";
+import { MARKUP_SECTION_TYPE } from "../models/markup-section";
+import { IMAGE_SECTION_TYPE } from "../models/image";
+import { MARKER_TYPE } from "../models/marker";
+import { MARKUP_TYPE } from "../models/markup";
 
 let visitor = {
   [POST_TYPE](node, opcodes) {
     opcodes.push(['openPost']);
     visitArray(visitor, node.sections, opcodes);
   },
-  [SECTION_TYPE](node, opcodes) {
+  [MARKUP_SECTION_TYPE](node, opcodes) {
     opcodes.push(['openMarkupSection', node.tagName]);
     visitArray(visitor, node.markers, opcodes);
   },
-  imageSection(node, opcodes) {
+  [IMAGE_SECTION_TYPE](node, opcodes) {
     opcodes.push(['openImageSection', node.src]);
   },
   card(node, opcodes) {
     opcodes.push(['openCardSection', node.name, node.payload]);
   },
-  marker(node, opcodes) {
-    opcodes.push(['openMarker', node.close, node.value]);
-    visitArray(visitor, node.open, opcodes);
+  [MARKER_TYPE](node, opcodes) {
+    opcodes.push(['openMarker', node.closedMarkups.length, node.value]);
+    visitArray(visitor, node.openedMarkups, opcodes);
   },
-  markerType(node, opcodes) {
-    opcodes.push(['openMarkerType', node.tagName, node.attributes]);
+  [MARKUP_TYPE](node, opcodes) {
+    opcodes.push(['openMarkup', node.tagName, node.attributes]);
   }
 };
 
@@ -50,12 +53,12 @@ let postOpcodeCompiler = {
     this.sections = [];
     this.result = [this.markerTypes, this.sections];
   },
-  openMarkerType(tagName, attributes) {
+  openMarkup(tagName, attributes) {
     if (!this._seenMarkerTypes) {
       this._seenMarkerTypes = {};
     }
     let index;
-    if (attributes) {
+    if (attributes.length) {
       this.markerTypes.push([tagName, attributes]);
       index = this.markerTypes.length - 1;
     } else {