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

   1 import {LexicalEditor} from "lexical";
   2 import {
   3     getCodeToolbarContent,
   4     getImageToolbarContent,
   5     getLinkToolbarContent,
   6     getMainEditorFullToolbar, getTableToolbarContent
   7 } from "./toolbars";
   8 import {EditorUIManager} from "./framework/manager";
   9 import {ImageDecorator} from "./decorators/image";
  10 import {EditorUiContext} from "./framework/core";
  11 import {CodeBlockDecorator} from "./decorators/code-block";
  12 import {DiagramDecorator} from "./decorators/diagram";
  13 import {modals} from "./defaults/modals";
  14
  15 export function buildEditorUI(container: HTMLElement, element: HTMLElement, scrollContainer: HTMLElement, editor: LexicalEditor, options: Record<string, any>): EditorUiContext {
  16     const manager = new EditorUIManager();
  17     const context: EditorUiContext = {
  18         editor,
  19         containerDOM: container,
  20         editorDOM: element,
  21         scrollDOM: scrollContainer,
  22         manager,
  23         translate: (text: string): string => text,
  24         options,
  25     };
  26     manager.setContext(context);
  27
  28     // Create primary toolbar
  29     manager.setToolbar(getMainEditorFullToolbar());
  30
  31     // Register modals
  32     for (const key of Object.keys(modals)) {
  33         manager.registerModal(key, modals[key]);
  34     }
  35
  36     // Register context toolbars
  37     manager.registerContextToolbar('image', {
  38         selector: 'img:not([drawio-diagram] img)',
  39         content: getImageToolbarContent(),
  40     });
  41     manager.registerContextToolbar('link', {
  42         selector: 'a',
  43         content: getLinkToolbarContent(),
  44         displayTargetLocator(originalTarget: HTMLElement): HTMLElement {
  45             const image = originalTarget.querySelector('img');
  46             return image || originalTarget;
  47         }
  48     });
  49     manager.registerContextToolbar('code', {
  50         selector: '.editor-code-block-wrap',
  51         content: getCodeToolbarContent(),
  52     });
  53
  54     manager.registerContextToolbar('table', {
  55         selector: 'td,th',
  56         content: getTableToolbarContent(),
  57         displayTargetLocator(originalTarget: HTMLElement): HTMLElement {
  58             return originalTarget.closest('table') as HTMLTableElement;
  59         }
  60     });
  61
  62     // Register image decorator listener
  63     manager.registerDecoratorType('image', ImageDecorator);
  64     manager.registerDecoratorType('code', CodeBlockDecorator);
  65     manager.registerDecoratorType('diagram', DiagramDecorator);
  66
  67     return context;
  68 }