{"_id":"@andrianarivo/easy-email-core","name":"@andrianarivo/easy-email-core","dist-tags":{"latest":"4.16.4"},"versions":{"4.16.4":{"name":"@andrianarivo/easy-email-core","license":"MIT","description":"Email editor","version":"4.16.4","author":{"name":"m-Ryan"},"repository":{"type":"git","url":"git+ssh://git@github.com/zalify/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 && pnpm run typings && ./node_modules/.bin/tsc-alias && ./node_modules/.bin/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/he":"^1.2.0","@types/jest":"^26.0.24","@types/js-beautify":"^1.13.3","@types/jsdom":"^16.2.13","@types/lodash":"^4.14.178","@types/node":"^16.11.7","@types/react":"^18.2.2","@types/react-dom":"^18.2.3","@types/uuid":"^8.3.4","@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","react":"^19","react-dom":"^19","rimraf":"^3.0.2","ts-node":"^10.4.0","tsc-alias":"^1.4.1","tsconfig-paths":"^3.11.0","typescript":"^4.4.4","vite":"^2.5.6"},"dependencies":{"he":"^1.2.0","js-beautify":"^1.14.4","lodash":"^4.17.21","uuid":"^8.3.2"},"peerDependencies":{"react":"^19","react-dom":"^19"},"gitHead":"f6cf54160ffdba0d4d6b23483293dd9190d2d2c2","_id":"@andrianarivo/easy-email-core@4.16.4","bugs":{"url":"https://github.com/zalify/easy-email/issues"},"homepage":"https://github.com/zalify/easy-email#readme","_nodeVersion":"22.18.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-cboiokWCZidppF5+Bbm5wxIRQM1OlmvP4+ICGh1FaxPG5/z3B2twPRYFS8rGdgTSZijcWgUgNijoUbWcvJGO5w==","shasum":"308f2934a81da46aa68ca458d629da2aa85141c5","tarball":"https://registry.npmjs.org/@andrianarivo/easy-email-core/-/easy-email-core-4.16.4.tgz","fileCount":85,"unpackedSize":1868440,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQC84HIbUQj6TEeGwlvOtH+t6G7QQyyJ9u7AfzxAuYJVZwIgNbdwFrBcexnaj0hUXU9GYVRVMdgSEtrNmD7oZwnG2w0="}]},"_npmUser":{"name":"andrianarivo","email":"andrianarivo.david@gmail.com"},"directories":{},"maintainers":[{"name":"andrianarivo","email":"andrianarivo.david@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/easy-email-core_4.16.4_1758790197781_0.021468732596437112"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-25T08:49:57.727Z","4.16.4":"2025-09-25T08:49:57.998Z","modified":"2025-09-25T08:49:58.219Z"},"maintainers":[{"name":"andrianarivo","email":"andrianarivo.david@gmail.com"}],"description":"Email editor","homepage":"https://github.com/zalify/easy-email#readme","keywords":["email editor core"],"repository":{"type":"git","url":"git+ssh://git@github.com/zalify/easy-email.git"},"author":{"name":"m-Ryan"},"bugs":{"url":"https://github.com/zalify/easy-email/issues"},"license":"MIT","readme":"# Easy-email-core\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 json to mjml\r\n\r\n```ts\r\nimport { JsonToMjml } from '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```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 '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","_rev":"1-d4a9ab176b05bd3c0a8feaaedbc6a922"}