From 053df7b33d94642e9a216b8772b186fa257475d2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kristj=C3=A1n=20Oddsson?= Date: Wed, 15 Sep 2021 16:43:54 +0100 Subject: [PATCH 1/3] Remove hotkey attributes from elements MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Kate Higa Co-authored-by: Adrián Bolonio --- src/index.ts | 41 ----------------------------------------- 1 file changed, 41 deletions(-) diff --git a/src/index.ts b/src/index.ts index 1a22aab..966a8ee 100644 --- a/src/index.ts +++ b/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')) { From 8e9a9a8dc1f208a474c2417f707cf300df16397d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kristj=C3=A1n=20Oddsson?= Date: Wed, 15 Sep 2021 16:47:07 +0100 Subject: [PATCH 2/3] Remove hotkey functionality MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Kate Higa Co-authored-by: Adrián Bolonio --- src/index.ts | 37 ------------------------------------- 1 file changed, 37 deletions(-) diff --git a/src/index.ts b/src/index.ts index 966a8ee..87162e7 100644 --- a/src/index.ts +++ b/src/index.ts @@ -274,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() @@ -286,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) } @@ -356,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('[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) From 9835dc56556e3a24be44e8618922104c3f2062cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kristj=C3=A1n=20Oddsson?= Date: Wed, 15 Sep 2021 16:51:12 +0100 Subject: [PATCH 3/3] Remove hotkey tests MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Kate Higa Co-authored-by: Adrián Bolonio --- test/test.js | 78 ---------------------------------------------------- 1 file changed, 78 deletions(-) diff --git a/test/test.js b/test/test.js index ff619bc..ab8915e 100644 --- a/test/test.js +++ b/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,15 +175,6 @@ 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') @@ -214,13 +182,6 @@ describe('markdown-toolbar-element', function () { 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')