Spaces:
No application file
No application file
File size: 3,804 Bytes
d2897cd |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 |
// import ContentService from '../../../../../../../grapesjs-preset-mautic/src/content.service';
import MjmlService from 'grapesjs-preset-mautic/dist/mjml/mjml.service';
import ContentService from 'grapesjs-preset-mautic/dist/content.service';
class CodeEditor {
editor;
opts;
codeEditor;
codePopup;
constructor(editor, opts = {}) {
this.editor = editor;
this.opts = opts;
this.codeEditor = this.buildCodeEditor();
this.codePopup = this.buildCodePopup();
}
// Build codeEditor (CodeMirror instance)
buildCodeEditor() {
const codeEditor = this.editor.CodeManager.getViewer('CodeMirror').clone();
codeEditor.set({
codeName: 'htmlmixed',
readOnly: false,
theme: 'hopscotch',
autoBeautify: true,
autoCloseTags: true,
autoCloseBrackets: true,
lineWrapping: true,
styleActiveLine: true,
smartIndent: true,
indentWithTabs: true,
});
return codeEditor;
}
// Build popup content, codeEditor area and buttons
buildCodePopup() {
const cfg = this.editor.getConfig();
const codePopup = document.createElement('div');
const btnEdit = document.createElement('button');
const btnCancel = document.createElement('button');
const textarea = document.createElement('textarea');
btnEdit.innerHTML = Mautic.translate('grapesjsbuilder.sourceEditBtnLabel');
btnEdit.className = `${cfg.stylePrefix}btn-prim ${cfg.stylePrefix}btn-code-edit`;
btnEdit.onclick = this.updateCode.bind(this);
btnCancel.innerHTML = Mautic.translate('grapesjsbuilder.sourceCancelBtnLabel');
btnCancel.className = `${cfg.stylePrefix}btn-prim ${cfg.stylePrefix}btn-code-cancel`;
btnCancel.onclick = this.cancelCode.bind(this);
codePopup.appendChild(textarea);
codePopup.appendChild(btnEdit);
codePopup.appendChild(btnCancel);
this.codeEditor.init(textarea);
return codePopup;
}
// Load content and show popup
showCodePopup(editor) {
this.updateEditorContents();
// this.codeEditor.editor.refresh();
// editor.Modal.setContent('');
editor.Modal.setContent(this.codePopup);
editor.Modal.setTitle(Mautic.translate('grapesjsbuilder.sourceEditModalTitle'));
editor.Modal.open();
editor.Modal.onceClose(() => editor.stopCommand('preset-mautic:code-edit'));
}
/**
* Update the main editors canvas content with the
* content from modals editor.
* @todo show validation results in UI
*/
updateCode() {
const code = this.codeEditor.editor.getValue();
// validate MJML code
if (ContentService.isMjmlMode(this.editor)) {
MjmlService.mjmlToHtml(code);
}
try {
// delete canvas and set new content
this.editor.DomComponents.getWrapper().set('content', '');
this.editor.setComponents(code.trim())
// Reinitialize the content after parsing MJML.
// This can be removed once the issue with self-closing tags is resolved in grapesjs-mjml.
// See: https://github.com/GrapesJS/mjml/issues/149
const parsedContent = MjmlService.getEditorMjmlContent(this.editor);
this.editor.setComponents(parsedContent);
this.editor.Modal.close();
} catch (e) {
window.alert(`${Mautic.translate('grapesjsbuilder.sourceSyntaxError')} \n${e.message}`);
}
}
// Close popup
cancelCode() {
this.editor.Modal.close();
}
/**
* Set the content to be edited in the popup editor
*/
updateEditorContents() {
// Check if MJML plugin is on
let content;
if (ContentService.isMjmlMode(this.editor)) {
content = MjmlService.getEditorMjmlContent(this.editor);
} else {
content = ContentService.getEditorHtmlContent(this.editor);
}
this.codeEditor.setContent(content);
}
}
export default CodeEditor;
|