combine contentEditable hacks

bustle · Aug 31, 2014 · 0f157ea · 0f157ea
1 parent f6b5d9d
commit 0f157ea
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 32 deletions.
diff --git a/dist/content-kit-editor.js b/dist/content-kit-editor.js
@@ -1976,22 +1976,17 @@ define("content-kit-editor/editor/editor",
       })
     };
 
-    // TODO: remove when direction model manip. complete
     function bindContentEditableTypingCorrections(editor) {
-      // Breaks out of blockquotes when pressing enter.
       editor.element.addEventListener('keyup', function(e) {
         if(!e.shiftKey && e.which === Keycodes.ENTER) {
-          if(Type.QUOTE.tag === getSelectionBlockTagName()) {
+          var selectionTag = getSelectionBlockTagName();
+          if (!selectionTag || selectionTag === Type.QUOTE.tag) {
+            document.execCommand('formatBlock', false, Type.TEXT.tag);
+          }
+        } else if (e.which === Keycodes.BKSP) {
+          if(!editor.element.innerHTML) {
             document.execCommand('formatBlock', false, Type.TEXT.tag);
-            e.stopPropagation();
           }
-        }
-      });
-
-      // Assure there is always a supported root tag, and not empty text nodes or divs.
-      editor.element.addEventListener('keyup', function() {
-        if (this.innerHTML.length && RootTags.indexOf(getSelectionBlockTagName()) === -1) {
-          document.execCommand('formatBlock', false, Type.TEXT.tag);
         }
       });
     }
@@ -2001,7 +1996,7 @@ define("content-kit-editor/editor/editor",
         var cleanedContent = cleanPastedContent(e, Type.TEXT.tag);
         if (cleanedContent) {
           document.execCommand('insertHTML', false, cleanedContent);
-          editor.syncModel();  // TODO: can optimize to just sync to paste index range
+          editor.syncModel();
         }
       });
     }
@@ -2027,10 +2022,15 @@ define("content-kit-editor/editor/editor",
 
     function bindLiveUpdate(editor) {
       editor.element.addEventListener('input', function(e) {
-        editor.syncModelAtSelection();
+        editor.syncModel();
       });
 
-      // Handle special cases
+      // Experimental/buggy: parsing only the blocks where action took place
+      // Not sure if this is even more efficient. Compiler is probably faster than dom/selection checks
+      /*
+      editor.element.addEventListener('input', function(e) {
+        editor.syncModelAtSelection();
+      });
       editor.element.addEventListener('keyup', function(e) {
         // When pressing enter: parse block before cursor too
         if(!e.shiftKey && e.which === Keycodes.ENTER) {
@@ -2040,8 +2040,8 @@ define("content-kit-editor/editor/editor",
         else if(e.which === Keycodes.BKSP || e.which === Keycodes.DEL) {
           editor.syncModelAt(editor.getCurrentBlockIndex()+1);
         }
-
       });
+      */
     }
 
     function initEmbedCommands(editor) {
@@ -2131,6 +2131,11 @@ define("content-kit-editor/editor/editor",
       this.syncModelAt(index);
     };
 
+    Editor.prototype.syncVisual = function() {
+      var html = this.compiler.render(this.model);
+      this.element.innerHTML = html;
+    };
+
     Editor.prototype.syncVisualAt = function(index) {
       if (index > -1) {
         var blockModel = this.model[index];
@@ -2400,7 +2405,7 @@ define("content-kit-editor/utils/selection-utils",
       var element = getSelectionElement();
       var tag = element && element.tagName.toLowerCase();
       while (tag && RootTags.indexOf(tag) === -1) {
-        if (element.contentEditable === 'true') { break; } // Stop traversing up dom when hitting an editor element
+        if (element.contentEditable === 'true') { return; } // Stop traversing up dom when hitting an editor element
         element = element.parentNode;
         tag = element.tagName && element.tagName.toLowerCase();
       }

diff --git a/src/js/content-kit-editor/editor/editor.js b/src/js/content-kit-editor/editor/editor.js
@@ -49,22 +49,17 @@ var defaults = {
   })
 };
 
-// TODO: remove when direction model manip. complete
 function bindContentEditableTypingCorrections(editor) {
-  // Breaks out of blockquotes when pressing enter.
   editor.element.addEventListener('keyup', function(e) {
     if(!e.shiftKey && e.which === Keycodes.ENTER) {
-      if(Type.QUOTE.tag === getSelectionBlockTagName()) {
+      var selectionTag = getSelectionBlockTagName();
+      if (!selectionTag || selectionTag === Type.QUOTE.tag) {
+        document.execCommand('formatBlock', false, Type.TEXT.tag);
+      }
+    } else if (e.which === Keycodes.BKSP) {
+      if(!editor.element.innerHTML) {
         document.execCommand('formatBlock', false, Type.TEXT.tag);
-        e.stopPropagation();
       }
-    }
-  });
-
-  // Assure there is always a supported root tag, and not empty text nodes or divs.
-  editor.element.addEventListener('keyup', function() {
-    if (this.innerHTML.length && RootTags.indexOf(getSelectionBlockTagName()) === -1) {
-      document.execCommand('formatBlock', false, Type.TEXT.tag);
     }
   });
 }
@@ -74,7 +69,7 @@ function bindPasteListener(editor) {
     var cleanedContent = cleanPastedContent(e, Type.TEXT.tag);
     if (cleanedContent) {
       document.execCommand('insertHTML', false, cleanedContent);
-      editor.syncModel();  // TODO: can optimize to just sync to paste index range
+      editor.syncModel();
     }
   });
 }
@@ -100,10 +95,15 @@ function bindAutoTypingListeners(editor) {
 
 function bindLiveUpdate(editor) {
   editor.element.addEventListener('input', function(e) {
-    editor.syncModelAtSelection();
+    editor.syncModel();
   });
 
-  // Handle special cases
+  // Experimental/buggy: parsing only the blocks where action took place
+  // Not sure if this is even more efficient. Compiler is probably faster than dom/selection checks
+  /*
+  editor.element.addEventListener('input', function(e) {
+    editor.syncModelAtSelection();
+  });
   editor.element.addEventListener('keyup', function(e) {
     // When pressing enter: parse block before cursor too
     if(!e.shiftKey && e.which === Keycodes.ENTER) {
@@ -113,8 +113,8 @@ function bindLiveUpdate(editor) {
     else if(e.which === Keycodes.BKSP || e.which === Keycodes.DEL) {
       editor.syncModelAt(editor.getCurrentBlockIndex()+1);
     }
-
   });
+  */
 }
 
 function initEmbedCommands(editor) {
@@ -204,6 +204,11 @@ Editor.prototype.syncModelAtSelection = function() {
   this.syncModelAt(index);
 };
 
+Editor.prototype.syncVisual = function() {
+  var html = this.compiler.render(this.model);
+  this.element.innerHTML = html;
+};
+
 Editor.prototype.syncVisualAt = function(index) {
   if (index > -1) {
     var blockModel = this.model[index];

diff --git a/src/js/content-kit-editor/utils/selection-utils.js b/src/js/content-kit-editor/utils/selection-utils.js
@@ -23,7 +23,7 @@ function getSelectionBlockElement(selection) {
   var element = getSelectionElement();
   var tag = element && element.tagName.toLowerCase();
   while (tag && RootTags.indexOf(tag) === -1) {
-    if (element.contentEditable === 'true') { break; } // Stop traversing up dom when hitting an editor element
+    if (element.contentEditable === 'true') { return; } // Stop traversing up dom when hitting an editor element
     element = element.parentNode;
     tag = element.tagName && element.tagName.toLowerCase();
   }