WIP: DRY render node creation, update UI after rerender

src/js/editor/editor.js

@@ -21,7 +21,6 @@ import EventEmitter from '../utils/event-emitter';
 import MobiledocParser from "../parsers/mobiledoc";
 import DOMParser from "../parsers/dom";
 import render from 'content-kit-editor/renderers/render';
-import RenderNode from 'content-kit-editor/models/render-node';
 import RenderTree from 'content-kit-editor/models/render-tree';
 import MobiledocRenderer from '../renderers/mobiledoc';
 
@@ -234,19 +233,17 @@ merge(Editor.prototype, {
 
   parseModelFromDOM(element) {
     this.post = this._parser.parse(element);
-    let node = new RenderNode(this.post);
-    this.post.renderNode = node;
-    this._renderTree = new RenderTree(node);
-    node.renderTree = this._renderTree;
+    this._renderTree = new RenderTree();
+    let node = this._renderTree.buildRenderNode(this.post);
+    this._renderTree.node = node;
     this.trigger('update');
   },
 
   parseModelFromMobiledoc(mobiledoc) {
     this.post = new MobiledocParser().parse(mobiledoc);
-    let node = new RenderNode(this.post);
-    this.post.renderNode = node;
-    this._renderTree = new RenderTree(node);
-    node.renderTree = this._renderTree;
+    this._renderTree = new RenderTree();
+    let node = this._renderTree.buildRenderNode(this.post);
+    this._renderTree.node = node;
     this.trigger('update');
   },
 
@@ -367,11 +364,9 @@ merge(Editor.prototype, {
         );
         newSections.push(section);
 
-        sectionRenderNode = new RenderNode(section);
-        sectionRenderNode.renderTree = this._renderTree;
+        sectionRenderNode = this._renderTree.buildRenderNode(section);
         sectionRenderNode.element = node;
         sectionRenderNode.markClean();
-        section.renderNode = sectionRenderNode;
 
         if (previousSection) {
           this.post.insertSectionAfter(section, previousSection);
@@ -418,6 +413,7 @@ merge(Editor.prototype, {
     });
 
     this.rerender();
+    this.trigger('update');
   },
 
   getSectionsWithCursor() {
@@ -476,7 +472,7 @@ merge(Editor.prototype, {
   },
 
   insertSectionAtCursor(newSection) {
-    let newRenderNode = new RenderNode(newSection);
+    let newRenderNode = this._renderTree.buildRenderNode(newSection);
     let renderNodes = this.getRenderNodesWithCursor();
     let lastRenderNode = renderNodes[renderNodes.length-1];
     lastRenderNode.parentNode.insertAfter(newRenderNode, lastRenderNode);

src/js/models/render-tree.js

@@ -1,3 +1,4 @@
+import RenderNode from 'content-kit-editor/models/render-node';
 import ElementMap from "../utils/element-map";
 
 export default class RenderTree {
@@ -8,4 +9,10 @@ export default class RenderTree {
   getElementRenderNode(element) {
     return this.elements.get(element);
   }
+  buildRenderNode(section) {
+    let renderNode = new RenderNode(section);
+    renderNode.renderTree = this;
+    section.renderNode = renderNode;
+    return renderNode;
+  }
 }