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