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

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