DOC-627 Clarified menuitem shortcut property is for the label only. Created additional demo to showcase adding a shortcut to a custom menuitem

_includes/live-demos/custom-shortcut-2/index.html

@@ -0,0 +1,3 @@
+<textarea id="custom-shortcut-2">
+  <p>Use the shortcut <code>Cmd+Option+U</code> on Mac or <code>Ctrl+Alt+U</code> if your on Windows or press the plus button to insert a username here: </p>
+</textarea>

_includes/live-demos/custom-shortcut-2/index.js

@@ -0,0 +1,31 @@
+tinymce.init({
+  selector: '#custom-shortcut-2',
+  plugins: 'autolink lists link',
+  toolbar: 'undo redo | bold italic link bullist | insertUsername',
+  setup: function (editor) {
+    editor.addShortcut('meta+alt+U', 'Insert username', function () {
+      insertUsername();
+    });
+
+    editor.ui.registry.addMenuButton('insertUsername', {
+      icon: 'plus',
+      fetch: function (callback) {
+        var items = [
+          {
+            type: 'menuitem',
+            text: 'Insert username',
+            shortcut: 'meta+alt+U',
+            onAction: function () {
+              insertUsername();
+            }
+          }
+        ];
+        callback(items);
+      }
+    });
+  }
+});
+
+function insertUsername() {
+  tinymce.activeEditor.insertContent(`@username`);
+}

advanced/keyboard-shortcuts.md

@@ -77,3 +77,7 @@ To add a custom keyboard shortcut to {{site.productname}}, use either:
 ### Example: Custom keyboard shortcut
 
 {% include live-demo.html id="custom-shortcut" tab="js" %}
+
+### Example: Custom menuitem shortcut
+
+{% include live-demo.html id="custom-shortcut-2" tab="js" %}

ui-components/menuitems.md

@@ -76,9 +76,7 @@ A basic menu item triggers its `onAction` function when clicked.
 | disabled | boolean | optional | default: false - Represents the menu item's state. When true, the menu item is unclickable. Toggled by the menu item's API. |
 | onSetup | `(api) => (api) => void` | optional | default: `() => () => {}` - Function invoked when the menu item is rendered, each time its menu is opened. |
 | onAction | `(api) => void` | required | Function invoked when the menu item is clicked. |
-| shortcut | string | optional | Sets a keyboard shortcut for activating the menu item, such as: `shortcut: 'Ctrl+Alt+Delete'`. For information on available shortcut modifiers, see: [Shortcut modifier key mappings](#shortcutmodifierkeymappings). |
-
-###{% include misc/shortcut-os-mappings.md %}
+| shortcut | string | optional | Text to display in the shortcut label. To register a shortcut see: [`Add custom shortcuts to TinyMCE`]({{site.baseurl}}/advanced/keyboard-shortcuts/#addcustomshortcutstotinymce). |
 
 #### API
 
@@ -120,10 +118,7 @@ A nested menu item is a menu item with a submenu. Registering a submenu this way
 | value | string | optional | A value to associate with the menu item. |
 | onSetup | `(api) => (api) => void` | optional | default: `() => () => {}` - Function invoked when the menu item is rendered, each time its menu is opened. |
 | getSubmenuItems | `() => string` or `MenuItem[]` | required | Function invoked when the menu item is clicked to open its submenu. Must return either a space separated string of registered menu names or an array of basic, toggle or nested menu items specifications. |
-| shortcut | string | optional | Sets a keyboard shortcut for activating the menu item, such as: `shortcut: 'Ctrl+Alt+Delete'`. For information on available shortcut modifiers, see: [Shortcut modifier key mappings](#shortcutmodifierkeymappings2). |
-
-<a class="anchor" id="shortcutmodifierkeymappings2"></a>
-###{% include misc/shortcut-os-mappings.md %}
+| shortcut | string | optional | Text to display in the shortcut label. To register a shortcut see: [`Add custom shortcuts to TinyMCE`]({{site.baseurl}}/advanced/keyboard-shortcuts/#addcustomshortcutstotinymce). |
 
 #### API