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