Lexical: Linked up saving logic of editor via interface

[bookstack] / resources / js / wysiwyg / index.ts

diff --git a/resources/js/wysiwyg/index.ts b/resources/js/wysiwyg/index.ts
index b910b2eb6196ccd3a6c4abd3ce9dcd0c5c5e183e..09b6e060b678dc66f89da8d366e4c2b7c5a37d18 100644 (file)
--- a/resources/js/wysiwyg/index.ts
+++ b/resources/js/wysiwyg/index.ts
@@ -1,20 +1,41 @@
-import {createEditor, CreateEditorArgs} from 'lexical';
+import {createEditor, CreateEditorArgs, LexicalEditor} from 'lexical';
 import {createEmptyHistoryState, registerHistory} from '@lexical/history';
 import {registerRichText} from '@lexical/rich-text';
 import {mergeRegister} from '@lexical/utils';
 import {getNodesForPageEditor} from './nodes';
 import {buildEditorUI} from "./ui";
-import {setEditorContentFromHtml} from "./actions";
+import {getEditorContentAsHtml, setEditorContentFromHtml} from "./actions";
 import {registerTableResizer} from "./ui/framework/helpers/table-resizer";
+import {el} from "./helpers";
 
-export function createPageEditorInstance(editArea: HTMLElement) {
+export function createPageEditorInstance(container: HTMLElement, htmlContent: string): SimpleWysiwygEditorInterface {
     const config: CreateEditorArgs = {
         namespace: 'BookStackPageEditor',
         nodes: getNodesForPageEditor(),
         onError: console.error,
+        theme: {
+            text: {
+                bold: 'editor-theme-bold',
+                code: 'editor-theme-code',
+                italic: 'editor-theme-italic',
+                strikethrough: 'editor-theme-strikethrough',
+                subscript: 'editor-theme-subscript',
+                superscript: 'editor-theme-superscript',
+                underline: 'editor-theme-underline',
+                underlineStrikethrough: 'editor-theme-underline-strikethrough',
+            }
+        }
     };
 
-    const startingHtml = editArea.innerHTML;
+    const editArea = el('div', {
+        contenteditable: 'true',
+        class: 'editor-content-area page-content',
+    });
+    const editWrap = el('div', {
+        class: 'editor-content-wrap',
+    }, [editArea]);
+    container.append(editWrap);
+    container.classList.add('editor-container');
 
     const editor = createEditor(config);
     editor.setRootElement(editArea);
@@ -25,7 +46,7 @@ export function createPageEditorInstance(editArea: HTMLElement) {
         registerTableResizer(editor, editArea),
     );
 
-    setEditorContentFromHtml(editor, startingHtml);
+    setEditorContentFromHtml(editor, htmlContent);
 
     const debugView = document.getElementById('lexical-debug');
     editor.registerUpdateListener(({editorState}) => {
@@ -35,24 +56,19 @@ export function createPageEditorInstance(editArea: HTMLElement) {
         }
     });
 
-    buildEditorUI(editArea, editor);
-
-    // Example of creating, registering and using a custom command
-
-    // const SET_BLOCK_CALLOUT_COMMAND = createCommand();
-    // editor.registerCommand(SET_BLOCK_CALLOUT_COMMAND, (category: CalloutCategory = 'info') => {
-    //     const selection = $getSelection();
-    //     const blockElement = $getNearestBlockElementAncestorOrThrow(selection.getNodes()[0]);
-    //     if ($isCalloutNode(blockElement)) {
-    //         $setBlocksType(selection, $createParagraphNode);
-    //     } else {
-    //         $setBlocksType(selection, () => $createCalloutNode(category));
-    //     }
-    //     return true;
-    // }, COMMAND_PRIORITY_LOW);
-    //
-    // const button = document.getElementById('lexical-button');
-    // button.addEventListener('click', event => {
-    //     editor.dispatchCommand(SET_BLOCK_CALLOUT_COMMAND, 'info');
-    // });
+    buildEditorUI(container, editArea, editor);
+
+    return new SimpleWysiwygEditorInterface(editor);
 }
+
+export class SimpleWysiwygEditorInterface {
+    protected editor: LexicalEditor;
+
+    constructor(editor: LexicalEditor) {
+        this.editor = editor;
+    }
+
+    async getContentAsHtml(): Promise<string> {
+        return await getEditorContentAsHtml(this.editor);
+    }
+}
\ No newline at end of file