Lexical: Linked up saving logic of editor via interface

resources/js/components/markdown-editor.js

@@ -133,9 +133,9 @@ export class MarkdownEditor extends Component {
     /**
      * Get the content of this editor.
      * Used by the parent page editor component.
-     * @return {{html: String, markdown: String}}
+     * @return {Promise<{html: String, markdown: String}>}
      */
-    getContent() {
+    async getContent() {
         return this.editor.actions.getContent();
     }
 

resources/js/components/page-editor.js

@@ -118,7 +118,7 @@ export class PageEditor extends Component {
     async saveDraft() {
         const data = {name: this.titleElem.value.trim()};
 
-        const editorContent = this.getEditorComponent().getContent();
+        const editorContent = await this.getEditorComponent().getContent();
         Object.assign(data, editorContent);
 
         let didSave = false;
@@ -235,10 +235,12 @@ export class PageEditor extends Component {
     }
 
     /**
-     * @return MarkdownEditor|WysiwygEditor
+     * @return {MarkdownEditor|WysiwygEditor|WysiwygEditorTinymce}
      */
     getEditorComponent() {
-        return window.$components.first('markdown-editor') || window.$components.first('wysiwyg-editor');
+        return window.$components.first('markdown-editor')
+            || window.$components.first('wysiwyg-editor')
+            || window.$components.first('wysiwyg-editor-tinymce');
     }
 
 }

resources/js/components/wysiwyg-editor-tinymce.js

@@ -37,9 +37,9 @@ export class WysiwygEditorTinymce extends Component {
     /**
      * Get the content of this editor.
      * Used by the parent page editor component.
-     * @return {{html: String}}
+     * @return {Promise<{html: String}>}
      */
-    getContent() {
+    async getContent() {
         return {
             html: this.editor.getContent(),
         };

resources/js/components/wysiwyg-editor.js

@@ -7,13 +7,35 @@ export class WysiwygEditor extends Component {
         this.editContainer = this.$refs.editContainer;
         this.input = this.$refs.input;
 
+        /** @var {SimpleWysiwygEditorInterface|null} */
+        this.editor = null;
+
         window.importVersioned('wysiwyg').then(wysiwyg => {
             const editorContent = this.input.value;
-            wysiwyg.createPageEditorInstance(this.editContainer, editorContent);
+            this.editor = wysiwyg.createPageEditorInstance(this.editContainer, editorContent);
+        });
+
+        let handlingFormSubmit = false;
+        this.input.form.addEventListener('submit', event => {
+            if (!this.editor) {
+                return;
+            }
+
+            if (!handlingFormSubmit) {
+                event.preventDefault();
+                handlingFormSubmit = true;
+                this.editor.getContentAsHtml().then(html => {
+                    this.input.value = html;
+                    this.input.form.submit();
+                });
+            } else {
+                handlingFormSubmit = false;
+            }
         });
     }
 
     getDrawIoUrl() {
+        // TODO
         const drawioUrlElem = document.querySelector('[drawio-url]');
         if (drawioUrlElem) {
             return drawioUrlElem.getAttribute('drawio-url');
@@ -24,12 +46,11 @@ export class WysiwygEditor extends Component {
     /**
      * Get the content of this editor.
      * Used by the parent page editor component.
-     * @return {{html: String}}
+     * @return {Promise<{html: String}>}
      */
-    getContent() {
-        // TODO - Update
+    async getContent() {
         return {
-            html: this.editor.getContent(),
+            html: await this.editor.getContentAsHtml(),
         };
     }
 

resources/js/wysiwyg/index.ts

@@ -1,14 +1,14 @@
-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(container: HTMLElement, htmlContent: string) {
+export function createPageEditorInstance(container: HTMLElement, htmlContent: string): SimpleWysiwygEditorInterface {
     const config: CreateEditorArgs = {
         namespace: 'BookStackPageEditor',
         nodes: getNodesForPageEditor(),
@@ -57,4 +57,18 @@ export function createPageEditorInstance(container: HTMLElement, htmlContent: st
     });
 
     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);
+    }
+}