BookStack Code Mirror - bookstack/blob - resources/js/wysiwyg/ui/framework/buttons.ts

   1 import {BaseSelection} from "lexical";
   2 import {EditorUiContext, EditorUiElement, EditorUiStateUpdate} from "./core";
   3 import {el} from "../../helpers";
   4
   5 export interface EditorBasicButtonDefinition {
   6     label: string;
   7 }
   8
   9 export interface EditorButtonDefinition extends EditorBasicButtonDefinition {
  10     action: (context: EditorUiContext) => void;
  11     isActive: (selection: BaseSelection|null) => boolean;
  12 }
  13
  14 export class EditorButton extends EditorUiElement {
  15     protected definition: EditorButtonDefinition;
  16     protected active: boolean = false;
  17
  18     constructor(definition: EditorButtonDefinition) {
  19         super();
  20         this.definition = definition;
  21     }
  22
  23     protected buildDOM(): HTMLButtonElement {
  24         const button = el('button', {
  25             type: 'button',
  26             class: 'editor-button',
  27         }, [this.getLabel()]) as HTMLButtonElement;
  28
  29         button.addEventListener('click', this.onClick.bind(this));
  30
  31         return button;
  32     }
  33
  34     protected onClick() {
  35         this.definition.action(this.getContext());
  36     }
  37
  38     updateActiveState(selection: BaseSelection|null) {
  39         this.active = this.definition.isActive(selection);
  40         this.dom?.classList.toggle('editor-button-active', this.active);
  41     }
  42
  43     updateState(state: EditorUiStateUpdate): void {
  44         this.updateActiveState(state.selection);
  45     }
  46
  47     isActive(): boolean {
  48         return this.active;
  49     }
  50
  51     getLabel(): string {
  52         return this.trans(this.definition.label);
  53     }
  54 }