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

   1 import {
   2     $getSelection,
   3     COMMAND_PRIORITY_LOW,
   4     LexicalEditor,
   5     SELECTION_CHANGE_COMMAND
   6 } from "lexical";
   7 import {EditorButton, EditorButtonDefinition} from "./editor-button";
   8 import {
   9     blockquoteButton, boldButton, codeButton,
  10     dangerCalloutButton,
  11     h2Button,
  12     h3Button, h4Button, h5Button,
  13     infoCalloutButton, italicButton, paragraphButton, redoButton, strikethroughButton, subscriptButton,
  14     successCalloutButton, superscriptButton, underlineButton, undoButton,
  15     warningCalloutButton
  16 } from "./buttons";
  17
  18
  19
  20 const toolbarButtonDefinitions: EditorButtonDefinition[] = [
  21     undoButton, redoButton,
  22
  23     infoCalloutButton, warningCalloutButton, dangerCalloutButton, successCalloutButton,
  24     h2Button, h3Button, h4Button, h5Button,
  25     blockquoteButton, paragraphButton,
  26
  27     boldButton, italicButton, underlineButton, strikethroughButton,
  28     superscriptButton, subscriptButton, codeButton,
  29 ];
  30
  31 export function buildEditorUI(element: HTMLElement, editor: LexicalEditor) {
  32     const toolbarContainer = document.createElement('div');
  33     toolbarContainer.classList.add('editor-toolbar-container');
  34
  35     const buttons = toolbarButtonDefinitions.map(definition => {
  36         return new EditorButton(definition, editor);
  37     });
  38
  39     const buttonElements = buttons.map(button => button.getDOMElement());
  40
  41     toolbarContainer.append(...buttonElements);
  42     element.before(toolbarContainer);
  43
  44     // Update button states on editor selection change
  45     editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
  46         const selection = $getSelection();
  47         for (const button of buttons) {
  48             button.updateActiveState(selection);
  49         }
  50         return false;
  51     }, COMMAND_PRIORITY_LOW);
  52 }