From 04c7e680fd8e86004ab27c517b3fa300c7091062 Mon Sep 17 00:00:00 2001 From: Dan Brown Date: Thu, 4 Jul 2024 13:09:53 +0100 Subject: [PATCH] Lexical: Linked up saving logic of editor via interface --- resources/js/components/markdown-editor.js | 4 +-- resources/js/components/page-editor.js | 8 +++-- .../js/components/wysiwyg-editor-tinymce.js | 4 +-- resources/js/components/wysiwyg-editor.js | 31 ++++++++++++++++--- resources/js/wysiwyg/index.ts | 20 ++++++++++-- 5 files changed, 52 insertions(+), 15 deletions(-) diff --git a/resources/js/components/markdown-editor.js b/resources/js/components/markdown-editor.js index cd928de9f..ad5bcf090 100644 --- 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. - * @return {{html: String, markdown: String}} + * @return {Promise<{html: String, markdown: String}>} */ - getContent() { + async getContent() { return this.editor.actions.getContent(); } diff --git a/resources/js/components/page-editor.js b/resources/js/components/page-editor.js index 963c21008..ecfc3546f 100644 --- 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()}; - 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'); } } diff --git a/resources/js/components/wysiwyg-editor-tinymce.js b/resources/js/components/wysiwyg-editor-tinymce.js index 093442ea2..46ae6ecf4 100644 --- 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. - * @return {{html: String}} + * @return {Promise<{html: String}>} */ - getContent() { + async getContent() { return { html: this.editor.getContent(), }; diff --git a/resources/js/components/wysiwyg-editor.js b/resources/js/components/wysiwyg-editor.js index 2f0e660b1..deb371864 100644 --- 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; + /** @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(), }; } diff --git a/resources/js/wysiwyg/index.ts b/resources/js/wysiwyg/index.ts index b0ff896c7..09b6e060b 100644 --- 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 {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 { + return await getEditorContentAsHtml(this.editor); + } +} \ No newline at end of file