feat: add preview text

usewaypoint · Oct 23, 2024 · b808d91 · b808d91
1 parent 3689ad1
commit b808d91
Show file tree

Hide file tree

Showing 5 changed files with 128 additions and 99 deletions.
diff --git a/...ample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/EmailLayoutSidebarPanel.tsx b/...ample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/EmailLayoutSidebarPanel.tsx
@@ -10,6 +10,7 @@ import BaseSidebarPanel from './helpers/BaseSidebarPanel';
 import ColorInput, { NullableColorInput } from './helpers/inputs/ColorInput';
 import { NullableFontFamily } from './helpers/inputs/FontFamily';
 import SliderInput from './helpers/inputs/SliderInput';
+import TextInput from './helpers/inputs/TextInput';
 
 type EmailLayoutSidebarFieldsProps = {
   data: EmailLayoutProps;
@@ -66,6 +67,12 @@ export default function EmailLayoutSidebarFields({ data, setData }: EmailLayoutS
         defaultValue={data.textColor ?? '#262626'}
         onChange={(textColor) => updateData({ ...data, textColor })}
       />
+      <TextInput
+        label="Preview text"
+        defaultValue=""
+        rows={5}
+        onChange={(previewText) => updateData({ ...data, previewText })}
+      />
     </BaseSidebarPanel>
   );
 }
diff --git a/packages/editor-sample/src/documents/blocks/EmailLayout/EmailLayoutEditor.tsx b/packages/editor-sample/src/documents/blocks/EmailLayout/EmailLayoutEditor.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { useCurrentBlockId } from '../../editor/EditorBlock';
 import { setDocument, setSelectedBlockId, useDocument } from '../../editor/EditorContext';
@@ -36,68 +36,78 @@ export default function EmailLayoutEditor(props: EmailLayoutProps) {
   const currentBlockId = useCurrentBlockId();
 
   return (
-    <div
-      onClick={() => {
-        setSelectedBlockId(null);
-      }}
-      style={{
-        backgroundColor: props.backdropColor ?? '#F5F5F5',
-        color: props.textColor ?? '#262626',
-        fontFamily: getFontFamily(props.fontFamily),
-        fontSize: '16px',
-        fontWeight: '400',
-        letterSpacing: '0.15008px',
-        lineHeight: '1.5',
-        margin: '0',
-        padding: '32px 0',
-        width: '100%',
-        minHeight: '100%',
-      }}
-    >
-      <table
-        align="center"
-        width="100%"
+    <Fragment>
+      {props.previewText && (
+        <div
+          style={{ display: 'none', maxHeight: '0px', overflow: 'hidden' }}
+        >
+          {props.previewText}
+          &nbsp;&#8204;&nbsp;&#204;&nbsp;&#8204;&nbsp;
+        </div>
+      )}
+      <div
+        onClick={() => {
+          setSelectedBlockId(null);
+        }}
         style={{
-          margin: '0 auto',
-          maxWidth: '600px',
-          backgroundColor: props.canvasColor ?? '#FFFFFF',
-          borderRadius: props.borderRadius ?? undefined,
-          border: (() => {
-            const v = props.borderColor;
-            if (!v) {
-              return undefined;
-            }
-            return `1px solid ${v}`;
-          })(),
+          backgroundColor: props.backdropColor ?? '#F5F5F5',
+          color: props.textColor ?? '#262626',
+          fontFamily: getFontFamily(props.fontFamily),
+          fontSize: '16px',
+          fontWeight: '400',
+          letterSpacing: '0.15008px',
+          lineHeight: '1.5',
+          margin: '0',
+          padding: '32px 0',
+          width: '100%',
+          minHeight: '100%',
         }}
-        role="presentation"
-        cellSpacing="0"
-        cellPadding="0"
-        border={0}
       >
-        <tbody>
-          <tr style={{ width: '100%' }}>
-            <td>
-              <EditorChildrenIds
-                childrenIds={childrenIds}
-                onChange={({ block, blockId, childrenIds }) => {
-                  setDocument({
-                    [blockId]: block,
-                    [currentBlockId]: {
-                      type: 'EmailLayout',
-                      data: {
-                        ...document[currentBlockId].data,
-                        childrenIds: childrenIds,
+        <table
+          align="center"
+          width="100%"
+          style={{
+            margin: '0 auto',
+            maxWidth: '600px',
+            backgroundColor: props.canvasColor ?? '#FFFFFF',
+            borderRadius: props.borderRadius ?? undefined,
+            border: (() => {
+              const v = props.borderColor;
+              if (!v) {
+                return undefined;
+              }
+              return `1px solid ${v}`;
+            })(),
+          }}
+          role="presentation"
+          cellSpacing="0"
+          cellPadding="0"
+          border={0}
+        >
+          <tbody>
+            <tr style={{ width: '100%' }}>
+              <td>
+                <EditorChildrenIds
+                  childrenIds={childrenIds}
+                  onChange={({ block, blockId, childrenIds }) => {
+                    setDocument({
+                      [blockId]: block,
+                      [currentBlockId]: {
+                        type: 'EmailLayout',
+                        data: {
+                          ...document[currentBlockId].data,
+                          childrenIds: childrenIds,
+                        },
                       },
-                    },
-                  });
-                  setSelectedBlockId(blockId);
-                }}
-              />
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
+                    });
+                    setSelectedBlockId(blockId);
+                  }}
+                />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </Fragment>
   );
 }
diff --git a/packages/editor-sample/src/documents/blocks/EmailLayout/EmailLayoutPropsSchema.tsx b/packages/editor-sample/src/documents/blocks/EmailLayout/EmailLayoutPropsSchema.tsx
@@ -29,6 +29,7 @@ const EmailLayoutPropsSchema = z.object({
   textColor: COLOR_SCHEMA,
   fontFamily: FONT_FAMILY_SCHEMA,
   childrenIds: z.array(z.string()).optional().nullable(),
+  previewText: z.string().optional().nullable(),
 });
 
 export default EmailLayoutPropsSchema;

diff --git a/packages/email-builder/src/blocks/EmailLayout/EmailLayoutPropsSchema.tsx b/packages/email-builder/src/blocks/EmailLayout/EmailLayoutPropsSchema.tsx
@@ -28,6 +28,7 @@ export const EmailLayoutPropsSchema = z.object({
   canvasColor: COLOR_SCHEMA,
   textColor: COLOR_SCHEMA,
   fontFamily: FONT_FAMILY_SCHEMA,
+  previewText: z.string().optional().nullable(),
   childrenIds: z.array(z.string()).optional().nullable(),
 });
 

diff --git a/packages/email-builder/src/blocks/EmailLayout/EmailLayoutReader.tsx b/packages/email-builder/src/blocks/EmailLayout/EmailLayoutReader.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import { ReaderBlock } from '../../Reader/core';
 
@@ -38,46 +38,56 @@ function getBorder({ borderColor }: EmailLayoutProps) {
 export default function EmailLayoutReader(props: EmailLayoutProps) {
   const childrenIds = props.childrenIds ?? [];
   return (
-    <div
-      style={{
-        backgroundColor: props.backdropColor ?? '#F5F5F5',
-        color: props.textColor ?? '#262626',
-        fontFamily: getFontFamily(props.fontFamily),
-        fontSize: '16px',
-        fontWeight: '400',
-        letterSpacing: '0.15008px',
-        lineHeight: '1.5',
-        margin: '0',
-        padding: '32px 0',
-        minHeight: '100%',
-        width: '100%',
-      }}
-    >
-      <table
-        align="center"
-        width="100%"
+    <Fragment>
+      {props.previewText && (
+        <div
+          style={{ display: 'none', maxHeight: '0px', overflow: 'hidden'}}
+        >
+          {props.previewText}
+          &nbsp;&#8204;&nbsp;&#8204;&nbsp;&#8204;&nbsp;
+        </div>
+      )}
+      <div
         style={{
-          margin: '0 auto',
-          maxWidth: '600px',
-          backgroundColor: props.canvasColor ?? '#FFFFFF',
-          borderRadius: props.borderRadius ?? undefined,
-          border: getBorder(props),
+          backgroundColor: props.backdropColor ?? '#F5F5F5',
+          color: props.textColor ?? '#262626',
+          fontFamily: getFontFamily(props.fontFamily),
+          fontSize: '16px',
+          fontWeight: '400',
+          letterSpacing: '0.15008px',
+          lineHeight: '1.5',
+          margin: '0',
+          padding: '32px 0',
+          minHeight: '100%',
+          width: '100%',
         }}
-        role="presentation"
-        cellSpacing="0"
-        cellPadding="0"
-        border={0}
       >
-        <tbody>
-          <tr style={{ width: '100%' }}>
-            <td>
-              {childrenIds.map((childId) => (
-                <ReaderBlock key={childId} id={childId} />
-              ))}
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
+        <table
+          align="center"
+          width="100%"
+          style={{
+            margin: '0 auto',
+            maxWidth: '600px',
+            backgroundColor: props.canvasColor ?? '#FFFFFF',
+            borderRadius: props.borderRadius ?? undefined,
+            border: getBorder(props),
+          }}
+          role="presentation"
+          cellSpacing="0"
+          cellPadding="0"
+          border={0}
+        >
+          <tbody>
+            <tr style={{ width: '100%' }}>
+              <td>
+                {childrenIds.map((childId) => (
+                  <ReaderBlock key={childId} id={childId} />
+                ))}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </Fragment>
   );
 }