Rich Text

components.my-component.js

import Ember from 'ember';
const { Component } = Ember;

export default Ember.Component.extend({
  results: undefined,
  
  init() {
    this._super(...arguments);
    this.set('results', [1, 2, 3]);
  },
  
  actions: {
    keyUp() {
      console.log('keyUp action called in parent.');
    }
  }
});

components.rich-text.input.js

import Ember from 'ember';
const { Component, assert, tryInvoke } = Ember;

export default Component.extend({
  classNames: ['rich-text-input'],

  attributeBindings: ['aria-labelledby', 'aria-multiline', 'contenteditable', 'role'],

  'aria-labelledby': undefined,
  'aria-multiline': true,
  contenteditable: true,
  role: 'textbox',
	value: undefined,
  
  keyUp(evt) {
      console.log('keyUp', evt);
      tryInvoke(this, 'onKeyUp', [evt]);
  },

  init() {
    this._super(...arguments);

    assert('rich-text/index: "aria-labelledby" is required field.', this.get('aria-labelledby'));
    
  },
  
  didRender() {
    this._super(...arguments);
    
    const value = this.get('value');
    const attributes = value.attributes;
    const text = value.text;
    let html = '';
    let index = 0;
    
    
    attributes.map((item) => {
      const normalText = text.substring(index, item.start);
      html += normalText;
      html += this._attributedEntity(item, text);
      
      index = item.start + item.length;
    });
    
    html += text.substring(index);
    
    this.$()[0].innerHTML = html;
  },
  
  actions: {
    keyUp(evt) {
      tryInvoke(this, 'onKeyUp', [evt]);
    },
  },
  
  _attributedEntity(item, originalText) {
    const start = item.start;
    const end = start + item.length;
    return `<span class="rich-text-input__highlighted">${originalText.substring(start, end)}</span>`;
  }
});

components.rich-text.js

import Ember from 'ember';
const { Component, tryInvoke } = Ember;

export default Component.extend({
  classNames: ['rich-text'],
  
  'aria-labelledby': undefined,
  
  inputText: undefined,
  
  hasContent: Ember.computed('inputText', function hasContent() {
    const inputText = this.get('inputText');
    
    return inputText && inputText.get('attributes').length || inputText.get('text').length;
  }).readOnly(),

  init() {
    this._super(...arguments);

    this.setProperties({
      'aria-labelledby': `rich-text-${this.elementId}`,
    });
  },

  actions: {
    keyUp(evt) {
      tryInvoke(this, 'onKeyUp', [evt]);
    },
  },
});

components.rich-text.placeholder.js

import Ember from 'ember';
const { Component } = Ember;

export default Component.extend({
});

components.rich-text.typeahead-results-list.js

import Ember from 'ember';
const { Component } = Ember;

export default Component.extend({
  classNames: ['typeahead-results-list'],
  
  attributeBindings: ['role'],
  role: 'listbox'
});

components.typeahead.result-item.js

import Ember from 'ember';

export default Ember.Component.extend({
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Rich Text',
});

routes.application.js

import Ember from 'ember';
const { Object, Route } = Ember;

export default Route.extend({
  model() {
    return {
      inputText: Object.create({  
         "attributes":[  
            {  
               "start":15,
               "length":18,
               "profileEntity":{  
                  "lastName":"quiz1",
                  "urn":"urn:li:learningProfile:AEQAAApa0okBvBQLpHnYhx5qe2kLWOk7nTC2krI",
                  "memberDistance":"SELF",
                  "firstName":"quiz1"
               },
               "type":{  
                  "com.linkedin.learning.api.text.Entity":{  
                     "urn":"urn:li:learningProfile:AEQAAApa0okBvBQLpHnYhx5qe2kLWOk7nTC2krI"
                  }
               }
            }
         ],
         "text":"Adding mention Guesty McGuestface. This is sample text after adding one."
      })
    };
  }
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.rich-text {
}

.rich-text-input__highlighted {
  background: lightblue;
}

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{my-component text=model.inputText}}
<br>
<br>

templates.components.my-component.hbs

{{#rich-text
	inputText=text
  onKeyUp=(action "keyUp")
  as |richTextArgs|}}
  
  {{#richTextArgs.placeholder}}
  	This is an intance placeholder text.
  {{/richTextArgs.placeholder}}
  
  {{#richTextArgs.results-list}}
  	{{#each results as |result index|}}
    	{{#typeahead/result-item}}
      	<strong>{{index}}</strong>
      {{/typeahead/result-item}}
    {{/each}}
  {{/richTextArgs.results-list}}
{{/rich-text}}

templates.components.rich-text.hbs

{{rich-text/input
  class="rich-text__input"
  aria-labelledby=aria-labelledby
  value=inputText
  onKeyUp=(action "keyUp")}}

{{#unless hasContent}}
	<span class="a11y-text" id={{aria-labelledby}}>This aria-text content.</span>
{{/unless}}

{{yield (hash
  placeholder=(unless hasContent (component "rich-text/placeholder"
  	class="rich-text__placeholder"
  	elementId=aria-labelledby)
  )
  results-list=(component "rich-text/typeahead-results-list"
  	class="rich-text__typeahead-results-list"
  )
)}}

templates.components.rich-text.input.hbs

{{yield}}

templates.components.rich-text.placeholder.hbs

{{yield}}

templates.components.rich-text.typeahead-results-list.hbs

{{yield}}

templates.components.typeahead.result-item.hbs

{{yield}}

twiddle.json

{
  "version": "0.13.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.16.2",
    "ember-template-compiler": "2.16.2",
    "ember-testing": "2.16.2"
  },
  "addons": {
    "ember-data": "2.16.3"
  }
}