Add Toolbox tooltip (codex-team#604)

* Add tooltip

* styles updated

* updates

* Update CHANGELOG.md

* rm map

* update

* upd pkg

README.md

@@ -19,10 +19,11 @@ Welcome to testing stage. Please, join a [public Telegram-chat](//t.me/codex_edi
 
 ### 2.7-2.9 changelog
 
-- `Improvements` Prevent navigating back on Firefox when Block is removing by backspace 
-- `New` Blocks selected with RectangleSelection can be also removed, copied or cut
-- `New` Migrate from postcss-cssnext to postcss-preset-env and disable postcss-custom-properties which conflicts with postcss-preset-env
-- `New` *RectangeSelection* - Ability to select Block or several Blocks with mouse
+- `New` — Toolbox now have beautiful helpers with Tool names and shortcuts
+- `Improvements` — Prevent navigating back on Firefox when Block is removing by backspace 
+- `New` — Blocks selected with Rectangle Selection can be also removed, copied or cut
+- `New` — Migrate from `postcss-cssnext` to `postcss-preset-env` and disable `postcss-custom-properties` which conflicts with `postcss-preset-env`
+- `New` *RectangeSelection* — Ability to select Block or several Blocks with mouse
 
 ### 2.2—2.7 changelog
 

docs/CHANGELOG.md

@@ -1,52 +1,56 @@
 # Changelog
 
+### 2.9.5
+
+- `New` — Toolbox now have beautiful helpers with Tool names and shortcuts
+
 ### 2.9.4
 
-- `Improvements` Prevent navigating back on Firefox when Block is removing by backspace
+- `Improvements` — Prevent navigating back on Firefox when Block is removing by backspace
 
 ### 2.9.3
 
-- `Fix` Handle paste only on initial Block
+- `Fix` — Handle paste only on initial Block
 
 ### 2.9.2
 
-- `New` Blocks selected with RectangleSelection can be also removed, copied or cut
+- `New` — Blocks selected with Rectangle Selection can be also removed, copied or cut
 
 ### 2.9.1
 
-- `Improvements` Migrate from postcss-cssnext to postcss-preset-env and disable postcss-custom-properties which conflicts with postcss-preset-env
+- `Improvements` — Migrate from `postcss-cssnext` to `postcss-preset-env` and disable `postcss-custom-properties` which conflicts with `postcss-preset-env`
 
 ### 2.9.0
 
-- `New` *RectangeSelection* - Ability to select Block or several Blocks with mouse
+- `New` *RectangeSelection* — Ability to select Block or several Blocks with mouse
 
 ### 2.8.1
 
-- `Fix` *Caret* - Fix "History back" call on backspace in Firefox
+- `Fix` *Caret* — Fix "History back" call on backspace in Firefox
 
 ### 2.8.0
 
-- `Imporvements` *API* - Added [API methods](api.md#caretapi) to manage caret position
+- `Imporvements` *API* — Added [API methods](api.md#caretapi) to manage caret position
 
 ### 2.7.32
 
-- `Improvements` *Types* - TypeScript types sre updated
+- `Improvements` *Types* — TypeScript types sre updated
 
 ### 2.7.31
 
-- `Fix` Caret now goes through <input> elements without `type` attribute
+- `Fix` — Caret now goes through <input> elements without `type` attribute
 
 ### 2.7.30
 
-- `Fix` Fixed selection behavior when text has modifiers form Inline Toolbar
+- `Fix` — Fixed selection behavior when text has modifiers form Inline Toolbar
 
 ### 2.7.29
 
-- `Fix` cmd+x works only for custom selection now
+- `Fix` — cmd+x works only for custom selection now
 
 ### 2.7.28 
 
-- `New` [Tools Validation](https://github.com/codex-team/codex.editor/blob/master/docs/tools.md#validate-optional) is added.
+- `New` — [Tools Validation](https://github.com/codex-team/codex.editor/blob/master/docs/tools.md#validate-optional) is added.
 
 ### 2.2.27
 

example/example.html

@@ -87,7 +87,8 @@
           inlineToolbar: ['link'],
           config: {
             placeholder: 'Header'
-          }
+          },
+          shortcut: 'CMD+SHIFT+H'
         },
 
         /**
@@ -100,12 +101,13 @@
 
         list: {
           class: List,
-          inlineToolbar: true
+          inlineToolbar: true,
+          shortcut: 'CMD+SHIFT+L'
         },
 
         checklist: {
           class: Checklist,
-          inlineToolbar: true
+          inlineToolbar: true,
         },
 
         quote: {
@@ -115,6 +117,7 @@
             quotePlaceholder: 'Enter a quote',
             captionPlaceholder: 'Quote\'s author',
           },
+          shortcut: 'CMD+SHIFT+O'
         },
 
         marker: {
@@ -124,7 +127,7 @@
 
         code: {
           class:  CodeTool,
-          shortcut: 'CMD+SHIFT+D'
+          shortcut: 'CMD+SHIFT+C'
         },
 
         delimiter: Delimiter,
@@ -138,7 +141,8 @@
 
         table: {
           class: Table,
-          inlineToolbar: true
+          inlineToolbar: true,
+          shortcut: 'CMD+ALT+T'
         },
 
       },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "codex.editor",
-  "version": "2.9.4",
+  "version": "2.9.5",
   "description": "CodeX Editor. Native JS, based on API and Open Source",
   "main": "dist/codex-editor.js",
   "types": "./types/index.d.ts",

src/components/modules/toolbar/index.ts

@@ -112,6 +112,30 @@ export default class Toolbar extends Module {
      *  - Toolbox
      */
     this.nodes.plusButton = $.make('div', Toolbar.CSS.plusButton);
+
+    /**
+     * Add events to show/hide tooltip for plus button
+     */
+    this.Editor.Listeners.on(this.nodes.plusButton, 'mouseenter', () => {
+      const tooltip = this.Editor.Toolbox.nodes.tooltip;
+      const fragment = document.createDocumentFragment();
+
+      fragment.appendChild(document.createTextNode('Add'));
+      fragment.appendChild($.make('div', this.Editor.Toolbox.CSS.tooltipShortcut, {
+        textContent: '⇥ Tab',
+      }));
+
+      tooltip.style.left = '-17px';
+
+      tooltip.innerHTML = '';
+      tooltip.appendChild(fragment);
+      tooltip.classList.add(this.Editor.Toolbox.CSS.tooltipShown);
+    });
+
+    this.Editor.Listeners.on(this.nodes.plusButton, 'mouseleave', () => {
+      this.Editor.Toolbox.hideTooltip();
+    });
+
     $.append(this.nodes.plusButton, $.svg('plus', 14, 14));
     $.append(this.nodes.content, this.nodes.plusButton);
     this.Editor.Listeners.on(this.nodes.plusButton, 'click', () => this.plusButtonClicked(), false);