Map markup and section state

addon/components/content-kit-editor/component.js

@@ -2,19 +2,22 @@ import Ember from 'ember';
 import layout from './template';
 
 let { computed, Component } = Ember;
+let { capitalize, camelize } = Ember.String;
+
+function arrayToMap(array, propertyName) {
+  let map = Object.create(null);
+  array.forEach(item => {
+    item = `is${capitalize(camelize(item[propertyName]))}`;
+    map[item] = true;
+  });
+  return map;
+}
 
 export default Component.extend({
   layout,
   tagName: 'article',
   classNames: ['content-kit-editor'],
 
-  activeMarkupTagNames: computed(function() {
-    return Ember.A([]);
-  }),
-  activeSectionTagNames: computed(function() {
-    return Ember.A([]);
-  }),
-
   init() {
     this._super(...arguments);
     let mobiledoc = this.get('mobiledoc');
@@ -27,6 +30,8 @@ export default Component.extend({
     }
     this.set('componentCards', Ember.A([]));
     this.set('linkOffsets', null);
+    this.set('activeMarkupTagNames', {});
+    this.set('activeSectionTagNames', {});
     this._ignoreCursorDidChange = false;
   },
 
@@ -160,8 +165,8 @@ export default Component.extend({
     editor.cursorDidChange(() => {
       if (this.isDestroyed) { return; }
 
-      const markupTags = Ember.A(editor.markupsInSelection).mapBy('tagName');
-      const sectionTags = Ember.A(editor.activeSections).mapBy('tagName');
+      const markupTags = arrayToMap(editor.markupsInSelection, 'tagName');
+      const sectionTags = arrayToMap(editor.activeSections, 'tagName');
 
       Ember.run(() => {
         this.set('activeMarkupTagNames', markupTags);

addon/components/content-kit-editor/template.hbs

@@ -1,6 +1,7 @@
 {{yield (hash
   editor=editor
-  component=this
+  activeSectionTagNames=activeSectionTagNames
+  activeMarkupTagNames=activeMarkupTagNames
   toggleMarkup=(action 'toggleMarkup')
   toggleLink=(action 'toggleLink')
   addCard=(action 'addCard')

addon/components/content-kit-toolbar/template.hbs

@@ -1,15 +1,15 @@
 <li class="content-kit-toolbar__control">
   <button
     title="Bold"
-    class="content-kit-toolbar__button {{if (in-array contentKit.component.activeMarkupTagNames 'strong') 'active'}}"
+    class="content-kit-toolbar__button {{if contentKit.activeMarkupTagNames.isStrong 'active'}}"
     {{action contentKit.toggleMarkup 'strong'}}>
     Bold
   </button>
 </li>
 <li class="content-kit-toolbar__control">
   <button
     title="Italic"
-    class="content-kit-toolbar__button {{if (in-array contentKit.component.activeMarkupTagNames 'em') 'active'}}"
+    class="content-kit-toolbar__button {{if contentKit.activeMarkupTagNames.isEm 'active'}}"
     {{action contentKit.toggleMarkup 'em'}}>
     Italic
   </button>
@@ -24,23 +24,23 @@
 <li class="content-kit-toolbar__control">
   <button
     title="Heading"
-    class="content-kit-toolbar__button {{if (in-array contentKit.component.activeSectionTagNames 'h1') 'active'}}"
+    class="content-kit-toolbar__button {{if contentKit.activeSectionTagNames.isH1 'active'}}"
     {{action contentKit.toggleSectionTagName 'h1'}}>
     Headline
   </button>
 </li>
 <li class="content-kit-toolbar__control">
   <button
     title="Subheading"
-    class="content-kit-toolbar__button {{if (in-array contentKit.component.activeSectionTagNames 'h2') 'active'}}"
+    class="content-kit-toolbar__button {{if contentKit.activeSectionTagNames.isH2 'active'}}"
     {{action contentKit.toggleSectionTagName 'h2'}}>
     Subheadline
   </button>
 </li>
 <li class="content-kit-toolbar__control">
   <button
     title="Block Quote"
-    class="content-kit-toolbar__button {{if (in-array contentKit.component.activeSectionTagNames 'blockquote') 'active'}}"
+    class="content-kit-toolbar__button {{if contentKit.activeSectionTagNames.isBlockquote 'active'}}"
     {{action contentKit.toggleSectionTagName 'blockquote'}}>
     <i class="icon-quote-block"></i>
     Link
@@ -49,7 +49,7 @@
 <li class="content-kit-toolbar__control">
   <button
     title="Pull Quote"
-    class="content-kit-toolbar__button {{if (in-array contentKit.component.activeSectionTagNames 'pull-quote') 'active'}}"
+    class="content-kit-toolbar__button {{if contentKit.activeSectionTagNames.isPullQuote 'active'}}"
     {{action contentKit.toggleSectionTagName 'pull-quote'}}>
     Pull-quote
   </button>