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