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
   7 } from "./toolbars";
   8 import {EditorUIManager} from "./framework/manager";
   9 import {image as imageFormDefinition, link as linkFormDefinition, source as sourceFormDefinition} from "./defaults/form-definitions";
  10 import {ImageDecorator} from "./decorators/image";
  11 import {EditorUiContext} from "./framework/core";
  12 import {CodeBlockDecorator} from "./decorators/code-block";
  13 import {DiagramDecorator} from "./decorators/diagram";
  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     manager.registerModal('link', {
  34         title: 'Insert/Edit link',
  35         form: linkFormDefinition,
  36     });
  37     manager.registerModal('image', {
  38         title: 'Insert/Edit Image',
  39         form: imageFormDefinition
  40     });
  41     manager.registerModal('source', {
  42         title: 'Source code',
  43         form: sourceFormDefinition,
  44     });
  45
  46     // Register context toolbars
  47     manager.registerContextToolbar('image', {
  48         selector: 'img:not([drawio-diagram] img)',
  49         content: getImageToolbarContent(),
  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
  64     // Register image decorator listener
  65     manager.registerDecoratorType('image', ImageDecorator);
  66     manager.registerDecoratorType('code', CodeBlockDecorator);
  67     manager.registerDecoratorType('diagram', DiagramDecorator);
  68
  69     return context;
  70 }