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

   1 import {createEditor, CreateEditorArgs} 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} from './nodes';
   6 import {buildEditorUI} from "./ui";
   7 import {setEditorContentFromHtml} from "./actions";
   8 import {registerTableResizer} from "./ui/framework/helpers/table-resizer";
   9 import {el} from "./helpers";
  10
  11 export function createPageEditorInstance(container: HTMLElement, htmlContent: string) {
  12     const config: CreateEditorArgs = {
  13         namespace: 'BookStackPageEditor',
  14         nodes: getNodesForPageEditor(),
  15         onError: console.error,
  16         theme: {
  17             text: {
  18                 bold: 'editor-theme-bold',
  19                 code: 'editor-theme-code',
  20                 italic: 'editor-theme-italic',
  21                 strikethrough: 'editor-theme-strikethrough',
  22                 subscript: 'editor-theme-subscript',
  23                 superscript: 'editor-theme-superscript',
  24                 underline: 'editor-theme-underline',
  25                 underlineStrikethrough: 'editor-theme-underline-strikethrough',
  26             }
  27         }
  28     };
  29
  30     const editArea = el('div', {
  31         contenteditable: 'true',
  32         class: 'editor-content-area page-content',
  33     });
  34     const editWrap = el('div', {
  35         class: 'editor-content-wrap',
  36     }, [editArea]);
  37     container.append(editWrap);
  38     container.classList.add('editor-container');
  39
  40     const editor = createEditor(config);
  41     editor.setRootElement(editArea);
  42
  43     mergeRegister(
  44         registerRichText(editor),
  45         registerHistory(editor, createEmptyHistoryState(), 300),
  46         registerTableResizer(editor, editArea),
  47     );
  48
  49     setEditorContentFromHtml(editor, htmlContent);
  50
  51     const debugView = document.getElementById('lexical-debug');
  52     editor.registerUpdateListener(({editorState}) => {
  53         console.log('editorState', editorState.toJSON());
  54         if (debugView) {
  55             debugView.textContent = JSON.stringify(editorState.toJSON(), null, 2);
  56         }
  57     });
  58
  59     buildEditorUI(container, editArea, editor);
  60 }