Fixes for release:

docs/CHANGELOG.md

@@ -21,7 +21,8 @@
 - `Fix` - Fixed the `Tab` key behavior when the caret is not set inside contenteditable element, but the block is selected [#1302](https://github.com/codex-team/editor.js/issues/1302).
 - `Fix` - Fixed the `onChange` callback issue. This method didn't be called for native inputs before some contentedtable element changed [#843](https://github.com/codex-team/editor.js/issues/843)
 - `Fix` - Fixed the `onChange` callback issue. This method didn't be called after the callback throws an exception [#1339](https://github.com/codex-team/editor.js/issues/1339)
-- `Deprecated` — The Inline Tool `clear()` method is deprecated because the new instance of Inline Tools will be created on every showing of the Inline Toolbar 
+- `Fix` - The internal `shortcut` getter of Tools classes will work now.
+- `Deprecated` — The Inline Tool `clear()` method is deprecated because the new instance of Inline Tools will be created on every showing of the Inline Toolbar
 
 ### 2.18
 

src/components/core.ts

@@ -284,8 +284,6 @@ export default class Core {
     const modulesToPrepare = [
       'Tools',
       'UI',
-      'Toolbar',
-      'InlineToolbar',
       'BlockManager',
       'Paste',
       'BlockSelection',

src/components/modules/toolbar/index.ts

@@ -139,19 +139,6 @@ export default class Toolbar extends Module<ToolbarNodes> {
     };
   }
 
-  /**
-   * Module preparation method
-   */
-  public async prepare(): Promise<void> {
-    /**
-     * Bind events on the Toolbar elements
-     */
-    if (!this.Editor.ReadOnly.isEnabled) {
-      this.drawUI();
-      this.enableModuleBindings();
-    }
-  }
-
   /**
    * Toggles read-only mode
    *

src/components/modules/toolbar/inline.ts

@@ -87,15 +87,6 @@ export default class InlineToolbar extends Module<InlineToolbarNodes> {
    */
   private flipper: Flipper = null;
 
-  /**
-   * Module preparation method
-   */
-  public async prepare(): Promise<void> {
-    if (!this.Editor.ReadOnly.isEnabled) {
-      this.make();
-    }
-  }
-
   /**
    * Toggles read-only mode
    *

src/components/modules/toolbar/toolbox.ts

@@ -1,7 +1,7 @@
 import Module from '../../__module';
 import $ from '../../dom';
 import * as _ from '../../utils';
-import { BlockToolConstructable } from '../../../../types';
+import { BlockToolConstructable, ToolConstructable } from '../../../../types';
 import Flipper from '../../flipper';
 import { BlockToolAPI } from '../../block';
 import I18n from '../../i18n';
@@ -99,6 +99,7 @@ export default class Toolbox extends Module<ToolboxNodes> {
     this.flipper.deactivate();
     this.flipper = null;
     this.removeAllNodes();
+    this.removeAllShortcuts();
   }
 
   /**
@@ -232,32 +233,48 @@ export default class Toolbox extends Module<ToolboxNodes> {
       hidingDelay: 200,
     });
 
-    /**
-     * Enable shortcut
-     */
-    const toolSettings = this.Editor.Tools.getToolSettings(toolName);
+    const shortcut = this.getToolShortcut(toolName, tool);
 
-    if (toolSettings && toolSettings[this.Editor.Tools.USER_SETTINGS.SHORTCUT]) {
-      this.enableShortcut(tool, toolName, toolSettings[this.Editor.Tools.USER_SETTINGS.SHORTCUT]);
+    if (shortcut) {
+      this.enableShortcut(tool, toolName, shortcut);
     }
 
     /** Increment Tools count */
     this.displayedToolsCount++;
   }
 
+  /**
+   * Returns tool's shortcut
+   * It can be specified via internal 'shortcut' static getter or by user settings for tool
+   *
+   * @param {string} toolName - name of tool
+   * @param {ToolConstructable} tool - name of tool
+   */
+  private getToolShortcut(toolName: string, tool: ToolConstructable): string|null {
+    /**
+     * Enable shortcut
+     */
+    const toolSettings = this.Editor.Tools.getToolSettings(toolName);
+    const internalToolShortcut = tool[this.Editor.Tools.INTERNAL_SETTINGS.SHORTCUT];
+    const userSpecifiedShortcut = toolSettings ? toolSettings[this.Editor.Tools.USER_SETTINGS.SHORTCUT] : null;
+
+    return userSpecifiedShortcut || internalToolShortcut;
+  }
+
   /**
    * Draw tooltip for toolbox tools
    *
    * @param {string} toolName - toolbox tool name
    * @returns {HTMLElement}
    */
   private drawTooltip(toolName: string): HTMLElement {
+    const tool = this.Editor.Tools.available[toolName];
     const toolSettings = this.Editor.Tools.getToolSettings(toolName);
     const toolboxSettings = this.Editor.Tools.available[toolName][this.Editor.Tools.INTERNAL_SETTINGS.TOOLBOX] || {};
     const userToolboxSettings = toolSettings.toolbox || {};
     const name = I18n.t(I18nInternalNS.toolNames, userToolboxSettings.title || toolboxSettings.title || toolName);
 
-    let shortcut = toolSettings[this.Editor.Tools.USER_SETTINGS.SHORTCUT];
+    let shortcut = this.getToolShortcut(toolName, tool);
 
     const tooltip = $.make('div', this.CSS.buttonTooltip);
     const hint = document.createTextNode(_.capitalize(name));
@@ -292,6 +309,24 @@ export default class Toolbox extends Module<ToolboxNodes> {
     });
   }
 
+  /**
+   * Removes all added shortcuts
+   * Fired when the Read-Only mode is activated
+   */
+  private removeAllShortcuts(): void {
+    const tools = this.Editor.Tools.available;
+
+    for (const toolName in tools) {
+      if (Object.prototype.hasOwnProperty.call(tools, toolName)) {
+        const shortcut = this.getToolShortcut(toolName, tools[toolName]);
+
+        if (shortcut) {
+          this.Editor.Shortcuts.remove(shortcut);
+        }
+      }
+    }
+  }
+
   /**
    * Creates Flipper instance to be able to leaf tools
    */

src/styles/inline-toolbar.css

@@ -7,7 +7,6 @@
   will-change: transform, opacity;
   top: 0;
   left: 0;
-  padding: 0 6px;
 
   &--showed {
     opacity: 1;
@@ -36,6 +35,12 @@
     display: none !important;
   }
 
+  &__toggler-and-button-wrapper {
+    display: flex;
+    width: 100%;
+    padding: 0 6px;
+  }
+
   &__buttons {
     display: flex;
   }
@@ -80,13 +85,6 @@
     word-spacing: -3px;
     margin-top: 3px;
   }
-
-  &__toggler-and-button-wrapper {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    width: 100%;
-  }
 }
 
 .ce-inline-tool {