Expected behavior

Should preview the select file

Actual behavior

Previews the file where I have last edited something (even when I just insert a single space)

Steps to reproduce the problem

1. Open a file to includes another
2. Preview this file
3. Open the included and edit it

Code sample

Please provide a code snippet.

Screenshot / GIF

https://giphy.com/gifs/1o1irl0FE1KYwrd3vS/html5

Specifications

• VS Code version: latest
• MJML extension version: latest
• Operating system and version: macOS 10.14.1

Other information

List any other information that is relevant to your issue.

Thanks for the wonderfull work.

Is it possible to add a command like "MJML: version" to know which version we are working on?
It would be awesome :)

It would be nice if there was the possibility of adding other extensions to the html. For example, export to namefile.html.hbs. The markup would always remain html but with an additional extension so that it can also be used within frameworks.

Hi, first of all, great plugin! 👍 The only thing I think were this could improve is when allowing the beautifying is when the mj-style is used.

Currently it formats every class and styling on one line which is not handy to work with. The wanted behavior should be like how it beautifies CSS.

What do you think?

Just installed a new machine (macOS - 1.13.4) with vscode (1.23.1) with the mjml extension (1.3.0) which basically results in the following:

MJML couldn't build the propper version of PhantomJS. Restart VSCode in order to try it again.

Followed by:

MJML needs to be rebuilt for your current platform. Please wait for the installation to finish...

As its mentioned that there are no dependencies I wonder whats missing here?

Pertains to latest version: 1.4

Linter is displaying error "Attribute line-height has invalid value: 1.2 for type Unit, only accepts (px, %) units and 1 value(s)" when error does not exist.

Sample occurrence: a line that has commented code i.e. having error message displayed. Sample occurrence has nothing to do an attribute of line-height.

When commented code is deleted and following line moved up, error is then displayed for that line, even though following line does not have line-height as an eligible attribute.

<mjml> <mj-head> <mj-breakpoint width="600px" /> <mj-preview></mj-preview> <!--styles--> (error displayed on this line) <mj-include path="../../components/styles.mjml" /> <!--fonts--> <mj-include path="../../components/fonts.mjml" /> <mj-attributes> <!--attributes--> <mj-include path="../../components/attributes.mjml" /> </mj-attributes> </mj-head> <mj-body>

Is it possible to have html support in mjml file? Like html tags highlighting or creating <div></div> by having just div written and pressing tab like in html files? I tried

"files.associations": {
  "*.mjml": "html"
}

but then this plugin doesn't work anymore.

Hi Attila,

When I use the Preview extension, the images are missing. I can take a screenshot without changing anything and see the images. I can also open the html in my browser and see the images. Is there a setting I need to change?

Hi, first of all, thanks for the awesome package :)

So, when i have the preview to the side opened it freezes often and I have to close and reopen the project to un-freeze it.

I've observed that this happens usually when changing the src property of <mj-image> tags and when some syntax errors are detected. Sometimes it fixes by waiting 1 or 2 minutes, but opening and closing the project works every time.

Specifications

• VS Code version: 1.29.1
• MJML extension version: 1.6.0
• Operating system and version: macOS Mojave 10.14.1

when using
"mjml.minifyHtmlOutput": true
it is screwing up the rendering of email in outlook 2000, 2002 and 2003. I think this issue is actually with MJML, but it might be worth setting the default to false until this is resolved.

Hello,

when I use the MJML: beautify Command on my file the whole file content gets removed.
Haven't had this issue when I used the extension about two months ago.

I'm trying to find some debug output to provide more information, but can't find any.
When I change the language type of the file to html the formatting works just fine.

Any ideas? Maybe some misconfiguration in my settings?

My Environment:

• Windows 10
• Visual Studio Code 1.19.1
• mjml installed globally

Update:
Seems like its working partially, attaching the screenshot of markup.

Improper nesting of section is marked but ending tag for body & mjml not marked

The really good extension, but 2 problems

1- linter <mg-include> and <mj-social> have errors
<mg-include>: when I use it inside mg-body or container error occurs while it's not really an error
<mj-social>: when I use custom social networks like my-awesome-network error occurs while its working well in output html

2- I don't know why but code colors don't appear / it treats my code as plain text

Hi,

How do you send email? I tried to set the email and password but it still gets an error. No particular error message, just "Something went wrong"

Expected behavior

When you export the MJML from VSC, special characters, such as an m-dash "—", should display properly.

Actual behavior

When the HTML is copied, it is converting the m-dash to —. Other symbols have been getting converted to gibberish as well.

Originally, VSC was in windows 1252 so I thought that the encoding was the problem but it is still persisting even after I have converted to UTF-8.

If I export copy the HTML from the exact same file via the MJML desktop app, then all the HTML is good and symbols display correctly.

Update: Exporting now works. Must have been an issue with exporting in Windows 1252. Copying the HTML is still not working.

Steps to reproduce the problem

1. Write MJML in VSC as normal and use special characters, like m-dashes (not the — but using the actual "—" character)
2. Copy the code
   
3. Paste the HTML into ESP or editor and the symbols will be encoded differently.

Code sample

<mj-text padding-top="0">
    <p>This is some content about nothing—but it is about something.</p>
</mj-text>

Specifications

• VS Code version: 1.29.1
• MJML extension version: 1.6.0
• Operating system and version: macOS Mojave v10.14

Other information

Not sure if there is a setting in VSC to address this or if it is an issue with the way the HTML is being compiled but I've tried updating all the encoding settings I can find to make sure UTF-8 is used but can't figure out why the MJML desktop apps works and VSC doesn't. My only thought is there is an encoding issue when the HTML is compiled.

Are classes expected to work in vscode-mjml?

I've tried adding class definitions to mjml-attributes https://mjml.io/documentation/#mjml-attributes
and also to mjml-style https://mjml.io/documentation/#mjml-style
but I don't see these changes showing up in the VS Code preview or to the html that is output

This seems not to work when an email broken up with includes? Works fine when i manually bring it all together. am i missing a setting or function i need to perform first? tnx

Before this version everything worked fine, I went through hoops to install older version (1.2.0) which confirmed newer version was the problem, the same code works fine on official MJML app and via mjml node v4.0.3

mjml extension: 0.0.9
vscode:
Version 1.17.2
Commit b813d12980308015bcd2b3a2f6efa5c810c33ba5
Date 2017-10-16T13:57:00.652Z
Shell 1.7.7
Renderer 58.0.3029.110
Node 7.9.0
Architecture x64

OS: Linux

When I open a.mjml and preview it, everything is ok, then I open file b.mjml and when I preview it, the extension still shows a.mjml content

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

Expected behavior

Follow custom component tutorial per https://medium.com/mjml-making-responsive-email-easy/tutorial-creating-your-own-component-with-mjml-4-1c0e84e97b36

Load index.mjml

Expect custom components work in vscode with mjml plug-in

FYI. I'm fine if there is a registration step to get this to work. Ideally, it shouldn't be necessary to rebuild and reinstall the plug-in.

Actual behavior

mj-basic-component, mj-image-text and mj-layout all report errors.

Screenshot / GIF

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

Specifications

• VS Code version: 1.30.2
• MJML extension version: 4.2.0
• Operating system and version: Mac OS

I'm trying to develop some components to use with MJML.

I've tried cloning the following example project: https://github.com/mjmlio/mjml-component-boilerplate

When following the instructions, the custom component will not render in the extension preview, nor is it rendered with the HTML which is generated with this extension.

It is rendered in the HTML generated by the Gulp-script in that project though.

Does this extension inspect the .mjmlconfig which defines the component? Or is it some other issue?

From VSCode:

Do you think about implementation of snippets, like a MJML Sublime Snippets?

VS Code doesn't seem to be picking up the right block comments for MJML code. It is applying the default /* */.

Awesome extension, thanks so much for you work!

I'm not sure if it is related to #2, but using 0.0.6 I'm getting the following error using <mj-include>:

It's only a syntax error inside VSCode though, the included file is still rendering inside Preview & exported as HTML.

When using a <mj-include path="templates/shared/header.mjml" /> tag, I get a linting warning.

The preview also fail to show the included content, without errors or warnings.

When running the template through the CLI (and through the mjml2html JS module), the output is generated as expected and without warnings.

I'm using version 0.0.9 of the extension, and version 1.18.1 of VS Code on Windows.

Updated to the lastest version of vscode 1.14.0 and now MJML doesn't work anymore. It won't detect mjml files and it isn't doing any syntax highlighting.

All of the other options simply do nothing.

Hey @attilabuti,

First off thanks for such an incredible extension, only just started working with mjml and your extension makes the developer experience unreal!!

I'm trying to render my mjml templates to .hbs files for handlebars but unfortunately the loops opening and closing tags are getting stripped out. For example...

{#each posts}
  <mj-section>
    <mj-column width="75%">
      <mj-text>
        <h3><a href="{link}">{title}</a></h3>
        {{excerpt}}
      </mj-text>
    </mj-column>
    <mj-column width="25%">
      <mj-image width="100px" href="{link}" src="{imageUrl}"></mj-image>
    </mj-column>
  </mj-section>
{/each}

{#each posts} and {/each} at the end get removed from the compiled markup but the other template tags in the middle render correctly.

Any ideas on how to fix it?

Thanks

Hi Attila!

Quick question - when I use the Command + / shortcut to comment a line or selection, it is currently only putting // at the start of the line, instead of using HTML comment syntax <!-- -->. Is this standard/expected behaviour, or do I possibly have something configured wrong in my VS Code settings?

Is there a simple way to upgrade the MJML support behind the extension? I would like to use a change in 4.2.1 that is causing linting errors in this version.

Super grateful for your work on this extension, as it brings better MJML functionality to my favorite editor.

Not sure if this is a feature request or a bug, but .mjml files imported using <mj-include> do not render in the preview window, nor are they included when exporting to HTML.

Trying to componentize my templates, but swapping out my preheader and header/nav sections with

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

results in a preview without either. Exporting to HTML does not include them either, they're just skipped. The linter doesn't recognize mj-include elements. Putting the includes in the same folder or a subfolder, including or omitting the file extension, makes no difference.

This functionality works in the MJML desktop app v2.4.0 running MJML v3.3.3

I am running extension v0.0.2 and VS code 1.13.1 on Windows 10 Creators Update.

Hi,
The preview don't work , with mjml file i have no message to this code :





Hello World!

with the html file i have the message "Active editor doesn't show a MJML document."

Is it possible to create multiple screenshots in different with different (preconfigured) width at once?

Hi,
when will there be support for MJML 4 version? 😄

I installed the extension in VSCode 1.14.2.

Lots works... red squiggly line linting works.

The screenshot and live preview works.

But there's no syntax highlighting, everything is just plain text.

I disabled all other extensions except this one, didn't help.

If I take the following markup

<mjml>
  <mj-body>
    <mj-section>
      <mj-column>
        <mj-table>
          <thead>
            <tr style="border-bottom:1px solid #ecedee;text-align:left;padding:15px 0;">
              <th style="padding: 0 15px 0 0;">Year</th>
              <th style="padding: 0 15px;">Language</th>
              <th style="padding: 0 0 0 15px;">Inspired from</th>
            </tr>
          </thead>
          <tfoot>
            <tr>
              <td style="padding: 0 15px 0 0;">1995</td>
              <td style="padding: 0 15px;">PHP</td>
              <td style="padding: 0 0 0 15px;">C, Shell Unix</td>
            </tr>
          </tfoot>
          <tbody>
            <tr>
              <td style="padding: 0 15px 0 0;">1995</td>
              <td style="padding: 0 15px;">JavaScript</td>
              <td style="padding: 0 0 0 15px;">Scheme, Self</td>
            </tr>
          </tbody>
        </mj-table>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

mjml.io translates this to HTML differently than this plugin.

Using mjml.io, I get

<table 0="[object Object]" 1="[object Object]" 2="[object Object]" border="0" style="cellspacing:0;color:#000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:auto;width:100%;">
        <thead>
            <tr style="border-bottom:1px solid #ecedee;text-align:left;padding:15px 0;">
              <th style="padding: 0 15px 0 0;">Year</th>
              <th style="padding: 0 15px;">Language</th>
              <th style="padding: 0 0 0 15px;">Inspired from</th>
            </tr>
          </thead>
          <tfoot>
            <tr>
              <td style="padding: 0 15px 0 0;">1995</td>
              <td style="padding: 0 15px;">PHP</td>
              <td style="padding: 0 0 0 15px;">C, Shell Unix</td>
            </tr>
          </tfoot>
          <tbody>
            <tr>
              <td style="padding: 0 15px 0 0;">1995</td>
              <td style="padding: 0 15px;">JavaScript</td>
              <td style="padding: 0 0 0 15px;">Scheme, Self</td>
            </tr>
          </tbody>
      </table>

Using vscode-mjml, I get

<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;">
  <tbody>
    <tr>
      <td style="direction:ltr;font-size:0px;padding:20px 0;text-align:center;vertical-align:top;">
        <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:600px;" ><![endif]-->
        <div class="mj-column-per-100 outlook-group-fix" style="font-size:13px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;">
          <table border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%">
            <tr>
              <td align="left" style="font-size:0px;padding:10px 25px;word-break:break-word;">
                <table cellpadding="0" cellspacing="0" width="100%" border="0" style="cellspacing:0;color:#000000;font-family:Ubuntu, Helvetica, Arial, sans-serif;font-size:13px;line-height:22px;table-layout:auto;width:100%;">
                  <thead>
                    <tr style="border-bottom:1px solid #ecedee;text-align:left;padding:15px 0;">
                      <th style="padding: 0 15px 0 0;">Year</th>
                      <th style="padding: 0 15px;">Language</th>
                      <th style="padding: 0 0 0 15px;">Inspired from</th>
                    </tr>
                  </thead>
                </table>
              </td>
            </tr>
          </table>
        </div>
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td style="padding: 0 15px 0 0;">1995</td>
      <td style="padding: 0 15px;">PHP</td>
      <td style="padding: 0 0 0 15px;">C, Shell Unix</td>
    </tr>
  </tfoot>
  <tr>
    <td style="padding: 0 15px 0 0;">1995</td>
    <td style="padding: 0 15px;">JavaScript</td>
    <td style="padding: 0 0 0 15px;">Scheme, Self</td>
  </tr>
</table>

Notice that the tbody tag disappears from the last element. But more importantly, the thead wraps itself inside of two table elements.

When running beautify, my styles.mjml file include in the head is replace with mj-styles.mjml

Before beautify:

<mjml> <mj-head> <mj-breakpoint width="600px" /> <mj-preview></mj-preview> **<!--styles--> <mj-include path="../../components/styles.mjml" />** <!--fonts--> <mj-include path="../../components/fonts.mjml" /> <mj-attributes> <!--attributes--> <mj-include path="../../components/attributes.mjml" /> </mj-attributes> </mj-head>

After beautify:

<mjml> <mj-head> <mj-breakpoint width="600px" /> <mj-preview></mj-preview> **<!--mj-styles--> <mj-include path="../../components/mj-styles.mjml" />** <!--fonts--> <mj-include path="../../components/fonts.mjml" /> <mj-attributes> <!--attributes--> <mj-include path="../../components/attributes.mjml" /> </mj-attributes> </mj-head>

Editor is saying the attribute "container-background-color" is illegal for mj-social-element when it should be supported.

Hi,

I updated to latest VS Code and now when running the preview I get 'Running the contributed command:'mjml.previewToSide' failed', and the export html is working intermittently?

In order for the plugin to register a document as mjml, the language mode must match. This doesn't let me tweak the file associations to use built in beautification tools because it needs to recognize html. I'm looking to format the source, not the output.

Is there a workaround for this?

Hi Attila!

If I have multiple MJML files in my VS Code project, and I switch between them, the preview window will only show the preview for the first document it was opened for. It also won't update to show the preview for subsequent documents, even if I re-run the "Preview to Side" command. The only workaround seems to be closing the preview window, and running the preview command again on the other document.

Is it possible to update the preview window after switching documents to show the current active document, similar to the way the MJML desktop app functions?

Thanks!

I often use the <mj-attributes> tag to set common styles for things like text size & color, buttons, etc.

If I have the MJML preview pane open, it works fine and updates live as long as I'm editing within the <mj-body> tag. But as soon as I edit anything inside of the <mj-attributes> tag, the preview stops updating and my CPU usage spikes to 100%. The only way to get it to work again is to quit and relaunch VS Code (if I simply close the preview pane without quitting VS Code, it won't reopen again).

I know that the code changes I'm making within the <mj-attributes> tag are valid MJML, because they'll appear in the preview after I quit and relaunch VS Code. So it's not tripping up on invalid syntax or something like that.

I'm running:

• VS Code 1.28.2
• vscode-mjml 1.5.1
• macOS 10.14

This happened to me on earlier versions of VS Code and macOS as well, but I didn't figure out that it was the <mj-attributes> in particular that was causing the issue until now.

Great plugin, thanks!

I'd like to see one feature: I do use includes to structure my mjml files, and more often than not, they don't preview well or at all. No surprise.

What I would like to do is lock the preview to a master-file (which has the ), and then go and edit the include-file. And watch the effects of changes in the include-file on the master-file.

As it works now, I go the the include, make changes, go back to the master, see what my changes did, go back to the include ...

Thanks for considering such a feature. I can live without, or find a different workflow, but that would add a level of comfort.

Everything worked like a charm, but a few minutes ago, I guess when it updated to 0.0.8, exporting and previewing fails.

when trying to export I get the error:
"MJMLError: Failed to parse file test.mjml"

when previewing:
"Active editor doesn't show a MJML document."

Tried re-installing the extension, and waited for the "rebuild finished" confirmation, then restarted VSCode.

My vscode validate mjml check mj-onclude is not support ???

http://prntscr.com/hywz2z

Hi,

I'm having a slight issue with when images are in mj-table they don't render in the Preview panel, but the links are correct and show when viewing the compiled HTML directly?

Hi,

I am a developer on VSCode and wanted to reach out to inform you that this extension is either using or having a dependency to a node module "natives" that will soon no longer be supported in VSCode once we updated to node.js 8.x (as part of our Electron 2.0 update which is planned for the near term).

The full graph is:

└─┬ [email protected]
  └─┬ [email protected]
    └── [email protected] 

It would be great if this dependency could be avoided by either not depending on it anymore or updating the dependencies to newer versions so that this module is no longer pulled in.

As soon as any code in your extension (including node_modules) calls require("natives") we will throw an exception to prevent this module from getting loaded.

More details in microsoft/vscode#47569

Thanks!
Ben
VSCode Team

Side preview won't update when typing. Using default settings (on the extension package.json file mjml.updateWhenTyping is set to true).

Am I missing something? Great extension, thanks!

Extension version: [0.0.4] (2017-05-21)
OS: macOS 10.12.5
Visual Studio Code 1.13.1

Issue appears in version 1.6.0.

When exporting MJML to HTML that uses navbar, nav icons generated are incomplete HTML decimal code.

Where the hamburger icon was formerly generated, incomplete HTML decimal is generated: 9776.

Where the close icon was formerly generated, incomplete HTML decimal is generated: 8855.

After updating to version 1.6.0 I have problems with the Screenshots.

E.g. the following template will result in a complete gray screenshot (default width is 650px):

<mjml>
  <mj-body background-color="gray">
    <mj-section>
      <mj-column>
        <mj-table>
          <tr>
            <td>&bull;</td>
            <td>Test - 1</td>
          </tr>
          <tr>
            <td>&bull;</td>
            <td>Test - 2</td>
          </tr>
        </mj-table>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

When doing a multipel screenshot with 320/650/1024 only the 320er screenshot is empty. The 650 and 1024 screenshot contains data:

Any idea what could be wrong here?

When I activate the preview pane, it has the same background color as the main VS Code. Is there a way to change this? In all product shots it looks white but I just installed it and it looks with the same gray background as Code