easy-email-extensions 4.8.0 → 4.9.0

package/lib/typings/mjml-browser.d.ts

@@ -0,0 +1,37 @@
+declare module 'mjml-browser' {
+    const transform: (vml: string, options?: {
+        beautify?: boolean;
+        minify?: boolean;
+        keepComments?: boolean;
+        validationLevel: 'strict' | 'soft' | 'skip';
+    }) => {
+        json: MjmlBlockItem;
+        html: string;
+        errors: string[];
+    };
+    export default transform;
+}
+interface MjmlBlockItem {
+    file: string;
+    absoluteFilePath: string;
+    line: number;
+    includedIn: any[];
+    tagName: string;
+    children: IChildrenItem[];
+    attributes: IAttributes;
+    content?: string;
+}
+interface IChildrenItem {
+    file?: string;
+    absoluteFilePath?: string;
+    line: number;
+    includedIn: any[];
+    tagName: string;
+    children?: IChildrenItem[];
+    attributes: IAttributes;
+    content?: string;
+    inline?: 'inline';
+}
+interface IAttributes {
+    [key: string]: any;
+}

package/lib/utils/MjmlToJson.d.ts

@@ -0,0 +1,5 @@
+import { IPage } from 'easy-email-core';
+export declare function MjmlToJson(data: MjmlBlockItem | string): IPage;
+export declare function getMetaDataFromMjml(data?: IChildrenItem): {
+    [key: string]: any;
+};

package/lib/utils/parseXMLtoBlock.d.ts

@@ -0,0 +1,2 @@
+import { IBlockData } from 'easy-email-core';
+export declare function parseXMLtoBlock(text: string): IBlockData<any, any>;

package/package.json

@@ -2,7 +2,7 @@
   "name": "easy-email-extensions",
   "license": "MIT",
   "description": "Email editor",
-  "version": "4.8.0",
+  "version": "4.9.0",
   "author": "m-Ryan",
   "repository": {
     "type": "git",
@@ -19,8 +19,9 @@
   "scripts": {
     "dev": "vite",
     "typings": "tsc --declaration --emitDeclarationOnly --project tsconfig.lib.json && tsc-alias -p tsconfig.alias.json",
-    "build": "rimraf lib && npm run typings   && vite build --config vite.config.ts",
-    "format": "eslint --fix  --ext .tsx,.ts,.tsx src/"
+    "build": "rimraf lib && npm run typings && vite build --config vite.config.ts",
+    "format": "eslint --fix  --ext .tsx,.ts,.tsx src/",
+    "test": "jest  --coverage"
   },
   "husky": {
     "hooks": {
@@ -33,13 +34,23 @@
     ]
   },
   "devDependencies": {
+    "@babel/core": "^7.15.0",
+    "@babel/preset-env": "^7.15.0",
+    "@babel/preset-react": "^7.14.5",
+    "@babel/preset-typescript": "^7.15.0",
+    "@types/color": "^3.0.3",
+    "@types/jest": "^26.0.24",
+    "@types/jsdom": "^16.2.13",
     "@types/lodash": "^4.14.178",
     "@types/node": "^16.11.7",
     "@types/react": "17.0.2",
+    "@types/react-color": "^3.0.6",
     "@types/react-dom": "^17.0.11",
+    "@types/uuid": "^8.3.4",
     "@typescript-eslint/eslint-plugin": "^4.28.3",
     "@typescript-eslint/parser": "^4.28.3",
     "@vitejs/plugin-react-refresh": "^1.3.6",
+    "babel-jest": "^27.0.6",
     "cross-env": "^7.0.3",
     "eslint": "^7.31.0",
     "eslint-config-prettier": "^8.3.0",
@@ -48,6 +59,8 @@
     "eslint-plugin-prettier": "^3.4.0",
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "jest": "^27.0.6",
+    "jsdom": "^17.0.0",
     "lerna": "^4.0.0",
     "less": "^4.1.2",
     "react": "^17.0.2",
@@ -55,6 +68,7 @@
     "react-final-form": "^6.5.7",
     "rollup-plugin-visualizer": "^5.5.2",
     "sass": "^1.43.4",
+    "ts-node": "^10.4.0",
     "tsc-alias": "^1.4.1",
     "typescript": "^4.4.4",
     "vite": "^2.6.14",
@@ -63,9 +77,6 @@
   },
   "dependencies": {
     "@arco-design/web-react": "^2.36.1",
-    "@types/color": "^3.0.3",
-    "@types/react-color": "^3.0.6",
-    "@types/uuid": "^8.3.4",
     "codemirror": "^5.63.3",
     "color": "^4.2.3",
     "final-form": "^4.20.4",
@@ -88,5 +99,5 @@
     "react-dom": "^17.0.2",
     "react-final-form": "^6.5.7"
   },
-  "gitHead": "053dfd2e8e31457f81fc17f2139b51245eef85c8"
+  "gitHead": "5966ec91c46efc1ccc630c79959de1243be3e2b5"
 }

package/readme.md

@@ -2,7 +2,10 @@
 
 ## Introduction
 
-Provide default UI components, when they don’t meet your needs, you can refer to it and write your own
+Provide default UI components, when they don’t meet your needs, you can refer to it and write your own.
+
+It also provides the following utils:
+- MjmlToJson
 
 ## usage
 
@@ -227,3 +230,116 @@ export default function App() {
     - compact
     - categories
     - showSourceCode
+
+## transform mjml to json
+
+```ts
+import { MjmlToJson } from 'easy-email-extensions';
+
+const json = MjmlToJson(`
+<mjml>
+  <mj-body>
+    <mj-hero mode="fluid-height" background-width="600px" background-height="469px" background-url="https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg" background-color="#2a3448" padding="100px 0px">
+      <mj-text padding="20px" color="#ffffff" font-family="Helvetica" align="center" font-size="45px" line-height="45px" font-weight="900">
+        GO TO SPACE
+      </mj-text>
+      <mj-button href="https://mjml.io/" align="center">
+        ORDER YOUR TICKET NOW
+      </mj-button>
+    </mj-hero>
+  </mj-body>
+</mjml>
+`);
+
+console.log(json);
+```
+
+// output
+
+```json
+{
+  "type": "page",
+  "data": {
+    "value": {
+      "breakpoint": "480px",
+      "headAttributes": "",
+      "font-size": "14px",
+      "line-height": "1.7",
+      "headStyles": [],
+      "fonts": [],
+      "responsive": true,
+      "font-family": "lucida Grande,Verdana,Microsoft YaHei",
+      "text-color": "#000000"
+    }
+  },
+  "attributes": {
+    "background-color": "#efeeea",
+    "width": "600px"
+  },
+  "children": [
+    {
+      "type": "hero",
+      "data": {
+        "value": {}
+      },
+      "attributes": {
+        "padding": "100px 0px 100px 0px",
+        "border": "none",
+        "direction": "ltr",
+        "text-align": "center",
+        "background-color": "#2a3448",
+        "background-position": "center center",
+        "mode": "fluid-height",
+        "vertical-align": "top",
+        "background-url": "https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg",
+        "background-width": "600px",
+        "background-height": "469px"
+      },
+      "children": [
+        {
+          "type": "text",
+          "data": {
+            "value": {
+              "content": "GO TO SPACE"
+            }
+          },
+          "attributes": {
+            "padding": "20px 20px 20px 20px",
+            "align": "center",
+            "color": "#ffffff",
+            "font-size": "45px",
+            "line-height": "45px",
+            "font-family": "Helvetica",
+            "font-weight": "900"
+          },
+          "children": []
+        },
+        {
+          "type": "button",
+          "data": {
+            "value": {
+              "content": "ORDER YOUR TICKET NOW"
+            }
+          },
+          "attributes": {
+            "align": "center",
+            "background-color": "#414141",
+            "color": "#ffffff",
+            "font-weight": "normal",
+            "border-radius": "3px",
+            "padding": "10px 25px 10px 25px",
+            "inner-padding": "10px 25px 10px 25px",
+            "line-height": "120%",
+            "target": "_blank",
+            "vertical-align": "middle",
+            "border": "none",
+            "text-align": "center",
+            "href": "https://mjml.io/"
+          },
+          "children": []
+        }
+      ]
+    }
+  ]
+}
+```