Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove hotkey functionality #51

Merged
merged 3 commits into from
Sep 15, 2021
Merged

Remove hotkey functionality #51

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
053df7b
Remove hotkey attributes from elements
koddsson Sep 15, 2021
8e9a9a8
Remove hotkey functionality
koddsson Sep 15, 2021
9835dc5
Remove hotkey tests
koddsson Sep 15, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 0 additions & 78 deletions src/index.ts
View file
Open in desktop
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
Open in desktop
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