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')