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

   1 import {el} from "../../../helpers";
   2 import {EditorUiStateUpdate, EditorContainerUiElement} from "../core";
   3 import {EditorButton} from "../buttons";
   4 import {handleDropdown} from "../helpers/dropdowns";
   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-menu-list',
  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, 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
  38         this.updateToggleLabel(this.trans('Formats'));
  39     }
  40
  41     protected updateToggleLabel(text: string): void {
  42         const button = this.getDOMElement().querySelector('button');
  43         if (button) {
  44             button.innerText = text;
  45         }
  46     }
  47 }