diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 599322b7..4e99e4d6 100644 --- a/docs/CHANGELOG.md +++ b/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 diff --git a/src/components/__module.ts b/src/components/__module.ts index 877ecd88..569470f5 100644 --- a/src/components/__module.ts +++ b/src/components/__module.ts @@ -92,9 +92,9 @@ export default class Module { /** * @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) { diff --git a/src/components/modules/api/tooltip.ts b/src/components/modules/api/tooltip.ts index 4094f4e8..74796baa 100644 --- a/src/components/modules/api/tooltip.ts +++ b/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); } } diff --git a/src/components/modules/caret.ts b/src/components/modules/caret.ts index f02bd9fe..9fd4cfd5 100644 --- a/src/components/modules/caret.ts +++ b/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; diff --git a/src/components/modules/toolbar/index.ts b/src/components/modules/toolbar/index.ts index ea8e6f29..7ed3e28c 100644 --- a/src/components/modules/toolbar/index.ts +++ b/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 { + /** + * 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 { 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 { $.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'), { diff --git a/src/components/modules/toolbar/inline.ts b/src/components/modules/toolbar/inline.ts index 3d89aa47..8bf0731e 100644 --- a/src/components/modules/toolbar/inline.ts +++ b/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 { */ 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 { }); }); - 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 { * @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 { })); } - Tooltip.onHover(button, tooltipContent, { + this.tooltip.onHover(button, tooltipContent, { placement: 'top', hidingDelay: 100, }); diff --git a/src/components/modules/toolbar/toolbox.ts b/src/components/modules/toolbar/toolbox.ts index 765696f1..db49be81 100644 --- a/src/components/modules/toolbar/toolbox.ts +++ b/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 { * * @returns {object.} */ - 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 { */ 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 { */ const tooltipContent = this.drawTooltip(tool); - this.Editor.Tooltip.onHover(button, tooltipContent, { + this.tooltip.onHover(button, tooltipContent, { placement: 'bottom', hidingDelay: 200, }); diff --git a/src/components/modules/tooltip.ts b/src/components/utils/tooltip.ts similarity index 94% rename from src/components/modules/tooltip.ts rename to src/components/utils/tooltip.ts index f3ff6711..010039d1 100644 --- a/src/components/modules/tooltip.ts +++ b/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 * diff --git a/src/types-internal/editor-modules.d.ts b/src/types-internal/editor-modules.d.ts index 14ad7e30..64751505 100644 --- a/src/types-internal/editor-modules.d.ts +++ b/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;