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