Skip to content

Commit

Permalink
Merge pull request #51 from github/remove-hotkeys
Browse files Browse the repository at this point in the history 
Remove hotkey functionality
  • Loading branch information
@koddsson
koddsson authored Sep 15, 2021
2 parents 19f5f68 + 9835dc5 commit fa1ca22
Show file tree
Hide file tree
Showing 2 changed files with 0 additions and 156 deletions.
78 changes: 0 additions & 78 deletions src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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')) {
Expand All @@ -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')) {
Expand All @@ -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')) {
Expand All @@ -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')) {
Expand All @@ -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')) {
Expand All @@ -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')) {
Expand All @@ -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')) {
Expand All @@ -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')) {
Expand Down Expand Up @@ -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()
Expand All @@ -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)
}

Expand Down Expand Up @@ -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)
Expand Down
78 changes: 0 additions & 78 deletions test/test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down Expand Up @@ -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')
Expand Down Expand Up @@ -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')
Expand Down Expand Up @@ -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')
Expand Down Expand Up @@ -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')
Expand Down Expand Up @@ -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')
Expand Down

0 comments on commit fa1ca22

Please sign in to comment.