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     };
  16
  17     const startingHtml = editArea.innerHTML;
  18
  19     const editor = createEditor(config);
  20     editor.setRootElement(editArea);
  21
  22     mergeRegister(
  23         registerRichText(editor),
  24         registerHistory(editor, createEmptyHistoryState(), 300),
  25         registerTableResizer(editor, editArea),
  26     );
  27
  28     setEditorContentFromHtml(editor, startingHtml);
  29
  30     const debugView = document.getElementById('lexical-debug');
  31     editor.registerUpdateListener(({editorState}) => {
  32         console.log('editorState', editorState.toJSON());
  33         if (debugView) {
  34             debugView.textContent = JSON.stringify(editorState.toJSON(), null, 2);
  35         }
  36     });
  37
  38     buildEditorUI(editArea, editor);
  39
  40     // Example of creating, registering and using a custom command
  41
  42     // const SET_BLOCK_CALLOUT_COMMAND = createCommand();
  43     // editor.registerCommand(SET_BLOCK_CALLOUT_COMMAND, (category: CalloutCategory = 'info') => {
  44     //     const selection = $getSelection();
  45     //     const blockElement = $getNearestBlockElementAncestorOrThrow(selection.getNodes()[0]);
  46     //     if ($isCalloutNode(blockElement)) {
  47     //         $setBlocksType(selection, $createParagraphNode);
  48     //     } else {
  49     //         $setBlocksType(selection, () => $createCalloutNode(category));
  50     //     }
  51     //     return true;
  52     // }, COMMAND_PRIORITY_LOW);
  53     //
  54     // const button = document.getElementById('lexical-button');
  55     // button.addEventListener('click', event => {
  56     //     editor.dispatchCommand(SET_BLOCK_CALLOUT_COMMAND, 'info');
  57     // });
  58 }