refactoring(modules): Tooltip module is util now (#1601)

* remove tooltip module and create tooltip class

* change log added

* constructor added with tooltip

* linting added

* js-docs improved

* linting added

docs/CHANGELOG.md

@@ -1,9 +1,14 @@
 # Changelog
 
+### 2.20.1
+
+- `Refactoring` - Tooltip module is util now.
+
 ### 2.20.0
 
 - `New` — [Block Tunes API](block-tunes.md) added
 
+
 ### 2.19.3
 
 - `Fix` — Ignore error raised by Shortcut module

src/components/__module.ts

@@ -92,9 +92,9 @@ export default class Module<T extends ModuleNodes = {}> {
 
   /**
    * @class
-   *
-   * @param {EditorConfig} config - Editor's config
-   * @param {EventsDispatcher} eventsDispatcher - Editor's event dispatcher
+   * @param {object} moduleConfiguration - Module Configuration
+   * @param {EditorConfig} moduleConfiguration.config - Editor's config
+   * @param {EventsDispatcher} moduleConfiguration.eventsDispatcher - Editor's event dispatcher
    */
   constructor({ config, eventsDispatcher }: ModuleConfig) {
     if (new.target === Module) {

src/components/modules/api/tooltip.ts

@@ -1,16 +1,38 @@
-import { Tooltip } from '../../../../types/api';
+import { Tooltip as ITooltip } from '../../../../types/api';
 import { TooltipContent, TooltipOptions } from 'codex-tooltip';
 import Module from '../../__module';
-
+import { ModuleConfig } from '../../../types-internal/module-config';
+import Tooltip from '../../utils/tooltip';
+import EventsDispatcher from '../../utils/events';
+import { EditorConfig } from '../../../../types';
 /**
  * @class TooltipAPI
  * @classdesc Tooltip API
  */
 export default class TooltipAPI extends Module {
+  /**
+   * Tooltip utility Instance
+   */
+  private tooltip: Tooltip;
+  /**
+   * @class
+   * @param {object} moduleConfiguration - Module Configuration
+   * @param {EditorConfig} moduleConfiguration.config - Editor's config
+   * @param {EventsDispatcher} moduleConfiguration.eventsDispatcher - Editor's event dispatcher
+   */
+  constructor({ config, eventsDispatcher }: ModuleConfig) {
+    super({
+      config,
+      eventsDispatcher,
+    });
+
+    this.tooltip = new Tooltip();
+  }
+
   /**
    * Available methods
    */
-  public get methods(): Tooltip {
+  public get methods(): ITooltip {
     return {
       show: (element: HTMLElement,
         content: TooltipContent,
@@ -32,14 +54,14 @@ export default class TooltipAPI extends Module {
    * @param {TooltipOptions} options - tooltip options
    */
   public show(element: HTMLElement, content: TooltipContent, options?: TooltipOptions): void {
-    this.Editor.Tooltip.show(element, content, options);
+    this.tooltip.show(element, content, options);
   }
 
   /**
    * Method hides tooltip on HTML page
    */
   public hide(): void {
-    this.Editor.Tooltip.hide();
+    this.tooltip.hide();
   }
 
   /**
@@ -50,6 +72,6 @@ export default class TooltipAPI extends Module {
    * @param {TooltipOptions} options - tooltip options
    */
   public onHover(element: HTMLElement, content: TooltipContent, options?: TooltipOptions): void {
-    this.Editor.Tooltip.onHover(element, content, options);
+    this.tooltip.onHover(element, content, options);
   }
 }

src/components/modules/caret.ts

@@ -391,7 +391,7 @@ export default class Caret extends Module {
    * @returns {boolean}
    */
   public navigateNext(): boolean {
-    const { BlockManager, Tools } = this.Editor;
+    const { BlockManager } = this.Editor;
     const { currentBlock, nextContentfulBlock } = BlockManager;
     const { nextInput } = currentBlock;
     const isAtEnd = this.isAtEnd;

src/components/modules/toolbar/index.ts

@@ -3,6 +3,10 @@ import $ from '../../dom';
 import * as _ from '../../utils';
 import I18n from '../../i18n';
 import { I18nInternalNS } from '../../i18n/namespace-internal';
+import Tooltip from '../../utils/tooltip';
+import { ModuleConfig } from '../../../types-internal/module-config';
+import EventsDispatcher from '../../utils/events';
+import { EditorConfig } from '../../../../types';
 
 /**
  * HTML Elements used for Toolbar UI
@@ -72,6 +76,24 @@ interface ToolbarNodes {
  * @property {Element} nodes.defaultSettings   - Default Settings section of Settings Panel
  */
 export default class Toolbar extends Module<ToolbarNodes> {
+  /**
+   * Tooltip utility Instance
+   */
+  private tooltip: Tooltip;
+  /**
+   * @class
+   * @param {object} moduleConfiguration - Module Configuration
+   * @param {EditorConfig} moduleConfiguration.config - Editor's config
+   * @param {EventsDispatcher} moduleConfiguration.eventsDispatcher - Editor's event dispatcher
+   */
+  constructor({ config, eventsDispatcher }: ModuleConfig) {
+    super({
+      config,
+      eventsDispatcher,
+    });
+    this.tooltip = new Tooltip();
+  }
+
   /**
    * CSS styles
    *
@@ -277,7 +299,7 @@ export default class Toolbar extends Module<ToolbarNodes> {
       textContent: '⇥ Tab',
     }));
 
-    this.Editor.Tooltip.onHover(this.nodes.plusButton, tooltipContent);
+    this.tooltip.onHover(this.nodes.plusButton, tooltipContent);
 
     /**
      * Fill Actions Zone:
@@ -293,7 +315,7 @@ export default class Toolbar extends Module<ToolbarNodes> {
     $.append(this.nodes.blockActionsButtons, this.nodes.settingsToggler);
     $.append(this.nodes.actions, this.nodes.blockActionsButtons);
 
-    this.Editor.Tooltip.onHover(
+    this.tooltip.onHover(
       this.nodes.settingsToggler,
       I18n.ui(I18nInternalNS.ui.blockTunes.toggler, 'Click to tune'),
       {

src/components/modules/toolbar/inline.ts

@@ -2,11 +2,14 @@ import Module from '../../__module';
 import $ from '../../dom';
 import SelectionUtils from '../../selection';
 import * as _ from '../../utils';
-import { InlineTool as IInlineTool } from '../../../../types';
+import { InlineTool as IInlineTool, EditorConfig } from '../../../../types';
 import Flipper from '../../flipper';
 import I18n from '../../i18n';
 import { I18nInternalNS } from '../../i18n/namespace-internal';
 import Shortcuts from '../../utils/shortcuts';
+import Tooltip from '../../utils/tooltip';
+import { ModuleConfig } from '../../../types-internal/module-config';
+import EventsDispatcher from '../../utils/events';
 import InlineTool from '../../tools/inline';
 import { CommonInternalSettings } from '../../tools/base';
 import BlockTool from '../../tools/block';
@@ -93,6 +96,24 @@ export default class InlineToolbar extends Module<InlineToolbarNodes> {
    */
   private flipper: Flipper = null;
 
+  /**
+   * Tooltip utility Instance
+   */
+  private tooltip: Tooltip;
+  /**
+   * @class
+   * @param {object} moduleConfiguration - Module Configuration
+   * @param {EditorConfig} moduleConfiguration.config - Editor's config
+   * @param {EventsDispatcher} moduleConfiguration.eventsDispatcher - Editor's event dispatcher
+   */
+  constructor({ config, eventsDispatcher }: ModuleConfig) {
+    super({
+      config,
+      eventsDispatcher,
+    });
+    this.tooltip = new Tooltip();
+  }
+
   /**
    * Toggles read-only mode
    *
@@ -500,7 +521,7 @@ export default class InlineToolbar extends Module<InlineToolbarNodes> {
       });
     });
 
-    this.Editor.Tooltip.onHover(this.nodes.conversionToggler, I18n.ui(I18nInternalNS.ui.inlineToolbar.converter, 'Convert to'), {
+    this.tooltip.onHover(this.nodes.conversionToggler, I18n.ui(I18nInternalNS.ui.inlineToolbar.converter, 'Convert to'), {
       placement: 'top',
       hidingDelay: 100,
     });
@@ -589,10 +610,6 @@ export default class InlineToolbar extends Module<InlineToolbarNodes> {
    * @param {InlineTool} tool - InlineTool object
    */
   private addTool(tool: InlineTool): void {
-    const {
-      Tooltip,
-    } = this.Editor;
-
     const instance = tool.create();
     const button = instance.render();
 
@@ -642,7 +659,7 @@ export default class InlineToolbar extends Module<InlineToolbarNodes> {
       }));
     }
 
-    Tooltip.onHover(button, tooltipContent, {
+    this.tooltip.onHover(button, tooltipContent, {
       placement: 'top',
       hidingDelay: 100,
     });

src/components/modules/toolbar/toolbox.ts

@@ -1,12 +1,15 @@
 import Module from '../../__module';
 import $ from '../../dom';
 import * as _ from '../../utils';
-import { BlockToolConstructable } from '../../../../types';
+import { BlockToolConstructable, EditorConfig } from '../../../../types';
 import Flipper from '../../flipper';
 import { BlockToolAPI } from '../../block';
 import I18n from '../../i18n';
 import { I18nInternalNS } from '../../i18n/namespace-internal';
 import Shortcuts from '../../utils/shortcuts';
+import Tooltip from '../../utils/tooltip';
+import { ModuleConfig } from '../../../types-internal/module-config';
+import EventsDispatcher from '../../utils/events';
 import BlockTool from '../../tools/block';
 
 /**
@@ -41,7 +44,7 @@ export default class Toolbox extends Module<ToolboxNodes> {
    *
    * @returns {object.<string, string>}
    */
-  public get CSS(): {[name: string]: string} {
+  public get CSS(): { [name: string]: string } {
     return {
       toolbox: 'ce-toolbox',
       toolboxButton: 'ce-toolbox__button',
@@ -84,6 +87,24 @@ export default class Toolbox extends Module<ToolboxNodes> {
    */
   private flipper: Flipper = null;
 
+  /**
+   * Tooltip utility Instance
+   */
+  private tooltip: Tooltip;
+  /**
+   * @class
+   * @param {object} moduleConfiguration - Module Configuration
+   * @param {EditorConfig} moduleConfiguration.config - Editor's config
+   * @param {EventsDispatcher} moduleConfiguration.eventsDispatcher - Editor's event dispatcher
+   */
+  constructor({ config, eventsDispatcher }: ModuleConfig) {
+    super({
+      config,
+      eventsDispatcher,
+    });
+    this.tooltip = new Tooltip();
+  }
+
   /**
    * Makes the Toolbox
    */
@@ -219,7 +240,7 @@ export default class Toolbox extends Module<ToolboxNodes> {
      */
     const tooltipContent = this.drawTooltip(tool);
 
-    this.Editor.Tooltip.onHover(button, tooltipContent, {
+    this.tooltip.onHover(button, tooltipContent, {
       placement: 'bottom',
       hidingDelay: 200,
     });

src/components/utils/tooltip.ts

@@ -1,6 +1,4 @@
 /* eslint-disable jsdoc/no-undefined-types */
-import Module from '../__module';
-
 /**
  * Use external module CodeX Tooltip
  */
@@ -11,7 +9,7 @@ import CodeXTooltips, { TooltipContent, TooltipOptions } from 'codex-tooltip';
  *
  * Decorates any tooltip module like adapter
  */
-export default class Tooltip extends Module {
+export default class Tooltip {
   /**
    * Tooltips lib: CodeX Tooltips
    *

src/types-internal/editor-modules.d.ts

@@ -6,7 +6,6 @@ import Toolbox from '../components/modules/toolbar/toolbox';
 import BlockSettings from '../components/modules/toolbar/blockSettings';
 import Paste from '../components/modules/paste';
 import Notifier from '../components/modules/notifier';
-import Tooltip from '../components/modules/tooltip';
 import DragNDrop from '../components/modules/dragNDrop';
 import ModificationsObserver from '../components/modules/modificationsObserver';
 import Renderer from '../components/modules/renderer';
@@ -56,7 +55,6 @@ export interface EditorModules {
   Caret: Caret;
   Saver: Saver;
   Notifier: Notifier;
-  Tooltip: Tooltip;
   BlockManager: BlockManager;
   BlocksAPI: BlocksAPI;
   CaretAPI: CaretAPI;