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

   1 import {createEditor, CreateEditorArgs, LexicalEditor} from 'lexical';
   2 import {createEmptyHistoryState, registerHistory} from '@lexical/history';
   3 import {registerRichText} from '@lexical/rich-text';
   4 import {mergeRegister} from '@lexical/utils';
   5 import {getNodesForPageEditor, registerCommonNodeMutationListeners} from './nodes';
   6 import {buildEditorUI} from "./ui";
   7 import {getEditorContentAsHtml, setEditorContentFromHtml} from "./utils/actions";
   8 import {registerTableResizer} from "./ui/framework/helpers/table-resizer";
   9 import {EditorUiContext} from "./ui/framework/core";
  10 import {listen as listenToCommonEvents} from "./services/common-events";
  11 import {registerDropPasteHandling} from "./services/drop-paste-handling";
  12 import {registerTaskListHandler} from "./ui/framework/helpers/task-list-handler";
  13 import {registerTableSelectionHandler} from "./ui/framework/helpers/table-selection-handler";
  14 import {el} from "./utils/dom";
  15 import {registerShortcuts} from "./services/shortcuts";
  16
  17 export function createPageEditorInstance(container: HTMLElement, htmlContent: string, options: Record<string, any> = {}): SimpleWysiwygEditorInterface {
  18     const config: CreateEditorArgs = {
  19         namespace: 'BookStackPageEditor',
  20         nodes: getNodesForPageEditor(),
  21         onError: console.error,
  22         theme: {
  23             text: {
  24                 bold: 'editor-theme-bold',
  25                 code: 'editor-theme-code',
  26                 italic: 'editor-theme-italic',
  27                 strikethrough: 'editor-theme-strikethrough',
  28                 subscript: 'editor-theme-subscript',
  29                 superscript: 'editor-theme-superscript',
  30                 underline: 'editor-theme-underline',
  31                 underlineStrikethrough: 'editor-theme-underline-strikethrough',
  32             }
  33         }
  34     };
  35
  36     const editArea = el('div', {
  37         contenteditable: 'true',
  38         class: 'editor-content-area page-content',
  39     });
  40     const editWrap = el('div', {
  41         class: 'editor-content-wrap',
  42     }, [editArea]);
  43     container.append(editWrap);
  44     container.classList.add('editor-container');
  45
  46     const editor = createEditor(config);
  47     editor.setRootElement(editArea);
  48     const context: EditorUiContext = buildEditorUI(container, editArea, editWrap, editor, options);
  49
  50     mergeRegister(
  51         registerRichText(editor),
  52         registerHistory(editor, createEmptyHistoryState(), 300),
  53         registerShortcuts(context),
  54         registerTableResizer(editor, editWrap),
  55         registerTableSelectionHandler(editor),
  56         registerTaskListHandler(editor, editArea),
  57         registerDropPasteHandling(context),
  58     );
  59
  60     listenToCommonEvents(editor);
  61
  62     setEditorContentFromHtml(editor, htmlContent);
  63
  64     const debugView = document.getElementById('lexical-debug');
  65     if (debugView) {
  66         debugView.hidden = true;
  67     }
  68
  69     let changeFromLoading = true;
  70     editor.registerUpdateListener(({editorState, dirtyElements, dirtyLeaves}) => {
  71
  72         // Emit change event to component system (for draft detection) on actual user content change
  73         if (dirtyElements.size > 0 || dirtyLeaves.size > 0) {
  74             if (changeFromLoading) {
  75                 changeFromLoading = false;
  76             } else {
  77                 window.$events.emit('editor-html-change', '');
  78             }
  79         }
  80
  81         // Debug logic
  82         // console.log('editorState', editorState.toJSON());
  83         if (debugView) {
  84             debugView.textContent = JSON.stringify(editorState.toJSON(), null, 2);
  85         }
  86     });
  87
  88     // @ts-ignore
  89     window.debugEditorState = () => {
  90         console.log(editor.getEditorState().toJSON());
  91     };
  92
  93     registerCommonNodeMutationListeners(context);
  94
  95     return new SimpleWysiwygEditorInterface(editor);
  96 }
  97
  98 export class SimpleWysiwygEditorInterface {
  99     protected editor: LexicalEditor;
 100
 101     constructor(editor: LexicalEditor) {
 102         this.editor = editor;
 103     }
 104
 105     async getContentAsHtml(): Promise<string> {
 106         return await getEditorContentAsHtml(this.editor);
 107     }
 108 }