fix(toolbar): layout shrink after blocks removing

docs/CHANGELOG.md

@@ -3,6 +3,9 @@
 ### 2.29.0
 
 - `Fix` — Passing an empty array via initial data or `blocks.render()` won't break the editor
+- `Fix` — Layout did not shrink when a large document cleared in Chrome
+- `Fix` — Multiple Tooltip elements creation fixed
+- `Fix` — When the focusing Block is out of the viewport, the page will be scrolled.
 
 ### 2.28.0
 

index.html

@@ -98,6 +98,8 @@
   <script type="module">
     import EditorJS from './src/codex.ts';
 
+    window.EditorJS = EditorJS;
+
     /**
      * To initialize the Editor, create a new instance with configuration object
      * @see docs/installation.md for mode details

src/codex.ts

@@ -10,6 +10,7 @@ import '@babel/register';
 import './components/polyfills';
 import Core from './components/core';
 import * as _ from './components/utils';
+import { destroy as destroyTooltip } from './components/utils/tooltip';
 
 declare const VERSION: string;
 
@@ -67,6 +68,9 @@ export default class EditorJS {
      */
     this.isReady = editor.isReady.then(() => {
       this.exportAPI(editor);
+      /**
+       * @todo pass API as an argument. It will allow to use Editor's API when editor is ready
+       */
       onReady();
     });
   }
@@ -87,6 +91,8 @@ export default class EditorJS {
           moduleInstance.listeners.removeAll();
         });
 
+      destroyTooltip();
+
       editor = null;
 
       for (const field in this) {

src/components/modules/api/tooltip.ts

@@ -2,16 +2,12 @@ import { Tooltip as ITooltip } from '../../../../types/api';
 import type { TooltipOptions, TooltipContent } from 'codex-tooltip/types';
 import Module from '../../__module';
 import { ModuleConfig } from '../../../types-internal/module-config';
-import Tooltip from '../../utils/tooltip';
+import * as tooltip from '../../utils/tooltip';
 /**
  * @class TooltipAPI
  * @classdesc Tooltip API
  */
 export default class TooltipAPI extends Module {
-  /**
-   * Tooltip utility Instance
-   */
-  private tooltip: Tooltip;
   /**
    * @class
    * @param moduleConfiguration - Module Configuration
@@ -23,15 +19,6 @@ export default class TooltipAPI extends Module {
       config,
       eventsDispatcher,
     });
-
-    this.tooltip = new Tooltip();
-  }
-
-  /**
-   * Destroy Module
-   */
-  public destroy(): void {
-    this.tooltip.destroy();
   }
 
   /**
@@ -59,14 +46,14 @@ export default class TooltipAPI extends Module {
    * @param {TooltipOptions} options - tooltip options
    */
   public show(element: HTMLElement, content: TooltipContent, options?: TooltipOptions): void {
-    this.tooltip.show(element, content, options);
+    tooltip.show(element, content, options);
   }
 
   /**
    * Method hides tooltip on HTML page
    */
   public hide(): void {
-    this.tooltip.hide();
+    tooltip.hide();
   }
 
   /**
@@ -77,6 +64,6 @@ export default class TooltipAPI extends Module {
    * @param {TooltipOptions} options - tooltip options
    */
   public onHover(element: HTMLElement, content: TooltipContent, options?: TooltipOptions): void {
-    this.tooltip.onHover(element, content, options);
+    tooltip.onHover(element, content, options);
   }
 }

src/components/modules/caret.ts

@@ -304,16 +304,17 @@ export default class Caret extends Module {
    * @param {number} offset - offset
    */
   public set(element: HTMLElement, offset = 0): void {
+    const scrollOffset = 30;
     const { top, bottom } = Selection.setCursor(element, offset);
-
-    /** If new cursor position is not visible, scroll to it */
     const { innerHeight } = window;
 
+    /**
+     * If new cursor position is not visible, scroll to it
+     */
     if (top < 0) {
-      window.scrollBy(0, top);
-    }
-    if (bottom > innerHeight) {
-      window.scrollBy(0, bottom - innerHeight);
+      window.scrollBy(0, top - scrollOffset);
+    } else if (bottom > innerHeight) {
+      window.scrollBy(0, bottom - innerHeight + scrollOffset);
     }
   }
 

src/components/modules/toolbar/index.ts

@@ -3,7 +3,7 @@ import $ from '../../dom';
 import * as _ from '../../utils';
 import I18n from '../../i18n';
 import { I18nInternalNS } from '../../i18n/namespace-internal';
-import Tooltip from '../../utils/tooltip';
+import * as tooltip from '../../utils/tooltip';
 import { ModuleConfig } from '../../../types-internal/module-config';
 import Block from '../../block';
 import Toolbox, { ToolboxEvent } from '../../ui/toolbox';
@@ -91,11 +91,6 @@ 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;
-
   /**
    * Block near which we display the Toolbox
    */
@@ -118,7 +113,6 @@ export default class Toolbar extends Module<ToolbarNodes> {
       config,
       eventsDispatcher,
     });
-    this.tooltip = new Tooltip();
   }
 
   /**
@@ -328,6 +322,14 @@ export default class Toolbar extends Module<ToolbarNodes> {
     this.blockActions.hide();
     this.toolboxInstance?.close();
     this.Editor.BlockSettings.close();
+    this.reset();
+  }
+
+  /**
+   * Reset the Toolbar position to prevent DOM height growth, for example after blocks deletion
+   */
+  private reset(): void {
+    this.nodes.wrapper.style.top = 'unset';
   }
 
   /**
@@ -337,16 +339,13 @@ export default class Toolbar extends Module<ToolbarNodes> {
    *                                     This flag allows to open Toolbar without Actions.
    */
   private open(withBlockActions = true): void {
-    _.delay(() => {
-      this.nodes.wrapper.classList.add(this.CSS.toolbarOpened);
+    this.nodes.wrapper.classList.add(this.CSS.toolbarOpened);
 
-      if (withBlockActions) {
-        this.blockActions.show();
-      } else {
-        this.blockActions.hide();
-      }
-    // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-    }, 50)();
+    if (withBlockActions) {
+      this.blockActions.show();
+    } else {
+      this.blockActions.hide();
+    }
   }
 
   /**
@@ -382,7 +381,7 @@ export default class Toolbar extends Module<ToolbarNodes> {
     $.append(this.nodes.actions, this.nodes.plusButton);
 
     this.readOnlyMutableListeners.on(this.nodes.plusButton, 'click', () => {
-      this.tooltip.hide(true);
+      tooltip.hide(true);
       this.plusButtonClicked();
     }, false);
 
@@ -396,7 +395,7 @@ export default class Toolbar extends Module<ToolbarNodes> {
       textContent: '⇥ Tab',
     }));
 
-    this.tooltip.onHover(this.nodes.plusButton, tooltipContent, {
+    tooltip.onHover(this.nodes.plusButton, tooltipContent, {
       hidingDelay: 400,
     });
 
@@ -412,7 +411,7 @@ export default class Toolbar extends Module<ToolbarNodes> {
 
     $.append(this.nodes.actions, this.nodes.settingsToggler);
 
-    this.tooltip.onHover(
+    tooltip.onHover(
       this.nodes.settingsToggler,
       I18n.ui(I18nInternalNS.ui.blockTunes.toggler, 'Click to tune'),
       {
@@ -512,7 +511,7 @@ export default class Toolbar extends Module<ToolbarNodes> {
         this.toolboxInstance.close();
       }
 
-      this.tooltip.hide(true);
+      tooltip.hide(true);
     }, true);
 
     /**
@@ -593,6 +592,5 @@ export default class Toolbar extends Module<ToolbarNodes> {
     if (this.toolboxInstance) {
       this.toolboxInstance.destroy();
     }
-    this.tooltip.destroy();
   }
 }