{"_id":"@duongtruongan/easy-email-core","_rev":"4-6f01f4e44c32e530c058359d9163f987","time":{"created":"2023-12-12T09:04:23.057Z","4.12.2":"2023-12-12T07:31:31.868Z","modified":"2023-12-12T10:07:26.945Z","4.7.0":"2023-12-12T09:04:23.391Z","4.7.1":"2023-12-12T10:07:26.776Z"},"name":"@duongtruongan/easy-email-core","dist-tags":{"latest":"4.7.1"},"versions":{"4.7.0":{"name":"@duongtruongan/easy-email-core","license":"MIT","description":"Email editor","version":"4.7.0","author":{"name":"m-Ryan"},"repository":{"type":"git","url":"git+ssh://git@github.com/m-Ryan/easy-email.git"},"keywords":["email editor core"],"main":"lib/index.cjs.js","module":"lib/index.es.js","types":"lib/index.d.ts","scripts":{"dev":"yarn build --watch","typings":"tsc --declaration --emitDeclarationOnly --project tsconfig.lib.json","build":"rimraf lib  && npm run typings && tsc-alias  && vite build --config vite.config.ts","block":"ts-node -r tsconfig-paths/register scripts/generateBlockJSX.ts","format":"eslint --fix  --ext .tsx,.ts,.tsx src/","test":"jest  --coverage"},"husky":{"hooks":{"pre-commit":"yarn test && yarn lint-staged"}},"lint-staged":{"src/*.{js,jsx,ts,tsx}, example/*.{js,jsx,ts,tsx}":["yarn lint"]},"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/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-dom":"^17.0.11","@typescript-eslint/eslint-plugin":"^4.28.3","@typescript-eslint/parser":"^4.28.3","babel-jest":"^27.0.6","eslint":"^7.31.0","eslint-config-prettier":"^8.3.0","eslint-loader":"^4.0.2","eslint-plugin-import":"^2.23.4","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","liquidjs":"^9.40.0","mjml-browser":"^4.10.4","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","ts-node":"^10.4.0","tsc-alias":"^1.4.1","tsconfig-paths":"^3.11.0","vite":"^2.5.6"},"dependencies":{"@types/js-beautify":"^1.13.3","@types/uuid":"^8.3.4","js-beautify":"^1.14.4","lodash":"^4.17.21","nanoid":"^3.3.1","typescript":"^4.4.4","uuid":"^8.3.2"},"peerDependencies":{"mjml-browser":"^4.10.4","react":"^17.0.2","react-dom":"^17.0.2"},"gitHead":"f6cf54160ffdba0d4d6b23483293dd9190d2d2c2","publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/m-Ryan/easy-email/issues"},"homepage":"https://github.com/m-Ryan/easy-email#readme","_id":"@duongtruongan/easy-email-core@4.7.0","_nodeVersion":"16.20.2","_npmVersion":"8.19.4","dist":{"integrity":"sha512-DdVy3Dq4yChVTBTd1IefoZRsJl1bbDenWWAKHY1SIjDek1SJTX5GjqQEpgqzNWazo+yU4POSIzVxGP+CqZyTgQ==","shasum":"75ba53625a36251050b92c5e6c6a58727eb18533","tarball":"https://registry.npmjs.org/@duongtruongan/easy-email-core/-/easy-email-core-4.7.0.tgz","fileCount":87,"unpackedSize":1329696,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCd4KJD10ZEqSo4nx4zg/NgW/zVRD/dbb/5zPeYLDDocAIgAv/gDkqi7nx8GTLadtdN9NdINrCUEoLUVXpgDRRPt6E="}]},"_npmUser":{"name":"duongtruongan","email":"duongtruongan@outlook.com"},"directories":{},"maintainers":[{"name":"duongtruongan","email":"duongtruongan@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/easy-email-core_4.7.0_1702371863157_0.8990066358642377"},"_hasShrinkwrap":false},"4.7.1":{"name":"@duongtruongan/easy-email-core","license":"MIT","description":"Email editor","version":"4.7.1","author":{"name":"m-Ryan"},"repository":{"type":"git","url":"git+ssh://git@github.com/m-Ryan/easy-email.git"},"keywords":["email editor core"],"main":"lib/index.cjs.js","module":"lib/index.es.js","types":"lib/index.d.ts","scripts":{"dev":"yarn build --watch","typings":"tsc --declaration --emitDeclarationOnly --project tsconfig.lib.json","build":"rimraf lib  && npm run typings && tsc-alias  && vite build --config vite.config.ts","block":"ts-node -r tsconfig-paths/register scripts/generateBlockJSX.ts","format":"eslint --fix  --ext .tsx,.ts,.tsx src/","test":"jest  --coverage","pub":"npm version patch --force -m 'bump version to %s' && npm publish"},"husky":{"hooks":{"pre-commit":"yarn test && yarn lint-staged"}},"lint-staged":{"src/*.{js,jsx,ts,tsx}, example/*.{js,jsx,ts,tsx}":["yarn lint"]},"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/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-dom":"^17.0.11","@typescript-eslint/eslint-plugin":"^4.28.3","@typescript-eslint/parser":"^4.28.3","babel-jest":"^27.0.6","eslint":"^7.31.0","eslint-config-prettier":"^8.3.0","eslint-loader":"^4.0.2","eslint-plugin-import":"^2.23.4","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","liquidjs":"^9.40.0","mjml-browser":"^4.10.4","react":"^17.0.2","react-dom":"^17.0.2","rimraf":"^3.0.2","ts-node":"^10.4.0","tsc-alias":"^1.4.1","tsconfig-paths":"^3.11.0","vite":"^2.5.6"},"dependencies":{"@types/js-beautify":"^1.13.3","@types/uuid":"^8.3.4","js-beautify":"^1.14.4","lodash":"^4.17.21","nanoid":"^3.3.1","typescript":"^4.4.4","uuid":"^8.3.2"},"peerDependencies":{"mjml-browser":"^4.10.4","react":"^17.0.2","react-dom":"^17.0.2"},"gitHead":"f6cf54160ffdba0d4d6b23483293dd9190d2d2c2","publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/m-Ryan/easy-email/issues"},"homepage":"https://github.com/m-Ryan/easy-email#readme","_id":"@duongtruongan/easy-email-core@4.7.1","_nodeVersion":"16.20.2","_npmVersion":"8.19.4","dist":{"integrity":"sha512-ote8qiWA/Lu6kx0rj8a1CnuBfxeEQecu7SfX5KUHEwl3QQ6xvIolsMyOrpEPyuZxi97Owc5aU2Lohy3t1dGA9w==","shasum":"593501d7a05e0c28b2574bf6fdfcb2e17a20d08f","tarball":"https://registry.npmjs.org/@duongtruongan/easy-email-core/-/easy-email-core-4.7.1.tgz","fileCount":87,"unpackedSize":1387460,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBnCXxJXEQ3K8wgvNoQPPy5i8Iw6h26tPBpByLMOd9LwAiBYUSWFQVEz7uSHsKNHRVsO7YllnrubLlxluaFqdY5MfA=="}]},"_npmUser":{"name":"duongtruongan","email":"duongtruongan@outlook.com"},"directories":{},"maintainers":[{"name":"duongtruongan","email":"duongtruongan@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/easy-email-core_4.7.1_1702375646539_0.6121980750449849"},"_hasShrinkwrap":false}},"maintainers":[{"name":"duongtruongan","email":"duongtruongan@outlook.com"}],"description":"Email editor","homepage":"https://github.com/m-Ryan/easy-email#readme","keywords":["email editor core"],"repository":{"type":"git","url":"git+ssh://git@github.com/m-Ryan/easy-email.git"},"author":{"name":"m-Ryan"},"bugs":{"url":"https://github.com/m-Ryan/easy-email/issues"},"license":"MIT","readme":"# Easy-email-core\r\n\r\n## Introduction\r\n\r\nThis is the core easy-email library, composed by the following parts\r\n\r\n- utils\r\n\r\n  - JsonToMjml\r\n  - MjmlToJson\r\n  - BlockManager\r\n  - createCustomBlock\r\n  - parseReactBlockToBlockData\r\n  - ImageManager (add or overwrite image)\r\n\r\n- blocks\r\n\r\n  - json definition of basic block\r\n\r\n- components\r\n  - React component for basic blocks\r\n\r\n## Usage\r\n\r\n```sh\r\n$ npm install --save easy-email-core\r\n```\r\n\r\nor\r\n\r\n```sh\r\n$ yarn add easy-email-core\r\n```\r\n\r\n## transform mjml to json\r\n\r\n```ts\r\nimport { MjmlToJson } from '@duongtruongan/easy-email-core';\r\n\r\nconst json = MjmlToJson(`\r\n<mjml>\r\n  <mj-body>\r\n    <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\">\r\n      <mj-text padding=\"20px\" color=\"#ffffff\" font-family=\"Helvetica\" align=\"center\" font-size=\"45px\" line-height=\"45px\" font-weight=\"900\">\r\n        GO TO SPACE\r\n      </mj-text>\r\n      <mj-button href=\"https://mjml.io/\" align=\"center\">\r\n        ORDER YOUR TICKET NOW\r\n      </mj-button>\r\n    </mj-hero>\r\n  </mj-body>\r\n</mjml>\r\n`);\r\n\r\nconsole.log(json);\r\n```\r\n\r\n// output\r\n\r\n```json\r\n{\r\n  \"type\": \"page\",\r\n  \"data\": {\r\n    \"value\": {\r\n      \"breakpoint\": \"480px\",\r\n      \"headAttributes\": \"\",\r\n      \"font-size\": \"14px\",\r\n      \"line-height\": \"1.7\",\r\n      \"headStyles\": [],\r\n      \"fonts\": [],\r\n      \"responsive\": true,\r\n      \"font-family\": \"lucida Grande,Verdana,Microsoft YaHei\",\r\n      \"text-color\": \"#000000\"\r\n    }\r\n  },\r\n  \"attributes\": {\r\n    \"background-color\": \"#efeeea\",\r\n    \"width\": \"600px\"\r\n  },\r\n  \"children\": [\r\n    {\r\n      \"type\": \"hero\",\r\n      \"data\": {\r\n        \"value\": {}\r\n      },\r\n      \"attributes\": {\r\n        \"padding\": \"100px 0px 100px 0px\",\r\n        \"border\": \"none\",\r\n        \"direction\": \"ltr\",\r\n        \"text-align\": \"center\",\r\n        \"background-color\": \"#2a3448\",\r\n        \"background-position\": \"center center\",\r\n        \"mode\": \"fluid-height\",\r\n        \"vertical-align\": \"top\",\r\n        \"background-url\": \"https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg\",\r\n        \"background-width\": \"600px\",\r\n        \"background-height\": \"469px\"\r\n      },\r\n      \"children\": [\r\n        {\r\n          \"type\": \"text\",\r\n          \"data\": {\r\n            \"value\": {\r\n              \"content\": \"GO TO SPACE\"\r\n            }\r\n          },\r\n          \"attributes\": {\r\n            \"padding\": \"20px 20px 20px 20px\",\r\n            \"align\": \"center\",\r\n            \"color\": \"#ffffff\",\r\n            \"font-size\": \"45px\",\r\n            \"line-height\": \"45px\",\r\n            \"font-family\": \"Helvetica\",\r\n            \"font-weight\": \"900\"\r\n          },\r\n          \"children\": []\r\n        },\r\n        {\r\n          \"type\": \"button\",\r\n          \"data\": {\r\n            \"value\": {\r\n              \"content\": \"ORDER YOUR TICKET NOW\"\r\n            }\r\n          },\r\n          \"attributes\": {\r\n            \"align\": \"center\",\r\n            \"background-color\": \"#414141\",\r\n            \"color\": \"#ffffff\",\r\n            \"font-weight\": \"normal\",\r\n            \"border-radius\": \"3px\",\r\n            \"padding\": \"10px 25px 10px 25px\",\r\n            \"inner-padding\": \"10px 25px 10px 25px\",\r\n            \"line-height\": \"120%\",\r\n            \"target\": \"_blank\",\r\n            \"vertical-align\": \"middle\",\r\n            \"border\": \"none\",\r\n            \"text-align\": \"center\",\r\n            \"href\": \"https://mjml.io/\"\r\n          },\r\n          \"children\": []\r\n        }\r\n      ]\r\n    }\r\n  ]\r\n}\r\n```\r\n\r\n## transform json to mjml\r\n\r\n```ts\r\nimport { MjmlToJson } from '@duongtruongan/easy-email-core';\r\n\r\nconst xml = JsonToMjml({\r\n  data: json,\r\n  context: null,\r\n  mode: 'production',\r\n});\r\n\r\nconsole.log(xml);\r\n```\r\n\r\n// output\r\n\r\n```html\r\n<mjml>\r\n  <mj-head>\r\n    <mj-html-attributes>\r\n      <mj-html-attribute\r\n        class=\"easy-email\"\r\n        multiple-attributes=\"false\"\r\n        attribute-name=\"text-color\"\r\n        text-color=\"#000000\"\r\n      ></mj-html-attribute>\r\n      <mj-html-attribute\r\n        class=\"easy-email\"\r\n        multiple-attributes=\"false\"\r\n        attribute-name=\"font-family\"\r\n        font-family=\"lucida Grande,Verdana,Microsoft YaHei\"\r\n      ></mj-html-attribute>\r\n      <mj-html-attribute\r\n        class=\"easy-email\"\r\n        multiple-attributes=\"false\"\r\n        attribute-name=\"font-size\"\r\n        font-size=\"14px\"\r\n      ></mj-html-attribute>\r\n      <mj-html-attribute\r\n        class=\"easy-email\"\r\n        multiple-attributes=\"false\"\r\n        attribute-name=\"line-height\"\r\n        line-height=\"1.7\"\r\n      ></mj-html-attribute>\r\n      <mj-html-attribute\r\n        class=\"easy-email\"\r\n        multiple-attributes=\"false\"\r\n        attribute-name=\"responsive\"\r\n        responsive=\"true\"\r\n      ></mj-html-attribute>\r\n    </mj-html-attributes>\r\n\r\n    <mj-breakpoint width=\"480px\" />\r\n    <mj-attributes>\r\n      <mj-all font-family=\"lucida Grande,Verdana,Microsoft YaHei\" />\r\n      <mj-text font-size=\"14px\" />\r\n      <mj-text color=\"#000000\" />\r\n      <mj-text line-height=\"1.7\" />\r\n    </mj-attributes>\r\n  </mj-head>\r\n  <mj-body\r\n    background-color=\"#efeeea\"\r\n    width=\"600px\"\r\n    css-class=\"mjml-body\"\r\n  >\r\n    <mj-hero\r\n      padding=\"100px 0px 100px 0px\"\r\n      border=\"none\"\r\n      direction=\"ltr\"\r\n      text-align=\"center\"\r\n      background-color=\"#2a3448\"\r\n      background-position=\"center center\"\r\n      mode=\"fluid-height\"\r\n      vertical-align=\"top\"\r\n      background-url=\"https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg\"\r\n      background-width=\"600px\"\r\n      background-height=\"469px\"\r\n    >\r\n      <mj-text\r\n        padding=\"20px 20px 20px 20px\"\r\n        align=\"center\"\r\n        color=\"#ffffff\"\r\n        font-size=\"45px\"\r\n        line-height=\"45px\"\r\n        font-family=\"Helvetica\"\r\n        font-weight=\"900\"\r\n      >\r\n        GO TO SPACE\r\n      </mj-text>\r\n\r\n      <mj-button\r\n        align=\"center\"\r\n        background-color=\"#414141\"\r\n        color=\"#ffffff\"\r\n        font-weight=\"normal\"\r\n        border-radius=\"3px\"\r\n        padding=\"10px 25px 10px 25px\"\r\n        inner-padding=\"10px 25px 10px 25px\"\r\n        line-height=\"120%\"\r\n        target=\"_blank\"\r\n        vertical-align=\"middle\"\r\n        border=\"none\"\r\n        text-align=\"center\"\r\n        href=\"https://mjml.io/\"\r\n      >\r\n        ORDER YOUR TICKET NOW\r\n      </mj-button>\r\n    </mj-hero>\r\n  </mj-body>\r\n</mjml>\r\n```\r\n\r\n## parseReactBlockToBlockData\r\n\r\n```tsx\r\nimport {\r\n  JsonToMjml,\r\n  components,\r\n  parseReactBlockToBlockData,\r\n} from '@duongtruongan/easy-email-core';\r\n\r\nconst { Page, Section, Column, Text, Button } = components;\r\n\r\nconst blockData = parseReactBlockToBlockData(\r\n  <Page>\r\n    <Section>\r\n      <Column>\r\n        <Text\r\n          padding='20px'\r\n          color='#ffffff'\r\n          font-family='Helvetica'\r\n          align='center'\r\n          font-size='45px'\r\n          line-height='45px'\r\n          font-weight='900'\r\n        >\r\n          GO TO SPACE\r\n        </Text>\r\n        <Button\r\n          href='https://mjml.io/'\r\n          align='center'\r\n        >\r\n          ORDER YOUR TICKET NOW\r\n        </Button>\r\n      </Column>\r\n    </Section>\r\n  </Page>,\r\n);\r\n\r\nconsole.log(blockData);\r\n```\r\n\r\n// output\r\n\r\n```json\r\n{\r\n  \"type\": \"page\",\r\n  \"data\": {\r\n    \"value\": {\r\n      \"breakpoint\": \"480px\",\r\n      \"headAttributes\": \"\",\r\n      \"font-size\": \"14px\",\r\n      \"line-height\": \"1.7\",\r\n      \"headStyles\": [],\r\n      \"fonts\": [],\r\n      \"responsive\": true,\r\n      \"font-family\": \"lucida Grande,Verdana,Microsoft YaHei\",\r\n      \"text-color\": \"#000000\"\r\n    }\r\n  },\r\n  \"attributes\": {\r\n    \"background-color\": \"#efeeea\",\r\n    \"width\": \"600px\"\r\n  },\r\n  \"children\": [\r\n    {\r\n      \"type\": \"section\",\r\n      \"data\": {\r\n        \"value\": {\r\n          \"noWrap\": false\r\n        }\r\n      },\r\n      \"attributes\": {\r\n        \"padding\": \"20px 0px 20px 0px\",\r\n        \"border\": \"none\",\r\n        \"direction\": \"ltr\",\r\n        \"text-align\": \"center\",\r\n        \"background-repeat\": \"repeat\",\r\n        \"background-size\": \"auto\",\r\n        \"background-position\": \"top center\"\r\n      },\r\n      \"children\": [\r\n        {\r\n          \"type\": \"column\",\r\n          \"data\": {\r\n            \"value\": {}\r\n          },\r\n          \"attributes\": {\r\n            \"padding\": \"0px 0px 0px 0px\",\r\n            \"border\": \"none\",\r\n            \"vertical-align\": \"top\"\r\n          },\r\n          \"children\": [\r\n            {\r\n              \"type\": \"text\",\r\n              \"data\": {\r\n                \"value\": {\r\n                  \"content\": \"GO TO SPACE\"\r\n                }\r\n              },\r\n              \"attributes\": {\r\n                \"padding\": \"20px\",\r\n                \"align\": \"center\",\r\n                \"color\": \"#ffffff\",\r\n                \"font-family\": \"Helvetica\",\r\n                \"font-size\": \"45px\",\r\n                \"line-height\": \"45px\",\r\n                \"font-weight\": \"900\"\r\n              },\r\n              \"children\": []\r\n            },\r\n            {\r\n              \"type\": \"button\",\r\n              \"data\": {\r\n                \"value\": {\r\n                  \"content\": \"ORDER YOUR TICKET NOW\"\r\n                }\r\n              },\r\n              \"attributes\": {\r\n                \"align\": \"center\",\r\n                \"background-color\": \"#414141\",\r\n                \"color\": \"#ffffff\",\r\n                \"font-weight\": \"normal\",\r\n                \"border-radius\": \"3px\",\r\n                \"padding\": \"10px 25px 10px 25px\",\r\n                \"inner-padding\": \"10px 25px 10px 25px\",\r\n                \"line-height\": \"120%\",\r\n                \"target\": \"_blank\",\r\n                \"vertical-align\": \"middle\",\r\n                \"border\": \"none\",\r\n                \"text-align\": \"center\",\r\n                \"href\": \"https://mjml.io/\"\r\n              },\r\n              \"children\": []\r\n            }\r\n          ]\r\n        }\r\n      ]\r\n    }\r\n  ]\r\n}\r\n```\r\n\r\n```tsx\r\n// Then transform to mjml\r\nconsole.log(\r\n  JsonToMjml({\r\n    data: blockData,\r\n    mode: 'production',\r\n  }),\r\n);\r\n```\r\n\r\n// output\r\n\r\n```html\r\n<mjml>\r\n  <mj-head>\r\n    <mj-html-attributes>\r\n      <mj-html-attribute\r\n        class=\"easy-email\"\r\n        multiple-attributes=\"false\"\r\n        attribute-name=\"text-color\"\r\n        text-color=\"#000000\"\r\n      ></mj-html-attribute>\r\n      <mj-html-attribute\r\n        class=\"easy-email\"\r\n        multiple-attributes=\"false\"\r\n        attribute-name=\"font-family\"\r\n        font-family=\"lucida Grande,Verdana,Microsoft YaHei\"\r\n      ></mj-html-attribute>\r\n      <mj-html-attribute\r\n        class=\"easy-email\"\r\n        multiple-attributes=\"false\"\r\n        attribute-name=\"font-size\"\r\n        font-size=\"14px\"\r\n      ></mj-html-attribute>\r\n      <mj-html-attribute\r\n        class=\"easy-email\"\r\n        multiple-attributes=\"false\"\r\n        attribute-name=\"line-height\"\r\n        line-height=\"1.7\"\r\n      ></mj-html-attribute>\r\n      <mj-html-attribute\r\n        class=\"easy-email\"\r\n        multiple-attributes=\"false\"\r\n        attribute-name=\"responsive\"\r\n        responsive=\"true\"\r\n      ></mj-html-attribute>\r\n    </mj-html-attributes>\r\n\r\n    <mj-breakpoint width=\"480px\" />\r\n    <mj-attributes>\r\n      <mj-all font-family=\"lucida Grande,Verdana,Microsoft YaHei\" />\r\n      <mj-text font-size=\"14px\" />\r\n      <mj-text color=\"#000000\" />\r\n      <mj-text line-height=\"1.7\" />\r\n    </mj-attributes>\r\n  </mj-head>\r\n  <mj-body\r\n    background-color=\"#efeeea\"\r\n    width=\"600px\"\r\n    css-class=\"mjml-body\"\r\n  >\r\n    <mj-section\r\n      padding=\"20px 0px 20px 0px\"\r\n      border=\"none\"\r\n      direction=\"ltr\"\r\n      text-align=\"center\"\r\n      background-repeat=\"repeat\"\r\n      background-size=\"auto\"\r\n      background-position=\"top center\"\r\n    >\r\n      <mj-column\r\n        padding=\"0px 0px 0px 0px\"\r\n        border=\"none\"\r\n        vertical-align=\"top\"\r\n      >\r\n        <mj-text\r\n          padding=\"20px\"\r\n          align=\"center\"\r\n          color=\"#ffffff\"\r\n          font-family=\"Helvetica\"\r\n          font-size=\"45px\"\r\n          line-height=\"45px\"\r\n          font-weight=\"900\"\r\n        >\r\n          GO TO SPACE\r\n        </mj-text>\r\n\r\n        <mj-button\r\n          align=\"center\"\r\n          background-color=\"#414141\"\r\n          color=\"#ffffff\"\r\n          font-weight=\"normal\"\r\n          border-radius=\"3px\"\r\n          padding=\"10px 25px 10px 25px\"\r\n          inner-padding=\"10px 25px 10px 25px\"\r\n          line-height=\"120%\"\r\n          target=\"_blank\"\r\n          vertical-align=\"middle\"\r\n          border=\"none\"\r\n          text-align=\"center\"\r\n          href=\"https://mjml.io/\"\r\n        >\r\n          ORDER YOUR TICKET NOW\r\n        </mj-button>\r\n      </mj-column>\r\n    </mj-section>\r\n  </mj-body>\r\n</mjml>\r\n```\r\n\r\n## Customize your block\r\n\r\n```tsx\r\nimport { merge } from 'lodash';\r\nimport {\r\n  createCustomBlock,\r\n  IBlockData,\r\n  components,\r\n  BasicType,\r\n  JsonToMjml,\r\n  BasicType,\r\n  BlockManager,\r\n} from '@duongtruongan/easy-email-core';\r\nconst { Section, Column, Image, Button } = components;\r\n\r\ntype IMyFirstBlock = IBlockData<\r\n  {\r\n    'background-color': string;\r\n    'text-color': string;\r\n  },\r\n  {\r\n    buttonText: string;\r\n    imageUrl: string;\r\n  }\r\n>;\r\n\r\nconst myFirstBlock = createCustomBlock({\r\n  name: 'My first block',\r\n  type: 'MY_FIRST_BLOCK',\r\n  create(payload) {\r\n    const defaultData: IMyFirstBlock = {\r\n      type: 'MY_FIRST_BLOCK',\r\n      data: {\r\n        value: {\r\n          buttonText: 'Got it',\r\n          imageUrl:\r\n            'http://res.cloudinary.com/dwkp0e1yo/image/upload/v1665841616/pn7npfspxaqfzxiensue.png',\r\n        },\r\n      },\r\n      attributes: {\r\n        'background-color': '#4A90E2',\r\n        'text-color': '#ffffff',\r\n      },\r\n      children: [],\r\n    };\r\n    return merge(defaultData, payload);\r\n  },\r\n  validParentType: [BasicType.PAGE, BasicType.WRAPPER],\r\n  render(\r\n    data: IMyFirstBlock,\r\n    idx: string | null,\r\n    mode: 'testing' | 'production',\r\n    context?: IPage,\r\n    dataSource?: { [key: string]: any },\r\n  ) {\r\n    const { imageUrl, buttonText } = data.data.value;\r\n    const attributes = data.attributes;\r\n\r\n    const instance = (\r\n      <Section padding='20px'>\r\n        <Column>\r\n          <Image\r\n            padding='0px 0px 0px 0px'\r\n            width='100px'\r\n            src={imageUrl}\r\n          />\r\n          <Button\r\n            background-color={attributes['background-color']}\r\n            color={attributes['text-color']}\r\n            href='#'\r\n          >\r\n            {buttonText}\r\n          </Button>\r\n        </Column>\r\n      </Section>\r\n    );\r\n    return instance;\r\n  },\r\n});\r\n\r\nBlockManager.registerBlocks({ myFirstBlock });\r\n\r\nconst pageBlock = BlockManager.getBlockByType(BasicType.PAGE);\r\n\r\nconsole.log(\r\n  JsonToMjml({\r\n    data: pageBlock.create({\r\n      children: [myFirstBlock.create()],\r\n    }),\r\n    mode: 'production',\r\n  }),\r\n);\r\n```\r\n\r\n// output\r\n\r\n```html\r\n<mjml>\r\n  <mj-head>\r\n    <mj-html-attributes>\r\n      <mj-html-attribute\r\n        class=\"easy-email\"\r\n        multiple-attributes=\"false\"\r\n        attribute-name=\"text-color\"\r\n        text-color=\"#000000\"\r\n      ></mj-html-attribute>\r\n      <mj-html-attribute\r\n        class=\"easy-email\"\r\n        multiple-attributes=\"false\"\r\n        attribute-name=\"font-family\"\r\n        font-family=\"lucida Grande,Verdana,Microsoft YaHei\"\r\n      ></mj-html-attribute>\r\n      <mj-html-attribute\r\n        class=\"easy-email\"\r\n        multiple-attributes=\"false\"\r\n        attribute-name=\"font-size\"\r\n        font-size=\"14px\"\r\n      ></mj-html-attribute>\r\n      <mj-html-attribute\r\n        class=\"easy-email\"\r\n        multiple-attributes=\"false\"\r\n        attribute-name=\"line-height\"\r\n        line-height=\"1.7\"\r\n      ></mj-html-attribute>\r\n      <mj-html-attribute\r\n        class=\"easy-email\"\r\n        multiple-attributes=\"false\"\r\n        attribute-name=\"responsive\"\r\n        responsive=\"true\"\r\n      ></mj-html-attribute>\r\n    </mj-html-attributes>\r\n\r\n    <mj-breakpoint width=\"480px\" />\r\n    <mj-attributes>\r\n      <mj-all font-family=\"lucida Grande,Verdana,Microsoft YaHei\" />\r\n      <mj-text font-size=\"14px\" />\r\n      <mj-text color=\"#000000\" />\r\n      <mj-text line-height=\"1.7\" />\r\n    </mj-attributes>\r\n  </mj-head>\r\n  <mj-body\r\n    background-color=\"#efeeea\"\r\n    width=\"600px\"\r\n    css-class=\"mjml-body\"\r\n  >\r\n    <mj-section\r\n      padding=\"20px\"\r\n      background-repeat=\"repeat\"\r\n      background-size=\"auto\"\r\n      background-position=\"top center\"\r\n      border=\"none\"\r\n      direction=\"ltr\"\r\n      text-align=\"center\"\r\n    >\r\n      <mj-column\r\n        padding=\"0px 0px 0px 0px\"\r\n        border=\"none\"\r\n        vertical-align=\"top\"\r\n      >\r\n        <mj-image\r\n          align=\"center\"\r\n          height=\"auto\"\r\n          padding=\"0px 0px 0px 0px\"\r\n          src=\"http://res.cloudinary.com/dwkp0e1yo/image/upload/v1665841616/pn7npfspxaqfzxiensue.png\"\r\n          width=\"100px\"\r\n        >\r\n        </mj-image>\r\n\r\n        <mj-button\r\n          align=\"center\"\r\n          background-color=\"#4A90E2\"\r\n          color=\"#ffffff\"\r\n          font-weight=\"normal\"\r\n          border-radius=\"3px\"\r\n          padding=\"10px 25px 10px 25px\"\r\n          inner-padding=\"10px 25px 10px 25px\"\r\n          line-height=\"120%\"\r\n          target=\"_blank\"\r\n          vertical-align=\"middle\"\r\n          border=\"none\"\r\n          text-align=\"center\"\r\n          href=\"#\"\r\n        >\r\n          Got it\r\n        </mj-button>\r\n      </mj-column>\r\n    </mj-section>\r\n  </mj-body>\r\n</mjml>\r\n```\r\n","readmeFilename":"readme.md"}