Releasing 1.5.1

CHANGELOG.md

@@ -2,6 +2,10 @@
 All notable changes to the "mjml" extension will be documented in this file.
 This project adheres to [Semantic Versioning](https://semver.org/).
 
+### [1.5.1] (2018-10-03)
+* [#41](https://github.com/attilabuti/vscode-mjml/issues/41): fixed preview issue.
+* [#40](https://github.com/attilabuti/vscode-mjml/issues/40): fixed comment issue.
+
 ### [1.5.0] (2018-09-28)
 * [new] Configuration property `mjml.previewBackgroundColor`: preview background color ([#39](https://github.com/attilabuti/vscode-mjml/issues/39)).
 * [new] Configuration property `mjml.showSaveDialog`: show the save as dialog instead of input box.

README.md

@@ -159,6 +159,10 @@ Please see the [Nodemailer](https://nodemailer.com) documentation for more infor
 
 ## Change Log
 
+### [1.5.1] (2018-10-03)
+* [#41](https://github.com/attilabuti/vscode-mjml/issues/41): fixed preview issue.
+* [#40](https://github.com/attilabuti/vscode-mjml/issues/40): fixed comment issue.
+
 ### [1.5.0] (2018-09-28)
 * [new] Configuration property `mjml.previewBackgroundColor`: preview background color ([#39](https://github.com/attilabuti/vscode-mjml/issues/39)).
 * [new] Configuration property `mjml.showSaveDialog`: show the save as dialog instead of input box.

documentation/build.ts

@@ -232,7 +232,7 @@ async function tryItLive(html: string): Promise<string> {
         if (tryItLive.indexOf(match[2]) == -1) {
             let response = await fetch(match[1]);
 
-            let mjmlMatch = /"value":*?["']([\s\S]*?)["']*?}/gi.exec(await response.text());
+            let mjmlMatch: RegExpExecArray = /"value":*?["']([\s\S]*?)["']*?"}/gi.exec(await response.text());
 
             mjmlMatch[1].replace(/\\"/g, "\"").replace(/src="\/(assets\/img)\/(.*?)"/gi, "src=\"https://mjml.io/assets/img/$2\"").split("\\n").forEach((line) => {
                 fs.appendFileSync(`./examples/${fileName}.mjml`, line.replace(/\\/g, "").toString() + "\n");

language-configuration.json

@@ -1,30 +1,33 @@
 {
     "comments": {
-        // symbol used for single line comment. Remove this entry if your language does not support line comments
-        "lineComment": "//",
-        // symbols used for start and end a block comment. Remove this entry if your language does not support block comments
-        "blockComment": [ "/*", "*/" ]
+        "blockComment": [ "<!--", "-->" ]
     },
-    // symbols used as brackets
     "brackets": [
+        ["<!--", "-->"],
+        ["<", ">"],
         ["{", "}"],
-        ["[", "]"],
         ["(", ")"]
     ],
-    // symbols that are auto closed when typing
     "autoClosingPairs": [
-        ["{", "}"],
-        ["[", "]"],
-        ["(", ")"],
-        ["\"", "\""],
-        ["'", "'"]
+        { "open": "{", "close": "}"},
+        { "open": "[", "close": "]"},
+        { "open": "(", "close": ")" },
+        { "open": "'", "close": "'" },
+        { "open": "\"", "close": "\"" },
+        { "open": "<!--", "close": "-->", "notIn": [ "comment", "string" ]}
     ],
-    // symbols that that can be used to surround a selection
     "surroundingPairs": [
-        ["{", "}"],
-        ["[", "]"],
-        ["(", ")"],
-        ["\"", "\""],
-        ["'", "'"]
-    ]
+        { "open": "'", "close": "'" },
+        { "open": "\"", "close": "\"" },
+        { "open": "{", "close": "}"},
+        { "open": "[", "close": "]"},
+        { "open": "(", "close": ")" },
+        { "open": "<", "close": ">" }
+    ],
+    "folding": {
+        "markers": {
+            "start": "^\\s*<!--\\s*#region\\b.*-->",
+            "end": "^\\s*<!--\\s*#endregion\\b.*-->"
+        }
+    }
 }

package.json

@@ -2,7 +2,7 @@
     "name": "vscode-mjml",
     "displayName": "MJML",
     "description": "MJML preview, lint, compile for Visual Studio Code.",
-    "version": "1.5.0",
+    "version": "1.5.1",
     "publisher": "attilabuti",
     "license": "MIT",
     "readme": "README.md",
@@ -189,7 +189,8 @@
                 }
             }
         },
-        "commands": [{
+        "commands": [
+            {
                 "command": "mjml.previewToSide",
                 "title": "Open Preview to the Side",
                 "category": "MJML",
@@ -249,37 +250,47 @@
                 "category": "MJML"
             }
         ],
-        "languages": [{
-            "id": "mjml",
-            "extensions": [
-                ".mjml"
-            ],
-            "aliases": [
-                "MJML",
-                "mjml"
-            ],
-            "configuration": "./language-configuration.json"
-        }],
-        "grammars": [{
-            "language": "mjml",
-            "scopeName": "text.mjml.basic",
-            "path": "./syntaxes/MJML.tmLanguage"
-        }],
-        "snippets": [{
-            "language": "mjml",
-            "path": "./snippets/mjml.json"
-        }],
+        "languages": [
+            {
+                "id": "mjml",
+                "extensions": [
+                    ".mjml"
+                ],
+                "aliases": [
+                    "MJML",
+                    "mjml"
+                ],
+                "configuration": "./language-configuration.json"
+            }
+        ],
+        "grammars": [
+            {
+                "language": "mjml",
+                "scopeName": "text.mjml.basic",
+                "path": "./syntaxes/MJML.tmLanguage"
+            }
+        ],
+        "snippets": [
+            {
+                "language": "mjml",
+                "path": "./snippets/mjml.json"
+            }
+        ],
         "menus": {
-            "editor/title": [{
-                "when": "editorLangId == mjml",
-                "command": "mjml.previewToSide",
-                "group": "navigation"
-            }],
-            "editor/context": [{
-                "when": "editorLangId == mjml",
-                "command": "mjml.searchInDocumentation",
-                "group": "mjml"
-            }]
+            "editor/title": [
+                {
+                    "when": "editorLangId == mjml",
+                    "command": "mjml.previewToSide",
+                    "group": "navigation"
+                }
+            ],
+            "editor/context": [
+                {
+                    "when": "editorLangId == mjml",
+                    "command": "mjml.searchInDocumentation",
+                    "group": "mjml"
+                }
+            ]
         }
     },
     "scripts": {
@@ -295,7 +306,7 @@
         "@types/mime": "^2.0.0",
         "@types/node": "*",
         "@types/nodemailer": "^4.6.5",
-        "typescript": "^3.0.3",
+        "typescript": "^3.1.1",
         "vscode": "^1.1.18",
         "@types/npm": "^2.0.29",
         "markdown-it": "^8.4.2",
@@ -305,14 +316,13 @@
     "dependencies": {
         "ab-webshot": "^1.0.0",
         "copy-paste": "^1.3.0",
-        "file-url": "^2.0.2",
         "is-url": "^1.2.4",
         "js-beautify": "^1.8.6",
         "mime": "^2.3.1",
         "mjml": "^4.1.2",
         "node-fetch": "2.2.0",
-        "node-mailjet": "^3.2.1",
+        "node-mailjet": "^3.3.0",
         "nodemailer": "^4.6.8",
-        "npm": "^6.2.0"
+        "npm": "^6.4.1"
     }
-}
+}

src/helper.ts

@@ -2,9 +2,10 @@
 
 import * as vscode from "vscode";
 import * as path from "path";
+import * as fs from "fs";
 
 import * as beautifyJS from "js-beautify";
-import fileUrl = require("file-url");
+import * as mime from "mime";
 import mjml2html = require("mjml");
 
 export default class Helper {
@@ -65,11 +66,27 @@ export default class Helper {
         }
     }
 
+    static encodeImage(filePath: string, original: string): string {
+        let mimeType: string = mime.getType(filePath);
+        if (!mimeType || ["bmp", "gif", "jpeg", "jpg", "png", "svg"].indexOf(mime.getExtension(mimeType)) == -1) {
+            return original;
+        }
+
+        if (filePath && fs.existsSync(filePath) && fs.statSync(filePath).isFile()) {
+            let data: Buffer = fs.readFileSync(filePath);
+            if (data) {
+                return `data:${mimeType};base64,${data.toString("base64")}`;
+            }
+        }
+
+        return original;
+    }
+
     static fixLinks(text: string, mjmlPath?: string): string {
         return text.replace(
             new RegExp(/((?:src|href|url)(?:=|\()(?:[\'\"]|))((?!http|\\|"|#).+?)([\'\"]|\))/, "gmi"),
             (subString: string, p1: string, p2: string, p3: string): string => {
-                return [p1, fileUrl(path.join(path.dirname(((mjmlPath) ? mjmlPath : this.getPath())), p2)), p3].join("");
+                return [p1, this.encodeImage(path.join(path.dirname(((mjmlPath) ? mjmlPath : this.getPath())), p2), p2), p3].join("");
             }
         );
     }