Lexical: Linked up saving logic of editor via interface

diff --git a/resources/js/components/markdown-editor.js b/resources/js/components/markdown-editor.js
index cd928de9f16e964dc7e02642b5d7324a8393fd26..ad5bcf09030184532a337d37de258f943ee333d1 100644 (file)
--- a/resources/js/components/markdown-editor.js
+++ b/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.
     /**
      * 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();
     }
 
         return this.editor.actions.getContent();
     }
 

diff --git a/resources/js/components/page-editor.js b/resources/js/components/page-editor.js
index 963c21008968642314050fbf179be06dd8d48625..ecfc3546f4e2ab7e6cd19d82be258d181e093f19 100644 (file)
--- a/resources/js/components/page-editor.js
+++ b/resources/js/components/page-editor.js
@@ -118,7 +118,7 @@ export class PageEditor extends Component {
     async saveDraft() {
         const data = {name: this.titleElem.value.trim()};
 
     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;
         Object.assign(data, editorContent);
 
         let didSave = false;


@@ -235,10 +235,12 @@ export class PageEditor extends Component {
     }
 
     /**
     }
 
     /**

-     * @return MarkdownEditor|WysiwygEditor
+     * @return {MarkdownEditor|WysiwygEditor|WysiwygEditorTinymce}

      */
     getEditorComponent() {
      */
     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');

     }
 
 }
     }
 
 }

diff --git a/resources/js/components/wysiwyg-editor-tinymce.js b/resources/js/components/wysiwyg-editor-tinymce.js
index 093442ea2bce2dd2c7dadb0be60f14233fffc029..46ae6ecf4cc89e03358e3f60917d4d5c76e56f43 100644 (file)
--- a/resources/js/components/wysiwyg-editor-tinymce.js
+++ b/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.
     /**
      * 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(),
         };
         return {
             html: this.editor.getContent(),
         };

diff --git a/resources/js/components/wysiwyg-editor.js b/resources/js/components/wysiwyg-editor.js
index 2f0e660b19fc778644a6554a76c9db1c0bbaad58..deb37186471440e00a73498c68ece6e0267d4b23 100644 (file)
--- a/resources/js/components/wysiwyg-editor.js
+++ b/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;
 
         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;
         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() {
         });
     }
 
     getDrawIoUrl() {

+        // TODO

         const drawioUrlElem = document.querySelector('[drawio-url]');
         if (drawioUrlElem) {
             return drawioUrlElem.getAttribute('drawio-url');
         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.
     /**
      * 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 {
         return {

-            html: this.editor.getContent(),
+            html: await this.editor.getContentAsHtml(),

         };
     }
 
         };
     }
 

diff --git a/resources/js/wysiwyg/index.ts b/resources/js/wysiwyg/index.ts
index b0ff896c76eb3e0eb239202a4feb242008a82021..09b6e060b678dc66f89da8d366e4c2b7c5a37d18 100644 (file)
--- a/resources/js/wysiwyg/index.ts
+++ b/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 {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";
 
 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(),
     const config: CreateEditorArgs = {
         namespace: 'BookStackPageEditor',
         nodes: getNodesForPageEditor(),


@@ -57,4 +57,18 @@ export function createPageEditorInstance(container: HTMLElement, htmlContent: st
     });
 
     buildEditorUI(container, editArea, editor);
     });
 
     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