[BUGFIX] Ensure ol/ul buttons have correct active state

See bustle/mobiledoc-kit#359.
Changes the `activeSectionTagNames` map to use the parent tag name
for nested sections, so that it has `isUl` and `isOl` instead of `isLi`.

Fixes #22.

addon/components/mobiledoc-editor/component.js

@@ -19,12 +19,12 @@ const EMPTY_MOBILEDOC = {
   sections: []
 };
 
-function arrayToMap(array, propertyName) {
+function arrayToMap(array) {
   let map = Object.create(null);
-  array.forEach(item => {
-    if (item[propertyName]) {
-      item = `is${capitalize(camelize(item[propertyName]))}`;
-      map[item] = true;
+  array.forEach(key => {
+    if (key) { // skip undefined/falsy key values
+      key = `is${capitalize(camelize(key))}`;
+      map[key] = true;
     }
   });
   return map;
@@ -244,8 +244,14 @@ export default Component.extend({
   },
 
   inputModeDidChange(editor) {
-    const markupTags = arrayToMap(editor.activeMarkups, 'tagName');
-    const sectionTags = arrayToMap(editor.activeSections, 'tagName');
+    const markupTags = arrayToMap(editor.activeMarkups.map(m => m.tagName));
+    // editor.activeSections are leaf sections.
+    // Map parent section tag names (e.g. 'p', 'ul', 'ol') so that list buttons
+    // are updated.
+    let sectionParentTagNames = editor.activeSections.map(s => {
+      return s.isNested ? s.parent.tagName : s.tagName;
+    });
+    const sectionTags = arrayToMap(sectionParentTagNames);
 
     this.set('activeMarkupTagNames', markupTags);
     this.set('activeSectionTagNames', sectionTags);

addon/components/mobiledoc-toolbar/template.hbs

@@ -58,15 +58,15 @@
 <li class="mobiledoc-toolbar__control">
   <button
     title="List"
-    class="mobiledoc-toolbar__button"
+    class="mobiledoc-toolbar__button {{if editor.activeSectionTagNames.isUl 'active'}}"
     {{action editor.toggleSection 'ul'}}>
     Unordered List
   </button>
 </li>
 <li class="mobiledoc-toolbar__control">
   <button
     title="Numbered List"
-    class="mobiledoc-toolbar__button"
+    class="mobiledoc-toolbar__button {{if editor.activeSectionTagNames.isOl 'active'}}"
     {{action editor.toggleSection 'ol'}}>
     Ordered List
   </button>

package.json

@@ -49,7 +49,7 @@
     "ember-cli-babel": "^5.1.3",
     "ember-cli-htmlbars": "^1.0.0",
     "ember-wormhole": "^0.3.4",
-    "mobiledoc-kit": "0.9.2-beta.2"
+    "mobiledoc-kit": "0.9.2-beta.3"
   },
   "ember-addon": {
     "configPath": "tests/dummy/config"

tests/helpers/create-mobiledoc.js

@@ -14,6 +14,22 @@ export function simpleMobileDoc(text) {
   };
 }
 
+export function mobiledocWithList(text, listTagName='ol') {
+  return {
+    version: MOBILEDOC_VERSION,
+    markups: [],
+    atoms: [],
+    cards: [],
+    sections: [
+      [3, listTagName, [
+        [
+          [0, [], 0, text]
+        ]
+      ]]
+    ]
+  };
+}
+
 export function mobiledocWithCard(cardName, cardPayload={}) {
   return {
     version: MOBILEDOC_VERSION,

tests/integration/components/mobiledoc-toolbar/component-test.js

@@ -1,7 +1,7 @@
 import { moduleForComponent, test } from 'ember-qunit';
 import hbs from 'htmlbars-inline-precompile';
 import {
-  linkMobileDoc
+  linkMobileDoc, mobiledocWithList
 } from '../../../helpers/create-mobiledoc';
 import MobiledocKit from 'mobiledoc-kit';
 
@@ -18,7 +18,6 @@ test('it displays buttons', function(assert) {
   let mockEditor = {
     toggleMarkup() {},
     toggleSection() {},
-    createListSection() {},
     toggleLink() {}
   };
   this.set('editor', mockEditor);
@@ -48,3 +47,37 @@ test('Link button is active when text is linked', function(assert) {
 
   assert.ok(button.hasClass('active'), 'button is active after selecting link text');
 });
+
+test('List button is action when text is in list', function(assert) {
+  let text = 'Hello';
+  this.set('mobiledoc', mobiledocWithList(text, 'ul'));
+  this.on('did-create-editor', (editor) => this._editor = editor);
+  this.render(hbs`
+    {{#mobiledoc-editor mobiledoc=mobiledoc did-create-editor=(action 'did-create-editor') as |editor|}}
+      {{mobiledoc-toolbar editor=editor}}
+    {{/mobiledoc-editor}}
+  `);
+
+  let ulButton = this.$('button[title="List"]');
+  let olButton = this.$('button[title="Numbered List"]');
+  assert.ok(!ulButton.hasClass('active'), 'precond - ul not active');
+  assert.ok(!olButton.hasClass('active'), 'precond - ol not active');
+
+  let { _editor: editor } = this;
+  editor.selectRange(new MobiledocKit.Range(editor.post.headPosition(), editor.post.tailPosition()));
+
+  assert.ok(ulButton.hasClass('active'), 'ul button is active after selecting ul list text');
+  assert.ok(!olButton.hasClass('active'), 'ol button is not active after selecting ul list text');
+
+  // toggle ul->ol
+  olButton.click();
+
+  assert.ok(!ulButton.hasClass('active'), 'ul button is inactive after toggle');
+  assert.ok(olButton.hasClass('active'), 'ol button is active after toggle');
+
+  // toggle ol->p
+  olButton.click();
+
+  assert.ok(!ulButton.hasClass('active') && !olButton.hasClass('active'),
+            'ul and ol button are inactive after toggle off list');
+});