Add tools` titles for Toolbox

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` |
-| `toolboxIcon` | _String_ | — | Icon for Toolbox HTML string |
+| `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 |
 | `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) |
 
@@ -96,15 +95,15 @@ When user pastes content into Editor, pasted content will be splitted into block
 
 Also Editor API allows you to define your own pasting scenario. You can either:
 
-1. Specify **HTML tags**, that can be represented by your Tool. For example, Image Tool can handle `<img>` tags. 
+1. Specify **HTML tags**, that can be represented by your Tool. For example, Image Tool can handle `<img>` tags.
 If tags you specified will be found on content pasting, your Tool will be rendered.
 2. Specify **RegExp** for pasted strings. If pattern has been matched, your Tool will be rendered.
 3. Specify **MIME type** or **extensions** of files that can be handled by your Tool on pasting by drag-n-drop or from clipboard.
- 
+
 For each scenario, you should do 2 next things:
 
 1. Define static getter `pasteConfig` in Tool class. Specify handled patterns there.
-2. Define public method `onPaste` that will handle PasteEvent to process pasted data. 
+2. Define public method `onPaste` that will handle PasteEvent to process pasted data.
 
 ### HTML tags handling
 
@@ -187,10 +186,10 @@ static get pasteConfig() {
 If you registered some paste substitutions in `pasteConfig` property, you **should** provide `onPaste` callback in your Tool class.
 `onPaste` should be public non-static method. It accepts custom _PasteEvent_ object as argument.
 
-PasteEvent is an alias for three types of events - `tag`, `pattern` and `file`. You can get the type from _PasteEvent_ object's `type` property. 
+PasteEvent is an alias for three types of events - `tag`, `pattern` and `file`. You can get the type from _PasteEvent_ object's `type` property.
 Each of these events provide `detail` property with info about pasted content.
 
-| Type  | Detail | 
+| Type  | Detail |
 | ----- | ------ |
 | `tag` | `data` - pasted HTML element |
 | `pattern` | `key` - matched pattern key you specified in `pasteConfig` object <br /> `data` - pasted string |
@@ -203,14 +202,14 @@ onPaste (event) {
   switch (event.type) {
     case 'tag':
       const element = event.detail.data;
-      
+
       this.handleHTMLPaste(element);
       break;
 
     case 'pattern':
       const text = event.detail.data;
       const key = event.detail.key;
-      
+
       this.handlePatternPaste(key, text);
       break;
 
@@ -225,7 +224,7 @@ onPaste (event) {
 
 ## Sanitize
 
-CodeX Editor provides [API](sanitizer.md) to clean taint strings. 
+CodeX Editor provides [API](sanitizer.md) to clean taint strings.
 Use it manually at the `save()` method or or pass `sanitizer` config to do it automatically.
 
 ### Sanitizer Configuration
@@ -239,7 +238,7 @@ let sanitizerConfig = {
 }
 ```
 
-Keys of config object is tags and the values is a rules. 
+Keys of config object is tags and the values is a rules.
 
 #### Rule
 
@@ -251,7 +250,7 @@ but leave tag.
 Also you can pass special attributes that you want to leave.
 
 ```javascript
-a: { 
+a: {
   href: true
 }
 ```
@@ -290,11 +289,11 @@ Call API method `sanitizer.clean()` at the save method for each field in returne
 ```javascript
 save() {
   return {
-    text: this.api.sanitizer.clean(taintString, sanitizerConfig) 
+    text: this.api.sanitizer.clean(taintString, sanitizerConfig)
   }
 }
 ```
- 
+
 ### Automatic sanitize
 
 If you pass the sanitizer config as static getter, CodeX Editor will automatically sanitize your saved data.
@@ -318,7 +317,7 @@ static get sanitize() {
 
 Don't forget to set the rule for each embedded subitems otherwise they will
 not be sanitized.
-  
+
 if you want to sanitize everything and get data without any tags, use `{}` or just
 ignore field in case if you want to get pure HTML
 
@@ -332,7 +331,7 @@ static get sanitize() {
       // other objects here won't be sanitized
       subitems: {
         // leave <a> and <b> in subitems
-        a: true, 
+        a: true,
         b: true,
       }
     }

src/components/modules/toolbar/toolbox.ts

@@ -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,9 @@ 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];
+
+    if (toolToolboxSettings && !toolToolboxSettings.icon) {
       _.log('Toolbar icon is missed. Tool %o skipped', 'warn', toolName);
       return;
     }
@@ -243,17 +245,18 @@ export default class Toolbox extends Module {
     // }
 
     /**
-     * Skip tools that pass 'displayInToolbox=false'
+     * Skip tools that don't pass 'toolbox' property
      */
-    if (!tool[api.IS_DISPLAYED_IN_TOOLBOX]) {
+    if (!toolToolboxSettings) {
       return;
     }
 
     const button = $.make('li', [ Toolbox.CSS.toolboxButton ], {
-      title: toolName,
+      title: toolToolboxSettings.title || toolName,
     });
 
-    button.innerHTML = tool.toolboxIcon;
+    button.dataset.tool = toolName;
+    button.innerHTML = 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',
     };
   }

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
-   */
-  toolboxIcon?: string;
+    /**
+     * Tool title for Toolbox
+     */
+    title?: string;
+  };
 
   /**
    * Paste substitutions configuration