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 {link as linkFormDefinition} from "./defaults/form-definitions";
  10 import {DecoratorListener} from "lexical/LexicalEditor";
  11 import type {NodeKey} from "lexical/LexicalNode";
  12 import {el} from "../helpers";
  13
  14 export function buildEditorUI(element: HTMLElement, editor: LexicalEditor) {
  15     const manager = new EditorUIManager();
  16     const context = {
  17         editor,
  18         manager,
  19         translate: (text: string): string => text,
  20     };
  21     manager.setContext(context);
  22
  23     // Create primary toolbar
  24     const toolbar = getMainEditorFullToolbar();
  25     toolbar.setContext(context);
  26     element.before(toolbar.getDOMElement());
  27
  28     // Register modals
  29     manager.registerModal('link', {
  30         title: 'Insert/Edit link',
  31         form: linkFormDefinition,
  32     });
  33
  34     // Register decorator listener
  35     // Maybe move to manager?
  36     const domDecorateListener: DecoratorListener<HTMLElement> = (decorator: Record<NodeKey, HTMLElement>) => {
  37         const keys = Object.keys(decorator);
  38         for (const key of keys) {
  39             const decoratedEl = editor.getElementByKey(key);
  40             const decoratorEl = decorator[key];
  41             if (decoratedEl) {
  42                 decoratedEl.append(decoratorEl);
  43             }
  44         }
  45     }
  46     editor.registerDecoratorListener(domDecorateListener);
  47
  48     // Update button states on editor selection change
  49     editor.registerCommand(SELECTION_CHANGE_COMMAND, () => {
  50         const selection = $getSelection();
  51         toolbar.updateState({editor, selection});
  52         return false;
  53     }, COMMAND_PRIORITY_LOW);
  54 }