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 {getMainEditorFullToolbar} from "./toolbars";
   8 import {EditorUIManager} from "./framework/manager";
   9 import {EditorForm} from "./framework/forms";
  10 import {link} from "./defaults/form-definitions";
  11
  12 export function buildEditorUI(element: HTMLElement, editor: LexicalEditor) {
  13     const manager = new EditorUIManager();
  14     const context = {
  15         editor,
  16         manager,
  17         translate: (text: string): string => text,
  18     };
  19
  20     // Create primary toolbar
  21     const toolbar = getMainEditorFullToolbar();
  22     toolbar.setContext(context);
  23     element.before(toolbar.getDOMElement());
  24
  25     // Form test
  26     const linkForm = new EditorForm(link);
  27     linkForm.setContext(context);
  28     element.before(linkForm.getDOMElement());
  29
  30     // Update button states on editor selection change
  31     editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
  32         const selection = $getSelection();
  33         toolbar.updateState({editor, selection});
  34         return false;
  35     }, COMMAND_PRIORITY_LOW);
  36 }