]> BookStack Code Mirror - bookstack/commitdiff
Lexical: Linked up saving logic of editor via interface
authorDan Brown <redacted>
Thu, 4 Jul 2024 12:09:53 +0000 (13:09 +0100)
committerDan Brown <redacted>
Thu, 4 Jul 2024 12:09:53 +0000 (13:09 +0100)
resources/js/components/markdown-editor.js
resources/js/components/page-editor.js
resources/js/components/wysiwyg-editor-tinymce.js
resources/js/components/wysiwyg-editor.js
resources/js/wysiwyg/index.ts

index cd928de9f16e964dc7e02642b5d7324a8393fd26..ad5bcf09030184532a337d37de258f943ee333d1 100644 (file)
@@ -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();
     }
 
index 963c21008968642314050fbf179be06dd8d48625..ecfc3546f4e2ab7e6cd19d82be258d181e093f19 100644 (file)
@@ -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');
     }
 
 }
index 093442ea2bce2dd2c7dadb0be60f14233fffc029..46ae6ecf4cc89e03358e3f60917d4d5c76e56f43 100644 (file)
@@ -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(),
         };
index 2f0e660b19fc778644a6554a76c9db1c0bbaad58..deb37186471440e00a73498c68ece6e0267d4b23 100644 (file)
@@ -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(),
         };
     }
 
index b0ff896c76eb3e0eb239202a4feb242008a82021..09b6e060b678dc66f89da8d366e4c2b7c5a37d18 100644 (file)
@@ -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);
+    }
+}
\ No newline at end of file