Skip to content

Commit 934177a

Browse files
dariomrkdariomrk
committed
feat: add email preview text
- closes #119
1 parent 3689ad1 commit 934177a

File tree

5 files changed

+128
-99
lines changed

5 files changed

+128
-99
lines changed

‎packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/EmailLayoutSidebarPanel.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import BaseSidebarPanel from './helpers/BaseSidebarPanel';
1010
import ColorInput, { NullableColorInput } from './helpers/inputs/ColorInput';
1111
import { NullableFontFamily } from './helpers/inputs/FontFamily';
1212
import SliderInput from './helpers/inputs/SliderInput';
13+
import TextInput from './helpers/inputs/TextInput';
1314

1415
type EmailLayoutSidebarFieldsProps = {
1516
data: EmailLayoutProps;
@@ -66,6 +67,12 @@ export default function EmailLayoutSidebarFields({ data, setData }: EmailLayoutS
6667
defaultValue={data.textColor ?? '#262626'}
6768
onChange={(textColor) => updateData({ ...data, textColor })}
6869
/>
70+
<TextInput
71+
label="Preview text"
72+
defaultValue=""
73+
rows={5}
74+
onChange={(previewText) => updateData({ ...data, previewText })}
75+
/>
6976
</BaseSidebarPanel>
7077
);
7178
}

‎packages/editor-sample/src/documents/blocks/EmailLayout/EmailLayoutEditor.tsx‎

Lines changed: 70 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { Fragment } from 'react';
22

33
import { useCurrentBlockId } from '../../editor/EditorBlock';
44
import { setDocument, setSelectedBlockId, useDocument } from '../../editor/EditorContext';
@@ -36,68 +36,78 @@ export default function EmailLayoutEditor(props: EmailLayoutProps) {
3636
const currentBlockId = useCurrentBlockId();
3737

3838
return (
39-
<div
40-
onClick={() => {
41-
setSelectedBlockId(null);
42-
}}
43-
style={{
44-
backgroundColor: props.backdropColor ?? '#F5F5F5',
45-
color: props.textColor ?? '#262626',
46-
fontFamily: getFontFamily(props.fontFamily),
47-
fontSize: '16px',
48-
fontWeight: '400',
49-
letterSpacing: '0.15008px',
50-
lineHeight: '1.5',
51-
margin: '0',
52-
padding: '32px 0',
53-
width: '100%',
54-
minHeight: '100%',
55-
}}
56-
>
57-
<table
58-
align="center"
59-
width="100%"
39+
<Fragment>
40+
{props.previewText && (
41+
<div
42+
style={{ display: 'none', maxHeight: '0px', overflow: 'hidden', 'mso-hide': 'all' } as React.CSSProperties}
43+
>
44+
{props.previewText}
45+
&nbsp;&#8204;&nbsp;&#204;&nbsp;&#8204;&nbsp;
46+
</div>
47+
)}
48+
<div
49+
onClick={() => {
50+
setSelectedBlockId(null);
51+
}}
6052
style={{
61-
margin: '0 auto',
62-
maxWidth: '600px',
63-
backgroundColor: props.canvasColor ?? '#FFFFFF',
64-
borderRadius: props.borderRadius ?? undefined,
65-
border: (() => {
66-
const v = props.borderColor;
67-
if (!v) {
68-
return undefined;
69-
}
70-
return `1px solid ${v}`;
71-
})(),
53+
backgroundColor: props.backdropColor ?? '#F5F5F5',
54+
color: props.textColor ?? '#262626',
55+
fontFamily: getFontFamily(props.fontFamily),
56+
fontSize: '16px',
57+
fontWeight: '400',
58+
letterSpacing: '0.15008px',
59+
lineHeight: '1.5',
60+
margin: '0',
61+
padding: '32px 0',
62+
width: '100%',
63+
minHeight: '100%',
7264
}}
73-
role="presentation"
74-
cellSpacing="0"
75-
cellPadding="0"
76-
border={0}
7765
>
78-
<tbody>
79-
<tr style={{ width: '100%' }}>
80-
<td>
81-
<EditorChildrenIds
82-
childrenIds={childrenIds}
83-
onChange={({ block, blockId, childrenIds }) => {
84-
setDocument({
85-
[blockId]: block,
86-
[currentBlockId]: {
87-
type: 'EmailLayout',
88-
data: {
89-
...document[currentBlockId].data,
90-
childrenIds: childrenIds,
66+
<table
67+
align="center"
68+
width="100%"
69+
style={{
70+
margin: '0 auto',
71+
maxWidth: '600px',
72+
backgroundColor: props.canvasColor ?? '#FFFFFF',
73+
borderRadius: props.borderRadius ?? undefined,
74+
border: (() => {
75+
const v = props.borderColor;
76+
if (!v) {
77+
return undefined;
78+
}
79+
return `1px solid ${v}`;
80+
})(),
81+
}}
82+
role="presentation"
83+
cellSpacing="0"
84+
cellPadding="0"
85+
border={0}
86+
>
87+
<tbody>
88+
<tr style={{ width: '100%' }}>
89+
<td>
90+
<EditorChildrenIds
91+
childrenIds={childrenIds}
92+
onChange={({ block, blockId, childrenIds }) => {
93+
setDocument({
94+
[blockId]: block,
95+
[currentBlockId]: {
96+
type: 'EmailLayout',
97+
data: {
98+
...document[currentBlockId].data,
99+
childrenIds: childrenIds,
100+
},
91101
},
92-
},
93-
});
94-
setSelectedBlockId(blockId);
95-
}}
96-
/>
97-
</td>
98-
</tr>
99-
</tbody>
100-
</table>
101-
</div>
102+
});
103+
setSelectedBlockId(blockId);
104+
}}
105+
/>
106+
</td>
107+
</tr>
108+
</tbody>
109+
</table>
110+
</div>
111+
</Fragment>
102112
);
103113
}

‎packages/editor-sample/src/documents/blocks/EmailLayout/EmailLayoutPropsSchema.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ const EmailLayoutPropsSchema = z.object({
2929
textColor: COLOR_SCHEMA,
3030
fontFamily: FONT_FAMILY_SCHEMA,
3131
childrenIds: z.array(z.string()).optional().nullable(),
32+
previewText: z.string().optional().nullable(),
3233
});
3334

3435
export default EmailLayoutPropsSchema;

‎packages/email-builder/src/blocks/EmailLayout/EmailLayoutPropsSchema.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export const EmailLayoutPropsSchema = z.object({
2828
canvasColor: COLOR_SCHEMA,
2929
textColor: COLOR_SCHEMA,
3030
fontFamily: FONT_FAMILY_SCHEMA,
31+
previewText: z.string().optional().nullable(),
3132
childrenIds: z.array(z.string()).optional().nullable(),
3233
});
3334

‎packages/email-builder/src/blocks/EmailLayout/EmailLayoutReader.tsx‎

Lines changed: 49 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react';
1+
import React, { Fragment } from 'react';
22

33
import { ReaderBlock } from '../../Reader/core';
44

@@ -38,46 +38,56 @@ function getBorder({ borderColor }: EmailLayoutProps) {
3838
export default function EmailLayoutReader(props: EmailLayoutProps) {
3939
const childrenIds = props.childrenIds ?? [];
4040
return (
41-
<div
42-
style={{
43-
backgroundColor: props.backdropColor ?? '#F5F5F5',
44-
color: props.textColor ?? '#262626',
45-
fontFamily: getFontFamily(props.fontFamily),
46-
fontSize: '16px',
47-
fontWeight: '400',
48-
letterSpacing: '0.15008px',
49-
lineHeight: '1.5',
50-
margin: '0',
51-
padding: '32px 0',
52-
minHeight: '100%',
53-
width: '100%',
54-
}}
55-
>
56-
<table
57-
align="center"
58-
width="100%"
41+
<Fragment>
42+
{props.previewText && (
43+
<div
44+
style={{ display: 'none', maxHeight: '0px', overflow: 'hidden', 'mso-hide': 'all' } as React.CSSProperties}
45+
>
46+
{props.previewText}
47+
&nbsp;&#8204;&nbsp;&#8204;&nbsp;&#8204;&nbsp;
48+
</div>
49+
)}
50+
<div
5951
style={{
60-
margin: '0 auto',
61-
maxWidth: '600px',
62-
backgroundColor: props.canvasColor ?? '#FFFFFF',
63-
borderRadius: props.borderRadius ?? undefined,
64-
border: getBorder(props),
52+
backgroundColor: props.backdropColor ?? '#F5F5F5',
53+
color: props.textColor ?? '#262626',
54+
fontFamily: getFontFamily(props.fontFamily),
55+
fontSize: '16px',
56+
fontWeight: '400',
57+
letterSpacing: '0.15008px',
58+
lineHeight: '1.5',
59+
margin: '0',
60+
padding: '32px 0',
61+
minHeight: '100%',
62+
width: '100%',
6563
}}
66-
role="presentation"
67-
cellSpacing="0"
68-
cellPadding="0"
69-
border={0}
7064
>
71-
<tbody>
72-
<tr style={{ width: '100%' }}>
73-
<td>
74-
{childrenIds.map((childId) => (
75-
<ReaderBlock key={childId} id={childId} />
76-
))}
77-
</td>
78-
</tr>
79-
</tbody>
80-
</table>
81-
</div>
65+
<table
66+
align="center"
67+
width="100%"
68+
style={{
69+
margin: '0 auto',
70+
maxWidth: '600px',
71+
backgroundColor: props.canvasColor ?? '#FFFFFF',
72+
borderRadius: props.borderRadius ?? undefined,
73+
border: getBorder(props),
74+
}}
75+
role="presentation"
76+
cellSpacing="0"
77+
cellPadding="0"
78+
border={0}
79+
>
80+
<tbody>
81+
<tr style={{ width: '100%' }}>
82+
<td>
83+
{childrenIds.map((childId) => (
84+
<ReaderBlock key={childId} id={childId} />
85+
))}
86+
</td>
87+
</tr>
88+
</tbody>
89+
</table>
90+
</div>
91+
</Fragment>
8292
);
8393
}

0 commit comments

Comments
 (0)