{"_id":"@conversional-library/easy-email-core","name":"@conversional-library/easy-email-core","dist-tags":{"latest":"4.16.17"},"versions":{"4.16.17":{"name":"@conversional-library/easy-email-core","license":"MIT","description":"Email editor","version":"4.16.17","author":{"name":"Sajad Shahi"},"repository":{"type":"git","url":"git+ssh://git@bitbucket.org/ConversionalDev/conversional-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.mts","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.26.0","@babel/preset-env":"^7.26.0","@babel/preset-react":"^7.26.3","@babel/preset-typescript":"^7.26.0","@types/he":"^1.2.3","@types/jest":"^29.5.14","@types/js-beautify":"^1.14.3","@types/jsdom":"^21.1.7","@types/lodash":"^4.17.15","@types/node":"^22.12.12","@types/react":"^19.0.2","@types/react-dom":"^19.0.2","@types/uuid":"^10.0.0","@typescript-eslint/eslint-plugin":"^8.24.0","@typescript-eslint/parser":"^8.24.0","babel-jest":"^29.7.0","eslint":"^9.17.0","eslint-config-prettier":"^9.1.0","eslint-plugin-import":"^2.31.0","eslint-plugin-prettier":"^5.2.1","eslint-plugin-react":"^7.37.2","eslint-plugin-react-hooks":"^5.1.0","eslint-webpack-plugin":"^4.2.0","jest":"^29.7.0","jsdom":"^26.0.0","liquidjs":"^10.19.2","react":"^19.2.4","react-dom":"^19.2.4","rimraf":"^6.0.1","ts-node":"^10.9.2","tsc-alias":"^1.8.10","tsconfig-paths":"^4.2.0","typescript":"^5.7.2","vite":"^7.1.11"},"dependencies":{"he":"^1.2.0","js-beautify":"^1.15.4","lodash":"^4.17.23","uuid":"^10.0.0"},"peerDependencies":{"react":"^19.2.4","react-dom":"^19.2.4"},"gitHead":"2d9255b00cbce0664137212b2c63ec4802b23b84","_id":"@conversional-library/easy-email-core@4.16.17","bugs":{"url":"https://bitbucket.org/ConversionalDev/conversional-easy-email/issues"},"homepage":"https://bitbucket.org/ConversionalDev/conversional-easy-email#readme","_nodeVersion":"20.18.1","_npmVersion":"10.8.2","dist":{"integrity":"sha512-53HIS7PNWiEmBTBq0UewDJfjxccE2ketfMnU9RW+hf5QHvwy98d9gNwF705+Lgk8VbXRl5lcygIKs9NVBzOydw==","shasum":"1a7ebbeecbc9904cf49e56b7840643ebac1da52c","tarball":"https://registry.npmjs.org/@conversional-library/easy-email-core/-/easy-email-core-4.16.17.tgz","fileCount":85,"unpackedSize":1806706,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD0LFWrtOusiKgDMUWUzVcdUHeYv4JaRRgGWo+BZfyU6wIgXARz33apW2/2E8C6bXJ67rewUyvm4KvJwB6yarN3+Ok="}]},"_npmUser":{"name":"sajjad.conversional","email":"sajjad.shahi@conversion.al"},"directories":{},"maintainers":[{"name":"sajjad.conversional","email":"sajjad.shahi@conversion.al"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/easy-email-core_4.16.17_1774362350726_0.06383870704264338"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-24T14:25:50.582Z","4.16.17":"2026-03-24T14:25:50.933Z","modified":"2026-03-24T14:25:51.162Z"},"maintainers":[{"name":"sajjad.conversional","email":"sajjad.shahi@conversion.al"}],"description":"Email editor","homepage":"https://bitbucket.org/ConversionalDev/conversional-easy-email#readme","keywords":["email editor core"],"repository":{"type":"git","url":"git+ssh://git@bitbucket.org/ConversionalDev/conversional-easy-email.git"},"author":{"name":"Sajad Shahi"},"bugs":{"url":"https://bitbucket.org/ConversionalDev/conversional-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 '@conversional-library/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 '@conversional-library/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-f6ba19fcdcee268512ab7c5178b7d44a"}