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 {image as imageFormDefinition, link as linkFormDefinition, media as mediaFormDefinition, 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('media', {
  42         title: 'Insert/Edit Media',
  43         form: mediaFormDefinition,
  44     });
  45     manager.registerModal('source', {
  46         title: 'Source code',
  47         form: sourceFormDefinition,
  48     });
  49
  50     // Register context toolbars
  51     manager.registerContextToolbar('image', {
  52         selector: 'img:not([drawio-diagram] img)',
  53         content: getImageToolbarContent(),
  54     });
  55     manager.registerContextToolbar('link', {
  56         selector: 'a',
  57         content: getLinkToolbarContent(),
  58         displayTargetLocator(originalTarget: HTMLElement): HTMLElement {
  59             const image = originalTarget.querySelector('img');
  60             return image || originalTarget;
  61         }
  62     });
  63     manager.registerContextToolbar('code', {
  64         selector: '.editor-code-block-wrap',
  65         content: getCodeToolbarContent(),
  66     });
  67
  68     manager.registerContextToolbar('table', {
  69         selector: 'td,th',
  70         content: getTableToolbarContent(),
  71         displayTargetLocator(originalTarget: HTMLElement): HTMLElement {
  72             return originalTarget.closest('table') as HTMLTableElement;
  73         }
  74     });
  75
  76     // Register image decorator listener
  77     manager.registerDecoratorType('image', ImageDecorator);
  78     manager.registerDecoratorType('code', CodeBlockDecorator);
  79     manager.registerDecoratorType('diagram', DiagramDecorator);
  80
  81     return context;
  82 }