diff --git a/packages/editor-sample/package-lock.json b/packages/editor-sample/package-lock.json index bca2d04..7b079c4 100644 --- a/packages/editor-sample/package-lock.json +++ b/packages/editor-sample/package-lock.json @@ -12,18 +12,18 @@ "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.15.10", "@mui/material": "^5.15.10", - "@usewaypoint/block-avatar": "^0.0.1", - "@usewaypoint/block-button": "^0.0.2", - "@usewaypoint/block-columns-container": "^0.0.2", - "@usewaypoint/block-container": "^0.0.1", - "@usewaypoint/block-divider": "^0.0.3", - "@usewaypoint/block-heading": "^0.0.2", - "@usewaypoint/block-html": "^0.0.2", - "@usewaypoint/block-image": "^0.0.4", - "@usewaypoint/block-spacer": "^0.0.2", - "@usewaypoint/block-text": "^0.0.2", - "@usewaypoint/document-core": "^0.0.4", - "@usewaypoint/email-builder": "^0.0.3", + "@usewaypoint/block-avatar": "^0.0.3", + "@usewaypoint/block-button": "^0.0.3", + "@usewaypoint/block-columns-container": "^0.0.3", + "@usewaypoint/block-container": "^0.0.2", + "@usewaypoint/block-divider": "^0.0.4", + "@usewaypoint/block-heading": "^0.0.3", + "@usewaypoint/block-html": "^0.0.3", + "@usewaypoint/block-image": "^0.0.5", + "@usewaypoint/block-spacer": "^0.0.3", + "@usewaypoint/block-text": "^0.0.4", + "@usewaypoint/document-core": "^0.0.6", + "@usewaypoint/email-builder": "^0.0.6", "highlight.js": "^11.9.0", "prettier": "^3.2.5", "react": "^18.2.0", @@ -1878,123 +1878,127 @@ "dev": true }, "node_modules/@usewaypoint/block-avatar": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/@usewaypoint/block-avatar/-/block-avatar-0.0.1.tgz", - "integrity": "sha512-RHpynXK6iLbejoZN8k+OXIaJGU22LZWHWcW9nEdsHwPaHxSbwh7UPcBrTntC5zRqMYDZlF7u3iYpSg02O4bxRQ==", + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/@usewaypoint/block-avatar/-/block-avatar-0.0.3.tgz", + "integrity": "sha512-3BM6P4ztMmqDbSijtVQqI1canRkcENOEHZ2X9BYNv8BZGJbmitTrzANvwmmYXfFEuWPCAyABvujdZds15Zg8Qg==", "peerDependencies": { "react": "^16 || ^17 || ^18", "zod": "^1 || ^2 || ^3" } }, "node_modules/@usewaypoint/block-button": { - "version": "0.0.2", - "resolved": "https://registry.npmjs.org/@usewaypoint/block-button/-/block-button-0.0.2.tgz", - "integrity": "sha512-WzWlJoJBiVfI3Iak9JPey7u/hJIkxXuhuAI6Y10ef795Panyr1GxQbdH2//fZtajjGJ1SjJStXpz6nPEd8wArg==", + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/@usewaypoint/block-button/-/block-button-0.0.3.tgz", + "integrity": "sha512-LXSI3FmCTv13voYX4wdHY7iJdsfyRfpDJZCFKSun5EF1j9FXrqMDGScpk/yokopkQWvWkYXQNAne7W0yWhRQlg==", "peerDependencies": { "react": "^16 || ^17 || ^18", "zod": "^1 || ^2 || ^3" } }, "node_modules/@usewaypoint/block-columns-container": { - "version": "0.0.2", - "resolved": "https://registry.npmjs.org/@usewaypoint/block-columns-container/-/block-columns-container-0.0.2.tgz", - "integrity": "sha512-W5rstBOb/uLJ0L43zilUbQEoc+H+2jA8L8RVlCt4unvZsaqYGdcyaqZ6bs6qpeHjB2LtzLvFEcaqSuevhg3uRQ==", + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/@usewaypoint/block-columns-container/-/block-columns-container-0.0.3.tgz", + "integrity": "sha512-r5jaojU1Fr6Svtl0a9dDlBHgslJQ04M+XaXaEO+GZ12+35fdAirpLkrEhuyBIA1FFXzRTG740wkbkr++iv1kuA==", "peerDependencies": { "react": "^16 || ^17 || ^18", "zod": "^1 || ^2 || ^3" } }, "node_modules/@usewaypoint/block-container": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/@usewaypoint/block-container/-/block-container-0.0.1.tgz", - "integrity": "sha512-DsxXVVKLWv86CbQhCAbnvRDe/wJ0sj5XNma5hb0l1p7YqK42NVxKCRPF1Bw6m2WhEcXZFbz+8CIxHqjo6p1QIw==", + "version": "0.0.2", + "resolved": "https://registry.npmjs.org/@usewaypoint/block-container/-/block-container-0.0.2.tgz", + "integrity": "sha512-li9GVdiahVpJ+MNRdkoCkP6/hBTdcpaLRGpaFBSQRkVt+cYAeB7qPNIo+242hUvVTm5Qky8ceGLDVblGYSZb7A==", "peerDependencies": { "react": "^16 || ^17 || ^18", "zod": "^1 || ^2 || ^3" } }, "node_modules/@usewaypoint/block-divider": { - "version": "0.0.3", - "resolved": "https://registry.npmjs.org/@usewaypoint/block-divider/-/block-divider-0.0.3.tgz", - "integrity": "sha512-ZtjBWVakxUg+YbI0yWIX/TO0mmj8pjSUqK/o6Je5bx+rfETXaWlxRTwhZGWMNnYeY1sTjIlcbg2zGgdmmgxvXg==", + "version": "0.0.4", + "resolved": "https://registry.npmjs.org/@usewaypoint/block-divider/-/block-divider-0.0.4.tgz", + "integrity": "sha512-q54ydWvKdg7Zwc4hzIwE6i/mC8dFYxfPRACEEEyu2dvSNa9cbKFIsPD9ipVSntK+Ib3Ml84uT4aHQmOlzP6hZA==", "peerDependencies": { "react": "^16 || ^17 || ^18", "zod": "^1 || ^2 || ^3" } }, "node_modules/@usewaypoint/block-heading": { - "version": "0.0.2", - "resolved": "https://registry.npmjs.org/@usewaypoint/block-heading/-/block-heading-0.0.2.tgz", - "integrity": "sha512-l5tCcyfYAp+sta93ZXs1pmz+F/3W6XP2aiyAr/6uVpV2mwL7MloWUlpHRzwZEEyIW/jIJwYkNexabRLrxK181A==", + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/@usewaypoint/block-heading/-/block-heading-0.0.3.tgz", + "integrity": "sha512-1dMrf1U34nq2FuwTUfsq+hBOdLQz1H+lVMEH9xvyCq5I7nSXCzpeo7QgumZ3zZEHtu3QgSEGafJaZyrj2paC0w==", "peerDependencies": { "react": "^16 || ^17 || ^18", "zod": "^1 || ^2 || ^3" } }, "node_modules/@usewaypoint/block-html": { - "version": "0.0.2", - "resolved": "https://registry.npmjs.org/@usewaypoint/block-html/-/block-html-0.0.2.tgz", - "integrity": "sha512-QEaMF1DRk+MgJiC8s4TfQe4eBpJghzriIPyS/+hxRVAiDwbOmRencaPRZ4JpDBi34sVNwLvRJZa5KvUFN4w6hg==", + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/@usewaypoint/block-html/-/block-html-0.0.3.tgz", + "integrity": "sha512-ZI9oYDibMzs5y/YzfvUwuUBzHDKHOIjiStiVCvlmIA+VtJTycqT8X/ECjn+KmwesLTg5DhG07CC4WY2SL3AnJw==", "peerDependencies": { "react": "^16 || ^17 || ^18", "zod": "^1 || ^2 || ^3" } }, "node_modules/@usewaypoint/block-image": { - "version": "0.0.4", - "resolved": "https://registry.npmjs.org/@usewaypoint/block-image/-/block-image-0.0.4.tgz", - "integrity": "sha512-QNslGaV4zrgXj+VtbAktT7QBUxoelIyDMOgQtF8HsZzkfl66S28MtwwofodQpzKRtUrtegQ9o9hpL5zgjQUv0w==", + "version": "0.0.5", + "resolved": "https://registry.npmjs.org/@usewaypoint/block-image/-/block-image-0.0.5.tgz", + "integrity": "sha512-b66jAXF79idsrIRc2QoBlZctIXdqg/qOAL7/QvKvENZH2KmuXoZhEUx+Z7sACvEQD/VI0u7TK5msDsA5S0/oVQ==", "peerDependencies": { "react": "^16 || ^17 || ^18", "zod": "^1 || ^2 || ^3" } }, "node_modules/@usewaypoint/block-spacer": { - "version": "0.0.2", - "resolved": "https://registry.npmjs.org/@usewaypoint/block-spacer/-/block-spacer-0.0.2.tgz", - "integrity": "sha512-pH+QFmE2e0ULZeEGwh70qOtSKBdvmq/yue3IVPzx05fHymjr3fV/os1eSgEN2SRCcOC02wu3MvFX5LbV+vz4sQ==", + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/@usewaypoint/block-spacer/-/block-spacer-0.0.3.tgz", + "integrity": "sha512-CCcMtwcpeC2rHvawQdh5f0Hez7o4xA/edWl/6I3RuA6Yb6STyyrGjmPFs2ZxHQsLOGUK+0OvBenuHlSTCZwuuA==", "peerDependencies": { "react": "^16 || ^17 || ^18", "zod": "^1 || ^2 || ^3" } }, "node_modules/@usewaypoint/block-text": { - "version": "0.0.2", - "resolved": "https://registry.npmjs.org/@usewaypoint/block-text/-/block-text-0.0.2.tgz", - "integrity": "sha512-iX4hxq/Rql5syTuXQYB3BGm6vZDKns83FUHH66y06pQuSLPR7i0YvokOLm2Ez96S+i6NOh3XVTg/wcx2Hg2FgA==", + "version": "0.0.4", + "resolved": "https://registry.npmjs.org/@usewaypoint/block-text/-/block-text-0.0.4.tgz", + "integrity": "sha512-c+CiTkwFSrclPxRx9Gt+nE6KkAmY5tWDumBa3qQnVrxdCjCmGK0qOj9avm9vqf9hd5JxaX4tgWhG/oi2u/zMxA==", + "dependencies": { + "markdown-parser-react": "^1.1.2" + }, "peerDependencies": { "react": "^16 || ^17 || ^18", "zod": "^1 || ^2 || ^3" } }, "node_modules/@usewaypoint/document-core": { - "version": "0.0.4", - "resolved": "https://registry.npmjs.org/@usewaypoint/document-core/-/document-core-0.0.4.tgz", - "integrity": "sha512-xlPM5zexUhuRDsSwPVZ8cvemmsffLDb4wxlaAVMXi4ayO7ZHHrc9SiLiBkR8cnfQ3OvnHlZaO8YDsGmnckGqYw==", + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/@usewaypoint/document-core/-/document-core-0.0.6.tgz", + "integrity": "sha512-Hg10gszVCZRJhA4nIWwAi2rTXuoxPL+ATMe0hU243PFBIUZOwDIQus4XZSeoHsenMCq1uBFCRiFW4hl2+tVwgA==", "peerDependencies": { "react": "^16 || ^17 || ^18", "zod": "^1 || ^2 || ^3" } }, "node_modules/@usewaypoint/email-builder": { - "version": "0.0.3", - "resolved": "https://registry.npmjs.org/@usewaypoint/email-builder/-/email-builder-0.0.3.tgz", - "integrity": "sha512-WqUzWOcR9DTuEOFupjEzbgx2exxC0rZibf/9oJgPTYE7IPm3hEkTBQql6ttwzPjb3gwxP6nCUIGKF3ltMcQwuA==", - "dependencies": { - "@usewaypoint/block-avatar": "^0.0.1", - "@usewaypoint/block-button": "^0.0.2", - "@usewaypoint/block-columns-container": "^0.0.2", - "@usewaypoint/block-container": "^0.0.1", - "@usewaypoint/block-divider": "^0.0.3", - "@usewaypoint/block-heading": "^0.0.2", - "@usewaypoint/block-html": "^0.0.2", - "@usewaypoint/block-image": "^0.0.4", - "@usewaypoint/block-spacer": "^0.0.2", - "@usewaypoint/block-text": "^0.0.2", - "@usewaypoint/document-core": "^0.0.4" + "version": "0.0.6", + "resolved": "https://registry.npmjs.org/@usewaypoint/email-builder/-/email-builder-0.0.6.tgz", + "integrity": "sha512-OullFjVUwlPXkq7b+HSGMPKJcSSEbH1gm6a2TQ5uIsPIHeFb/af6EmXd8IIctf0pz1cH41USg6rBR504vuuXZw==", + "dependencies": { + "@usewaypoint/block-avatar": "^0.0.3", + "@usewaypoint/block-button": "^0.0.3", + "@usewaypoint/block-columns-container": "^0.0.3", + "@usewaypoint/block-container": "^0.0.2", + "@usewaypoint/block-divider": "^0.0.4", + "@usewaypoint/block-heading": "^0.0.3", + "@usewaypoint/block-html": "^0.0.3", + "@usewaypoint/block-image": "^0.0.5", + "@usewaypoint/block-spacer": "^0.0.3", + "@usewaypoint/block-text": "^0.0.4", + "@usewaypoint/document-core": "^0.0.6" }, "peerDependencies": { "react": "^16 || ^17 || ^18", + "react-dom": "^16 || ^17 || ^18", "zod": "^1 || ^2 || ^3" } }, @@ -3034,6 +3038,14 @@ "node": ">=10" } }, + "node_modules/markdown-parser-react": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/markdown-parser-react/-/markdown-parser-react-1.1.2.tgz", + "integrity": "sha512-MNLHekU1xOwKZLJK4NMWJDL9pNnJdKx2jdsHfAF4+Y5rF4tD/S/OuNehd4X46/KcJzBfas19pePVcwQoibpeNg==", + "dependencies": { + "react": "^18.2.0" + } + }, "node_modules/merge2": { "version": "1.4.1", "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", diff --git a/packages/editor-sample/package.json b/packages/editor-sample/package.json index 9440e73..f85ed42 100644 --- a/packages/editor-sample/package.json +++ b/packages/editor-sample/package.json @@ -12,18 +12,18 @@ "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.15.10", "@mui/material": "^5.15.10", - "@usewaypoint/block-avatar": "^0.0.1", - "@usewaypoint/block-button": "^0.0.2", - "@usewaypoint/block-columns-container": "^0.0.2", - "@usewaypoint/block-container": "^0.0.1", - "@usewaypoint/block-divider": "^0.0.3", - "@usewaypoint/block-heading": "^0.0.2", - "@usewaypoint/block-html": "^0.0.2", - "@usewaypoint/block-image": "^0.0.4", - "@usewaypoint/block-spacer": "^0.0.2", - "@usewaypoint/block-text": "^0.0.2", - "@usewaypoint/document-core": "^0.0.4", - "@usewaypoint/email-builder": "^0.0.3", + "@usewaypoint/block-avatar": "^0.0.3", + "@usewaypoint/block-button": "^0.0.3", + "@usewaypoint/block-columns-container": "^0.0.3", + "@usewaypoint/block-container": "^0.0.2", + "@usewaypoint/block-divider": "^0.0.4", + "@usewaypoint/block-heading": "^0.0.3", + "@usewaypoint/block-html": "^0.0.3", + "@usewaypoint/block-image": "^0.0.5", + "@usewaypoint/block-spacer": "^0.0.3", + "@usewaypoint/block-text": "^0.0.4", + "@usewaypoint/document-core": "^0.0.6", + "@usewaypoint/email-builder": "^0.0.6", "highlight.js": "^11.9.0", "prettier": "^3.2.5", "react": "^18.2.0", diff --git a/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/EmailLayoutSidebarPanel.tsx b/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/EmailLayoutSidebarPanel.tsx index 03c2034..9293a0e 100644 --- a/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/EmailLayoutSidebarPanel.tsx +++ b/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/EmailLayoutSidebarPanel.tsx @@ -1,12 +1,15 @@ import React, { useState } from 'react'; +import { RoundedCornerOutlined } from '@mui/icons-material'; + import EmailLayoutPropsSchema, { EmailLayoutProps, } from '../../../../documents/blocks/EmailLayout/EmailLayoutPropsSchema'; import BaseSidebarPanel from './helpers/BaseSidebarPanel'; -import ColorInput from './helpers/inputs/ColorInput'; +import ColorInput, { NullableColorInput } from './helpers/inputs/ColorInput'; import { NullableFontFamily } from './helpers/inputs/FontFamily'; +import SliderInput from './helpers/inputs/SliderInput'; type EmailLayoutSidebarFieldsProps = { data: EmailLayoutProps; @@ -37,7 +40,22 @@ export default function EmailLayoutSidebarFields({ data, setData }: EmailLayoutS defaultValue={data.canvasColor ?? '#FFFFFF'} onChange={(canvasColor) => updateData({ ...data, canvasColor })} /> - + updateData({ ...data, borderColor })} + /> + } + units="px" + step={4} + marks + min={0} + max={48} + label="Canvas border radius" + defaultValue={data.borderRadius ?? 0} + onChange={(borderRadius) => updateData({ ...data, borderRadius })} + /> updateData({ ...data, props: { ...data.props, text } })} /> + updateData({ ...data, props: { ...data.props, markdown } })} + /> { + const v = props.borderColor; + if (!v) { + return undefined; + } + return `1px solid ${v}`; + })(), }} role="presentation" cellSpacing="0" diff --git a/packages/editor-sample/src/documents/blocks/EmailLayout/EmailLayoutPropsSchema.tsx b/packages/editor-sample/src/documents/blocks/EmailLayout/EmailLayoutPropsSchema.tsx index 5eef514..880f3ae 100644 --- a/packages/editor-sample/src/documents/blocks/EmailLayout/EmailLayoutPropsSchema.tsx +++ b/packages/editor-sample/src/documents/blocks/EmailLayout/EmailLayoutPropsSchema.tsx @@ -23,6 +23,8 @@ const FONT_FAMILY_SCHEMA = z const EmailLayoutPropsSchema = z.object({ backdropColor: COLOR_SCHEMA, + borderColor: COLOR_SCHEMA, + borderRadius: z.number().optional().nullable(), canvasColor: COLOR_SCHEMA, textColor: COLOR_SCHEMA, fontFamily: FONT_FAMILY_SCHEMA, diff --git a/packages/email-builder/package-lock.json b/packages/email-builder/package-lock.json index 69ba7ec..cbcb5bf 100644 --- a/packages/email-builder/package-lock.json +++ b/packages/email-builder/package-lock.json @@ -1,12 +1,12 @@ { "name": "@usewaypoint/email-builder", - "version": "0.0.5", + "version": "0.0.6", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@usewaypoint/email-builder", - "version": "0.0.5", + "version": "0.0.6", "license": "MIT", "dependencies": { "@usewaypoint/block-avatar": "^0.0.3", @@ -18,7 +18,7 @@ "@usewaypoint/block-html": "^0.0.3", "@usewaypoint/block-image": "^0.0.5", "@usewaypoint/block-spacer": "^0.0.3", - "@usewaypoint/block-text": "^0.0.3", + "@usewaypoint/block-text": "^0.0.4", "@usewaypoint/document-core": "^0.0.6" }, "peerDependencies": { @@ -109,9 +109,12 @@ } }, "node_modules/@usewaypoint/block-text": { - "version": "0.0.3", - "resolved": "https://registry.npmjs.org/@usewaypoint/block-text/-/block-text-0.0.3.tgz", - "integrity": "sha512-EcZ1q1rwCZgKlYBqXX8Clq7tNTQLGQ8lePvaI4+X8+t6tYXR/gDgH4glUVDDUraG7QQyZ1QRdSKMIi1DPfqc3w==", + "version": "0.0.4", + "resolved": "https://registry.npmjs.org/@usewaypoint/block-text/-/block-text-0.0.4.tgz", + "integrity": "sha512-c+CiTkwFSrclPxRx9Gt+nE6KkAmY5tWDumBa3qQnVrxdCjCmGK0qOj9avm9vqf9hd5JxaX4tgWhG/oi2u/zMxA==", + "dependencies": { + "markdown-parser-react": "^1.1.2" + }, "peerDependencies": { "react": "^16 || ^17 || ^18", "zod": "^1 || ^2 || ^3" @@ -129,14 +132,12 @@ "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", - "peer": true + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" }, "node_modules/loose-envify": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", - "peer": true, "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" }, @@ -144,11 +145,18 @@ "loose-envify": "cli.js" } }, + "node_modules/markdown-parser-react": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/markdown-parser-react/-/markdown-parser-react-1.1.2.tgz", + "integrity": "sha512-MNLHekU1xOwKZLJK4NMWJDL9pNnJdKx2jdsHfAF4+Y5rF4tD/S/OuNehd4X46/KcJzBfas19pePVcwQoibpeNg==", + "dependencies": { + "react": "^18.2.0" + } + }, "node_modules/react": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", - "peer": true, "dependencies": { "loose-envify": "^1.1.0" }, diff --git a/packages/email-builder/package.json b/packages/email-builder/package.json index c6525f5..56dbd39 100644 --- a/packages/email-builder/package.json +++ b/packages/email-builder/package.json @@ -1,6 +1,6 @@ { "name": "@usewaypoint/email-builder", - "version": "0.0.5", + "version": "0.0.6", "description": "React component to render email messages", "main": "./dist/index.js", "module": "./dist/index.mjs", @@ -35,7 +35,7 @@ "@usewaypoint/block-html": "^0.0.3", "@usewaypoint/block-image": "^0.0.5", "@usewaypoint/block-spacer": "^0.0.3", - "@usewaypoint/block-text": "^0.0.3", + "@usewaypoint/block-text": "^0.0.4", "@usewaypoint/document-core": "^0.0.6" } } diff --git a/packages/email-builder/src/blocks/EmailLayout/EmailLayoutPropsSchema.tsx b/packages/email-builder/src/blocks/EmailLayout/EmailLayoutPropsSchema.tsx index d06e5da..439b6ba 100644 --- a/packages/email-builder/src/blocks/EmailLayout/EmailLayoutPropsSchema.tsx +++ b/packages/email-builder/src/blocks/EmailLayout/EmailLayoutPropsSchema.tsx @@ -23,6 +23,8 @@ const FONT_FAMILY_SCHEMA = z export const EmailLayoutPropsSchema = z.object({ backdropColor: COLOR_SCHEMA, + borderColor: COLOR_SCHEMA, + borderRadius: z.number().optional().nullable(), canvasColor: COLOR_SCHEMA, textColor: COLOR_SCHEMA, fontFamily: FONT_FAMILY_SCHEMA, diff --git a/packages/email-builder/src/blocks/EmailLayout/EmailLayoutReader.tsx b/packages/email-builder/src/blocks/EmailLayout/EmailLayoutReader.tsx index 98e11be..f9f356c 100644 --- a/packages/email-builder/src/blocks/EmailLayout/EmailLayoutReader.tsx +++ b/packages/email-builder/src/blocks/EmailLayout/EmailLayoutReader.tsx @@ -28,6 +28,13 @@ function getFontFamily(fontFamily: EmailLayoutProps['fontFamily']) { } } +function getBorder({ borderColor }: EmailLayoutProps) { + if (!borderColor) { + return undefined; + } + return `1px solid ${borderColor}`; +} + export default function EmailLayoutReader(props: EmailLayoutProps) { const childrenIds = props.childrenIds ?? []; return ( @@ -53,6 +60,8 @@ export default function EmailLayoutReader(props: EmailLayoutProps) { margin: '0 auto', maxWidth: '600px', backgroundColor: props.canvasColor ?? '#FFFFFF', + borderRadius: props.borderRadius ?? undefined, + border: getBorder(props), }} role="presentation" cellSpacing="0"