Implement card refactor for editor-dom renderer

Update cards to be in format expected by dom renderer

This is based on the changes to mobiledoc-dom-renderer in
bustle/mobiledoc-dom-renderer#18

Reorganize demo cards into dom/ html/ and text/ directories

fixes #236
fixes #239

demo/app/components/mobiledoc-dom-renderer.js

@@ -1,22 +1,28 @@
 import Ember from 'ember';
-import { cardsHash } from '../mobiledoc-cards/index';
+import cards from '../mobiledoc-cards/dom';
 import Renderer from 'ember-mobiledoc-dom-renderer';
 
-let { computed, run } = Ember;
+let { run } = Ember;
+
+let renderer = new Renderer({cards});
 
 export default Ember.Component.extend({
-  domRenderer: computed(function(){
-    return new Renderer();
-  }),
   didRender() {
-    let domRenderer = this.get('domRenderer');
     let mobiledoc = this.get('mobiledoc');
+    if (!mobiledoc) {
+      return;
+    }
+
     run(() => {
-      let target = this.$();
-      target.empty();
-      if (mobiledoc) {
-        domRenderer.render(mobiledoc, target[0], cardsHash);
+      if (this._teardownRender) {
+        this._teardownRender();
+        this._teardownRender = null;
       }
+
+      let target = this.$();
+      let { result, teardown } = renderer.render(mobiledoc);
+      target.append(result);
+      this._teardownRender = teardown;
     });
   }
 });

demo/app/components/mobiledoc-html-renderer.js

@@ -1,23 +1,22 @@
 import Ember from 'ember';
-import { cardsHash } from '../mobiledoc-cards/index';
+import cards from '../mobiledoc-cards/html';
 import Renderer from 'ember-mobiledoc-html-renderer';
 
-let { computed, run } = Ember;
+let { run } = Ember;
+
+let renderer = new Renderer({cards});
 
 export default Ember.Component.extend({
-  htmlRenderer: computed(function(){
-    return new Renderer();
-  }),
   didRender() {
-    let renderer = this.get('htmlRenderer');
     let mobiledoc = this.get('mobiledoc');
+    if (!mobiledoc) {
+      return;
+    }
+
     run(() => {
       let target = this.$();
-      target.empty();
-      if (mobiledoc) {
-        let html = renderer.render(mobiledoc, cardsHash);
-        target.text(html);
-      }
+      let { result: html } = renderer.render(mobiledoc);
+      target.text(html);
     });
   }
 });

demo/app/components/mobiledoc-text-renderer.js

@@ -1,26 +1,36 @@
 import Ember from 'ember';
-import { cardsHash } from '../mobiledoc-cards/index';
+import cards from '../mobiledoc-cards/text';
 import Renderer from 'ember-mobiledoc-text-renderer';
 
-let { computed, run } = Ember;
+let { run } = Ember;
+
+let renderer = new Renderer({cards});
+
+let addHTMLEntitites = (str) => {
+  return str.replace(/</g,  '&lt;')
+            .replace(/>/g,  '&gt;')
+            .replace(/\n/g, '<br>');
+};
 
 export default Ember.Component.extend({
-  textRenderer: computed(function(){
-    return new Renderer();
-  }),
   didRender() {
-    let renderer = this.get('textRenderer');
     let mobiledoc = this.get('mobiledoc');
+    if (!mobiledoc) {
+      return;
+    }
     run(() => {
-      let target = this.$();
-      target.empty();
-      if (mobiledoc) {
-        let text = renderer.render(mobiledoc, cardsHash);
-        text = text.replace(/</g, '&lt;')
-                   .replace(/>/g,'&gt;')
-                   .replace(/\n/g, '<br>');
-        target.html(text);
+      if (this._teardownRender) {
+        this._teardownRender();
+        this._teardownRender = null;
       }
+
+      let target = this.$();
+      let {result: text, teardown} = renderer.render(mobiledoc);
+
+      text = addHTMLEntitites(text);
+      target.html(text);
+
+      this._teardownRender = teardown;
     });
   }
 });

demo/app/helpers/mobiledoc-cards-list.js

@@ -1,8 +1,8 @@
 import Ember from 'ember';
-import { cardsList } from '../mobiledoc-cards/index';
+import cards from '../mobiledoc-cards/dom';
 
 export function mobiledocCardsList() {
-  return cardsList;
+  return cards;
 }
 
 export default Ember.Helper.helper(mobiledocCardsList);

demo/app/mobiledoc-cards/dom.js

@@ -0,0 +1,13 @@
+import inputCard from './dom/input';
+import simpleCard from './dom/simple';
+import selfieCard from './dom/selfie';
+import imageCard from './dom/image';
+import codemirrorCard from './dom/codemirror';
+
+export default [
+  inputCard,
+  simpleCard,
+  selfieCard,
+  imageCard,
+  codemirrorCard
+];

demo/app/mobiledoc-cards/dom/codemirror.js

@@ -0,0 +1,50 @@
+/* global $, CodeMirror */
+const defaultCode = 'let x = 3;';
+
+function codeMirror(element, code, readOnly=true, callback=()=>{}) {
+  setTimeout(() => {
+    let ta = $(`<textarea>${code}</textarea>`).appendTo(element);
+    let options = {
+      mode: 'javascript'
+    };
+    if (readOnly) {
+      options.readOnly = 'nocursor';
+    }
+    let cm = CodeMirror.fromTextArea(ta[0], options);
+    callback(cm);
+  });
+}
+
+export default {
+  name: 'codemirror-card',
+  type: 'dom',
+
+  render({env, options, payload}) {
+    let element = $('<div></div>')[0];
+    let code = payload.code || defaultCode;
+
+    if (env.isInEditor) {
+      $('<button>Edit</button>').appendTo(element).on('click', env.edit);
+    }
+
+    let readOnly = true;
+    codeMirror(element, code, readOnly);
+
+    return element;
+  },
+
+  edit({env, options, payload}) {
+    let element = $('<div></div>')[0];
+    let code = payload.code || defaultCode;
+
+    let saveButton = $('<button>Save</button>').appendTo(element);
+
+    let readOnly = false;
+    let callback = (cm) => {
+      saveButton.on('click', () => env.save({code: cm.getValue()}));
+    };
+    codeMirror(element, code, readOnly, callback);
+
+    return element;
+  }
+};

demo/app/mobiledoc-cards/dom/image.js

@@ -0,0 +1,56 @@
+/* global $ */
+const defaultSrc = 'http://placekitten.com/200/75';
+
+function makeImageInWrapper(src=defaultSrc) {
+  return $('<div></div>').append(`<img src="${src}">`)[0];
+}
+
+export default {
+  name: 'image-card',
+  type: 'dom',
+  render({env, payload}) {
+    let element = makeImageInWrapper(payload.src);
+    let { isInEditor } = env;
+
+    if (isInEditor) {
+      $('<button>Change</button>').appendTo(element)
+        .on('click', env.edit);
+    }
+
+    return element;
+  },
+  edit({env, payload}) {
+    let element = makeImageInWrapper(payload.src);
+
+    function importImage(event) {
+      let reader = new FileReader();
+      let file = event.target.files[0];
+      reader.onloadend = () => {
+        env.save({src: reader.result});
+      };
+      reader.readAsDataURL(file);
+    }
+
+    $('<input type="file">').appendTo(element)
+      .on('change', importImage);
+
+    $('<button>Save</button>').appendTo(element)
+      .on('click', () => { env.save(payload); });
+
+    return element;
+  }
+  /* FIXME: html and text
+  html: {
+    setup(buffer, options, env, payload) {
+      let src = payload.src || defaultSrc;
+      let html = `<img src="${src}">`;
+      buffer.push(html);
+    }
+  },
+  text: {
+    setup(str, options, env, payload) {
+      return "[image]";
+    }
+  }
+  */
+};

demo/app/mobiledoc-cards/dom/input.js

@@ -0,0 +1,37 @@
+import Ember from 'ember';
+
+let { $ } = Ember;
+
+export default {
+  name: 'input-card',
+  type: 'dom',
+  render({env, payload}) {
+    var text = 'I am in display mode';
+    if (payload.name) {
+      text = 'Hello, ' + payload.name + '!';
+    }
+    var card = $(`<div>${text}</div>`);
+    var button = $('<button>Edit</button>');
+    button.on('click', env.edit);
+
+    if (env.edit) {
+      card.append(button);
+    }
+    return card[0];
+  },
+  edit({env}) {
+    var card = $('<div>What is your name?</div>');
+    card.innerHTML = 'What is your name?';
+
+    var input = $('<input placeholder="Enter your name...">');
+    var button = $('<button>Save</button>');
+    button.on('click', () => {
+      var name = input.val();
+      env.save({name});
+    });
+
+    card.append(input);
+    card.append(button);
+    return card[0];
+  }
+};