Merge pull request #37 from github/td/add-hotkey-to-code-button

Add hotkey to code block button

Author: keithamus

src/index.ts

@@ -181,6 +181,11 @@ class MarkdownCodeButtonElement extends MarkdownButtonElement {
     super()
     styles.set(this, {prefix: '`', suffix: '`', blockPrefix: '```', blockSuffix: '```'})
   }
+
+  connectedCallback() {
+    super.connectedCallback()
+    this.setAttribute('hotkey', 'E')
+  }
 }
 
 if (!window.customElements.get('md-code')) {
@@ -389,7 +394,8 @@ function findHotkey(toolbar: Element, key: string): HTMLElement | null {
 
 function shortcut(toolbar: Element, event: KeyboardEvent) {
   if ((event.metaKey && modifierKey === 'Meta') || (event.ctrlKey && modifierKey === 'Control')) {
-    const button = findHotkey(toolbar, event.key)
+    const key = event.shiftKey ? event.key.toUpperCase() : event.key
+    const button = findHotkey(toolbar, key)
     if (button) {
       button.click()
       event.preventDefault()

test/test.js

@@ -41,7 +41,12 @@ describe('markdown-toolbar-element', function () {
       event.initEvent('keydown', true, true)
       event.metaKey = osx
       event.ctrlKey = !osx
-      event.key = hotkey
+      event.shiftKey = hotkey === hotkey.toUpperCase()
+
+      // emulate existing osx browser bug
+      // https://bugs.webkit.org/show_bug.cgi?id=174782
+      event.key = osx ? hotkey.toLowerCase() : hotkey
+
       textarea.dispatchEvent(event)
     }
 
@@ -193,6 +198,22 @@ describe('markdown-toolbar-element', function () {
       })
     })
 
+    describe('hotkey case-sensitivity', function () {
+      it('does not bold selected text when using the uppercased hotkey', function () {
+        focus()
+        setVisualValue('The |quick| brown fox jumps over the lazy dog')
+        pressHotkey('B') // capital `B` instead of lowercase `b`
+        assert.equal('The |quick| brown fox jumps over the lazy dog', visualValue())
+      })
+
+      it('does not codeblock selected text when using the lowercased hotkey', function () {
+        focus()
+        setVisualValue('The |quick| brown fox jumps over the lazy dog')
+        pressHotkey('e') // lowercase `e` instead of uppercase `E`
+        assert.equal('The |quick| brown fox jumps over the lazy dog', visualValue())
+      })
+    })
+
     describe('bold', function () {
       it('bold selected text when you click the bold icon', function () {
         setVisualValue('The |quick| brown fox jumps over the lazy dog')
@@ -605,6 +626,13 @@ describe('markdown-toolbar-element', function () {
         assert.equal("`|puts 'Hello, world!'|`", visualValue())
       })
 
+      it('surrounds a line with backticks via hotkey', function () {
+        focus()
+        setVisualValue("|puts 'Hello, world!'|")
+        pressHotkey('E')
+        assert.equal("`|puts 'Hello, world!'|`", visualValue())
+      })
+
       it('surrounds multiple lines with triple backticks if you click the code icon', function () {
         setVisualValue('|class Greeter\n  def hello_world\n    "Hello World!"\n  end\nend|')
         clickToolbar('md-code')