Handle newline semantically, use special chars to denote text nodes a…

…nd unprintable chars in editor HTML

 * move cursor to new section after hitting enter
 * Select the first marker el in a new section rather than the section el
 * Append blank marker to empty section, only create markup from valid tag
 * Do not modify/wrap element in section element in Section parser

demo/demo.js

@@ -202,16 +202,21 @@ var ContentKitDemo = exports.ContentKitDemo = {
         }
       }
 
-      function addPipeBetweenAdjacentTextNodes(textNode) {
+      function markAdjacentTextNodes(textNode) {
+        var boxChar = '\u2591',
+            emptySquareChar = '\u25A2',
+            invisibleChar = '\u200C';
         var nextSibling = textNode.nextSibling;
         if (nextSibling && nextSibling.nodeType === Node.TEXT_NODE) {
-          textNode.textContent = textNode.textContent + '|';
+          textNode.textContent = textNode.textContent + boxChar;
         }
+        textNode.textContent = textNode.textContent.replace(new RegExp(invisibleChar, 'g'),
+                                                            emptySquareChar);
       }
 
       var deep = true;
       var cloned = node.cloneNode(deep);
-      convertTextNodes(cloned, addPipeBetweenAdjacentTextNodes);
+      convertTextNodes(cloned, markAdjacentTextNodes);
       return displayHTML(cloned.innerHTML);
     };
 

demo/index.html

@@ -76,6 +76,7 @@ <h2>rendered mobiledoc (dom)</h2>
       <hr>
 
       <h2>innerHTML of editor surface</h2>
+      <p class='desc'>With special chars to mark text node boundaries and invisible characters.</p>
       <div id='editor-html'></div>
     </div>
 

notes

@@ -0,0 +1,59 @@
+abc|def|ghi
+
+i=0, length=0, offset=3
+i=1, length=3, offset=3
+
+length === offset
+
+
+abc <b>bold <i>italic+bold</li> bold2</b> def
+
+const PickColorCard = {
+  name: 'pick-color',
+  edit: {
+    setup(element, options, {save, cancel}, payload) {
+    //                      ^ env - an object of runtime options and hooks
+      let component = EditPickColorComponent.create(payload);
+      component.save = function(newPayload) {
+        save(newPayload);
+      };
+      component.cancel = cancel;
+      component.appendTo(element);
+      return {component};
+    },
+    teardown({component}) {
+      Ember.run(component,component.destroy);
+    }
+  },
+  render: {
+    setup(element, options, {edit}, payload) {
+      let component = PickColorComponent.create(payload);
+      component.appendTo(element);
+      if (options.mode === 'edit') {
+        $(element).click(function(){
+          window.popup(payload.editUrl);
+        });
+      }
+      return {component};
+    },
+    teardown({component}) {
+      Ember.run(component, component.destroy);
+    };
+  }
+};
+
+new ContentKit.Edtior(editorElement, cards: [
+  PickColorCard
+]});
+
+var domRenderer = new MobiledocDOMRenderer();
+var rendered = renderer.render(mobiledoc, {
+  cardOptions: { mode: 'highQuality' },
+  unknownCard(element, options, {name}, payload) {
+    // manage unknown name
+    // can only be rendered, has no teardown
+  },
+  cards: [
+    PickColorCard
+  ]
+});

src/js/commands/card.js

@@ -3,16 +3,6 @@ import { inherit } from 'content-kit-utils';
 
 function injectCardBlock(/* cardName, cardPayload, editor, index */) {
   throw new Error('Unimplemented: BlockModel and Type.CARD are no longer things');
-  // FIXME: Do we change the block model internal representation here?
-  /*
-  var cardBlock = BlockModel.createWithType(Type.CARD, {
-    attributes: {
-      name: cardName,
-      payload: cardPayload
-    }
-  });
-  editor.replaceBlock(cardBlock, index);
-  */
 }
 
 function CardCommand() {
@@ -32,7 +22,6 @@ CardCommand.prototype = {
     var cardName = 'pick-color';
     var cardPayload = { options: ['red', 'blue'] };
     injectCardBlock(cardName, cardPayload, editor, currentEditingIndex);
-    editor.renderBlockAt(currentEditingIndex, true);
   }
 };
 

src/js/commands/oembed.js

@@ -56,14 +56,6 @@ OEmbedCommand.prototype.exec = function(url) {
         embedIntent.show();
       } else {
         throw new Error('Unimplemented EmbedModel is not a thing');
-        /*
-        var embedModel = new EmbedModel(response);
-        editorContext.insertBlock(embedModel, index);
-        editorContext.renderBlockAt(index);
-        if (embedModel.attributes.provider_name.toLowerCase() === 'twitter') {
-          loadTwitterWidgets(editorContext.element);
-        }
-        */
       }
     }
   });