feat: Add bold and italic event handling

Author: ajwild

spec/dispatcher.spec.js

@@ -5,6 +5,7 @@ import * as content from '../src/content'
 import Cursor from '../src/cursor'
 import Keyboard from '../src/keyboard'
 import Editable from '../src/core'
+import Selection from '../src/selection'
 const {key} = Keyboard
 
 describe('Dispatcher', function () {
@@ -31,6 +32,18 @@ describe('Dispatcher', function () {
     return range
   }
 
+  function createSelection (range) {
+    const selection = new Selection($elem[0], range)
+    selection.setSelection()
+    return selection
+  }
+
+  function createFullRange (node) {
+    const range = rangy.createRange()
+    range.selectNodeContents(node)
+    return range
+  }
+
   let onListener
   // register one listener per test
   function on (eventName, func) {
@@ -214,5 +227,47 @@ describe('Dispatcher', function () {
         $elem.trigger(event)
       })
     })
+
+    describe('on bold', function () {
+
+      beforeEach(function () {
+        event = $.Event('keydown')
+        event.ctrlKey = true
+        event.keyCode = key.b
+      })
+
+      it('fires toggleBold when ctrl + b is pressed', (done) => {
+        $elem.html('foo')
+        const elemSelection = createSelection(createFullRange($elem[0]))
+
+        on('toggleBold', (selection) => {
+          expect(selection).toEqual(elemSelection)
+          done()
+        })
+
+        $elem.trigger(event)
+      })
+    })
+
+    describe('on italic', function () {
+
+      beforeEach(function () {
+        event = $.Event('keydown')
+        event.ctrlKey = true
+        event.keyCode = key.i
+      })
+
+      it('fires toggleEmphasis when ctrl + i is pressed', (done) => {
+        $elem.html('foo')
+        const elemSelection = createSelection(createFullRange($elem[0]))
+
+        on('toggleEmphasis', (selection) => {
+          expect(selection).toEqual(elemSelection)
+          done()
+        })
+
+        $elem.trigger(event)
+      })
+    })
   })
 })

spec/keyboard.spec.js

@@ -59,6 +59,80 @@ describe('Keyboard', function () {
         keyboard.dispatchKeyEvent(event, {}, false)
         expect(called).toEqual(0)
       })
+
+      it('does fire the event for a "b" key', function () {
+        keyboard.on('character', () => called++)
+
+        event.keyCode = Keyboard.key.b
+        keyboard.dispatchKeyEvent(event, {}, true)
+        expect(called).toEqual(1)
+      })
+
+      it('does fire the event for an "i" key', function () {
+        keyboard.on('character', () => called++)
+
+        event.keyCode = Keyboard.key.i
+        keyboard.dispatchKeyEvent(event, {}, true)
+        expect(called).toEqual(1)
+      })
+    })
+
+    describe('notify "bold" event', function () {
+
+      it('does not fire the event for a "b" key without "ctrl" or "meta" key', function () {
+        keyboard.on('bold', () => called++)
+
+        event.keyCode = Keyboard.key.b
+        keyboard.dispatchKeyEvent(event, {}, true)
+        expect(called).toEqual(0)
+      })
+
+      it('does fire the event for a "b" key with "ctrl" key', function () {
+        keyboard.on('bold', () => called++)
+
+        event.keyCode = Keyboard.key.b
+        event.ctrlKey = true
+        keyboard.dispatchKeyEvent(event, {}, true)
+        expect(called).toEqual(1)
+      })
+
+      it('does fire the event for a "b" key with "meta" key', function () {
+        keyboard.on('bold', () => called++)
+
+        event.keyCode = Keyboard.key.b
+        event.metaKey = true
+        keyboard.dispatchKeyEvent(event, {}, true)
+        expect(called).toEqual(1)
+      })
+    })
+
+    describe('notify "italic" event', function () {
+
+      it('does not fire the event for a "i" key without "ctrl" or "meta" key', function () {
+        keyboard.on('italic', () => called++)
+
+        event.keyCode = Keyboard.key.i
+        keyboard.dispatchKeyEvent(event, {}, true)
+        expect(called).toEqual(0)
+      })
+
+      it('does fire the event for a "i" key with "ctrl" key', function () {
+        keyboard.on('italic', () => called++)
+
+        event.keyCode = Keyboard.key.i
+        event.ctrlKey = true
+        keyboard.dispatchKeyEvent(event, {}, true)
+        expect(called).toEqual(1)
+      })
+
+      it('does fire the event for a "i" key with "meta" key', function () {
+        keyboard.on('italic', () => called++)
+
+        event.keyCode = Keyboard.key.i
+        event.metaKey = true
+        keyboard.dispatchKeyEvent(event, {}, true)
+        expect(called).toEqual(1)
+      })
     })
   })
 

src/create-default-behavior.js

@@ -173,6 +173,14 @@ export default function createDefaultBehavior (editable) {
 
     clipboard (element, action, cursor) {
       log('Default clipboard behavior')
+    },
+
+    toggleBold (selection) {
+      selection.toggleBold()
+    },
+
+    toggleEmphasis (selection) {
+      selection.toggleEmphasis()
     }
   }
 }

src/create-default-events.js

@@ -185,6 +185,26 @@ export default function createDefaultEvents (editable) {
      */
     paste (element, blocks, cursor) {
       behavior.paste(element, blocks, cursor)
+    },
+
+    /**
+     * The toggleBold event is triggered when the bold keyboard shortcut is used
+     *
+     * @event toggleBold
+     * @param {Selection} The selection object.
+     */
+    toggleBold (selection) {
+      behavior.toggleBold(selection)
+    },
+
+    /**
+     * The toggleEmphasis event is triggered when the italic keyboard shortcut is used
+     *
+     * @event toggleEmphasis
+     * @param {Selection} The selection object.
+     */
+    toggleEmphasis (selection) {
+      behavior.toggleEmphasis(selection)
     }
   }
 }

src/dispatcher.js

@@ -261,6 +261,24 @@ export default class Dispatcher {
         self.notify('newline', this, cursor)
       })
 
+      .on('bold', function (event) {
+        event.preventDefault()
+        event.stopPropagation()
+        const selection = self.selectionWatcher.getFreshSelection()
+        if (selection.isSelection) {
+          self.notify('toggleBold', selection)
+        }
+      })
+
+      .on('italic', function (event) {
+        event.preventDefault()
+        event.stopPropagation()
+        const selection = self.selectionWatcher.getFreshSelection()
+        if (selection.isSelection) {
+          self.notify('toggleEmphasis', selection)
+        }
+      })
+
       .on('character', function (event) {
         self.notify('change', this)
       })

src/keyboard.js

@@ -46,17 +46,29 @@ export default class Keyboard {
       case this.key.enter:
         if (event.shiftKey) return this.notify(target, 'shiftEnter', event)
         return this.notify(target, 'enter', event)
+
       case this.key.ctrl:
       case this.key.shift:
       case this.key.alt:
         return
+
       // Metakey
       case 224: // Firefox: 224
       case 17: // Opera: 17
       case 91: // Chrome/Safari: 91 (Left)
       case 93: // Chrome/Safari: 93 (Right)
         return
+
       default:
+        // Added here to avoid using fallthrough in the switch
+        // when b or i are pressed without ctrlKey or metaKey
+        if (event.keyCode === this.key.b && (event.ctrlKey || event.metaKey)) {
+          return this.notify(target, 'bold', event)
+        }
+        if (event.keyCode === this.key.i && (event.ctrlKey || event.metaKey)) {
+          return this.notify(target, 'italic', event)
+        }
+
         this.preventContenteditableBug(target, event)
         if (!notifyCharacterEvent) return
         // Don't notify character events as long as either the ctrl or
@@ -179,5 +191,7 @@ Keyboard.key = Keyboard.prototype.key = {
   enter: 13,
   shift: 16,
   ctrl: 17,
-  alt: 18
+  alt: 18,
+  b: 66,
+  i: 73
 }