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