Show innerHTML (with | between text nodes) of editor in demo

bustle · Jul 29, 2015 · 5e25491 · 5e25491
1 parent 3900924
commit 5e25491
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 6 deletions.
diff --git a/demo/demo.js b/demo/demo.js
@@ -187,12 +187,39 @@ var ContentKitDemo = exports.ContentKitDemo = {
     $('#rendered-mobiledoc').empty();
     $('#rendered-mobiledoc')[0].appendChild(rendered);
 
-    var htmlRenderer = new MobiledocHTMLRenderer();
-    var html = htmlRenderer.render(mobiledoc);
+    var displayHTML = function(html) {
+      return html.replace(/&/g,'&amp;').replace(/</g, '&lt;').replace(/>/g,'&gt;');
+    };
+
+    // adds a pipe ("|") between adjacent text nodes for visual debugging
+    var debugNodeHTML = function(node) {
+      function convertTextNodes(parentNode, converterFn) {
+        var iterator = document.createNodeIterator(parentNode, NodeFilter.SHOW_TEXT);
+        var node = iterator.nextNode();
+        while (node) {
+          converterFn(node);
+          node = iterator.nextNode();
+        }
+      }
+
+      function addPipeBetweenAdjacentTextNodes(textNode) {
+        var nextSibling = textNode.nextSibling;
+        if (nextSibling && nextSibling.nodeType === Node.TEXT_NODE) {
+          textNode.textContent = textNode.textContent + '|';
+        }
+      }
+
+      var deep = true;
+      var cloned = node.cloneNode(deep);
+      convertTextNodes(cloned, addPipeBetweenAdjacentTextNodes);
+      return displayHTML(cloned.innerHTML);
+    };
 
-    html = html.replace(/&/g,'&amp;').replace(/</g, '&lt;').replace(/>/g,'&gt;');
+    var htmlRenderer = new MobiledocHTMLRenderer();
+    $('#rendered-mobiledoc-html').html(displayHTML(htmlRenderer.render(mobiledoc)));
 
-    $('#rendered-mobiledoc-html').html(html);
+    var editorHTML = debugNodeHTML($('#editor')[0]);
+    $('#editor-html').html(editorHTML);
   },
 
   syntaxHighlight: function(json) {
@@ -230,9 +257,12 @@ function bootEditor(element, mobiledoc) {
     cards: [simpleCard, cardWithEditMode, cardWithInput, selfieCard]
   });
 
-  editor.on('update', function() {
+  function sync() {
     ContentKitDemo.syncCodePane(editor);
-  });
+  }
+
+  editor.on('update', sync);
+  sync();
 }
 
 function readMobiledoc(string) {

diff --git a/demo/index.html b/demo/index.html
@@ -72,6 +72,11 @@ <h2>rendered mobiledoc (dom)</h2>
         on the serialized mobiledoc.
       </p>
       <div id="rendered-mobiledoc"></div>
+
+      <hr>
+
+      <h2>innerHTML of editor surface</h2>
+      <div id='editor-html'></div>
     </div>
 
     <div class="pane">