Convert demo cards to 0.3.0 format, add an example Atom

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

@@ -1,8 +1,9 @@
 import Ember from 'ember';
 import cards from '../mobiledoc-cards/dom';
+import atoms from '../mobiledoc-atoms/dom';
 import Renderer from 'ember-mobiledoc-dom-renderer';
 
-let renderer = new Renderer({cards});
+let renderer = new Renderer({cards, atoms});
 
 export default Ember.Component.extend({
   didRender() {

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

@@ -1,8 +1,9 @@
 import Ember from 'ember';
 import cards from '../mobiledoc-cards/html';
+import atoms from '../mobiledoc-atoms/html';
 import Renderer from 'ember-mobiledoc-html-renderer';
 
-let renderer = new Renderer({cards});
+let renderer = new Renderer({cards, atoms});
 
 export default Ember.Component.extend({
   didRender() {

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

@@ -1,8 +1,9 @@
 import Ember from 'ember';
 import cards from '../mobiledoc-cards/text';
+import atoms from '../mobiledoc-atoms/text';
 import Renderer from 'ember-mobiledoc-text-renderer';
 
-let renderer = new Renderer({cards});
+let renderer = new Renderer({cards, atoms});
 
 let addHTMLEntitites = (str) => {
   return str.replace(/</g,  '&lt;')

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

@@ -0,0 +1,8 @@
+import Ember from 'ember';
+import atoms from '../mobiledoc-atoms/dom';
+
+export function mobiledocAtomsList() {
+  return atoms;
+}
+
+export default Ember.Helper.helper(mobiledocAtomsList);

demo/app/mobiledoc-atoms/dom.js

@@ -0,0 +1,5 @@
+import mentionAtom from './dom/mention';
+
+export default [
+  mentionAtom
+];

demo/app/mobiledoc-atoms/dom/mention.js

@@ -0,0 +1,10 @@
+export default {
+  name: 'mention-atom',
+  type: 'dom',
+  render({value}) {
+    const element = document.createElement("span");
+    element.className = 'mention-atom';
+    element.appendChild(document.createTextNode(`Hello ${value}`));
+    return element;
+  }
+};

demo/app/mobiledoc-atoms/html.js

@@ -0,0 +1,5 @@
+import mentionAtom from './html/mention';
+
+export default [
+  mentionAtom
+];

demo/app/mobiledoc-atoms/html/mention.js

@@ -0,0 +1,7 @@
+export default {
+  name: 'mention-atom',
+  type: 'html',
+  render({value}) {
+    return `<span class="mention-atom">Hello ${value}</span>`;
+  }
+};

demo/app/mobiledoc-atoms/text.js

@@ -0,0 +1,5 @@
+import mentionAtom from './text/mention';
+
+export default [
+  mentionAtom
+];

demo/app/mobiledoc-atoms/text/mention.js

@@ -0,0 +1,7 @@
+export default {
+  name: 'mention-atom',
+  type: 'text',
+  render({value}) {
+    return `Hello ${value}`;
+  }
+};

demo/app/mobiledocs/index.js

@@ -1,102 +1,130 @@
 export default {
-  codemirrorCard: {
-    version: '0.2.0',
+  mentionAtom: {
+    version: '0.3.0',
+    atoms: [
+      ['mention-atom', 'Bob', {}]
+    ],
+    markups: [],
+    cards: [],
     sections: [
-      [],
-      [
-        [1, 'h2', [
-          [[], 0, 'Codemirror']
-        ]],
-        [10, 'codemirror-card'],
-      ]
+      [1, 'h2', [
+        [0, [], 0, 'Mention Atom']
+      ]],
+      [1, 'P', [
+        [0, [], 0, 'Text before the atom. '],
+        [1, [], 0, 0],
+        [0, [], 0, ' Text after the atom.']
+      ]]
     ]
   },
-  empty: {
-    version: '0.2.0',
+  codemirrorCard: {
+    version: '0.3.0',
+    atoms: [],
+    markups: [],
+    cards: [
+      ['codemirror-card']
+    ],
     sections: [
-      [],
-      []
+      [1, 'h2', [
+        [0, [], 0, 'Codemirror']
+      ]],
+      [10, 0],
     ]
   },
   'null': null,
   blank: '',
+  empty: {
+    version: '0.3.0',
+    atoms: [],
+    markups: [],
+    cards: [],
+    sections: []
+  },
   inputCard: {
-    version: '0.2.0',
+    version: '0.3.0',
+    atoms: [],
+    markups: [],
+    cards: [
+      ['input-card']
+    ],
     sections: [
-      [],
-      [
-        [1, 'H2', [
-          [[], 0, 'Input Card']
-        ]],
-        [10, 'input-card'],
-        [1, 'P', [
-          [[], 0, 'Text after the card.']
-        ]]
-      ]
+      [1, 'H2', [
+        [[], 0, 'Input Card']
+      ]],
+      [10, 0],
+      [1, 'P', [
+        [0, [], 0, 'Text after the card.']
+      ]]
     ]
   },
   imageCard: {
-    version: '0.2.0',
+    version: '0.3.0',
+    atoms: [],
+    markups: [],
+    cards: [
+      ['image-card']
+    ],
     sections: [
-      [],
-      [
-        [1, 'p', [[[], 0, 'before']]],
-        [10, 'image-card'],
-        [1, 'p', [[[], 0, 'after']]]
-      ]
+      [1, 'p', [[0, [], 0, 'before']]],
+      [10, 0],
+      [1, 'p', [[0, [], 0, 'after']]]
     ]
   },
   selfieCard: {
-    version: '0.2.0',
+    version: '0.3.0',
+    atoms: [],
+    markups: [],
+    cards: [
+      ['selfie-card']
+    ],
     sections: [
-      [],
-      [
-        [1, 'H2', [
-          [[], 0, 'Selfie Card']
-        ]],
-        [10, 'selfie-card']
-      ]
+      [1, 'H2', [
+        [0, [], 0, 'Selfie Card']
+      ]],
+      [10, 0]
     ]
   },
   simpleCard: {
-    version: '0.2.0',
+    version: '0.3.0',
+    atoms: [],
+    markups: [],
+    cards: [
+      ['simple-card']
+    ],
     sections: [
-      [],
-      [
-        [1, 'p', [[[], 0, 'before']]],
-        [10, 'simple-card'],
-        [1, 'p', [[[], 0, 'after']]]
-      ]
+      [1, 'p', [[0, [], 0, 'before']]],
+      [10, 0],
+      [1, 'p', [[0, [], 0, 'after']]]
     ]
   },
   simpleList: {
-    version: '0.2.0',
+    version: '0.3.0',
+    atoms: [],
+    markups: [],
+    cards: [],
     sections: [
-      [],
-      [
-        [1, 'H2', [
-          [[], 0, 'To do today:']
-        ]],
-        [3, 'ul', [
-          [[[], 0, 'buy milk']],
-          [[[], 0, 'water plants']],
-          [[[], 0, 'world domination']]
-        ]]
-      ]
+      [1, 'H2', [
+        [0, [], 0, 'To do today:']
+      ]],
+      [3, 'ul', [
+        [[0, [], 0, 'buy milk']],
+        [[0, [], 0, 'water plants']],
+        [[0, [], 0, 'world domination']]
+      ]]
     ]
   },
   simple: {
-    version: '0.2.0',
+    version: '0.3.0',
+    atoms: [],
+    markups: [],
+    cards: [],
     sections: [
-      [],
-      [
-        [1, 'H2', [
-          [[], 0, 'Hello World']
-        ]],
-        [1, 'p', [
-          [[], 0, 'This is Mobiledoc-kit.']
-        ]]
-      ]
+      [1, 'H2', [
+        [0, [], 0, 'Hello World']
+      ]],
+      [1, 'p', [
+        [0, [], 0, 'This is Mobiledoc-kit.']
+      ]]
     ]
   },
   emberCard: {

demo/app/styles/app.css

@@ -242,3 +242,12 @@ hr {
   font-weight: bold;
   background-color: aliceblue;
 }
+
+.mention-atom {
+  background-color: #CCC;
+  border-radius: 5px;
+  color: #FFF;
+  padding: 0 5px;
+  font-size: 0.75em;
+}
+

demo/app/templates/index.hbs

@@ -29,11 +29,13 @@
         <option value='inputCard'>Card with Input</option>
         <option value='selfieCard'>Selfie Card</option>
         <option value='codemirrorCard'>Codemirror Card</option>
+        <option value='mentionAtom'>Mention Atom</option>
       </select>
       {{#mobiledoc-editor
           class='post-editor__editor'
           mobiledoc=mobiledoc
           cards=(mobiledoc-cards-list)
+          atoms=(mobiledoc-atoms-list)
           on-change=(action 'didEdit')
         as |editor|}}
         <button {{action editor.addCardInEditMode 'image-card'}}>Add image</button>