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

   1 import {LexicalEditor} from "lexical";
   2 import {EditorUIManager} from "./framework/manager";
   3 import {EditorUiContext} from "./framework/core";
   4 import {el} from "../utils/dom";
   5
   6 export function buildEditorUI(containerDOM: HTMLElement, editor: LexicalEditor, options: Record<string, any>): EditorUiContext {
   7     const editorDOM = el('div', {
   8         contenteditable: 'true',
   9         class: `editor-content-area ${options.editorClass || ''}`,
  10     });
  11     const scrollDOM = el('div', {
  12         class: 'editor-content-wrap',
  13     }, [editorDOM]);
  14
  15     containerDOM.append(scrollDOM);
  16     containerDOM.classList.add('editor-container');
  17     containerDOM.setAttribute('dir', options.textDirection);
  18     if (options.darkMode) {
  19         containerDOM.classList.add('editor-dark');
  20     }
  21
  22     const manager = new EditorUIManager();
  23     const context: EditorUiContext = {
  24         editor,
  25         containerDOM: containerDOM,
  26         editorDOM: editorDOM,
  27         scrollDOM: scrollDOM,
  28         manager,
  29         translate(text: string): string {
  30             const translations = options.translations;
  31             return translations[text] || text;
  32         },
  33         error(error: string|Error): void {
  34             const message = error instanceof Error ? error.message : error;
  35             window.$events.error(message); // TODO - Translate
  36         },
  37         options,
  38     };
  39     manager.setContext(context);
  40
  41     return context;
  42 }