Change Italic command to operate semantically, Bold command uses "str…

…ong" tag

src/js/commands/bold.js

@@ -11,7 +11,7 @@ export default class BoldCommand extends TextFormatCommand {
       button: '<i class="ck-icon-bold"></i>'
     });
     this.editor = editor;
-    this.markup = Markup.create('b');
+    this.markup = Markup.create('strong');
   }
   exec() {
     this.editor.applyMarkupToSelection(this.markup);

src/js/commands/italic.js

@@ -1,14 +1,25 @@
 import TextFormatCommand from './text-format';
-import { inherit } from 'content-kit-utils';
+import Markup from '../models/markup';
+import {
+  any
+} from '../utils/array-utils';
 
-function ItalicCommand() {
-  TextFormatCommand.call(this, {
-    name: 'italic',
-    tag: 'em',
-    mappedTags: ['i'],
-    button: '<i class="ck-icon-italic"></i>'
-  });
+export default class ItalicCommand extends TextFormatCommand {
+  constructor(editor) {
+    super({
+      name: 'italic',
+      button: '<i class="ck-icon-italic"></i>'
+    });
+    this.editor = editor;
+    this.markup = Markup.create('em');
+  }
+  exec() {
+    this.editor.applyMarkupToSelection(this.markup);
+  }
+  unexec() {
+    this.editor.removeMarkupFromSelection(this.markup);
+  }
+  isActive() {
+    return any(this.editor.activeMarkers, m => m.hasMarkup(this.markup));
+  }
 }
-inherit(ItalicCommand, TextFormatCommand);
-
-export default ItalicCommand;

src/js/editor/editor.js

@@ -60,7 +60,6 @@ const defaults = {
   // in tests
   stickyToolbar: false, // !!('ontouchstart' in window),
   textFormatCommands: [
-    new ItalicCommand(),
     new LinkCommand()
   ],
   embedCommands: [
@@ -192,11 +191,15 @@ function makeButtons(editor) {
   const boldCommand = new BoldCommand(editor);
   const boldButton = new ReversibleToolbarButton(boldCommand, editor);
 
+  const italicCommand = new ItalicCommand(editor);
+  const italicButton = new ReversibleToolbarButton(italicCommand, editor);
+
   return [
     headingButton,
     subheadingButton,
     quoteButton,
-    boldButton
+    boldButton,
+    italicButton
   ];
 }
 

tests/acceptance/editor-commands-test.js

@@ -80,18 +80,7 @@ test('highlight text, click "bold" button bolds text', (assert) => {
 
   setTimeout(() => {
     clickToolbarButton(assert, 'bold');
-    assert.hasElement('#editor b:contains(IS A)');
-
-    done();
-  });
-});
-
-test('highlight text, click "italic" button italicizes text', (assert) => {
-  let done = assert.async();
-
-  setTimeout(() => {
-    clickToolbarButton(assert, 'italic');
-    assert.hasElement('#editor i:contains(IS A)');
+    assert.hasElement('#editor strong:contains(IS A)');
 
     done();
   });
@@ -261,15 +250,15 @@ test('click bold button applies bold to selected text', (assert) => {
     clickToolbarButton(assert, 'bold');
     assertActiveToolbarButton(assert, 'bold');
 
-    assert.hasNoElement('#editor b:contains(THIS)');
-    assert.hasNoElement('#editor b:contains(TEST)');
-    assert.hasElement('#editor b:contains(IS A)');
+    assert.hasNoElement('#editor strong:contains(THIS)');
+    assert.hasNoElement('#editor strong:contains(TEST)');
+    assert.hasElement('#editor strong:contains(IS A)');
 
     assert.selectedText(selectedText);
 
     clickToolbarButton(assert, 'bold');
 
-    assert.hasNoElement('#editor b:contains(IS A)', 'bold text is no longer bold');
+    assert.hasNoElement('#editor strong:contains(IS A)', 'bold text is no longer bold');
     assertInactiveToolbarButton(assert, 'bold');
 
     done();
@@ -284,7 +273,7 @@ test('can unbold part of a larger set of bold text', (assert) => {
     clickToolbarButton(assert, 'bold');
     assertActiveToolbarButton(assert, 'bold');
 
-    assert.hasElement('#editor b:contains(IS A)');
+    assert.hasElement('#editor strong:contains(IS A)');
 
     Helpers.dom.selectText('S A', editorElement);
     Helpers.dom.triggerEvent(document, 'mouseup');
@@ -294,14 +283,33 @@ test('can unbold part of a larger set of bold text', (assert) => {
       assertActiveToolbarButton(assert, 'bold');
       clickToolbarButton(assert, 'bold');
 
-      assert.hasElement('#editor b:contains(I)', 'unselected text is bold');
-      assert.hasNoElement('#editor b:contains(IS A)', 'unselected text is bold');
+      assert.hasElement('#editor strong:contains(I)', 'unselected text is bold');
+      assert.hasNoElement('#editor strong:contains(IS A)', 'unselected text is bold');
       assert.hasElement('#editor p:contains(S A)', 'unselected text is bold');
 
       done();
     });
   });
 });
 
+test('can italicize text', (assert) => {
+  const done = assert.async();
+
+  setTimeout(() => {
+    assertInactiveToolbarButton(assert, 'italic');
+    clickToolbarButton(assert, 'italic');
+
+    assert.hasElement('#editor em:contains(IS A)');
+    assert.selectedText('IS A');
+    assertActiveToolbarButton(assert, 'italic');
+
+    clickToolbarButton(assert, 'italic');
+    assert.hasNoElement('#editor em:contains(IS A)');
+    assertInactiveToolbarButton(assert, 'italic');
+
+    done();
+  });
+});
+
 // test selecting across markers and boldening
 // test selecting across markers in sections and bolding