BookStack Code Mirror - bookstack/blob - resources/js/wysiwyg/ui/editor-button.ts

   1 import {BaseSelection, LexicalEditor} from "lexical";
   2
   3 export interface EditorButtonDefinition {
   4     label: string;
   5     action: (editor: LexicalEditor) => void;
   6     isActive: (selection: BaseSelection|null) => boolean;
   7 }
   8
   9 export class EditorButton {
  10     #definition: EditorButtonDefinition;
  11     #editor: LexicalEditor;
  12     #dom: HTMLButtonElement;
  13
  14     constructor(definition: EditorButtonDefinition, editor: LexicalEditor) {
  15         this.#definition = definition;
  16         this.#editor = editor;
  17         this.#dom = this.buildDOM();
  18     }
  19
  20     private buildDOM(): HTMLButtonElement {
  21         const button = document.createElement("button");
  22         button.setAttribute('type', 'button');
  23         button.textContent = this.#definition.label;
  24         button.classList.add('editor-toolbar-button');
  25
  26         button.addEventListener('click', event => {
  27             this.runAction();
  28         });
  29
  30         return button;
  31     }
  32
  33     getDOMElement(): HTMLButtonElement {
  34         return this.#dom;
  35     }
  36
  37     runAction() {
  38         this.#definition.action(this.#editor);
  39     }
  40
  41     updateActiveState(selection: BaseSelection|null) {
  42         const isActive = this.#definition.isActive(selection);
  43         this.#dom.classList.toggle('editor-toolbar-button-active', isActive);
  44     }
  45 }