/**
* 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();
}
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;
}
/**
- * @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');
}
}
/**
* 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(),
};
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');
/**
* 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(),
};
}
-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(),
});
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