mjmlio / vscode-mjml Goto Github PK

Expected behavior

I ran the MJML: Template command expecting to be able to view and browse templates.

Actual behavior

The error popped up as soon as I selected the command.

Steps to reproduce the problem

1. ctrl+sift+p, select MJML: Template

Screenshot / GIF

Specifications

• VS Code version: 1.68.0
• MJML extension version: 1.0.5
• Operating system and version: Debian GNU/Linux 10 (buster) (Accessed from a windows 7 host through remote-ssh extension)

Hello.

I hope you are doing well. I am reaching out to inform you of a security matter. After cloning the repository, I have identified several vulnerabilities across multiple dependencies.

Please conduct a comprehensive review and updating the affected packages as soon as possible. Upgrading these dependencies will not only resolve the current vulnerabilities but will also enhance the overall security posture of the project.

Expected behavior

CSS inside <mj-style> can use < and > characters as expected, e.g.

<mj-style>
    .foo > a {
        color: black;
        content: "something with < or >";
    }
    /* smiley face :-< */

Actual behavior

• everytime I save/format when the css contains a > or <, the formatting breaks & does not indent (probably formats as text?)
• when I save/format when the css contains a <, additionally everything after that up to </mj-style> is formatted in a single line
• ... and on an the next format the <mj-style> is replaced by <style> (as in #25)

Steps to reproduce the problem

1. Copy the below code sample into VSCode
2. Run MJML: Beautify

Code sample

<mjml>
    <mj-head>
        <mj-style>
            p > a {
              color: #002435;
            }
        </mj-style>
        <mj-style>
            /* < */
        </mj-style>
    </mj-head>
</mjml>

Specifications

• VS Code version: VSCodium 1.72.1
• MJML extension version: v1.0.5
• Operating system and version: Fedora Linux x64 5.19.14-300.fc37.x86_64

Other information

Managed to work around the issue using:

<!-- beautify ignore:start -->
<mj-style>
  ...
</mj-style><!-- beautify ignore:end -->

Expected behavior

Install and activate the extension

Actual behavior

Try to activate the plugin, but the state is only:
"MJML needs to rebuilt for your current platform"

VSCode Extension Log:

2023-02-28 07:42:24.695 [error] TypeError: cb.apply is not a function
at /Users/gummipunkt/.vscode/extensions/attilabuti.vscode-mjml-1.6.0/node_modules/npm/node_modules/graceful-fs/polyfills.js:287:18
at FSReqCallback.oncomplete (node:fs:199:5)

At the moment, there is no way to customize the filePath setting for the linter. It would be great if there was a way to tell the linter about the custom filePath or to be able to pick up the setting from the config property in the .mjmlconfig file.

Before you open an issue, please check if a similar issue already exists or has been closed before.

Expected behavior

I can type <mj- and see a list of completed mj- tags

Actual behavior

No completions are provided

Steps to reproduce the problem

1. Type <mj-
2. Trigger completions

Code sample

<mj-

Screenshot / GIF

Specifications

• VS Code version: 1.55.0-insiders
• MJML extension version: 1.0.4
• Operating system and version: Win 10

Other information

List any other information that is relevant to your issue.

Expected behavior

Having the ability to preview any mjml file in webview

Actual behavior

The current active document is rendered into webview

The problem

If i use any templating language (EJS, Pug, Handlebars, etc.) i can not preview the document i am working on because their syntax is not supported by mjml. I have no ability to view changes live and i need to switch to the tab with the result of processing each time i want to check on the output.

Suggested solution

Use something like FileSystemWatcher to track changes made to templating language output and update webview accordingly, allowing to view live changes to mjml files generated by other tools.

• Issue Type: Performance
• Extension Name: vscode-mjml
• Extension Version: 1.0.5
• OS Version: Windows_NT x64 10.0.19044
• VS Code version: 1.70.2

Find more details here: https://github.com/microsoft/vscode/wiki/Explain-extension-causes-high-cpu-load
mjmlio.vscode-mjml-unresponsive.cpuprofile.txt

• Issue Type: Performance
• Extension Name: vscode-mjml
• Extension Version: 1.0.1
• OS Version: Windows_NT x64 10.0.19042
• VSCode version: 1.51.1

⚠️ Make sure to attach this file from your home-directory:
⚠️c:\Users\Jack\AppData\Local\Temp\mjmlio.vscode-mjml-unresponsive.cpuprofile.txt

Find more details here: https://github.com/microsoft/vscode/wiki/Explain-extension-causes-high-cpu-load

Right now, a tag like <mj-hero background-url="assets/email-leaf-bg.png"> won't show the image in the preview window. It would be great to be able to do this.

Description

When using "Format Document" (Shift+Alt+F) in VS Code, <style> tags under <mj-raw> will get converted to <mj-style> tags.

Code sample

<mjml>
  <mj-head>
    <mj-style>
    .main-outside { border: 1px solid red }
    </mj-style>
    <mj-raw>
      <!--[if mso]>
      <style>
      .main-outside { border: none !important }
      </style>
      <![endif]-->
    </mj-raw>
  </mj-head>
</mjml>

This gets Formatted as:

<mjml>
  <mj-head>
    <mj-style>
      .main-outside {
        border: 1px solid red
      }
    </mj-style>
    <mj-raw>
      <!--[if mso]>
      <mj-style>
      .main-outside { border: none !important }
      </mj-style>
      <![endif]-->
    </mj-raw>
  </mj-head>
</mjml>

Specifications

• VS Code version: 1.67.0
• MJML extension version: 1.0.5
• Operating system and version: Windows 10

It looks like this extension is forked and republished, but the changelog still shows the version numbers for the original extension which are no longer relevant for this one.

Hey there, do you mind publishing to open-vsx.org too?
See this article for reference.

1. Since this is forked, what has been added / changed?
2. Why is this version behind the original extensions version? That's somewhat confusing.

Not sure how to formulate this, so let's just state the facts:

• https://documentation.mjml.io/#tooling links to https://github.com/mjmlio/vscode-mjml and https://marketplace.visualstudio.com/items?itemName=mjmlio.vscode-mjml
• THIS repo in the about section links to https://marketplace.visualstudio.com/items?itemName=attilabuti.vscode-mjml
• in the README.md of this repo the links also go to attilabuti.vscode-mjml

I understand, that there seems to be some kind of legacy-takeover by @mjmlio for the plugin, but even searching in VSCode for mjml ends me up with the following:

People might (and have, I did) ignore this version based on installs.

It would be nice, if this repo, IF it is the one official source for the plugin could somehow remove any ambiguity to the "old" plugin, maybe somehow add a paragraph about how it came about to be (forked the original plugin, etc) and the old plugin somehow could be removed or deprecated (VSCode offers a system where the old plugin can set some parameters in package.json and users get nudged to upgrade.

If of course the old maintainer just disappeared this won't be possible. In that case this repo at least should loose all "official" looking links to the old repo with a legacy note instead of even in the about-section linking to the old repo.

I am sure there can be done a little bit more to make this distinctively "the" repo for the MJML VSCode plugin... I actually forked the old repo myself because I thought there is no more current version and recent updates were missing. Let's make this one the main-one?

mjmlio.vscode-mjml-unresponsive.cpuprofile.txt

• Issue Type: Performance
• Extension Name: vscode-mjml
• Extension Version: 1.0.1
• OS Version: Linux x64 5.4.0-42-generic
• VSCode version: 1.47.3

Find more details here: https://github.com/microsoft/vscode/wiki/Explain-extension-causes-high-cpu-load

It would be great if there was the ability to run MJML files through a pre- (or post-) processor before showing the HTML preview. That would allow data-binding template tags with custom data and would possible solve issues like: #23

Before you open an issue, please check if a similar issue already exists or has been closed before.

Expected behavior

Exported HTML code should not alter diactritic signs. Encoding is wrong.
Event if setting mjml.minifyHtmlOutput is set to false

Actual behavior

HTML Code export is not exploitable. I have to use mjml.app to copy/export code

Steps to reproduce the problem

1. Open mjml file
2. Export html or copy HTML command via VSCode
3. Paste the code in text editor

Code sample

<tr><td align="left" class="text dark-mode-text" style="font-size:0px;padding:0px 0px 54px 0px;word-break:break-word;"><div style="font-family:Trebuchet MS;font-size:30px;font-weight:400;letter-spacing:0px;line-height:35px;text-align:left;color:#ffffff;">Bien plus qu'un simple slogan, le c**√©l√®**bre ‚**Äú**Vorsprung durch Technik‚**Äù** <em>(L**‚Äô**avance par la technologie)</em> est l'expression d'un √©tat d'esprit. Entre innovation et progr√®s,<br>Audi n‚Äôa de cesse de r**√©**inventer la mobilit√© de demain.</div></td></tr>

Screenshot / GIF

• VS Code version: 1.69.2
• MJML extension version: 1.0.5
• Operating system and version: MacOS X 12.4 Monterey (Darwin x64 21.5.0)

Expected behavior

mj-group generated code should be automatically minified, by adding an option similar to "minify html output".

Actual behavior

mj-group generated code creates a bug on iOS' gmail. The only way to fix this is to minify the code.
To do so, you need to enable the "minify html output" option, however I don't need to minify the entire file, because there are some things to do on the html after the export, and minifying it makes the code really hard to edit for my colleagues.

Is it possible to add some feature to minify only the code genereted by the mj-group?

Actually I'm doing it "manually" (by using external services to copy/past in code to minify) and there's not a Visual Studio Code plugin that can minify only the selected code (the only one avaiable works only for css)

Thanks

Feature suggestion

An option to insert external css file or mjml code for development purpose

Use case

During development I use the design's image as <body>'s background to achieve near perfect result

Code sample

<mj-include path="../style.css" type="css" />

Other information

Another toggle to choose weather to insert the css file or code in preview, generated html or both

Expected behavior

After creating a custom component, MJML extension should register it and not show an error in templates.

Actual behavior

MJML is not picking up the custom component, and as a result shows errors in the template:

Not sure if this is relevant, but the extension seems to hang with this popup:

Steps to reproduce the problem

See repo here.

1. Clone, npm i
2. npm run build
3. Observe extension behaviour in snippets/index.html

Specifications

• VS Code version:
  Version: 1.70.0
  Commit: da76f93349a72022ca4670c1b84860304616aaa2
  Date: 2022-08-04T04:39:20.716Z
  Electron: 18.3.5
  Chromium: 100.0.4896.160
  Node.js: 16.13.2
  V8: 10.0.139.17-electron.0
• MJML extension version: 1.6.0
• Operating system and version: Darwin arm64 21.6.0

Before you open an issue, please check if a similar issue already exists or has been closed before.

Expected behavior

I expect that the detection of an MJML document would take into account includes.

Actual behavior

If the MJML tag is specified in an included template, the MJML isn't detected and preview window shows "Active editor doesn't show a MJML document".

Steps to reproduce the problem

1. Create header template with <mjml>
2. Create footer template with </mjml>
3. Create a main template with:

<mj-include path="./header.mjml" />

<mj-body>
  x
</mjbody>

<mj-include path="./footer.mjml" />

4. Look at preview window and despair

Screenshot / GIF

Specifications

• VS Code version: 1.68.1
• MJML extension version: 1.6.0

Comments

The following works fine but it just seemed like a bug to me that mjml being defined in the include wasn't checked for. To be fair, it is an edge case.

<mjml>
  <mj-include path="./header.mjml" />

  <mj-section>
    x
  </mj-section>

  <mj-include path="./footer.mjml" />
</mjml>

Update: the above does not render correctly either, just rendering the header and nothing more.

Expected behavior

Authoring a file in VSCode that uses the mj-social element should allow an icon-padding attribute to be used and considered valid by the linter and should show in MJML Preview mode

Actual behavior

Linter reports that Attribute icon-padding is illegal and the padding does not show up in the MJML Preview window.

Steps to reproduce the problem

1. Create an email in VSCode that uses mj-social tag
2. Set the icon-padding attribute to any valid value
3. Add mj-social-elements

Code sample

        <mj-social border-radius="30px" icon-padding="4px">
            <mj-social-element name="facebook-noshare" href="https://www.facebook.com/company/" />
            <mj-social-element name="twitter-noshare" href="https://twitter.com/company/" />
        </mj-social>

Specifications

• VS Code version: 1.48.2
• MJML extension version: 1.0.1
• Operating system and version: macOS 10.15.6

this was first reported in attilabuti#54

Before you open an issue, please check if a similar issue already exists or has been closed before.

Expected behavior

About section should link to new extension URL:
https://marketplace.visualstudio.com/items?itemName=mjmlio.vscode-mjml

Actual behavior

Points to outdated extension:
https://marketplace.visualstudio.com/items?itemName=attilabuti.vscode-mjml

About

MJML preview, lint, compile for Visual Studio Code.
[marketplace.visualstudio.com/items?ite](https://marketplace.visualstudio.com/items?itemName=attilabuti.vscode-mjml)

Other information

Can be a source of confusion for new users that install the old (most downloaded, and outdated) extension on VSCode.

I use EJS templating alongside MJML (and the same would apply for handlebars). For example I have files like my-template.mjml.ejs, and I render it in a pipeline like Render EJS -> Render MJML.

This is all works fine, but's it's quite a pain to work with actually building the templates in the IDE with the MJML plugin. I can assign the .mjml.ejs file type to the MJML language no problem, but this MJML plugin pukes all over the place with EJS (or Handlebars) templating syntax.

For example:

1. It highlights errors when using template variables in attributes e.g. <mj-button background-color="<%= _.colourPrimary %>" >...</mj-button> like "Attribute xyz has invalid format"
2. If there's any sort of control-flow (e.g. <% if (condition) { %><mj-text>...</mj-text><% } %>) in a non-end-tag element then it just pukes entirely and won't render anything past that point.

I realise the scope of templating support in this plugin could be huge, and also it is out-of-scope for MJML itself. But seeing as templating with MJML is a very common use-case, it would be a much better developer experience if the MJML rendering plugin had some sort of leniency/compatibility with it.

For example, as a minimal solution, it could just be "aware" of EJS and Handlebars tags and just ignore anything inside a /<%.*%>/ or /{{.*}}/ regex pattern. So that it least it can continue rendering.

Pretty new to MJML. Tried to install the extension into my VSCode. Install completed without any problems. Wrote a very simple "Hello World" template in VSCode. Then tried to preview it in VSCode. Result:
MJML couldn't build the proper version of PhantomJS. Restart VSCode in order to try it again.

So I restartet VSCode, but the error appeared again.

By default, Visual Studio Code defines the config file language to plain text. Is there any way to make it use the JSON language by default with .mjmlconfig files?

When attempting to take a screenshot of the file via Command Pallet (Ctrl-Shift-P), the above error pops up. No biggie as can take manual screen but looks like a bug.

Specifications

VS Code version: 1.51.1
Commit: e5a624b788d92b8d34d1392e4c4d9789406efe8f
Date: 2020-11-10T23:31:29.624Z
Electron: 9.3.3
Chrome: 83.0.4103.122
Node.js: 12.14.1
V8: 8.3.110.13-electron.0
OS: Linux x64 4.15.0-123-generic

• MJML extension version: 1.0.1
• Operating system and version: Linux x64 4.15.0-123-generic

Installed via extensions UI bog-standard way, little popup said it was updating mjml and completed without issue, everything else seems to work.

Expected behavior

The mj-html-attributes, mj-selector and mj-html-attribute elements added in MJML 4.7.0 should be recognized by the VsCode extension.

Actual behavior

Currently, all the elements mentioned above are not recognized as a valid element by the VsCode extension.

Steps to reproduce the problem

Try adding the code provided in the code section below in a MJML file with the VsCode extension.

Official documentation reference: https://documentation.mjml.io/#mj-html-attributes

Code sample

<mjml>
  <mj-head>
    <mj-html-attributes>
      <mj-selector path=".custom div">
        <mj-html-attribute name="data-id">42</mj-html-attribute>
      </mj-selector>
    </mj-html-attributes>
  </mj-head>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-text css-class="custom">
          Hello World!
        </mj-text>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

Screenshot / GIF

Please attach screenshot/gif if you consider them as helpful to understand/reproduce the issue.

Specifications

• VS Code version: 1.51.1
• MJML extension version: 1.0.1
• Operating system and version: Windows 10 Professional build 19041.264

Other information

There is already a PR to fix this by updating MJML to 4.7.0: #8

Is it possible to beautify on-save?

Before you open an issue, please check if a similar issue already exists or has been closed before.

Expected behavior

When I select MJML: Open Preview to the Side from the command palette I expect the current email template to open as a new preview pane in VS Code.

Actual behavior

Nothing is happening after I select the MJML: Open Preview to the Side option from the command palette.

Steps to reproduce the problem

1. Open an MJML file.
2. Open the command palette and select MJML: Open Preview to the Side
3. Observe that nothing happens.

Code sample

Please provide a code snippet.

Screenshot / GIF

Specifications

• VS Code version: 1.68.0 (Universal)
• MJML extension version: 4.10.1
• Operating system and version: macOS 12.4

Other information

I just installed the extension and I have not been able to use it successfully yet. I tried restarting VS Code and installing updates. 🤷

Before you open an issue, please check if a similar issue already exists or has been closed before.

Expected behavior

I can type <mj-text font-|and get completions for the attributes

Actual behavior

No completions are available :(

Steps to reproduce the problem

1. Type <mj-text font-|
2. Trigger completions

Code sample

<mj-text font-|

Screenshot / GIF

Specifications

• VS Code version: 1.55.0-insiders
• MJML extension version: 1.0.4
• Operating system and version: Win 10