diff --git a/.github/ISSUE_TEMPLATE/1.bug_report.yml b/.github/ISSUE_TEMPLATE/1.bug_report.yml new file mode 100644 index 0000000..926339a --- /dev/null +++ b/.github/ISSUE_TEMPLATE/1.bug_report.yml @@ -0,0 +1,70 @@ +name: 🐞 Bug report +description: Create a bug report for GrapesJS MJML. +title: "BUG: " +labels: [] +body: + - type: markdown + attributes: + value: | + In order to understand and fix the issue, we ask you to fill correctly all the statements/questions. + **If you don't indicate a reproducible demo with relative steps to reproduce the bug, the issue might be CLOSED.** + Note: before creating a bug issue, search in GitHub Issues to check if a similar bug was already reported. + - type: checkboxes + attributes: + label: GrapesJS version + description: | + Ensure to use the latest version available [![npm](https://img.shields.io/npm/v/grapesjs.svg)](https://www.npmjs.com/package/grapesjs). + options: + - label: I confirm to use the latest version of GrapesJS + required: true + - type: checkboxes + attributes: + label: GrapesJS MJML version + description: | + Ensure to use the latest version available [![npm](https://img.shields.io/npm/v/grapesjs-mjml.svg)](https://www.npmjs.com/package/grapesjs-mjml). + options: + - label: I confirm to use the latest version of GrapesJS MJML + required: true + - type: input + attributes: + label: What browser are you using? + placeholder: ex. Chrome v91 + validations: + required: true + - type: input + attributes: + label: Reproducible demo link + description: | + Use one of these starter templates to create your demo: [JSFiddle](https://jsfiddle.net/szLp8h4n) - [CodeSandbox](https://codesandbox.io/s/1r0w2pk1vl). + validations: + required: true + - type: textarea + attributes: + label: Describe the bug + description: | + Indicate, step by step, how to reproduce the bug, what is the expected behavior and which is the current one. + If you're also able to create a video of the issue, that would be extremely helpful. + value: | + **How to reproduce the bug?** + 1. ... + 2. ... + + **What is the expected behavior?** + ... + + **What is the current behavior?** + ... + + If is necessary to execute some code in order to reproduce the bug, paste it here below: + ```js + // your code here + ``` + validations: + required: true + - type: checkboxes + attributes: + label: Code of Conduct + description: By submitting this issue, you agree to follow our [Code of Conduct](https://github.com/artf/grapesjs/blob/dev/CODE_OF_CONDUCT.md) + options: + - label: I agree to follow this project's Code of Conduct + required: true diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml new file mode 100644 index 0000000..daf3765 --- /dev/null +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -0,0 +1,11 @@ +blank_issues_enabled: false +contact_links: + - name: 🚀 Feature Request + url: https://github.com/GrapesJS/mjml/discussions/categories/ideas + about: "Suggest any ideas you have using our discussion forums." + - name: 🙏 Help + url: https://github.com/GrapesJS/mjml/discussions/categories/q-a + about: "If you have a question or need help, ask a question on the discussion forums." + - name: 📢 Show and tell + url: https://github.com/GrapesJS/mjml/discussions/categories/show-and-tell + about: "Have something nice to say or share about GrapesJS? We'd love to hear it!" diff --git a/README.md b/README.md index 23011c2..5cee922 100644 --- a/README.md +++ b/README.md @@ -8,8 +8,6 @@ This plugin enables the usage of [MJML](https://mjml.io/) components inside the [Demo](http://grapesjs.com/demo-mjml.html) -

GrapesJS

-
Supported MJML components (using default mjml-browser parser): `mj-mjml` diff --git a/src/components/Font.ts b/src/components/Font.ts index f551b53..4da72e6 100644 --- a/src/components/Font.ts +++ b/src/components/Font.ts @@ -13,7 +13,7 @@ export default (editor: Editor, { opt, coreMjmlModel, coreMjmlView, sandboxEl }: ...coreMjmlModel, defaults: { draggable: componentsToQuery(typeHead), - void: false + void: false, }, }, view: { @@ -38,19 +38,24 @@ export default (editor: Editor, { opt, coreMjmlModel, coreMjmlView, sandboxEl }: renderStyle() {}, + renderChildren() {}, + getTemplateFromMjml() { - let mjmlTmpl = this.getMjmlTemplate(); - let innerMjml = this.getInnerMjmlTemplate(); - const htmlOutput = mjmlConvert(opt.mjmlParser, `${mjmlTmpl.start} - ${innerMjml.start}${innerMjml.end}${mjmlTmpl.end}`, opt.fonts); + const mjmlTmpl = this.getMjmlTemplate(); + const innerMjml = this.getInnerMjmlTemplate(); + const htmlOutput = mjmlConvert( + opt.mjmlParser, + `${mjmlTmpl.start} + ${innerMjml.start}${innerMjml.end}${mjmlTmpl.end}`, + opt.fonts, + ); let html = htmlOutput.html; - let start = html.indexOf('') + 6; - let end = html.indexOf(''); + const start = html.indexOf('') + 6; + const end = html.indexOf(''); html = html.substring(start, end).trim(); sandboxEl.innerHTML = html; return this.getTemplateFromEl(sandboxEl); }, - } + }, }); - };