feat: nested popover

src/components/dom.ts

@@ -52,11 +52,13 @@ export default class Dom {
    * @param  {object} [attributes] - any attributes
    * @returns {HTMLElement}
    */
-  public static make(tagName: string, classNames: string | string[] | null = null, attributes: object = {}): HTMLElement {
+  public static make(tagName: string, classNames: string | (string | undefined)[] | null = null, attributes: object = {}): HTMLElement {
     const el = document.createElement(tagName);
 
     if (Array.isArray(classNames)) {
-      el.classList.add(...classNames);
+      const validClassnames = classNames.filter(className => className !== undefined) as string[];
+
+      el.classList.add(...validClassnames);
     } else if (classNames) {
       el.classList.add(classNames);
     }

src/components/events/WindowResize.ts

@@ -0,0 +1,15 @@
+/**
+ * Fired when window is resized
+ */
+export const WindowResize = 'window resize';
+
+/**
+ * Payload that will be passed with the event
+ */
+export interface WindowResizePayload {
+  /**
+   * True, if new window size is mobile
+   */
+  isMobile: boolean;
+}
+

src/components/events/index.ts

@@ -3,6 +3,7 @@ import { BlockChanged, BlockChangedPayload } from './BlockChanged';
 import { BlockHovered, BlockHoveredPayload } from './BlockHovered';
 import { FakeCursorAboutToBeToggled, FakeCursorAboutToBeToggledPayload } from './FakeCursorAboutToBeToggled';
 import { FakeCursorHaveBeenSet, FakeCursorHaveBeenSetPayload } from './FakeCursorHaveBeenSet';
+import { WindowResize, WindowResizePayload } from './WindowResize';
 
 /**
  * Events fired by Editor Event Dispatcher
@@ -11,7 +12,8 @@ export {
   RedactorDomChanged,
   BlockChanged,
   FakeCursorAboutToBeToggled,
-  FakeCursorHaveBeenSet
+  FakeCursorHaveBeenSet,
+  WindowResize
 };
 
 /**
@@ -23,4 +25,5 @@ export interface EditorEventMap {
   [BlockChanged]: BlockChangedPayload;
   [FakeCursorAboutToBeToggled]: FakeCursorAboutToBeToggledPayload;
   [FakeCursorHaveBeenSet]: FakeCursorHaveBeenSetPayload;
+  [WindowResize]: WindowResizePayload
 }

src/components/flipper.ts

@@ -49,15 +49,11 @@ export default class Flipper {
 
   /**
    * Instance of flipper iterator
-   *
-   * @type {DomIterator|null}
    */
-  private readonly iterator: DomIterator = null;
+  private readonly iterator: DomIterator | null = null;
 
   /**
    * Flag that defines activation status
-   *
-   * @type {boolean}
    */
   private activated = false;
 
@@ -77,7 +73,7 @@ export default class Flipper {
   private flipCallbacks: Array<() => void> = [];
 
   /**
-   * @param {FlipperOptions} options - different constructing settings
+   * @param options - different constructing settings
    */
   constructor(options: FlipperOptions) {
     this.iterator = new DomIterator(options.items, options.focusedItemClass);
@@ -110,7 +106,6 @@ export default class Flipper {
    */
   public activate(items?: HTMLElement[], cursorPosition?: number): void {
     this.activated = true;
-
     if (items) {
       this.iterator.setItems(items);
     }

src/components/modules/toolbar/blockSettings.ts

@@ -7,7 +7,9 @@ import { I18nInternalNS } from '../../i18n/namespace-internal';
 import Flipper from '../../flipper';
 import { TunesMenuConfigItem } from '../../../../types/tools';
 import { resolveAliases } from '../../utils/resolve-aliases';
-import Popover, { PopoverEvent } from '../../utils/popover';
+import { type Popover, PopoverDesktop, PopoverMobile } from '../../utils/popover';
+import { PopoverEvent } from '../../utils/popover/popover.types';
+import { isMobileScreen } from '../../utils';
 
 /**
  * HTML Elements that used for BlockSettings
@@ -27,8 +29,6 @@ interface BlockSettingsNodes {
 export default class BlockSettings extends Module<BlockSettingsNodes> {
   /**
    * Module Events
-   *
-   * @returns {{opened: string, closed: string}}
    */
   public get events(): { opened: string; closed: string } {
     return {
@@ -56,8 +56,12 @@ export default class BlockSettings extends Module<BlockSettingsNodes> {
    *
    * @todo remove once BlockSettings becomes standalone non-module class
    */
-  public get flipper(): Flipper {
-    return this.popover?.flipper;
+  public get flipper(): Flipper | undefined {
+    if (this.popover === null) {
+      return;
+    }
+
+    return 'flipper' in this.popover ? this.popover?.flipper : undefined;
   }
 
   /**
@@ -67,9 +71,9 @@ export default class BlockSettings extends Module<BlockSettingsNodes> {
 
   /**
    * Popover instance. There is a util for vertical lists.
+   * Null until popover is not initialized
    */
-  private popover: Popover | undefined;
-
+  private popover: Popover | null = null;
 
   /**
    * Panel with block settings with 2 sections:
@@ -89,6 +93,7 @@ export default class BlockSettings extends Module<BlockSettingsNodes> {
    */
   public destroy(): void {
     this.removeAllNodes();
+    this.listeners.destroy();
   }
 
   /**
@@ -118,7 +123,10 @@ export default class BlockSettings extends Module<BlockSettingsNodes> {
 
     /** Tell to subscribers that block settings is opened */
     this.eventsDispatcher.emit(this.events.opened);
-    this.popover = new Popover({
+
+    const PopoverClass = isMobileScreen() ? PopoverMobile : PopoverDesktop;
+
+    this.popover = new PopoverClass({
       searchable: true,
       items: tunesItems.map(tune => this.resolveTuneAliases(tune)),
       customContent: customHtmlTunesContainer,
@@ -132,15 +140,15 @@ export default class BlockSettings extends Module<BlockSettingsNodes> {
 
     this.popover.on(PopoverEvent.Close, this.onPopoverClose);
 
-    this.nodes.wrapper.append(this.popover.getElement());
+    this.nodes.wrapper?.append(this.popover.getElement());
 
     this.popover.show();
   }
 
   /**
    * Returns root block settings element
    */
-  public getElement(): HTMLElement {
+  public getElement(): HTMLElement | undefined {
     return this.nodes.wrapper;
   }
 

src/components/modules/toolbar/index.ts

@@ -11,6 +11,7 @@ import { IconMenu, IconPlus } from '@codexteam/icons';
 import { BlockHovered } from '../../events/BlockHovered';
 import { beautifyShortcut } from '../../utils';
 import { getKeyboardKeyForCode } from '../../utils/keyboard';
+import { WindowResize } from '../../events';
 
 /**
  * @todo Tab on non-empty block should open Block Settings of the hoveredBlock (not where caret is set)
@@ -104,6 +105,14 @@ export default class Toolbar extends Module<ToolbarNodes> {
    */
   private toolboxInstance: Toolbox | null = null;
 
+  /**
+   * Handles window resize. Closes block tunes and toolbox in case they are open
+   */
+  private handleResize = _.debounce((): void => {
+    this.Editor.BlockSettings.close();
+    this.toolboxInstance.forceRemountPopover();
+  });
+
   /**
    * @class
    * @param moduleConfiguration - Module Configuration
@@ -220,6 +229,7 @@ export default class Toolbar extends Module<ToolbarNodes> {
     };
   }
 
+
   /**
    * Toggles read-only mode
    *
@@ -436,6 +446,8 @@ export default class Toolbar extends Module<ToolbarNodes> {
      * Append toolbar to the Editor
      */
     $.append(this.Editor.UI.nodes.wrapper, this.nodes.wrapper);
+
+    this.eventsDispatcher.on(WindowResize, this.handleResize);
   }
 
   /**
@@ -479,9 +491,10 @@ export default class Toolbar extends Module<ToolbarNodes> {
       }
     });
 
-    return this.toolboxInstance.make();
+    return this.toolboxInstance.getElement();
   }
 
+
   /**
    * Handler for Plus Button
    */
@@ -599,5 +612,6 @@ export default class Toolbar extends Module<ToolbarNodes> {
     if (this.toolboxInstance) {
       this.toolboxInstance.destroy();
     }
+    this.listeners.destroy();
   }
 }

src/components/modules/ui.ts

@@ -16,6 +16,7 @@ import { mobileScreenBreakpoint } from '../utils';
 import styles from '../../styles/main.css?inline';
 import { BlockHovered } from '../events/BlockHovered';
 import { selectionChangeDebounceTimeout } from '../constants';
+import { WindowResize } from '../events';
 /**
  * HTML Elements used for UI
  */
@@ -427,6 +428,13 @@ export default class UI extends Module<UINodes> {
      * Detect mobile version
      */
     this.checkIsMobile();
+
+    /**
+     * Dispatch global event
+     */
+    this.eventsDispatcher.emit(WindowResize, {
+      isMobile: this.isMobile,
+    });
   }
 
   /**