marksmith 0.4.1 → 0.4.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 287d682aee074cbb2c835b88f6891d20e9ed0f2ef53a16984c3f81e474664115
-  data.tar.gz: 4eff297c350411f5ad3bd61c24e758a359255377750452097cce8a2aef3c8603
+  metadata.gz: bac426dee50d826889905eef507ee85bf15741a4f4d7ed85d28f88b77d60c7f7
+  data.tar.gz: 11374fff22c72c904840bf9435de06fafd6e9cc23d360f9fb873277757603479
 SHA512:
-  metadata.gz: 595a0c5db128e373d5ebf2b0541fed436ede80c48a1a8f9b2fa725c53b3a25d6ebccb915b0712d77a1da031a461197e662ee55d502b6e23f0ea1eecaa5fa4fc6
-  data.tar.gz: 50bb0a632856c935057c230d4e7eea6f79ae4563186b2d2eb85641995efee4ece418ec5edba860e69968e0351dc4256d21e76d8156e736395c8c460a29f2cd69
+  metadata.gz: 6a0f7eca2d748c4b8ac57b33e45a07aace4cdcec9195af7d7ce781a7230b5ad60edaff8cde18cc36aecb6e2aabe07142703681c2678a8c8a0611fe6c8c07cd6e
+  data.tar.gz: 5ec63e1912cce26a044f9fdfc902cc4436ef7660cc6c04e67dd07a25c8dd1e0549f94a201b00df8a6d0ed29ce1e95c8cd2fdf1e8a5dbf875a76bde199bc14c3c

data/app/assets/javascripts/list_continuation_controller-full.esm.js

@@ -1,5 +1,5 @@
 /*!
-Marksmith 0.4.1
+Marksmith 0.4.4
 */
 var ListContinuationController = (function () {
     'use strict';

data/app/assets/javascripts/list_continuation_controller-no-stimulus.esm.js

@@ -1,5 +1,5 @@
 /*!
-Marksmith 0.4.1
+Marksmith 0.4.4
 */
 var ListContinuationController = (function (stimulus) {
   'use strict';

data/app/assets/javascripts/marksmith_controller-full.esm.js

@@ -1,5 +1,5 @@
 /*!
-Marksmith 0.4.1
+Marksmith 0.4.4
 */
 var MarksmithController = (function () {
     'use strict';
@@ -2417,15 +2417,15 @@ var MarksmithController = (function () {
         }
         el.addEventListener('paste', unsetSkipFormattedFlag);
     }
-    function uninstall$5(el) {
+    function uninstall$6(el) {
         el.removeEventListener('keydown', setSkipFormattingFlag);
         el.removeEventListener('paste', unsetSkipFormattedFlag);
     }
 
-    function install$4(el) {
+    function install$5(el) {
         el.addEventListener('paste', onPaste$4);
     }
-    function uninstall$4(el) {
+    function uninstall$5(el) {
         el.removeEventListener('paste', onPaste$4);
     }
     function onPaste$4(event) {
@@ -2539,12 +2539,12 @@ var MarksmithController = (function () {
         return ((_a = link.textContent) === null || _a === undefined ? undefined : _a.slice(0, 1)) === '@' && link.getAttribute('data-hovercard-type') === 'team';
     }
 
-    function install$3(el) {
+    function install$4(el) {
         el.addEventListener('dragover', onDragover$1);
         el.addEventListener('drop', onDrop$1);
         el.addEventListener('paste', onPaste$3);
     }
-    function uninstall$3(el) {
+    function uninstall$4(el) {
         el.removeEventListener('dragover', onDragover$1);
         el.removeEventListener('drop', onDrop$1);
         el.removeEventListener('paste', onPaste$3);
@@ -2607,12 +2607,12 @@ var MarksmithController = (function () {
     }
 
     const pasteLinkAsPlainTextOverSelectedTextMap = new WeakMap();
-    function install$2(el, optionConfig) {
+    function install$3(el, optionConfig) {
         var _a;
         pasteLinkAsPlainTextOverSelectedTextMap.set(el, ((_a = optionConfig === null || optionConfig === undefined ? undefined : optionConfig.defaultPlainTextPaste) === null || _a === undefined ? undefined : _a.urlLinks) === true);
         el.addEventListener('paste', onPaste$2);
     }
-    function uninstall$2(el) {
+    function uninstall$3(el) {
         el.removeEventListener('paste', onPaste$2);
     }
     function onPaste$2(event) {
@@ -2676,12 +2676,12 @@ var MarksmithController = (function () {
         return url.endsWith('/') ? url.slice(0, url.length - 1) : url;
     }
 
-    function install$1(el) {
+    function install$2(el) {
         el.addEventListener('dragover', onDragover);
         el.addEventListener('drop', onDrop);
         el.addEventListener('paste', onPaste$1);
     }
-    function uninstall$1(el) {
+    function uninstall$2(el) {
         el.removeEventListener('dragover', onDragover);
         el.removeEventListener('drop', onDrop);
         el.removeEventListener('paste', onPaste$1);
@@ -2772,10 +2772,10 @@ var MarksmithController = (function () {
         return [start, formattedTable, end].join('').replace(/<meta.*?>/, '');
     }
 
-    function install(el) {
+    function install$1(el) {
         el.addEventListener('paste', onPaste);
     }
-    function uninstall(el) {
+    function uninstall$1(el) {
         el.removeEventListener('paste', onPaste);
     }
     function onPaste(event) {
@@ -2800,19 +2800,442 @@ var MarksmithController = (function () {
     }
 
     function subscribe(el, optionConfig) {
-        installAround(el, [install$1, install$3, install$2, install, install$4], optionConfig);
+        installAround(el, [install$2, install$4, install$3, install$1, install$5], optionConfig);
         return {
             unsubscribe: () => {
+                uninstall$6(el);
+                uninstall$2(el);
                 uninstall$5(el);
-                uninstall$1(el);
                 uninstall$4(el);
                 uninstall$3(el);
-                uninstall$2(el);
-                uninstall(el);
+                uninstall$1(el);
             },
         };
     }
 
+    class Leaf {
+        constructor(trie) {
+            this.children = [];
+            this.parent = trie;
+        }
+        delete(value) {
+            const index = this.children.indexOf(value);
+            if (index === -1)
+                return false;
+            this.children = this.children.slice(0, index).concat(this.children.slice(index + 1));
+            if (this.children.length === 0) {
+                this.parent.delete(this);
+            }
+            return true;
+        }
+        add(value) {
+            this.children.push(value);
+            return this;
+        }
+    }
+    class RadixTrie {
+        constructor(trie) {
+            this.parent = null;
+            this.children = {};
+            this.parent = trie || null;
+        }
+        get(edge) {
+            return this.children[edge];
+        }
+        insert(edges) {
+            let currentNode = this;
+            for (let i = 0; i < edges.length; i += 1) {
+                const edge = edges[i];
+                let nextNode = currentNode.get(edge);
+                if (i === edges.length - 1) {
+                    if (nextNode instanceof RadixTrie) {
+                        currentNode.delete(nextNode);
+                        nextNode = null;
+                    }
+                    if (!nextNode) {
+                        nextNode = new Leaf(currentNode);
+                        currentNode.children[edge] = nextNode;
+                    }
+                    return nextNode;
+                }
+                else {
+                    if (nextNode instanceof Leaf)
+                        nextNode = null;
+                    if (!nextNode) {
+                        nextNode = new RadixTrie(currentNode);
+                        currentNode.children[edge] = nextNode;
+                    }
+                }
+                currentNode = nextNode;
+            }
+            return currentNode;
+        }
+        delete(node) {
+            for (const edge in this.children) {
+                const currentNode = this.children[edge];
+                if (currentNode === node) {
+                    const success = delete this.children[edge];
+                    if (Object.keys(this.children).length === 0 && this.parent) {
+                        this.parent.delete(this);
+                    }
+                    return success;
+                }
+            }
+            return false;
+        }
+    }
+
+    const macosSymbolLayerKeys = {
+        ['¡']: '1',
+        ['™']: '2',
+        ['£']: '3',
+        ['¢']: '4',
+        ['∞']: '5',
+        ['§']: '6',
+        ['¶']: '7',
+        ['•']: '8',
+        ['ª']: '9',
+        ['º']: '0',
+        ['–']: '-',
+        ['≠']: '=',
+        ['⁄']: '!',
+        ['€']: '@',
+        ['‹']: '#',
+        ['›']: '$',
+        ['fi']: '%',
+        ['fl']: '^',
+        ['‡']: '&',
+        ['°']: '*',
+        ['·']: '(',
+        ['‚']: ')',
+        ['—']: '_',
+        ['±']: '+',
+        ['œ']: 'q',
+        ['∑']: 'w',
+        ['®']: 'r',
+        ['†']: 't',
+        ['¥']: 'y',
+        ['ø']: 'o',
+        ['π']: 'p',
+        ['“']: '[',
+        ['‘']: ']',
+        ['«']: '\\',
+        ['Œ']: 'Q',
+        ['„']: 'W',
+        ['´']: 'E',
+        ['‰']: 'R',
+        ['ˇ']: 'T',
+        ['Á']: 'Y',
+        ['¨']: 'U',
+        ['ˆ']: 'I',
+        ['Ø']: 'O',
+        ['∏']: 'P',
+        ['”']: '{',
+        ['’']: '}',
+        ['»']: '|',
+        ['å']: 'a',
+        ['ß']: 's',
+        ['∂']: 'd',
+        ['ƒ']: 'f',
+        ['©']: 'g',
+        ['˙']: 'h',
+        ['∆']: 'j',
+        ['˚']: 'k',
+        ['¬']: 'l',
+        ['…']: ';',
+        ['æ']: "'",
+        ['Å']: 'A',
+        ['Í']: 'S',
+        ['Î']: 'D',
+        ['Ï']: 'F',
+        ['˝']: 'G',
+        ['Ó']: 'H',
+        ['Ô']: 'J',
+        ['']: 'K',
+        ['Ò']: 'L',
+        ['Ú']: ':',
+        ['Æ']: '"',
+        ['Ω']: 'z',
+        ['≈']: 'x',
+        ['ç']: 'c',
+        ['√']: 'v',
+        ['∫']: 'b',
+        ['µ']: 'm',
+        ['≤']: ',',
+        ['≥']: '.',
+        ['÷']: '/',
+        ['¸']: 'Z',
+        ['˛']: 'X',
+        ['Ç']: 'C',
+        ['◊']: 'V',
+        ['ı']: 'B',
+        ['˜']: 'N',
+        ['Â']: 'M',
+        ['¯']: '<',
+        ['˘']: '>',
+        ['¿']: '?'
+    };
+
+    const macosUppercaseLayerKeys = {
+        ['`']: '~',
+        ['1']: '!',
+        ['2']: '@',
+        ['3']: '#',
+        ['4']: '$',
+        ['5']: '%',
+        ['6']: '^',
+        ['7']: '&',
+        ['8']: '*',
+        ['9']: '(',
+        ['0']: ')',
+        ['-']: '_',
+        ['=']: '+',
+        ['[']: '{',
+        [']']: '}',
+        ['\\']: '|',
+        [';']: ':',
+        ["'"]: '"',
+        [',']: '<',
+        ['.']: '>',
+        ['/']: '?',
+        ['q']: 'Q',
+        ['w']: 'W',
+        ['e']: 'E',
+        ['r']: 'R',
+        ['t']: 'T',
+        ['y']: 'Y',
+        ['u']: 'U',
+        ['i']: 'I',
+        ['o']: 'O',
+        ['p']: 'P',
+        ['a']: 'A',
+        ['s']: 'S',
+        ['d']: 'D',
+        ['f']: 'F',
+        ['g']: 'G',
+        ['h']: 'H',
+        ['j']: 'J',
+        ['k']: 'K',
+        ['l']: 'L',
+        ['z']: 'Z',
+        ['x']: 'X',
+        ['c']: 'C',
+        ['v']: 'V',
+        ['b']: 'B',
+        ['n']: 'N',
+        ['m']: 'M'
+    };
+
+    const syntheticKeyNames = {
+        ' ': 'Space',
+        '+': 'Plus'
+    };
+    function eventToHotkeyString(event, platform = navigator.platform) {
+        var _a, _b, _c;
+        const { ctrlKey, altKey, metaKey, shiftKey, key } = event;
+        const hotkeyString = [];
+        const modifiers = [ctrlKey, altKey, metaKey, shiftKey];
+        for (const [i, mod] of modifiers.entries()) {
+            if (mod)
+                hotkeyString.push(modifierKeyNames[i]);
+        }
+        if (!modifierKeyNames.includes(key)) {
+            const altNormalizedKey = hotkeyString.includes('Alt') && matchApplePlatform.test(platform) ? (_a = macosSymbolLayerKeys[key]) !== null && _a !== undefined ? _a : key : key;
+            const shiftNormalizedKey = hotkeyString.includes('Shift') && matchApplePlatform.test(platform)
+                ? (_b = macosUppercaseLayerKeys[altNormalizedKey]) !== null && _b !== undefined ? _b : altNormalizedKey
+                : altNormalizedKey;
+            const syntheticKey = (_c = syntheticKeyNames[shiftNormalizedKey]) !== null && _c !== undefined ? _c : shiftNormalizedKey;
+            hotkeyString.push(syntheticKey);
+        }
+        return hotkeyString.join('+');
+    }
+    const modifierKeyNames = ['Control', 'Alt', 'Meta', 'Shift'];
+    function normalizeHotkey(hotkey, platform) {
+        let result;
+        result = localizeMod(hotkey);
+        result = sortModifiers(result);
+        return result;
+    }
+    const matchApplePlatform = /Mac|iPod|iPhone|iPad/i;
+    function localizeMod(hotkey, platform) {
+        var _a;
+        const ssrSafeWindow = typeof window === 'undefined' ? undefined : window;
+        const safePlatform = (_a = ssrSafeWindow === null || ssrSafeWindow === undefined ? undefined : ssrSafeWindow.navigator.platform) !== null && _a !== undefined ? _a : '';
+        const localModifier = matchApplePlatform.test(safePlatform) ? 'Meta' : 'Control';
+        return hotkey.replace('Mod', localModifier);
+    }
+    function sortModifiers(hotkey) {
+        const key = hotkey.split('+').pop();
+        const modifiers = [];
+        for (const modifier of ['Control', 'Alt', 'Meta', 'Shift']) {
+            if (hotkey.includes(modifier)) {
+                modifiers.push(modifier);
+            }
+        }
+        if (key)
+            modifiers.push(key);
+        return modifiers.join('+');
+    }
+
+    const SEQUENCE_DELIMITER = ' ';
+    class SequenceTracker {
+        constructor({ onReset } = {}) {
+            this._path = [];
+            this.timer = null;
+            this.onReset = onReset;
+        }
+        get path() {
+            return this._path;
+        }
+        get sequence() {
+            return this._path.join(SEQUENCE_DELIMITER);
+        }
+        registerKeypress(event) {
+            this._path = [...this._path, eventToHotkeyString(event)];
+            this.startTimer();
+        }
+        reset() {
+            var _a;
+            this.killTimer();
+            this._path = [];
+            (_a = this.onReset) === null || _a === undefined ? undefined : _a.call(this);
+        }
+        killTimer() {
+            if (this.timer != null) {
+                window.clearTimeout(this.timer);
+            }
+            this.timer = null;
+        }
+        startTimer() {
+            this.killTimer();
+            this.timer = window.setTimeout(() => this.reset(), SequenceTracker.CHORD_TIMEOUT);
+        }
+    }
+    SequenceTracker.CHORD_TIMEOUT = 1500;
+
+    function isFormField(element) {
+        if (!(element instanceof HTMLElement)) {
+            return false;
+        }
+        const name = element.nodeName.toLowerCase();
+        const type = (element.getAttribute('type') || '').toLowerCase();
+        return (name === 'select' ||
+            name === 'textarea' ||
+            (name === 'input' &&
+                type !== 'submit' &&
+                type !== 'reset' &&
+                type !== 'checkbox' &&
+                type !== 'radio' &&
+                type !== 'file') ||
+            element.isContentEditable);
+    }
+    function fireDeterminedAction(el, path) {
+        const delegateEvent = new CustomEvent('hotkey-fire', { cancelable: true, detail: { path } });
+        const cancelled = !el.dispatchEvent(delegateEvent);
+        if (cancelled)
+            return;
+        if (isFormField(el)) {
+            el.focus();
+        }
+        else {
+            el.click();
+        }
+    }
+    function expandHotkeyToEdges(hotkey) {
+        const output = [];
+        let acc = [''];
+        let commaIsSeparator = false;
+        for (let i = 0; i < hotkey.length; i++) {
+            if (commaIsSeparator && hotkey[i] === ',') {
+                output.push(acc);
+                acc = [''];
+                commaIsSeparator = false;
+                continue;
+            }
+            if (hotkey[i] === SEQUENCE_DELIMITER) {
+                acc.push('');
+                commaIsSeparator = false;
+                continue;
+            }
+            else if (hotkey[i] === '+') {
+                commaIsSeparator = false;
+            }
+            else {
+                commaIsSeparator = true;
+            }
+            acc[acc.length - 1] += hotkey[i];
+        }
+        output.push(acc);
+        return output.map(h => h.map(k => normalizeHotkey(k)).filter(k => k !== '')).filter(h => h.length > 0);
+    }
+
+    const hotkeyRadixTrie = new RadixTrie();
+    const elementsLeaves = new WeakMap();
+    let currentTriePosition = hotkeyRadixTrie;
+    const sequenceTracker = new SequenceTracker({
+        onReset() {
+            currentTriePosition = hotkeyRadixTrie;
+        }
+    });
+    function keyDownHandler(event) {
+        if (event.defaultPrevented)
+            return;
+        if (!(event.target instanceof Node))
+            return;
+        if (isFormField(event.target)) {
+            const target = event.target;
+            if (!target.id)
+                return;
+            if (!target.ownerDocument.querySelector(`[data-hotkey-scope="${target.id}"]`))
+                return;
+        }
+        const newTriePosition = currentTriePosition.get(eventToHotkeyString(event));
+        if (!newTriePosition) {
+            sequenceTracker.reset();
+            return;
+        }
+        sequenceTracker.registerKeypress(event);
+        currentTriePosition = newTriePosition;
+        if (newTriePosition instanceof Leaf) {
+            const target = event.target;
+            let shouldFire = false;
+            let elementToFire;
+            const formField = isFormField(target);
+            for (let i = newTriePosition.children.length - 1; i >= 0; i -= 1) {
+                elementToFire = newTriePosition.children[i];
+                const scope = elementToFire.getAttribute('data-hotkey-scope');
+                if ((!formField && !scope) || (formField && target.id === scope)) {
+                    shouldFire = true;
+                    break;
+                }
+            }
+            if (elementToFire && shouldFire) {
+                fireDeterminedAction(elementToFire, sequenceTracker.path);
+                event.preventDefault();
+            }
+            sequenceTracker.reset();
+        }
+    }
+    function install(element, hotkey) {
+        if (Object.keys(hotkeyRadixTrie.children).length === 0) {
+            document.addEventListener('keydown', keyDownHandler);
+        }
+        const hotkeys = expandHotkeyToEdges(element.getAttribute('data-hotkey') || '');
+        const leaves = hotkeys.map(h => hotkeyRadixTrie.insert(h).add(element));
+        elementsLeaves.set(element, leaves);
+    }
+    function uninstall(element) {
+        const leaves = elementsLeaves.get(element);
+        if (leaves && leaves.length) {
+            for (const leaf of leaves) {
+                leaf && leaf.delete(element);
+            }
+        }
+        if (Object.keys(hotkeyRadixTrie.children).length === 0) {
+            document.removeEventListener('keydown', keyDownHandler);
+        }
+    }
+
     /* eslint-disable camelcase */
 
     // upload code from Jeremy Smith's blog post
@@ -2839,7 +3262,19 @@ var MarksmithController = (function () {
       }
 
       connect() {
-        subscribe(this.fieldContainerTarget, { defaultPlainTextPaste: { urlLinks: true } });
+        subscribe(this.fieldElementTarget);
+
+        // Install all the hotkeys on the page
+        for (const el of document.querySelectorAll('[data-hotkey]')) {
+          install(el);
+        }
+      }
+
+      disconnect() {
+        // Uninstall all the hotkeys on the page
+        for (const el of document.querySelectorAll('[data-hotkey]')) {
+          uninstall(el);
+        }
       }
 
       switchToWrite(event) {

data/app/assets/javascripts/marksmith_controller-no-stimulus.esm.js

@@ -1,5 +1,5 @@
 /*!
-Marksmith 0.4.1
+Marksmith 0.4.4
 */
 var MarksmithController = (function (stimulus) {
     'use strict';
@@ -1927,15 +1927,15 @@ var MarksmithController = (function (stimulus) {
         }
         el.addEventListener('paste', unsetSkipFormattedFlag);
     }
-    function uninstall$5(el) {
+    function uninstall$6(el) {
         el.removeEventListener('keydown', setSkipFormattingFlag);
         el.removeEventListener('paste', unsetSkipFormattedFlag);
     }
 
-    function install$4(el) {
+    function install$5(el) {
         el.addEventListener('paste', onPaste$4);
     }
-    function uninstall$4(el) {
+    function uninstall$5(el) {
         el.removeEventListener('paste', onPaste$4);
     }
     function onPaste$4(event) {
@@ -2049,12 +2049,12 @@ var MarksmithController = (function (stimulus) {
         return ((_a = link.textContent) === null || _a === undefined ? undefined : _a.slice(0, 1)) === '@' && link.getAttribute('data-hovercard-type') === 'team';
     }
 
-    function install$3(el) {
+    function install$4(el) {
         el.addEventListener('dragover', onDragover$1);
         el.addEventListener('drop', onDrop$1);
         el.addEventListener('paste', onPaste$3);
     }
-    function uninstall$3(el) {
+    function uninstall$4(el) {
         el.removeEventListener('dragover', onDragover$1);
         el.removeEventListener('drop', onDrop$1);
         el.removeEventListener('paste', onPaste$3);
@@ -2117,12 +2117,12 @@ var MarksmithController = (function (stimulus) {
     }
 
     const pasteLinkAsPlainTextOverSelectedTextMap = new WeakMap();
-    function install$2(el, optionConfig) {
+    function install$3(el, optionConfig) {
         var _a;
         pasteLinkAsPlainTextOverSelectedTextMap.set(el, ((_a = optionConfig === null || optionConfig === undefined ? undefined : optionConfig.defaultPlainTextPaste) === null || _a === undefined ? undefined : _a.urlLinks) === true);
         el.addEventListener('paste', onPaste$2);
     }
-    function uninstall$2(el) {
+    function uninstall$3(el) {
         el.removeEventListener('paste', onPaste$2);
     }
     function onPaste$2(event) {
@@ -2186,12 +2186,12 @@ var MarksmithController = (function (stimulus) {
         return url.endsWith('/') ? url.slice(0, url.length - 1) : url;
     }
 
-    function install$1(el) {
+    function install$2(el) {
         el.addEventListener('dragover', onDragover);
         el.addEventListener('drop', onDrop);
         el.addEventListener('paste', onPaste$1);
     }
-    function uninstall$1(el) {
+    function uninstall$2(el) {
         el.removeEventListener('dragover', onDragover);
         el.removeEventListener('drop', onDrop);
         el.removeEventListener('paste', onPaste$1);
@@ -2282,10 +2282,10 @@ var MarksmithController = (function (stimulus) {
         return [start, formattedTable, end].join('').replace(/<meta.*?>/, '');
     }
 
-    function install(el) {
+    function install$1(el) {
         el.addEventListener('paste', onPaste);
     }
-    function uninstall(el) {
+    function uninstall$1(el) {
         el.removeEventListener('paste', onPaste);
     }
     function onPaste(event) {
@@ -2310,19 +2310,442 @@ var MarksmithController = (function (stimulus) {
     }
 
     function subscribe(el, optionConfig) {
-        installAround(el, [install$1, install$3, install$2, install, install$4], optionConfig);
+        installAround(el, [install$2, install$4, install$3, install$1, install$5], optionConfig);
         return {
             unsubscribe: () => {
+                uninstall$6(el);
+                uninstall$2(el);
                 uninstall$5(el);
-                uninstall$1(el);
                 uninstall$4(el);
                 uninstall$3(el);
-                uninstall$2(el);
-                uninstall(el);
+                uninstall$1(el);
             },
         };
     }
 
+    class Leaf {
+        constructor(trie) {
+            this.children = [];
+            this.parent = trie;
+        }
+        delete(value) {
+            const index = this.children.indexOf(value);
+            if (index === -1)
+                return false;
+            this.children = this.children.slice(0, index).concat(this.children.slice(index + 1));
+            if (this.children.length === 0) {
+                this.parent.delete(this);
+            }
+            return true;
+        }
+        add(value) {
+            this.children.push(value);
+            return this;
+        }
+    }
+    class RadixTrie {
+        constructor(trie) {
+            this.parent = null;
+            this.children = {};
+            this.parent = trie || null;
+        }
+        get(edge) {
+            return this.children[edge];
+        }
+        insert(edges) {
+            let currentNode = this;
+            for (let i = 0; i < edges.length; i += 1) {
+                const edge = edges[i];
+                let nextNode = currentNode.get(edge);
+                if (i === edges.length - 1) {
+                    if (nextNode instanceof RadixTrie) {
+                        currentNode.delete(nextNode);
+                        nextNode = null;
+                    }
+                    if (!nextNode) {
+                        nextNode = new Leaf(currentNode);
+                        currentNode.children[edge] = nextNode;
+                    }
+                    return nextNode;
+                }
+                else {
+                    if (nextNode instanceof Leaf)
+                        nextNode = null;
+                    if (!nextNode) {
+                        nextNode = new RadixTrie(currentNode);
+                        currentNode.children[edge] = nextNode;
+                    }
+                }
+                currentNode = nextNode;
+            }
+            return currentNode;
+        }
+        delete(node) {
+            for (const edge in this.children) {
+                const currentNode = this.children[edge];
+                if (currentNode === node) {
+                    const success = delete this.children[edge];
+                    if (Object.keys(this.children).length === 0 && this.parent) {
+                        this.parent.delete(this);
+                    }
+                    return success;
+                }
+            }
+            return false;
+        }
+    }
+
+    const macosSymbolLayerKeys = {
+        ['¡']: '1',
+        ['™']: '2',
+        ['£']: '3',
+        ['¢']: '4',
+        ['∞']: '5',
+        ['§']: '6',
+        ['¶']: '7',
+        ['•']: '8',
+        ['ª']: '9',
+        ['º']: '0',
+        ['–']: '-',
+        ['≠']: '=',
+        ['⁄']: '!',
+        ['€']: '@',
+        ['‹']: '#',
+        ['›']: '$',
+        ['fi']: '%',
+        ['fl']: '^',
+        ['‡']: '&',
+        ['°']: '*',
+        ['·']: '(',
+        ['‚']: ')',
+        ['—']: '_',
+        ['±']: '+',
+        ['œ']: 'q',
+        ['∑']: 'w',
+        ['®']: 'r',
+        ['†']: 't',
+        ['¥']: 'y',
+        ['ø']: 'o',
+        ['π']: 'p',
+        ['“']: '[',
+        ['‘']: ']',
+        ['«']: '\\',
+        ['Œ']: 'Q',
+        ['„']: 'W',
+        ['´']: 'E',
+        ['‰']: 'R',
+        ['ˇ']: 'T',
+        ['Á']: 'Y',
+        ['¨']: 'U',
+        ['ˆ']: 'I',
+        ['Ø']: 'O',
+        ['∏']: 'P',
+        ['”']: '{',
+        ['’']: '}',
+        ['»']: '|',
+        ['å']: 'a',
+        ['ß']: 's',
+        ['∂']: 'd',
+        ['ƒ']: 'f',
+        ['©']: 'g',
+        ['˙']: 'h',
+        ['∆']: 'j',
+        ['˚']: 'k',
+        ['¬']: 'l',
+        ['…']: ';',
+        ['æ']: "'",
+        ['Å']: 'A',
+        ['Í']: 'S',
+        ['Î']: 'D',
+        ['Ï']: 'F',
+        ['˝']: 'G',
+        ['Ó']: 'H',
+        ['Ô']: 'J',
+        ['']: 'K',
+        ['Ò']: 'L',
+        ['Ú']: ':',
+        ['Æ']: '"',
+        ['Ω']: 'z',
+        ['≈']: 'x',
+        ['ç']: 'c',
+        ['√']: 'v',
+        ['∫']: 'b',
+        ['µ']: 'm',
+        ['≤']: ',',
+        ['≥']: '.',
+        ['÷']: '/',
+        ['¸']: 'Z',
+        ['˛']: 'X',
+        ['Ç']: 'C',
+        ['◊']: 'V',
+        ['ı']: 'B',
+        ['˜']: 'N',
+        ['Â']: 'M',
+        ['¯']: '<',
+        ['˘']: '>',
+        ['¿']: '?'
+    };
+
+    const macosUppercaseLayerKeys = {
+        ['`']: '~',
+        ['1']: '!',
+        ['2']: '@',
+        ['3']: '#',
+        ['4']: '$',
+        ['5']: '%',
+        ['6']: '^',
+        ['7']: '&',
+        ['8']: '*',
+        ['9']: '(',
+        ['0']: ')',
+        ['-']: '_',
+        ['=']: '+',
+        ['[']: '{',
+        [']']: '}',
+        ['\\']: '|',
+        [';']: ':',
+        ["'"]: '"',
+        [',']: '<',
+        ['.']: '>',
+        ['/']: '?',
+        ['q']: 'Q',
+        ['w']: 'W',
+        ['e']: 'E',
+        ['r']: 'R',
+        ['t']: 'T',
+        ['y']: 'Y',
+        ['u']: 'U',
+        ['i']: 'I',
+        ['o']: 'O',
+        ['p']: 'P',
+        ['a']: 'A',
+        ['s']: 'S',
+        ['d']: 'D',
+        ['f']: 'F',
+        ['g']: 'G',
+        ['h']: 'H',
+        ['j']: 'J',
+        ['k']: 'K',
+        ['l']: 'L',
+        ['z']: 'Z',
+        ['x']: 'X',
+        ['c']: 'C',
+        ['v']: 'V',
+        ['b']: 'B',
+        ['n']: 'N',
+        ['m']: 'M'
+    };
+
+    const syntheticKeyNames = {
+        ' ': 'Space',
+        '+': 'Plus'
+    };
+    function eventToHotkeyString(event, platform = navigator.platform) {
+        var _a, _b, _c;
+        const { ctrlKey, altKey, metaKey, shiftKey, key } = event;
+        const hotkeyString = [];
+        const modifiers = [ctrlKey, altKey, metaKey, shiftKey];
+        for (const [i, mod] of modifiers.entries()) {
+            if (mod)
+                hotkeyString.push(modifierKeyNames[i]);
+        }
+        if (!modifierKeyNames.includes(key)) {
+            const altNormalizedKey = hotkeyString.includes('Alt') && matchApplePlatform.test(platform) ? (_a = macosSymbolLayerKeys[key]) !== null && _a !== undefined ? _a : key : key;
+            const shiftNormalizedKey = hotkeyString.includes('Shift') && matchApplePlatform.test(platform)
+                ? (_b = macosUppercaseLayerKeys[altNormalizedKey]) !== null && _b !== undefined ? _b : altNormalizedKey
+                : altNormalizedKey;
+            const syntheticKey = (_c = syntheticKeyNames[shiftNormalizedKey]) !== null && _c !== undefined ? _c : shiftNormalizedKey;
+            hotkeyString.push(syntheticKey);
+        }
+        return hotkeyString.join('+');
+    }
+    const modifierKeyNames = ['Control', 'Alt', 'Meta', 'Shift'];
+    function normalizeHotkey(hotkey, platform) {
+        let result;
+        result = localizeMod(hotkey);
+        result = sortModifiers(result);
+        return result;
+    }
+    const matchApplePlatform = /Mac|iPod|iPhone|iPad/i;
+    function localizeMod(hotkey, platform) {
+        var _a;
+        const ssrSafeWindow = typeof window === 'undefined' ? undefined : window;
+        const safePlatform = (_a = ssrSafeWindow === null || ssrSafeWindow === undefined ? undefined : ssrSafeWindow.navigator.platform) !== null && _a !== undefined ? _a : '';
+        const localModifier = matchApplePlatform.test(safePlatform) ? 'Meta' : 'Control';
+        return hotkey.replace('Mod', localModifier);
+    }
+    function sortModifiers(hotkey) {
+        const key = hotkey.split('+').pop();
+        const modifiers = [];
+        for (const modifier of ['Control', 'Alt', 'Meta', 'Shift']) {
+            if (hotkey.includes(modifier)) {
+                modifiers.push(modifier);
+            }
+        }
+        if (key)
+            modifiers.push(key);
+        return modifiers.join('+');
+    }
+
+    const SEQUENCE_DELIMITER = ' ';
+    class SequenceTracker {
+        constructor({ onReset } = {}) {
+            this._path = [];
+            this.timer = null;
+            this.onReset = onReset;
+        }
+        get path() {
+            return this._path;
+        }
+        get sequence() {
+            return this._path.join(SEQUENCE_DELIMITER);
+        }
+        registerKeypress(event) {
+            this._path = [...this._path, eventToHotkeyString(event)];
+            this.startTimer();
+        }
+        reset() {
+            var _a;
+            this.killTimer();
+            this._path = [];
+            (_a = this.onReset) === null || _a === undefined ? undefined : _a.call(this);
+        }
+        killTimer() {
+            if (this.timer != null) {
+                window.clearTimeout(this.timer);
+            }
+            this.timer = null;
+        }
+        startTimer() {
+            this.killTimer();
+            this.timer = window.setTimeout(() => this.reset(), SequenceTracker.CHORD_TIMEOUT);
+        }
+    }
+    SequenceTracker.CHORD_TIMEOUT = 1500;
+
+    function isFormField(element) {
+        if (!(element instanceof HTMLElement)) {
+            return false;
+        }
+        const name = element.nodeName.toLowerCase();
+        const type = (element.getAttribute('type') || '').toLowerCase();
+        return (name === 'select' ||
+            name === 'textarea' ||
+            (name === 'input' &&
+                type !== 'submit' &&
+                type !== 'reset' &&
+                type !== 'checkbox' &&
+                type !== 'radio' &&
+                type !== 'file') ||
+            element.isContentEditable);
+    }
+    function fireDeterminedAction(el, path) {
+        const delegateEvent = new CustomEvent('hotkey-fire', { cancelable: true, detail: { path } });
+        const cancelled = !el.dispatchEvent(delegateEvent);
+        if (cancelled)
+            return;
+        if (isFormField(el)) {
+            el.focus();
+        }
+        else {
+            el.click();
+        }
+    }
+    function expandHotkeyToEdges(hotkey) {
+        const output = [];
+        let acc = [''];
+        let commaIsSeparator = false;
+        for (let i = 0; i < hotkey.length; i++) {
+            if (commaIsSeparator && hotkey[i] === ',') {
+                output.push(acc);
+                acc = [''];
+                commaIsSeparator = false;
+                continue;
+            }
+            if (hotkey[i] === SEQUENCE_DELIMITER) {
+                acc.push('');
+                commaIsSeparator = false;
+                continue;
+            }
+            else if (hotkey[i] === '+') {
+                commaIsSeparator = false;
+            }
+            else {
+                commaIsSeparator = true;
+            }
+            acc[acc.length - 1] += hotkey[i];
+        }
+        output.push(acc);
+        return output.map(h => h.map(k => normalizeHotkey(k)).filter(k => k !== '')).filter(h => h.length > 0);
+    }
+
+    const hotkeyRadixTrie = new RadixTrie();
+    const elementsLeaves = new WeakMap();
+    let currentTriePosition = hotkeyRadixTrie;
+    const sequenceTracker = new SequenceTracker({
+        onReset() {
+            currentTriePosition = hotkeyRadixTrie;
+        }
+    });
+    function keyDownHandler(event) {
+        if (event.defaultPrevented)
+            return;
+        if (!(event.target instanceof Node))
+            return;
+        if (isFormField(event.target)) {
+            const target = event.target;
+            if (!target.id)
+                return;
+            if (!target.ownerDocument.querySelector(`[data-hotkey-scope="${target.id}"]`))
+                return;
+        }
+        const newTriePosition = currentTriePosition.get(eventToHotkeyString(event));
+        if (!newTriePosition) {
+            sequenceTracker.reset();
+            return;
+        }
+        sequenceTracker.registerKeypress(event);
+        currentTriePosition = newTriePosition;
+        if (newTriePosition instanceof Leaf) {
+            const target = event.target;
+            let shouldFire = false;
+            let elementToFire;
+            const formField = isFormField(target);
+            for (let i = newTriePosition.children.length - 1; i >= 0; i -= 1) {
+                elementToFire = newTriePosition.children[i];
+                const scope = elementToFire.getAttribute('data-hotkey-scope');
+                if ((!formField && !scope) || (formField && target.id === scope)) {
+                    shouldFire = true;
+                    break;
+                }
+            }
+            if (elementToFire && shouldFire) {
+                fireDeterminedAction(elementToFire, sequenceTracker.path);
+                event.preventDefault();
+            }
+            sequenceTracker.reset();
+        }
+    }
+    function install(element, hotkey) {
+        if (Object.keys(hotkeyRadixTrie.children).length === 0) {
+            document.addEventListener('keydown', keyDownHandler);
+        }
+        const hotkeys = expandHotkeyToEdges(element.getAttribute('data-hotkey') || '');
+        const leaves = hotkeys.map(h => hotkeyRadixTrie.insert(h).add(element));
+        elementsLeaves.set(element, leaves);
+    }
+    function uninstall(element) {
+        const leaves = elementsLeaves.get(element);
+        if (leaves && leaves.length) {
+            for (const leaf of leaves) {
+                leaf && leaf.delete(element);
+            }
+        }
+        if (Object.keys(hotkeyRadixTrie.children).length === 0) {
+            document.removeEventListener('keydown', keyDownHandler);
+        }
+    }
+
     /* eslint-disable camelcase */
 
     // upload code from Jeremy Smith's blog post
@@ -2349,7 +2772,19 @@ var MarksmithController = (function (stimulus) {
       }
 
       connect() {
-        subscribe(this.fieldContainerTarget, { defaultPlainTextPaste: { urlLinks: true } });
+        subscribe(this.fieldElementTarget);
+
+        // Install all the hotkeys on the page
+        for (const el of document.querySelectorAll('[data-hotkey]')) {
+          install(el);
+        }
+      }
+
+      disconnect() {
+        // Uninstall all the hotkeys on the page
+        for (const el of document.querySelectorAll('[data-hotkey]')) {
+          uninstall(el);
+        }
       }
 
       switchToWrite(event) {

data/app/frontend/entrypoints/javascript/controllers/marksmith_controller.js

@@ -4,6 +4,7 @@ import { Controller } from '@hotwired/stimulus'
 import { DirectUpload } from '@rails/activestorage'
 import { post } from '@rails/request.js'
 import { subscribe } from '@github/paste-markdown'
+import {install, uninstall} from '@github/hotkey'
 
 // upload code from Jeremy Smith's blog post
 // https://hybrd.co/posts/github-issue-style-file-uploader-using-stimulus-and-active-storage
@@ -29,7 +30,19 @@ export default class extends Controller {
   }
 
   connect() {
-    subscribe(this.fieldContainerTarget, { defaultPlainTextPaste: { urlLinks: true } })
+    subscribe(this.fieldElementTarget)
+
+    // Install all the hotkeys on the page
+    for (const el of document.querySelectorAll('[data-hotkey]')) {
+      install(el)
+    }
+  }
+
+  disconnect() {
+    // Uninstall all the hotkeys on the page
+    for (const el of document.querySelectorAll('[data-hotkey]')) {
+      uninstall(el)
+    }
   }
 
   switchToWrite(event) {

data/app/helpers/marksmith/marksmith_helper.rb

@@ -26,8 +26,14 @@ module Marksmith
       )
     end
 
-    def marksmith_toolbar_button(name, **kwargs)
-      content_tag "md-#{name}", marksmith_toolbar_svg(name), title: t("marksmith.#{name.to_s.gsub("-", "_")}").humanize, class: marksmith_button_classes
+    def marksmith_toolbar_button(name, hotkey_scope: nil, hotkey: nil, **kwargs)
+      content_tag "md-#{name}", marksmith_toolbar_svg(name),
+        title: t("marksmith.#{name.to_s.gsub("-", "_")}").humanize,
+        class: marksmith_button_classes,
+        data: {
+          hotkey_scope:,
+          hotkey:
+        }
     end
 
     def marksmith_tab_classes

data/app/models/marksmith/editor.rb

@@ -101,4 +101,12 @@ class Marksmith::Editor
   def value
     form&.object&.send(name) || @value || nil
   end
+
+  def textarea_id
+    "#{id}-textarea"
+  end
+
+  def preview_pane_id
+    "#{id}-preview-pane"
+  end
 end

data/app/views/marksmith/shared/_action_bar.html.erb

@@ -1,10 +1,10 @@
-<%= tag.markdown_toolbar for: name,
+<%= tag.markdown_toolbar for: textarea_id,
   class: class_names("ms:flex ms:flex-wrap ms:px-2 ms:py-1", "ms:pointer-events-none": disabled),
   data: { marksmith_target: "toolbar" } do
 %>
-  <%= marksmith_toolbar_button "bold" %>
-  <%= marksmith_toolbar_button "header" %>
-  <%= marksmith_toolbar_button "italic" %>
+  <%= marksmith_toolbar_button "bold",           hotkey: "Meta+b", hotkey_scope: textarea_id %>
+  <%= marksmith_toolbar_button "header",         hotkey: "Meta+h", hotkey_scope: textarea_id %>
+  <%= marksmith_toolbar_button "italic",         hotkey: "Meta+i", hotkey_scope: textarea_id %>
   <%= marksmith_toolbar_button "quote" %>
   <%= marksmith_toolbar_button "code" %>
   <%= marksmith_toolbar_button "link" %>

data/app/views/marksmith/shared/_editor.html.erb

@@ -15,9 +15,9 @@
     marksmith_extra_preview_params_value: editor.extra_preview_params.as_json,
     **editor.controller_data_attributes,
   } do %>
-  <%= render partial: "marksmith/shared/toolbar", locals: { name: editor.name, disabled: editor.disabled } %>
+  <%= render partial: "marksmith/shared/toolbar", locals: { textarea_id: editor.textarea_id, disabled: editor.disabled} %>
   <div class="ms:border-t ms:w-full ms:border-neutral-500 ms:flex ms:flex-1">
     <%= render partial: "marksmith/shared/editor_pane", locals: { editor: } %>
-    <%= render partial: "marksmith/shared/preview_pane", locals: { name: editor.name } %>
+    <%= render partial: "marksmith/shared/preview_pane", locals: { editor: } %>
   </div>
 <% end %>

data/app/views/marksmith/shared/_editor_pane.html.erb

@@ -1,6 +1,6 @@
 <%= content_tag :div, class: "ms:flex ms:flex-1 ms:flex-col ms:size-full", data: { marksmith_target: "fieldContainer" } do %>
   <%= text_area_tag editor.field_name, editor.value,
-    id: editor.name,
+    id: editor.textarea_id,
     class: class_names(
       "ms:flex ms:flex-1 ms:border-none ms:resize-none ms:focus:outline-none ms:font-mono ms:focus:ring-0 ms:leading-normal ms:p-2 ms:text-sm ms:field-sizing-content ms:min-h-60",
       "ms:dark:bg-neutral-800 ms:dark:text-neutral-200",

data/app/views/marksmith/shared/_preview_pane.html.erb

@@ -1,6 +1,6 @@
 <%= content_tag :div,
   class: "ms:hidden ms:markdown-preview ms:size-full ms:flex-1 ms:flex ms:size-full ms:p-2 ms:overflow-auto ms:bg-white ms:dark:bg-neutral-800 ms:rounded-b-md",
-  id: "markdown-preview-#{name}",
+  id: editor.preview_pane_id,
   data: {
     marksmith_target: "previewPane",
   } do %>

data/app/views/marksmith/shared/_toolbar.html.erb

@@ -4,5 +4,5 @@
 ) do %>
   <%= render partial: "marksmith/shared/tabs" %>
 
-  <%= render partial: "marksmith/shared/action_bar", locals: { name:, disabled: } %>
+  <%= render partial: "marksmith/shared/action_bar", locals: { textarea_id:, disabled: } %>
 <% end %>

data/lib/marksmith/version.rb

@@ -1,3 +1,3 @@
 module Marksmith
-  VERSION = "0.4.1"
+  VERSION = "0.4.4"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: marksmith
 version: !ruby/object:Gem::Version
-  version: 0.4.1
+  version: 0.4.4
 platform: ruby
 authors:
 - Adrian Marin