BookStack Code Mirror - bookstack/blob - resources/js/wysiwyg/ui/framework/blocks/format-menu.ts

   1 import {EditorUiStateUpdate, EditorContainerUiElement} from "../core";
   2 import {EditorButton} from "../buttons";
   3 import {handleDropdown} from "../helpers/dropdowns";
   4 import {el} from "../../../utils/dom";
   5
   6 export class EditorFormatMenu extends EditorContainerUiElement {
   7     buildDOM(): HTMLElement {
   8         const childElements: HTMLElement[] = this.getChildren().map(child => child.getDOMElement());
   9         const menu = el('div', {
  10             class: 'editor-format-menu-dropdown editor-dropdown-menu editor-dropdown-menu-vertical',
  11             hidden: 'true',
  12         }, childElements);
  13
  14         const toggle = el('button', {
  15             class: 'editor-format-menu-toggle editor-button',
  16             type: 'button',
  17         }, [this.trans('Formats')]);
  18
  19         const wrapper = el('div', {
  20             class: 'editor-format-menu editor-dropdown-menu-container',
  21         }, [toggle, menu]);
  22
  23         handleDropdown({toggle : toggle, menu : menu});
  24
  25         return wrapper;
  26     }
  27
  28     updateState(state: EditorUiStateUpdate) {
  29         super.updateState(state);
  30
  31         for (const child of this.children) {
  32             if (child instanceof EditorButton && child.isActive()) {
  33                 this.updateToggleLabel(child.getLabel());
  34                 return;
  35             }
  36
  37             if (child instanceof EditorContainerUiElement) {
  38                 for (const grandchild of child.getChildren()) {
  39                     if (grandchild instanceof EditorButton && grandchild.isActive()) {
  40                         this.updateToggleLabel(grandchild.getLabel());
  41                         return;
  42                     }
  43                 }
  44             }
  45         }
  46
  47         this.updateToggleLabel(this.trans('Formats'));
  48     }
  49
  50     protected updateToggleLabel(text: string): void {
  51         const button = this.getDOMElement().querySelector('button');
  52         if (button) {
  53             button.innerText = text;
  54         }
  55     }
  56 }