Merge pull request #51 from github/remove-hotkeys

Remove hotkey functionality

Author: koddsson

src/index.ts

@@ -135,11 +135,6 @@ class MarkdownBoldButtonElement extends MarkdownButtonElement {
     super()
     styles.set(this, {prefix: '**', suffix: '**', trimFirst: true})
   }
-
-  connectedCallback() {
-    super.connectedCallback()
-    this.setAttribute('hotkey', 'b')
-  }
 }
 
 if (!window.customElements.get('md-bold')) {
@@ -152,11 +147,6 @@ class MarkdownItalicButtonElement extends MarkdownButtonElement {
     super()
     styles.set(this, {prefix: '_', suffix: '_', trimFirst: true})
   }
-
-  connectedCallback() {
-    super.connectedCallback()
-    this.setAttribute('hotkey', 'i')
-  }
 }
 
 if (!window.customElements.get('md-italic')) {
@@ -169,12 +159,6 @@ class MarkdownQuoteButtonElement extends MarkdownButtonElement {
     super()
     styles.set(this, {prefix: '> ', multiline: true, surroundWithNewlines: true})
   }
-
-  connectedCallback() {
-    super.connectedCallback()
-    this.setAttribute('hotkey', '.')
-    this.setAttribute('hotkey-requires-shift', 'true')
-  }
 }
 
 if (!window.customElements.get('md-quote')) {
@@ -187,11 +171,6 @@ 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')) {
@@ -204,11 +183,6 @@ class MarkdownLinkButtonElement extends MarkdownButtonElement {
     super()
     styles.set(this, {prefix: '[', suffix: '](url)', replaceNext: 'url', scanFor: 'https?://'})
   }
-
-  connectedCallback() {
-    super.connectedCallback()
-    this.setAttribute('hotkey', 'k')
-  }
 }
 
 if (!window.customElements.get('md-link')) {
@@ -233,11 +207,6 @@ 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')) {
@@ -250,11 +219,6 @@ class MarkdownOrderedListButtonElement extends MarkdownButtonElement {
     super()
     styles.set(this, {prefix: '1. ', multiline: true, orderedList: true})
   }
-  connectedCallback() {
-    super.connectedCallback()
-    this.setAttribute('hotkey', '7')
-    this.setAttribute('hotkey-requires-shift', 'true')
-  }
 }
 
 if (!window.customElements.get('md-ordered-list')) {
@@ -267,11 +231,6 @@ class MarkdownTaskListButtonElement extends MarkdownButtonElement {
     super()
     styles.set(this, {prefix: '- [ ] ', multiline: true, surroundWithNewlines: true})
   }
-
-  connectedCallback() {
-    super.connectedCallback()
-    this.setAttribute('hotkey', 'L')
-  }
 }
 
 if (!window.customElements.get('md-task-list')) {
@@ -315,8 +274,6 @@ if (!window.customElements.get('md-strikethrough')) {
   window.customElements.define('md-strikethrough', MarkdownStrikethroughButtonElement)
 }
 
-const modifierKey = navigator.userAgent.match(/Macintosh/) ? 'Meta' : 'Control'
-
 class MarkdownToolbarElement extends HTMLElement {
   constructor() {
     super()
@@ -327,21 +284,11 @@ class MarkdownToolbarElement extends HTMLElement {
       this.setAttribute('role', 'toolbar')
     }
     this.addEventListener('keydown', focusKeydown)
-    const fn = shortcut.bind(null, this)
-    if (this.field) {
-      this.field.addEventListener('keydown', fn)
-      shortcutListeners.set(this, fn)
-    }
     this.setAttribute('tabindex', '0')
     this.addEventListener('focus', onToolbarFocus, {once: true})
   }
 
   disconnectedCallback(): void {
-    const fn = shortcutListeners.get(this)
-    if (fn && this.field) {
-      this.field.removeEventListener('keydown', fn)
-      shortcutListeners.delete(this)
-    }
     this.removeEventListener('keydown', focusKeydown)
   }
 
@@ -397,31 +344,6 @@ function focusKeydown(event: KeyboardEvent) {
   buttons[n].focus()
 }
 
-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, shiftPressed: boolean): HTMLElement | null {
-  for (const el of toolbar.querySelectorAll<HTMLElement>('[hotkey]')) {
-    if (el.getAttribute('hotkey') === key && (!elementHotkeyRequiresShift(el) || shiftPressed)) {
-      return el
-    }
-  }
-  return 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, event.shiftKey)
-    if (button) {
-      button.click()
-      event.preventDefault()
-    }
-  }
-}
-
 if (!window.customElements.get('markdown-toolbar')) {
   window.MarkdownToolbarElement = MarkdownToolbarElement
   window.customElements.define('markdown-toolbar', MarkdownToolbarElement)

test/test.js

@@ -27,29 +27,6 @@ describe('markdown-toolbar-element', function () {
   })
 
   describe('after tree insertion', function () {
-    function focus() {
-      const textarea = document.querySelector('textarea')
-      const event = document.createEvent('Event')
-      event.initEvent('focus', false, true)
-      textarea.dispatchEvent(event)
-    }
-
-    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() && hotkey !== hotkey.toLowerCase()) || explicitShiftKey
-
-      // emulate existing osx browser bug
-      // https://bugs.webkit.org/show_bug.cgi?id=174782
-      event.key = osx ? hotkey.toLowerCase() : hotkey
-
-      textarea.dispatchEvent(event)
-    }
-
     function clickToolbar(selector) {
       const toolbar = document.querySelector('markdown-toolbar')
       toolbar.querySelector(selector).click()
@@ -198,29 +175,13 @@ 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())
-      })
-    })
-
     describe('bold', function () {
       it('bold selected text when you click the bold icon', function () {
         setVisualValue('The |quick| brown fox jumps over the lazy dog')
         clickToolbar('md-bold')
         assert.equal('The **|quick|** brown fox jumps over the lazy dog', visualValue())
       })
 
-      it('bolds selected text with hotkey', function () {
-        focus()
-        setVisualValue('The |quick| brown fox jumps over the lazy dog')
-        pressHotkey('b')
-        assert.equal('The **|quick|** brown fox jumps over the lazy dog', visualValue())
-      })
-
       it('bold empty selection and textarea inserts ** with cursor ready to type inside', function () {
         setVisualValue('|')
         clickToolbar('md-bold')
@@ -349,13 +310,6 @@ describe('markdown-toolbar-element', function () {
         assert.equal('The _|quick|_ brown fox jumps over the lazy dog', visualValue())
       })
 
-      it('italicizes selected text with hotkey', function () {
-        focus()
-        setVisualValue('The |quick| brown fox jumps over the lazy dog')
-        pressHotkey('i')
-        assert.equal('The _|quick|_ brown fox jumps over the lazy dog', visualValue())
-      })
-
       it('italicize when there is leading whitespace in selection', function () {
         setVisualValue('|  \nHello world|')
         clickToolbar('md-italic')
@@ -468,15 +422,6 @@ describe('markdown-toolbar-element', function () {
         assert.equal('> |', visualValue())
       })
 
-      it('inserts selected quoted sample via hotkey, requiring shift', function () {
-        focus()
-        setVisualValue('')
-        pressHotkey('.', false)
-        assert.equal('|', visualValue())
-        pressHotkey('.', true)
-        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')
@@ -558,22 +503,6 @@ 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('7', false)
-        assert.equal('One\n|Two\nThree|\n', visualValue())
-        pressHotkey('7', 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')
@@ -644,13 +573,6 @@ 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')