Update demo to insert @-mentions

demo/app/controllers/index.js

@@ -14,6 +14,22 @@ export default Ember.Controller.extend({
   },
 
   actions: {
+    addEditorListeners(editor) {
+      editor.onTextInput({
+        text: '@',
+        run(editor) {
+          let whom = window.prompt('Mention whom?');
+          let range = editor.range;
+          editor.run(postEditor => {
+            range = range.extend(-1); // include the "@"
+            let position = postEditor.deleteRange(range);
+            let atom = postEditor.builder.createAtom('mention-atom', whom);
+            postEditor.insertMarkers(position, [atom]);
+          });
+        }
+      });
+    },
+
     changeMobiledoc() {
       let selectElement = $('#select-mobiledoc');
       let name = selectElement.val();

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

@@ -4,7 +4,11 @@ export default {
   render({value}) {
     const element = document.createElement("span");
     element.className = 'mention-atom';
-    element.appendChild(document.createTextNode(`Hello ${value}`));
+    let textNode = document.createTextNode('@' + value);
+    let link = document.createElement('a');
+    link.setAttribute('href', `http://github.com/${value}`);
+    link.appendChild(textNode);
+    element.appendChild(link);
     return element;
   }
 };

demo/app/templates/index.hbs

@@ -35,6 +35,7 @@
       {{#mobiledoc-editor
           class='post-editor__editor'
           mobiledoc=mobiledoc
+          did-create-editor=(action 'addEditorListeners')
           cards=(mobiledoc-cards-list)
           atoms=(mobiledoc-atoms-list)
           on-change=(action 'didEdit')