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

   1 import {BaseSelection, LexicalEditor} from "lexical";
   2 import {EditorUiElement, EditorUiStateUpdate} from "./base-elements";
   3 import {el} from "../../helpers";
   4
   5 export interface EditorButtonDefinition {
   6     label: string;
   7     action: (editor: LexicalEditor) => void;
   8     isActive: (selection: BaseSelection|null) => boolean;
   9 }
  10
  11 export class EditorButton extends EditorUiElement {
  12     protected definition: EditorButtonDefinition;
  13
  14     constructor(definition: EditorButtonDefinition) {
  15         super();
  16         this.definition = definition;
  17     }
  18
  19     protected buildDOM(): HTMLButtonElement {
  20         const button = el('button', {
  21             type: 'button',
  22             class: 'editor-toolbar-button',
  23         }, [this.definition.label]) as HTMLButtonElement;
  24
  25         button.addEventListener('click', event => {
  26             this.definition.action(this.getContext().editor);
  27         });
  28
  29         return button;
  30     }
  31
  32     updateActiveState(selection: BaseSelection|null) {
  33         const isActive = this.definition.isActive(selection);
  34         this.dom?.classList.toggle('editor-toolbar-button-active', isActive);
  35     }
  36
  37     updateState(state: EditorUiStateUpdate): void {
  38         this.updateActiveState(state.selection);
  39     }
  40 }