compiler now included as npm dep. Move embed renderers here instead o…

…f compiler

package.json

@@ -24,7 +24,11 @@
     "aws-sdk": "^2.1.7",
     "busboy": "^0.2.9",
     "embedly": "^1.0.2",
-    "express": "^4.11.1",
+    "express": "^4.11.1"
+  },
+  "devDependencies": {
+    "content-kit-utils": "0.1.0",
+    "content-kit-compiler": "0.1.1",
     "del": "^1.1.1",
     "gulp": "^3.8.10",
     "gulp-concat": "~2.1.7",
@@ -35,14 +39,11 @@
     "gulp-jshint": "~1.3.4",
     "gulp-less": "^1.3.1",
     "gulp-open": "^0.2.8",
-    "gulp-qunit": "^0.3.3",
+    "gulp-qunit": "^1.2.1",
     "gulp-replace": "^0.5.2",
     "gulp-uglify": "^1.1.0",
     "gulp-util": "~2.2.12",
-    "qunitjs": "^1.15.0"
-  },
-  "devDependencies": {
-    "content-kit-utils": "git://github.com/bustlelabs/content-kit-utils#master",
-    "content-kit-compiler": "git://github.com/bustlelabs/content-kit-compiler#master"
+    "qunitjs": "^1.17.1"
+
   }
 }

src/css/embeds.less

@@ -75,7 +75,7 @@
 
 .ck-embed iframe {
   margin: 0 auto !important;
-  // pointer-events: none;
+  width: 100% !important;
 }
 
 .ck-embed figure {

src/js/editor/editor.js

@@ -1,4 +1,4 @@
-import EditorHTMLRenderer from './editor-html-renderer';
+import EditorHTMLRenderer from '../renderers/editor-html-renderer';
 import TextFormatToolbar  from '../views/text-format-toolbar';
 import Tooltip from '../views/tooltip';
 import EmbedIntent from '../views/embed-intent';
@@ -251,7 +251,8 @@ Editor.prototype.replaceBlock = function(block, index) {
 };
 
 Editor.prototype.renderBlockAt = function(index, replace) {
-  var html = this.compiler.render([this.model[index]]);
+  var modelAtIndex = this.model[index];
+  var html = this.compiler.render([modelAtIndex]);
   var dom = document.createElement('div');
   dom.innerHTML = html;
   var newEl = dom.firstChild;

src/js/editor/editor-html-renderer.js → src/js/renderers/editor-html-renderer.js

@@ -1,13 +1,37 @@
 import HTMLRenderer from 'node_modules/content-kit-compiler/src/renderers/html-renderer';
 import Type from 'node_modules/content-kit-compiler/src/types/type';
 import { inherit } from 'node_modules/content-kit-utils/src/object-utils';
+import YouTubeRenderer from './youtube';
+import TwitterRenderer from './twitter';
+import InstagramRenderer from './instagram';
+import LinkImageRenderer from './link-image-renderer';
+
+/**
+ * A dictionary of supported embeds types that we'll custom render
+ * for the editor, instead of the default oembed html.
+ */
+var embedRenderers = {
+  YOUTUBE    : new YouTubeRenderer(),
+  TWITTER    : new TwitterRenderer(),
+  INSTAGRAM  : new InstagramRenderer(),
+  LINK_IMAGE : new LinkImageRenderer()
+};
 
 function embedRenderer(model) {
   var embedAttrs = model.attributes;
-  var isVideo = embedAttrs.embed_type === 'video';
+  var embedType = embedAttrs.embed_type;
+  var isVideo = embedType === 'video';
+  var providerName = embedAttrs.provider_name;
+  var customRendererId = providerName && providerName.toUpperCase();
+  var customRenderer = embedRenderers[customRendererId];
+  if (!customRenderer && embedType === 'link' && embedAttrs.thumbnail) {
+    customRenderer = embedRenderers['LINK_IMAGE'];
+  }
+  var renderer = customRenderer ? customRenderer : this;
+
   return '<div class="ck-embed" data-embed=1 contenteditable="false">' +
             '<figure>' +
-              (isVideo ? '<div class="ck-video-container">' : '') + this.render(model) + (isVideo ? '</div>' : '') +
+              (isVideo ? '<div class="ck-video-container">' : '') + renderer.render(model) + (isVideo ? '</div>' : '') +
               '<figcaption>' +
                 '<a target="_blank" href="' + embedAttrs.url + '">' + embedAttrs.title + '</a>' +
               '</figcaption>' +

src/js/renderers/instagram.js

@@ -0,0 +1,7 @@
+
+function InstagramRenderer() {}
+InstagramRenderer.prototype.render = function(model) {
+  return '<img src="' + model.attributes.url + '"/>';
+};
+
+export default InstagramRenderer;

src/js/renderers/link-image-renderer.js

@@ -0,0 +1,7 @@
+
+function LinkImageRenderer() {}
+LinkImageRenderer.prototype.render = function(model) {
+  return '<a href="' + model.attributes.url + '" target="_blank"><img src="' + model.attributes.thumbnail + '"/></a>';
+};
+
+export default LinkImageRenderer;

src/js/renderers/twitter.js

@@ -0,0 +1,7 @@
+
+function TwitterRenderer() {}
+TwitterRenderer.prototype.render = function(model) {
+  return '<blockquote class="twitter-tweet"><a href="' + model.attributes.url + '"></a></blockquote>';
+};
+
+export default TwitterRenderer;

src/js/renderers/youtube.js

@@ -0,0 +1,19 @@
+
+var RegExVideoId = /.*(?:youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=)([^#\&\?]*).*/;
+
+function getVideoIdFromUrl(url) {
+  var match = url && url.match(RegExVideoId);
+  if (match && match[1].length === 11){
+    return match[1];
+  }
+  return null;
+}
+
+function YouTubeRenderer() {}
+YouTubeRenderer.prototype.render = function(model) {
+  var videoId = getVideoIdFromUrl(model.attributes.url);
+  var embedUrl = 'http://www.youtube.com/embed/' + videoId + '?controls=2&showinfo=0&color=white&theme=light';
+  return '<iframe width="100%" height="400" frameborder="0" allowfullscreen src="' + embedUrl + '"></iframe>';
+};
+
+export default YouTubeRenderer;