diff --git a/package-lock.json b/package-lock.json index 26066df..d566780 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@github/markdown-toolbar-element", - "version": "1.5.3", + "version": "2.0.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@github/markdown-toolbar-element", - "version": "1.5.3", + "version": "2.0.0", "license": "MIT", "devDependencies": { "@github/prettier-config": "0.0.4", diff --git a/package.json b/package.json index 9c25731..898188d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@github/markdown-toolbar-element", - "version": "1.5.3", + "version": "2.0.0", "description": "Markdown formatting buttons for text inputs.", "repository": "github/markdown-toolbar-element", "type": "module", diff --git a/src/index.ts b/src/index.ts index 1a22aab..87162e7 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')) { @@ -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('[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) 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') pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy