Merge pull request #371 from GrapesJS/updates

Fix mj-font + issue template
GrapesJS · Aug 21, 2024 · 1452d9b · 1452d9b
2 parents a3f0cc2 + 24c0636
commit 1452d9b
Show file tree

Hide file tree

Showing 4 changed files with 95 additions and 11 deletions.
diff --git a/.github/ISSUE_TEMPLATE/1.bug_report.yml 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
@@ -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
@@ -8,8 +8,6 @@ This plugin enables the usage of [MJML](https://mjml.io/) components inside the
 
 
 [Demo](http://grapesjs.com/demo-mjml.html)
-<p align="center"><img src="http://grapesjs.com/img/grapesjs-mjml-demo.jpg" alt="GrapesJS" align="center"/></p>
-<br/>
 
 Supported MJML components (using default mjml-browser parser):
 `mj-mjml`

diff --git 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('<head>') + 6;
-        let end = html.indexOf('</head>');
+        const start = html.indexOf('<head>') + 6;
+        const end = html.indexOf('</head>');
         html = html.substring(start, end).trim();
         sandboxEl.innerHTML = html;
         return this.getTemplateFromEl(sandboxEl);
       },
-    }
+    },
   });
-
 };