webapp/bookstack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2025-07-30 04:23:11 +03:00
Code Activity

Lexical: Linked up saving logic of editor via interface

Browse Source
This commit is contained in:
Dan Brown
2024-07-04 13:09:53 +01:00
parent a8f1160743
commit 04c7e680fd
5 changed files with 52 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
resources/js/components/markdown-editor.js
View 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();
}

8
resources/js/components/page-editor.js
View 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');
}
}

4
resources/js/components/wysiwyg-editor-tinymce.js
View 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(),
};

31
resources/js/components/wysiwyg-editor.js
View 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(),
};
}