knadh/listmonk
1
1
Fork 0
mirror of https://github.com/knadh/listmonk.git synced 2026-02-04 17:38:57 +08:00
Code Issues Projects Releases Packages Wiki Activity

feat: inject email-builder instead of loading it as ES module

Browse source
This commit is contained in:
Vivek R 2024-11-01 00:04:11 +05:30 • committed by Kailash Nadh
parent 72af88f730
commit 352442ac47
2 changed files with 40 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
frontend/src/components/VisualEditor.vue
View file

@ -5,8 +5,6 @@
</template>
<script>
import { render, isRendered, setDocument, DEFAULT_SOURCE } from '../email-builder';
export default {
props: {
source: { type: String, default: '' },
@ -20,7 +18,7 @@ export default {
source = JSON.parse(this.$props.source);
}
render('visual-editor', {
window.EmailBuilder.render('visual-editor', {
data: source,
onChange: (data, body) => {
this.$emit('change', { source: JSON.stringify(data), body });
@ -28,19 +26,42 @@ export default {
height: this.height,
});
},
loadScript() {
return new Promise((resolve, reject) => {
if (window.EmailBuilder) {
resolve();
return;
}
const script = document.createElement('script');
script.id = 'email-builder-script';
script.src = '/admin/static/email-builder/email-builder.umd.js';
script.onload = () => {
resolve();
};
script.onerror = reject;
document.head.appendChild(script);
});
},
},
mounted() {
this.initEditor();
this.loadScript().then(() => {
this.initEditor();
}).catch((error) => {
// eslint-disable-next-line no-console
console.error('Failed to load email-builder script:', error);
});
},
watch: {
source(val) {
if (isRendered('visual-editor')) {
if (window.EmailBuilder?.isRendered('visual-editor')) {
if (val) {
setDocument(JSON.parse(val));
window.EmailBuilder.setDocument(JSON.parse(val));
} else {
setDocument(DEFAULT_SOURCE);
window.EmailBuilder.setDocument(window.EmailBuilder.DEFAULT_SOURCE);
}
} else {
this.initEditor();

14
frontend/src/views/Campaign.vue
View file

@ -327,7 +327,12 @@ export default Vue.extend({
lists: [],
tags: [],
sendAt: null,
content: { contentType: 'richtext', body: '', bodySource: null, templateId: null },
content: {
contentType: 'richtext',
body: '',
bodySource: null,
templateId: null,
},
altbody: null,
media: [],
@ -447,7 +452,12 @@ export default Vue.extend({
archiveMetaStr: data.archiveMeta ? JSON.stringify(data.archiveMeta, null, 4) : '{}',
// The structure that is populated by editor input event.
content: { contentType: data.contentType, body: data.body, bodySource: data.bodySource, templateId: data.templateId },
content: {
contentType: data.contentType,
body: data.body,
bodySource: data.bodySource,
templateId: data.templateId,
},
};
this.isAttachFieldVisible = this.form.media.length > 0;