TinyMCE Shortcuts - Custom shortcuts appear to be overwriting each other

I've seen a ton of questions about TinyMCE shortcuts, but nothing quite like this.

I have a situation in which I am iterating over an object of shortcuts I want to add to TinyMCE. The shortcuts add functionality for the greater app around the editor.

For the most part, it works fine. However, it appears that I cannot add certain combinations. For example, alt+l and alt+left.

Take this code:

_.each(oHotKeyCollection, function (oHotKey, sHotKey) {
    this.editor.addShortcut(sHotKey, oHotKey.note, function (e) {
        if (!e) {
            e = event;
        }
        // sHotKey is the pattern (ie. alt+l)
        alert(sHotKey)

        oHotKey.execute(e);
    }.bind(this));
                }
}.bind(this));

When alt+l is added, and then alt+left is added, hitting alt+l on the keyboard will bring up an alert with alt+left.

Removing the alt+left shortcut allows alt+l to function as expected.

The same behaviour seems to be true of alt+r and alt+right as well as alt+u and alt+up.

How I can get both shortcuts working?

Solution

The problem is that only certain keywords can be used in a shortcut, such as the modifier names (ctrl, alt, etc...). Anything else is treated as a single key so left in this case isn't valid and is treated as just being l (see Shortcuts.ts). That's why alt+l is being overridden with your alt+left behavior.

So to fix that, you'll need to use the keycode for left instead of a keyword. In this case that would be alt+37. Here's a fiddle showing that working by printing to the console: https://fiddle.tiny.cloud/EEhaab.

Since you also mentioned you're trying to register other arrow keys, here's the key combinations you'd need to use:

Left: alt+37
Right: alt+39
Up: alt+38
Down: alt+40