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
  10 export function createPageEditorInstance(editArea: HTMLElement) {
  11     const config: CreateEditorArgs = {
  12         namespace: 'BookStackPageEditor',
  13         nodes: getNodesForPageEditor(),
  14         onError: console.error,
  15         theme: {
  16             text: {
  17                 bold: 'editor-theme-bold',
  18                 code: 'editor-theme-code',
  19                 italic: 'editor-theme-italic',
  20                 strikethrough: 'editor-theme-strikethrough',
  21                 subscript: 'editor-theme-subscript',
  22                 superscript: 'editor-theme-superscript',
  23                 underline: 'editor-theme-underline',
  24                 underlineStrikethrough: 'editor-theme-underline-strikethrough',
  25             }
  26         }
  27     };
  28
  29     const startingHtml = editArea.innerHTML;
  30
  31     const editor = createEditor(config);
  32     editor.setRootElement(editArea);
  33
  34     mergeRegister(
  35         registerRichText(editor),
  36         registerHistory(editor, createEmptyHistoryState(), 300),
  37         registerTableResizer(editor, editArea),
  38     );
  39
  40     setEditorContentFromHtml(editor, startingHtml);
  41
  42     const debugView = document.getElementById('lexical-debug');
  43     editor.registerUpdateListener(({editorState}) => {
  44         console.log('editorState', editorState.toJSON());
  45         if (debugView) {
  46             debugView.textContent = JSON.stringify(editorState.toJSON(), null, 2);
  47         }
  48     });
  49
  50     buildEditorUI(editArea, editor);
  51
  52     // Example of creating, registering and using a custom command
  53
  54     // const SET_BLOCK_CALLOUT_COMMAND = createCommand();
  55     // editor.registerCommand(SET_BLOCK_CALLOUT_COMMAND, (category: CalloutCategory = 'info') => {
  56     //     const selection = $getSelection();
  57     //     const blockElement = $getNearestBlockElementAncestorOrThrow(selection.getNodes()[0]);
  58     //     if ($isCalloutNode(blockElement)) {
  59     //         $setBlocksType(selection, $createParagraphNode);
  60     //     } else {
  61     //         $setBlocksType(selection, () => $createCalloutNode(category));
  62     //     }
  63     //     return true;
  64     // }, COMMAND_PRIORITY_LOW);
  65     //
  66     // const button = document.getElementById('lexical-button');
  67     // button.addEventListener('click', event => {
  68     //     editor.dispatchCommand(SET_BLOCK_CALLOUT_COMMAND, 'info');
  69     // });
  70 }