prepping embeds for interactive editing.

src/css/embeds.less

@@ -63,15 +63,20 @@
 .ck-embed {
   text-align: center;
   margin: 1em 0;
-  border: 2px solid transparent;
-  border-radius: 2px;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
-.ck-embed.selected {
-  border-color: @themeColor;
+.ck-embed.selected figure {
+  border: 4px solid @themeColor;
+  margin: -4px;
 }
 
 .ck-embed iframe {
   margin: 0 auto !important;
+  // Allows us to select embeds and show a toolbar when clicking instead of playing videos/executing links
+  pointer-events: none;
 }
 
 .ck-embed figure {

src/css/message.less

@@ -18,9 +18,9 @@
 }
 
 .ck-message-error {
-  color: #fff;
-  background-color: fade(#FF2D55, 95%);
-  border-bottom: 1px solid lighten(#FF2D55, 3%);
+  color: #a33a3a;
+  background-color: fade(#e96a6a, 98%);
+  border-bottom: 1px solid darken(#e96a6a, 3%);
 }
 
 @-webkit-keyframes messageShowHide {

src/js/content-kit-editor/commands/link.js

@@ -22,6 +22,10 @@ function LinkCommand() {
 inherit(LinkCommand, TextFormatCommand);
 
 LinkCommand.prototype.exec = function(url) {
+  if (!url) {
+    return LinkCommand._super.prototype.unexec.call(this);
+  }
+
   if(this.tag === getSelectionTagName()) {
     this.unexec();
   } else {

src/js/content-kit-editor/commands/oembed.js

@@ -50,6 +50,9 @@ OEmbedCommand.prototype.exec = function(url) {
         }
         new Message().showError(errorMsg);
         embedIntent.show();
+      } else if (response.error_message) {
+        new Message().showError(response.error_message);
+        embedIntent.show();
       } else {
         var embedModel = new EmbedModel(response);
         editorContext.insertBlockAt(embedModel, index);

src/js/content-kit-editor/editor/editor-html-renderer.js

@@ -7,7 +7,7 @@ var RegExpHttp = /^https?:\/\//i;
 function embedRenderer(model) {
   var embedAttrs = model.attributes;
   var isVideo = embedAttrs.embed_type === 'video';
-  return '<div class="ck-embed" contenteditable="false">' +
+  return '<div class="ck-embed" data-embed=1 contenteditable="false">' +
             '<figure>' +
               (isVideo ? '<div class="ck-video-container">' : '') + this.render(model) + (isVideo ? '</div>' : '') +
               '<figcaption>' + embedAttrs.provider_name + ': ' +
@@ -19,7 +19,7 @@ function embedRenderer(model) {
 
 function imageRenderer(model) {
   var imagePersisted = RegExpHttp.test(model.attributes.src);
-  return '<div class="ck-embed ck-image-embed' + (imagePersisted ? '' : ' ck-image-local') + '" contenteditable="false">' +
+  return '<div class="ck-embed ck-image-embed' + (imagePersisted ? '' : ' ck-image-local') + '" data-embed=1 contenteditable="false">' +
             '<figure>' + this.render(model) + '</figure>' +
           '</div>';
 }

src/js/content-kit-editor/editor/editor.js

@@ -110,24 +110,6 @@ function bindLiveUpdate(editor) {
   editor.element.addEventListener('input', function() {
     editor.syncModel();
   });
-
-  // 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) {
-      editor.syncModelAt(editor.getCurrentBlockIndex()-1);
-    }
-    // When pressing backspace/del: parse block after cursor too
-    else if(e.which === Keycodes.BKSP || e.which === Keycodes.DEL) {
-      editor.syncModelAt(editor.getCurrentBlockIndex()+1);
-    }
-  });
-  */
 }
 
 function initEmbedCommands(editor) {
@@ -198,6 +180,7 @@ merge(Editor.prototype, EventEmitter);
 Editor.prototype.syncModel = function() {
   this.model = this.compiler.parse(this.element.innerHTML);
   this.trigger('update');
+  return this;
 };
 
 Editor.prototype.syncModelAt = function(index) {

src/js/content-kit-editor/utils/event-delegate.js

@@ -0,0 +1,11 @@
+export default function(element, event, attr, handler) {
+  element.addEventListener(event, function(e) {
+    var node = e.target;
+    while(node && node !== element) {
+      if (node.getAttribute(attr)) {
+        return handler.call(node, e);
+      }
+      node = node.parentNode;
+    }
+  });
+}

src/js/content-kit-editor/views/view.js

@@ -1,15 +1,19 @@
 function renderClasses(view) {
   var classNames = view.classNames;
-  view.element.className = classNames && classNames.length ? classNames.join(' ') : '';
+  if (classNames && classNames.length) {
+    view.element.className = classNames.join(' ');
+  } else if(view.element.className) {
+    view.element.removeAttribute('className');
+  }
 }
 
 function View(options) {
   this.tagName = options.tagName || 'div';
   this.classNames = options.classNames || [];
   this.element = document.createElement(this.tagName);
-  this.element.className = this.classNames.join(' ');
   this.container = options.container || document.body;
   this.isShowing = false;
+  renderClasses(this);
 }
 
 View.prototype = {
@@ -29,9 +33,6 @@ View.prototype = {
       return true;
     }
   },
-  focus: function() {
-    this.element.focus();
-  },
   addClass: function(className) {
     var index = this.classNames.indexOf(className);
     if (index === -1) {