Merge pull request #46 from github/new-keyboard-shortcuts

New keyboard shortcuts for quotes, bullets and numbered lists
github · Sep 9, 2021 · 3df9dd0 · 3df9dd0
2 parents 731b52a + 08ede8f
commit 3df9dd0
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 5 deletions.
diff --git a/src/index.ts b/src/index.ts
@@ -169,6 +169,11 @@ class MarkdownQuoteButtonElement extends MarkdownButtonElement {
     super()
     styles.set(this, {prefix: '> ', multiline: true, surroundWithNewlines: true})
   }
+
+  connectedCallback() {
+    super.connectedCallback()
+    this.setAttribute('hotkey', '.')
+  }
 }
 
 if (!window.customElements.get('md-quote')) {
@@ -227,6 +232,11 @@ class MarkdownUnorderedListButtonElement extends MarkdownButtonElement {
     super()
     styles.set(this, {prefix: '- ', multiline: true, surroundWithNewlines: true})
   }
+  connectedCallback() {
+    super.connectedCallback()
+    this.setAttribute('hotkey', '8')
+    this.setAttribute('hotkey-requires-shift', 'true')
+  }
 }
 
 if (!window.customElements.get('md-unordered-list')) {
@@ -239,6 +249,11 @@ class MarkdownOrderedListButtonElement extends MarkdownButtonElement {
     super()
     styles.set(this, {prefix: '1. ', multiline: true, orderedList: true})
   }
+  connectedCallback() {
+    super.connectedCallback()
+    this.setAttribute('hotkey', '9')
+    this.setAttribute('hotkey-requires-shift', 'true')
+  }
 }
 
 if (!window.customElements.get('md-ordered-list')) {
@@ -382,10 +397,13 @@ function focusKeydown(event: KeyboardEvent) {
 }
 
 const shortcutListeners = new WeakMap()
+function elementHotkeyRequiresShift(element: Element): boolean {
+  return element.hasAttribute('hotkey-requires-shift') && element.getAttribute('hotkey-requires-shift') !== 'false'
+}
 
-function findHotkey(toolbar: Element, key: string): HTMLElement | null {
+function findHotkey(toolbar: Element, key: string, shiftPressed: boolean): HTMLElement | null {
   for (const el of toolbar.querySelectorAll<HTMLElement>('[hotkey]')) {
-    if (el.getAttribute('hotkey') === key) {
+    if (el.getAttribute('hotkey') === key && (!elementHotkeyRequiresShift(el) || shiftPressed)) {
       return el
     }
   }
@@ -395,7 +413,7 @@ function findHotkey(toolbar: Element, key: string): HTMLElement | null {
 function shortcut(toolbar: Element, event: KeyboardEvent) {
   if ((event.metaKey && modifierKey === 'Meta') || (event.ctrlKey && modifierKey === 'Control')) {
     const key = event.shiftKey ? event.key.toUpperCase() : event.key
-    const button = findHotkey(toolbar, key)
+    const button = findHotkey(toolbar, key, event.shiftKey)
     if (button) {
       button.click()
       event.preventDefault()

diff --git a/test/test.js b/test/test.js
@@ -34,14 +34,14 @@ describe('markdown-toolbar-element', function () {
       textarea.dispatchEvent(event)
     }
 
-    function pressHotkey(hotkey) {
+    function pressHotkey(hotkey, explicitShiftKey = false) {
       const textarea = document.querySelector('textarea')
       const osx = navigator.userAgent.indexOf('Macintosh') !== -1
       const event = document.createEvent('Event')
       event.initEvent('keydown', true, true)
       event.metaKey = osx
       event.ctrlKey = !osx
-      event.shiftKey = hotkey === hotkey.toUpperCase()
+      event.shiftKey = (hotkey === hotkey.toUpperCase() && hotkey !== hotkey.toLowerCase()) || explicitShiftKey
 
       // emulate existing osx browser bug
       // https://bugs.webkit.org/show_bug.cgi?id=174782
@@ -468,6 +468,13 @@ describe('markdown-toolbar-element', function () {
         assert.equal('> |', visualValue())
       })
 
+      it('inserts selected quoted sample via hotkey', function () {
+        focus()
+        setVisualValue('')
+        pressHotkey('.')
+        assert.equal('> |', visualValue())
+      })
+
       it('quotes the selected text when you click the quote icon', function () {
         setVisualValue('|Butts|\n\nThe quick brown fox jumps over the lazy dog')
         clickToolbar('md-quote')
@@ -549,6 +556,22 @@ describe('markdown-toolbar-element', function () {
         assert.equal('One\n\n|- Two\n- Three|\n', visualValue())
       })
 
+      it('turns multiple lines into unordered list via hotkey, requiring shift', function () {
+        setVisualValue('One\n|Two\nThree|\n')
+        pressHotkey('8', false)
+        assert.equal('One\n|Two\nThree|\n', visualValue())
+        pressHotkey('8', true)
+        assert.equal('One\n\n|- Two\n- Three|\n', visualValue())
+      })
+
+      it('turns multiple lines into ordered list via hotkey, requiring shift', function () {
+        setVisualValue('One\n|Two\nThree|\n')
+        pressHotkey('9', false)
+        assert.equal('One\n|Two\nThree|\n', visualValue())
+        pressHotkey('9', true)
+        assert.equal('One\n\n|1. Two\n2. Three|\n', visualValue())
+      })
+
       it('prefixes newlines when a list is created on the last line', function () {
         setVisualValue("Here's a list:|One|")
         clickToolbar('md-unordered-list')