{"_id":"91-easy-email-extensions","name":"91-easy-email-extensions","dist-tags":{"latest":"4.11.2-alpha.0"},"versions":{"4.11.2-alpha.0":{"name":"91-easy-email-extensions","license":"MIT","description":"Email editor","version":"4.11.2-alpha.0","author":{"name":"hsuehpe"},"repository":{"type":"git","url":"git+https://github.com/hsuehpe/easy-email.git"},"keywords":["email editor core"],"main":"lib/index.js","types":"lib/index.d.ts","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/","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/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","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","lerna":"^4.0.0","less":"^4.1.2","react":"^17.0.2","react-dom":"^17.0.2","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","vite-plugin-html":"^2.1.1","vite-plugin-style-import":"^1.3.0"},"dependencies":{"@arco-design/web-react":"^2.36.1","codemirror":"^5.63.3","color":"^4.2.3","final-form":"^4.20.4","final-form-arrays":"^3.0.2","final-form-set-field-touched":"^1.0.1","is-hotkey":"^0.2.0","lodash":"^4.17.21","mjml-browser":"^4.10.4","overlayscrollbars":"^1.13.2","overlayscrollbars-react":"^0.3.0","react-codemirror2":"^7.2.1","react-color":"^2.19.3","react-final-form-arrays":"^3.1.3","react-use":"^17.3.1"},"peerDependencies":{"easy-email-core":"^4.3.6","easy-email-editor":"^4.3.6","react":"^17.0.2","react-dom":"^17.0.2","react-final-form":"^6.5.7"},"gitHead":"1810ca5221e3bf1e66f90174622b65ad3fce2333","bugs":{"url":"https://github.com/hsuehpe/easy-email/issues"},"homepage":"https://github.com/hsuehpe/easy-email#readme","_id":"91-easy-email-extensions@4.11.2-alpha.0","_nodeVersion":"16.4.2","_npmVersion":"lerna/4.0.0/node@v16.4.2+arm64 (darwin)","dist":{"integrity":"sha512-eMbtv5igoUsZDVxdeN/bEbmtj2u0a+ecJJ7fgS79syFkvc7dsjH9pz7Tftty+YVfmYMpAv4mhwSyzUehGZMpIg==","shasum":"5eef3e072f8978746e565554619ea9dd2e3617d8","tarball":"https://registry.npmjs.org/91-easy-email-extensions/-/91-easy-email-extensions-4.11.2-alpha.0.tgz","fileCount":189,"unpackedSize":6841268,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChDxraAS9mKCCZ4o5aPbD6LV+Yi24xzY+E6tIVjNM9gAIhAKD1uaonaFhuFSjfTBHX0jRAD0YqW/iak0o53qpPVKCP"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkMszDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmog3g//a3UQyqYxYMCpWpJKeJy3cyMsIt54FAaTB7PilagJyg4Jzpqr\r\nk467Doy3AapgPuq8dRvre4KYFWYt4hr5JHA14hv2gUisAp4Mbdl6EE0kKzMU\r\n8Wh7IEa7BhPsQFT0z4SIE/9dTF17JZh+cJwJDqTh+WOyX9O+YV5L9jfHCWQd\r\nK6nSSkQD8m8NN6JuyyYq4qFjLw8BI9lQ2eqoqOmu5aVlV3FMEet3Z3vVqtVV\r\n3Iwu68zd1tlSfE4sb5XhO8MWJNGN9iGT/pPg8AMegBOtaUVfVY46Z8d22fiz\r\nswE15D5mTV9viUXSNoKj43en4m/FN4yQ3BgAoZNASokKf0yThadmJ1dtc4W6\r\ngqIbJcjgI0GnN9Qc+WQwGd01MOwKe0Oj8mcNllu+uiL4s19K3M9bHrNDtlMn\r\np59EyqL6pZ0iYqqBwwPAVY6HMHPPL6WNbtIJa1THqYqoJCrrTjbmfm/fTwoT\r\n5509WjR9uC3DMDdzWvr+CZ7bGMITbmB++j/hxq5N6mZxMJGamPnZVQ0VphtI\r\n02vO7xD6f9IlOE0CcwM0gKu7pwXT5OTOrWae2LacDRSR8WB1O8Vl5ZlM8q/u\r\nj5yEeT/jgHy9WXmR1NGfLiLDLWDJb5I6TqJN8ZGGK8qmsWiaFhUhtNdj6MZK\r\ngNv+qZIdLqXkkofDSOnMqh0kpwMV8+LJs2M=\r\n=yepu\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"hsuehpe","email":"bewitchsky@gmail.com"},"directories":{},"maintainers":[{"name":"hsuehpe","email":"bewitchsky@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/91-easy-email-extensions_4.11.2-alpha.0_1681050818908_0.07062539300799653"},"_hasShrinkwrap":false}},"time":{"created":"2023-04-09T14:33:38.907Z","4.11.2-alpha.0":"2023-04-09T14:33:39.211Z","modified":"2023-04-09T14:33:39.445Z"},"maintainers":[{"name":"hsuehpe","email":"bewitchsky@gmail.com"}],"description":"Email editor","homepage":"https://github.com/hsuehpe/easy-email#readme","keywords":["email editor core"],"repository":{"type":"git","url":"git+https://github.com/hsuehpe/easy-email.git"},"author":{"name":"hsuehpe"},"bugs":{"url":"https://github.com/hsuehpe/easy-email/issues"},"license":"MIT","readme":"# Easy-email-extensions\n\n## Introduction\n\nProvide default UI components, when they don’t meet your needs, you can refer to it and write your own.\n\nIt also provides the following utils:\n- MjmlToJson\n\n## usage\n\n```sh\n$ npm install --save easy-email-extensions\n```\n\nor\n\n```sh\n$ yarn add easy-email-extensions\n```\n\n```js\nimport React from 'react';\nimport { BlockManager, BasicType, AdvancedType } from 'easy-email-core';\nimport { EmailEditor, EmailEditorProvider } from 'easy-email-editor';\nimport { ExtensionProps, StandardLayout } from 'easy-email-extensions';\nimport { useWindowSize } from 'react-use';\n\nimport 'easy-email-editor/lib/style.css';\nimport 'easy-email-extensions/lib/style.css';\n\nconst categories: ExtensionProps['categories'] = [\n  {\n    label: 'Content',\n    active: true,\n    blocks: [\n      {\n        type: AdvancedType.TEXT,\n      },\n      {\n        type: AdvancedType.IMAGE,\n        payload: { attributes: { padding: '0px 0px 0px 0px' } },\n      },\n      {\n        type: AdvancedType.BUTTON,\n      },\n      {\n        type: AdvancedType.SOCIAL,\n      },\n      {\n        type: AdvancedType.DIVIDER,\n      },\n      {\n        type: AdvancedType.SPACER,\n      },\n      {\n        type: AdvancedType.HERO,\n      },\n      {\n        type: AdvancedType.WRAPPER,\n      },\n    ],\n  },\n  {\n    label: 'Layout',\n    active: true,\n    displayType: 'column',\n    blocks: [\n      {\n        title: '2 columns',\n        payload: [\n          ['50%', '50%'],\n          ['33%', '67%'],\n          ['67%', '33%'],\n          ['25%', '75%'],\n          ['75%', '25%'],\n        ],\n      },\n      {\n        title: '3 columns',\n        payload: [\n          ['33.33%', '33.33%', '33.33%'],\n          ['25%', '25%', '50%'],\n          ['50%', '25%', '25%'],\n        ],\n      },\n      {\n        title: '4 columns',\n        payload: [[['25%', '25%', '25%', '25%']]],\n      },\n    ],\n  },\n];\n\nconst initialValues = {\n  subject: 'Welcome to Easy-email',\n  subTitle: 'Nice to meet you!',\n  content: BlockManager.getBlockByType(BasicType.PAGE)!.create({}),\n};\n\nexport default function App() {\n  const { width } = useWindowSize();\n\n  const smallScene = width < 1400;\n\n  return (\n    <EmailEditorProvider\n      data={initialValues}\n      height={'calc(100vh - 72px)'}\n      autoComplete\n      dashed={false}\n    >\n      {({ values }) => {\n        return (\n          <StandardLayout\n            compact={!smallScene}\n            categories={categories}\n            showSourceCode={true}\n          >\n            <EmailEditor />\n          </StandardLayout>\n        );\n      }}\n    </EmailEditorProvider>\n  );\n}\n\n```\n\n## Extensions\n\n- `AttributePanel`\n\n  - Basic block configuration panel\n\n  - <img src=\"https://assets.maocanhua.cn/3e74a61d-ab22-4cf3-afc9-d511b82e08cd-image.png\" alt=\"AttributePanel\">\n\n  - You can add or overwrite\n\n    ```tsx\n    import { BlockAttributeConfigurationManager } from 'easy-email-extensions';\n\n    BlockAttributeConfigurationManager.add({\n      [BasicType.TEXT]: () => <div>will be overwrite `Text`</div>,\n    });\n    ```\n\n  - Hide Page block subject & subTitle\n\n    ```tsx\n    const DefaultPageConfigPanel = BlockAttributeConfigurationManager.get(BasicType.PAGE);\n    BlockAttributeConfigurationManager.add({\n      [BasicType.PAGE]: () => (\n        <DefaultPageConfigPanel\n          hideSubject\n          hideSubTitle\n        />\n      ),\n    });\n    ```\n\n- `InteractivePrompt`\n\n  - block hover and focus style\n\n  - <img src=\"https://assets.maocanhua.cn/298d72d6-a509-4cd2-85c7-dfb915971620-image.png\" alt=\"InteractivePrompt\">\n\n  - No configuration items\n\n- `BlockLayer`\n\n  - <img src=\"https://assets.maocanhua.cn/de1f5211-350e-43c9-9c99-d97a2f196e04-image.png\" alt=\"ShortcutToolbar\">\n  - No configuration items\n\n- `ShortcutToolbar`\n\n  - <img src=\"https://assets.maocanhua.cn/f0e2ccc6-0627-472b-ad78-bc92bdb46ad1-image.png\">\n  - You can add or overwrite popover's preset blocks\n\n    ```tsx\n    import { BasicType } from 'easy-email-core';\n    import { BlockMarketManager, BlockMaskWrapper } from 'easy-email-extensions';\n\n    BlockMarketManager.addCategories([\n      {\n        title: 'Custom',\n        name: 'custom',\n        blocks: [\n          {\n            type: BasicType.TEXT,\n            title: 'Text',\n            description: 'This block allows you to display text in your email.',\n            component: () => {\n              return (\n                <BlockMaskWrapper\n                  type={BasicType.TEXT}\n                  payload={{\n                    attributes: {\n                      'font-size': '20px',\n                      align: 'center',\n                      padding: '0px 0px 0px 0px',\n                      color: '#4A90E2',\n                    },\n                    data: {\n                      value: {\n                        content: '20px',\n                      },\n                    },\n                  }}\n                >\n                  <div style={{ fontSize: 20, width: '100%', paddingLeft: 20 }}>20px</div>\n                </BlockMaskWrapper>\n              );\n            },\n          },\n        ],\n      },\n    ]);\n    ```\n\n- `SimpleLayout`\n\n  - props\n    - showSourceCode\n    - defaultShowLayer\n\n- `StandardLayout`\n\n  - props\n    - compact\n    - categories\n    - showSourceCode\n\n## transform mjml to json\n\n```ts\nimport { MjmlToJson } from 'easy-email-extensions';\n\nconst json = MjmlToJson(`\n<mjml>\n  <mj-body>\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\">\n      <mj-text padding=\"20px\" color=\"#ffffff\" font-family=\"Helvetica\" align=\"center\" font-size=\"45px\" line-height=\"45px\" font-weight=\"900\">\n        GO TO SPACE\n      </mj-text>\n      <mj-button href=\"https://mjml.io/\" align=\"center\">\n        ORDER YOUR TICKET NOW\n      </mj-button>\n    </mj-hero>\n  </mj-body>\n</mjml>\n`);\n\nconsole.log(json);\n```\n\n// output\n\n```json\n{\n  \"type\": \"page\",\n  \"data\": {\n    \"value\": {\n      \"breakpoint\": \"480px\",\n      \"headAttributes\": \"\",\n      \"font-size\": \"14px\",\n      \"line-height\": \"1.7\",\n      \"headStyles\": [],\n      \"fonts\": [],\n      \"responsive\": true,\n      \"font-family\": \"lucida Grande,Verdana,Microsoft YaHei\",\n      \"text-color\": \"#000000\"\n    }\n  },\n  \"attributes\": {\n    \"background-color\": \"#efeeea\",\n    \"width\": \"600px\"\n  },\n  \"children\": [\n    {\n      \"type\": \"hero\",\n      \"data\": {\n        \"value\": {}\n      },\n      \"attributes\": {\n        \"padding\": \"100px 0px 100px 0px\",\n        \"border\": \"none\",\n        \"direction\": \"ltr\",\n        \"text-align\": \"center\",\n        \"background-color\": \"#2a3448\",\n        \"background-position\": \"center center\",\n        \"mode\": \"fluid-height\",\n        \"vertical-align\": \"top\",\n        \"background-url\": \"https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg\",\n        \"background-width\": \"600px\",\n        \"background-height\": \"469px\"\n      },\n      \"children\": [\n        {\n          \"type\": \"text\",\n          \"data\": {\n            \"value\": {\n              \"content\": \"GO TO SPACE\"\n            }\n          },\n          \"attributes\": {\n            \"padding\": \"20px 20px 20px 20px\",\n            \"align\": \"center\",\n            \"color\": \"#ffffff\",\n            \"font-size\": \"45px\",\n            \"line-height\": \"45px\",\n            \"font-family\": \"Helvetica\",\n            \"font-weight\": \"900\"\n          },\n          \"children\": []\n        },\n        {\n          \"type\": \"button\",\n          \"data\": {\n            \"value\": {\n              \"content\": \"ORDER YOUR TICKET NOW\"\n            }\n          },\n          \"attributes\": {\n            \"align\": \"center\",\n            \"background-color\": \"#414141\",\n            \"color\": \"#ffffff\",\n            \"font-weight\": \"normal\",\n            \"border-radius\": \"3px\",\n            \"padding\": \"10px 25px 10px 25px\",\n            \"inner-padding\": \"10px 25px 10px 25px\",\n            \"line-height\": \"120%\",\n            \"target\": \"_blank\",\n            \"vertical-align\": \"middle\",\n            \"border\": \"none\",\n            \"text-align\": \"center\",\n            \"href\": \"https://mjml.io/\"\n          },\n          \"children\": []\n        }\n      ]\n    }\n  ]\n}\n```\n","readmeFilename":"readme.md"}