Introduce cards

demo/index.html

@@ -72,7 +72,13 @@ <h3>Keyboard shortcuts:</h3>
 
   <script>
     // Initialize a new Editor
-    var editor = new ContentKit.Editor('.editor');
+    var editor = new ContentKit.Editor('.editor', {
+      cards: {
+        'pick-color': function renderPickColor(payload) {
+          return 'PICK A COLOR: '+payload.options.join(', ');
+        }
+      }
+    });
   </script>
 
   <!-- JS just for the demo page -->

src/js/commands/card.js

@@ -0,0 +1,38 @@
+import Command from './base';
+import { inherit } from 'node_modules/content-kit-utils/src/object-utils';
+import BlockModel from 'node_modules/content-kit-compiler/src/models/block';
+import Type from 'node_modules/content-kit-compiler/src/types/type';
+
+function injectCardBlock(cardName, cardPayload, editor, index) {
+  // 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() {
+  Command.call(this, {
+    name: 'card',
+    button: '<i>CA</i>'
+  });
+}
+inherit(CardCommand, Command);
+
+CardCommand.prototype = {
+  exec: function() {
+    CardCommand._super.prototype.exec.call(this);
+    var editor = this.editorContext;
+    var currentEditingIndex = editor.getCurrentBlockIndex();
+
+    var cardName = 'pick-color';
+    var cardPayload = { options: ['red', 'blue'] };
+    injectCardBlock(cardName, cardPayload, editor, currentEditingIndex);
+    editor.renderBlockAt(currentEditingIndex, true);
+  }
+};
+
+export default CardCommand;

src/js/commands/oembed.js

@@ -35,7 +35,7 @@ OEmbedCommand.prototype.exec = function(url) {
   var editorContext = command.editorContext;
   var embedIntent = command.embedIntent;
   var index = editorContext.getCurrentBlockIndex();
-  
+
   embedIntent.showLoading();
   this.embedService.fetch({
     url: url,

src/js/editor/editor.js

@@ -12,6 +12,7 @@ import UnorderedListCommand from '../commands/unordered-list';
 import OrderedListCommand from '../commands/ordered-list';
 import ImageCommand from '../commands/image';
 import OEmbedCommand from '../commands/oembed';
+import CardCommand from '../commands/card';
 import Keycodes from '../utils/keycodes';
 import { getSelectionBlockElement, getCursorOffsetInElement } from '../utils/selection-utils';
 import EventEmitter from '../utils/event-emitter';
@@ -36,17 +37,16 @@ var defaults = {
     new SubheadingCommand()
   ],
   embedCommands: [
-    new ImageCommand({  serviceUrl: '/upload' }),
-    new OEmbedCommand({ serviceUrl: '/embed'  })
+    new ImageCommand({ serviceUrl: '/upload' }),
+    new OEmbedCommand({ serviceUrl: '/embed'  }),
+    new CardCommand()
   ],
   autoTypingCommands: [
     new UnorderedListCommand(),
     new OrderedListCommand()
   ],
-  compiler: new Compiler({
-    includeTypeNames: true, // outputs models with type names, i.e. 'BOLD', for easier debugging
-    renderer: new EditorHTMLRenderer() // subclassed HTML renderer that adds dom structure for additional editor interactivity
-  })
+  compiler: null,
+  cards: {}
 };
 
 function bindContentEditableTypingListeners(editor) {
@@ -169,12 +169,14 @@ function getNonTextBlocks(blockTypeSet, model) {
 function Editor(element, options) {
   var editor = this;
   mergeWithOptions(editor, defaults, options);
-
-  // Update embed commands by prepending the serverHost
-  editor.embedCommands = [
-    new ImageCommand({  serviceUrl: editor.serverHost + '/upload' }),
-    new OEmbedCommand({ serviceUrl: editor.serverHost + '/embed'  })
-  ];
+  if (!editor.compiler) {
+    editor.compiler = new Compiler({
+      includeTypeNames: true, // outputs models with type names, i.e. 'BOLD', for easier debugging
+      renderer: new EditorHTMLRenderer({
+        cards: editor.cards
+      }) // subclassed HTML renderer that adds dom structure for additional editor interactivity
+    });
+  }
 
   if (element) {
     applyClassName(element);

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

@@ -5,6 +5,7 @@ import YouTubeRenderer from './youtube';
 import TwitterRenderer from './twitter';
 import InstagramRenderer from './instagram';
 import LinkImageRenderer from './link-image-renderer';
+import { merge } from 'node_modules/content-kit-utils/src/object-utils';
 
 /**
  * A dictionary of supported embeds types that we'll custom render
@@ -55,10 +56,12 @@ typeRenderers[Type.IMAGE.id] = imageRenderer;
  * Subclass of HTMLRenderer specifically for the Editor
  * Wraps interactive elements to add functionality
  */
-function EditorHTMLRenderer() {
-  HTMLRenderer.call(this, {
+function EditorHTMLRenderer(options) {
+  var rendererOptions = {
     typeRenderers: typeRenderers
-  });
+  };
+  merge(rendererOptions, options);
+  HTMLRenderer.call(this, rendererOptions);
 }
 inherit(EditorHTMLRenderer, HTMLRenderer);