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, // TODO - Implement
  24         error(error: string): void {
  25             window.$events.error(error); // TODO - Translate
  26         },
  27         options,
  28     };
  29     manager.setContext(context);
  30
  31     // Create primary toolbar
  32     manager.setToolbar(getMainEditorFullToolbar());
  33
  34     // Register modals
  35     for (const key of Object.keys(modals)) {
  36         manager.registerModal(key, modals[key]);
  37     }
  38
  39     // Register context toolbars
  40     manager.registerContextToolbar('image', {
  41         selector: 'img:not([drawio-diagram] img)',
  42         content: getImageToolbarContent(),
  43     });
  44     manager.registerContextToolbar('link', {
  45         selector: 'a',
  46         content: getLinkToolbarContent(),
  47         displayTargetLocator(originalTarget: HTMLElement): HTMLElement {
  48             const image = originalTarget.querySelector('img');
  49             return image || originalTarget;
  50         }
  51     });
  52     manager.registerContextToolbar('code', {
  53         selector: '.editor-code-block-wrap',
  54         content: getCodeToolbarContent(),
  55     });
  56
  57     manager.registerContextToolbar('table', {
  58         selector: 'td,th',
  59         content: getTableToolbarContent(),
  60         displayTargetLocator(originalTarget: HTMLElement): HTMLElement {
  61             return originalTarget.closest('table') as HTMLTableElement;
  62         }
  63     });
  64
  65     // Register image decorator listener
  66     manager.registerDecoratorType('image', ImageDecorator);
  67     manager.registerDecoratorType('code', CodeBlockDecorator);
  68     manager.registerDecoratorType('diagram', DiagramDecorator);
  69
  70     return context;
  71 }