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, getMediaToolbarContent, getTableToolbarContent
   7 } from "./defaults/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('media', {
  48         selector: '.editor-media-wrap',
  49         content: getMediaToolbarContent(),
  50     });
  51     manager.registerContextToolbar('link', {
  52         selector: 'a',
  53         content: getLinkToolbarContent(),
  54         displayTargetLocator(originalTarget: HTMLElement): HTMLElement {
  55             const image = originalTarget.querySelector('img');
  56             return image || originalTarget;
  57         }
  58     });
  59     manager.registerContextToolbar('code', {
  60         selector: '.editor-code-block-wrap',
  61         content: getCodeToolbarContent(),
  62     });
  63     manager.registerContextToolbar('table', {
  64         selector: 'td,th',
  65         content: getTableToolbarContent(),
  66         displayTargetLocator(originalTarget: HTMLElement): HTMLElement {
  67             return originalTarget.closest('table') as HTMLTableElement;
  68         }
  69     });
  70     manager.registerContextToolbar('details', {
  71         selector: 'details',
  72         content: getDetailsToolbarContent(),
  73     });
  74
  75     // Register image decorator listener
  76     manager.registerDecoratorType('code', CodeBlockDecorator);
  77     manager.registerDecoratorType('diagram', DiagramDecorator);
  78
  79     return context;
  80 }