atmentions

components.comment-box.js

import Ember from 'ember';

const {
  String: { capitalize },
  $,
  Component,
  get,
  set
} = Ember;

export default Component.extend({
  tagName: '',

  storeLastPosition(lastPos) {
    return set(this, 'lastPosition', lastPos);
  },

  setAtomComponent(editor, atomName) {
    return set(this, 'atomToDisplay', atomName);
  },

  didReceiveAttrs() {
    this._super(...arguments);
    let editor = get(this, 'editor.editor');
    let component = this;
    let atKeyCommand = {
      str: 'SHIFT+2',
      run(editor) {
        component.storeLastPosition(editor.range.focusedPosition);
        component.setAtomComponent(editor, 'mention-dropdown');
      }
    };
    editor.registerKeyCommand(atKeyCommand);
  },
  
  closeAtomMenu() {
    $('.mobiledoc-editor__editor').focus();
    set(this, 'atomToDisplay', undefined);
  },
  
	refocusEditor() {
  	get(this, 'editor.editor').run(postEditor => {
      postEditor.insertText(get(this, 'lastPosition'), '');
    });
  },
  
  handleMention(payload) {
    let { fullName } = payload;
    this.closeAtomMenu();
    this.refocusEditor();
    get(this, 'editor').addAtom('mention-atom', fullName, payload);
  },
  
  actions: {
    atomAction(atomName, ...args) {
      let handler = this[`handle${capitalize(atomName)}`].bind(this);
      return handler(...args);
    }
  }
});

components.mention-atom.js

import Ember from 'ember';

const { get } = Ember;

export default Ember.Component.extend({
  tagName: ''
});

components.mention-dropdown.js

import Ember from 'ember';

const { $, run: { scheduleOnce } } = Ember;

export default Ember.Component.extend({
  users: [
    {id: 1, fullName: 'Colin Kennedy', email: 'colin@example.com'},
    {id: 2, fullName: 'Ryan Soo', email: 'ryan@example.com'},
    {id: 3, fullName: 'Lauren Tan', email: 'lauren@example.com'},
    {id: 4, fullName: 'Jacob Jin', email: 'jacob@example.com'},
    {id: 5, fullName: 'Zach Wentz', email: 'zach@example.com'},
  ],
  
  didInsertElement() {
  	this._super(...arguments);
    scheduleOnce('afterRender', this, function() {
    	this.$('input').focus();
    });
  }
});

controllers.application.js

import Ember from 'ember';
import createComponentAtom from 'ember-mobiledoc-editor/utils/create-component-atom';

const { computed, get, set } = Ember;

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  atoms: computed(function() {
    return [
      createComponentAtom('mention-atom')
    ];
  }),
  
  actions: {
  	updated(mobiledoc) {
      set(this, 'mobiledoc', mobiledoc);
    },
    
    submit() {
      console.log(get(this, 'mobiledoc'));
    }
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}

{{#mobiledoc-editor atoms=atoms on-change=(action "updated") as |editor|}}
	{{#comment-box editor=editor as |box|}}
    {{#if box.atomToDisplay}}
    	{{component box.atomToDisplay atomAction=box.atomAction}}
    {{/if}}
    {{box.editor}}
    <button onclick={{action "submit"}}>Post comment</button>
	{{/comment-box}}
{{/mobiledoc-editor}}

<br>
<br>

templates.components.comment-box.hbs

{{yield (hash
		editor=editor
		atomToDisplay=atomToDisplay
    atomAction=(action "atomAction"))    
}}

templates.components.mention-atom.hbs

@{{value}}

templates.components.mention-dropdown.hbs

<ul>
	<input type="text" placeholder="Search for someone" />
  {{#each users as |user|}}
  	<li onclick={{action atomAction "mention" user}}>
      {{user.fullName}}
    </li>
  {{/each}}
</ul>

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1",
    "ember-mobiledoc-editor": "*"
  }
}