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
  12 export function createPageEditorInstance(container: HTMLElement, htmlContent: string): SimpleWysiwygEditorInterface {
  13     const config: CreateEditorArgs = {
  14         namespace: 'BookStackPageEditor',
  15         nodes: getNodesForPageEditor(),
  16         onError: console.error,
  17         theme: {
  18             text: {
  19                 bold: 'editor-theme-bold',
  20                 code: 'editor-theme-code',
  21                 italic: 'editor-theme-italic',
  22                 strikethrough: 'editor-theme-strikethrough',
  23                 subscript: 'editor-theme-subscript',
  24                 superscript: 'editor-theme-superscript',
  25                 underline: 'editor-theme-underline',
  26                 underlineStrikethrough: 'editor-theme-underline-strikethrough',
  27             }
  28         }
  29     };
  30
  31     const editArea = el('div', {
  32         contenteditable: 'true',
  33         class: 'editor-content-area page-content',
  34     });
  35     const editWrap = el('div', {
  36         class: 'editor-content-wrap',
  37     }, [editArea]);
  38     container.append(editWrap);
  39     container.classList.add('editor-container');
  40
  41     const editor = createEditor(config);
  42     editor.setRootElement(editArea);
  43
  44     mergeRegister(
  45         registerRichText(editor),
  46         registerHistory(editor, createEmptyHistoryState(), 300),
  47         registerTableResizer(editor, editArea),
  48     );
  49
  50     setEditorContentFromHtml(editor, htmlContent);
  51
  52     const debugView = document.getElementById('lexical-debug');
  53     if (debugView) {
  54         debugView.hidden = true;
  55     }
  56     editor.registerUpdateListener(({editorState}) => {
  57         console.log('editorState', editorState.toJSON());
  58         if (debugView) {
  59             debugView.textContent = JSON.stringify(editorState.toJSON(), null, 2);
  60         }
  61     });
  62
  63     const context: EditorUiContext = buildEditorUI(container, editArea, editor);
  64     registerCommonNodeMutationListeners(context);
  65
  66     return new SimpleWysiwygEditorInterface(editor);
  67 }
  68
  69 export class SimpleWysiwygEditorInterface {
  70     protected editor: LexicalEditor;
  71
  72     constructor(editor: LexicalEditor) {
  73         this.editor = editor;
  74     }
  75
  76     async getContentAsHtml(): Promise<string> {
  77         return await getEditorContentAsHtml(this.editor);
  78     }
  79 }