Add tools` titles for Toolbox (#540)

* Add tools` titles for Toolbox

* Bump version

* Use isEmpty method to check object emptiness

* Improve isEmpty method

* Override toolbox settings from editor config

docs/tools.md

@@ -53,8 +53,7 @@ Options that Tool can specify. All settings should be passed as static propertie
 
 | Name | Type | Default Value | Description |
 | -- | -- | -- | -- |
-| `displayInToolbox` | _Boolean_ | `false` | Pass `true` to display this `Tool` in the Editor's `Toolbox` |
+| `toolbox` | _Object_ | `undefined` | Pass here `icon` and `title` to display this `Tool` in the Editor's `Toolbox` <br /> `icon` - HTML string with icon for Toolbox <br /> `title` - optional title to display in Toolbox |
-| `toolboxIcon` | _String_ | — | Icon for Toolbox HTML string |
 | `enableLineBreaks` | _Boolean_ | `false` | With this option, CodeX Editor won't handle Enter keydowns. Can be helpful for Tools like `<code>` where line breaks should be handled by default behaviour. |
 | `isInline` | _Boolean_ | `false` | Describes Tool as a [Tool for the Inline Toolbar](tools-inline.md) |
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "codex.editor",
-  "version": "2.6.2",
+  "version": "2.7.0",
   "description": "Codex Editor. Native JS, based on API and Open Source",
   "main": "build/codex-editor.js",
   "types": "./types/index.d.ts",

src/components/modules/toolbar/toolbox.ts

@@ -1,7 +1,7 @@
 import Module from '../../__module';
 import $ from '../../dom';
 import _ from '../../utils';
-import {BlockToolConstructable} from '../../../../types';
+import {BlockToolConstructable, ToolboxConfig} from '../../../../types';
 
 /**
  * @class Toolbox
@@ -196,7 +196,7 @@ export default class Toolbox extends Module {
       return null;
     }
 
-    return (childNodes[this.activeButtonIndex] as HTMLElement).title;
+    return (childNodes[this.activeButtonIndex] as HTMLElement).dataset.tool;
   }
 
   /**
@@ -229,7 +229,16 @@ export default class Toolbox extends Module {
   private addTool(toolName: string, tool: BlockToolConstructable): void {
     const api = this.Editor.Tools.apiSettings;
 
-    if (tool[api.IS_DISPLAYED_IN_TOOLBOX] && !tool[api.TOOLBAR_ICON]) {
+    const toolToolboxSettings = tool[api.TOOLBOX];
+
+    /**
+     * Skip tools that don't pass 'toolbox' property
+     */
+    if (_.isEmpty(toolToolboxSettings)) {
+      return;
+    }
+
+    if (toolToolboxSettings && !toolToolboxSettings.icon) {
       _.log('Toolbar icon is missed. Tool %o skipped', 'warn', toolName);
       return;
     }
@@ -242,18 +251,14 @@ export default class Toolbox extends Module {
     //   return;
     // }
 
-    /**
+    const {toolbox: userToolboxSettings = {} as ToolboxConfig} = this.Editor.Tools.getToolSettings(toolName);
-     * Skip tools that pass 'displayInToolbox=false'
-     */
-    if (!tool[api.IS_DISPLAYED_IN_TOOLBOX]) {
-      return;
-    }
 
     const button = $.make('li', [ Toolbox.CSS.toolboxButton ], {
-      title: toolName,
+      title: userToolboxSettings.title || toolToolboxSettings.title || toolName,
     });
 
-    button.innerHTML = tool.toolboxIcon;
+    button.dataset.tool = toolName;
+    button.innerHTML = userToolboxSettings.icon || toolToolboxSettings.icon;
 
     $.append(this.nodes.toolbox, button);
 

src/components/modules/tools.ts

@@ -113,13 +113,12 @@ export default class Tools extends Module {
   public get apiSettings() {
     return {
       CONFIG: 'config',
-      IS_DISPLAYED_IN_TOOLBOX: 'displayInToolbox',
       IS_ENABLED_INLINE_TOOLBAR: 'inlineToolbar',
       IS_ENABLED_LINE_BREAKS: 'enableLineBreaks',
       IS_INLINE: 'isInline',
       IS_PASTE_DISALLOWED: 'disallowPaste',
       SHORTCUT: 'shortcut',
-      TOOLBAR_ICON: 'toolboxIcon',
+      TOOLBOX: 'toolbox',
       SANITIZE_CONFIG: 'sanitize',
     };
   }
@@ -331,7 +330,7 @@ export default class Tools extends Module {
    * @param {string} toolName
    * @return {ToolSettings}
    */
-  public getToolSettings(toolName) {
+  public getToolSettings(toolName): ToolSettings {
     return this.toolsSettings[toolName];
   }
 

src/components/utils.ts

@@ -169,6 +169,10 @@ export default class Util {
    * @return {boolean}
    */
   public static isEmpty(object: object): boolean {
+    if (!object) {
+      return true;
+    }
+
     return Object.keys(object).length === 0 && object.constructor === Object;
   }
 

types/index.d.ts

@@ -18,6 +18,7 @@ export {
   BlockToolConstructable,
   BlockTool,
   BlockToolData,
+  ToolboxConfig,
   ToolSettings,
   ToolConfig,
   PasteEvent,

types/tools/block-tool.d.ts

@@ -57,14 +57,19 @@ export interface BlockTool extends Tool {
 
 export interface BlockToolConstructable extends ToolConstructable {
   /**
-   * Should this Tool be displayed in the Editor's Toolbox
+   * Tool's Toolbox settings
    */
-  displayInToolbox?: boolean;
+  toolbox?: {
+    /**
+     * HTML string with an icon for Toolbox
+     */
+    icon: string;
 
-  /**
+    /**
-   * String with an icon for Toolbox
+     * Tool title for Toolbox
-   */
+     */
-  toolboxIcon?: string;
+    title?: string;
+  };
 
   /**
    * Paste substitutions configuration

types/tools/tool-settings.d.ts

@@ -1,6 +1,21 @@
 import {ToolConfig} from './tool-config';
 import {ToolConstructable} from './tool';
 
+/**
+ * Tool's Toolbox settings
+ */
+export interface ToolboxConfig {
+  /**
+   * Tool title for Toolbox
+   */
+  title?: string;
+
+  /**
+   * HTML string with an icon for Toolbox
+   */
+  icon?: string;
+}
+
 /**
  * Object passed to the Tool's constructor by {@link EditorConfig#tools}
  */
@@ -31,4 +46,9 @@ export interface ToolSettings {
    * Define shortcut that will render Tool
    */
   shortcut?: string;
+
+  /**
+   * Tool's Toolbox settings
+   */
+  toolbox?: ToolboxConfig;
 }