houseassassin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix email editor-email discrepancies (#15436)

Browse Source 
Fix https://github.com/twentyhq/twenty/issues/15346

- email not centered
- reduced title sizes
- made paragraph line height and margin consistent with editor
- display line jumps

Editor
<img width="1505" height="701" alt="Capture d’écran 2025-10-29 à 16 46
20"
src="https://github.com/user-attachments/assets/5f6c6377-62b2-4697-861e-39a648cd48bb"
/>

Email
<img width="1505" height="648" alt="Capture d’écran 2025-10-29 à 16 46
36"
src="https://github.com/user-attachments/assets/a596acd8-567f-4726-996c-248519b250c5"
/>
This commit is contained in:
Thomas Trompette
2025-10-29 17:10:21 +01:00
committed by GitHub
parent be3ceca0a3
commit 75ed5cb3a2
6 changed files with 17 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-emails/src/utils/email-renderer/email-renderer.tsx
+2 -13
View File
@@ -1,4 +1,4 @@
import { Body, Container, Head, Html } from '@react-email/components';
import { Body, Head, Html } from '@react-email/components';
import { type JSONContent } from '@tiptap/core';
import { mappedNodeContent } from 'src/utils/email-renderer/renderers/render-node';
@@ -17,18 +17,7 @@ export const reactMarkupFromJSON = (json: JSONContent | string) => {
}}
/>
</Head>
<Body>
<Container
style={{
width: '100%',
marginLeft: 'auto',
marginRight: 'auto',
borderStyle: 'solid',
}}
>
{jsxNodes}
</Container>
</Body>
<Body>{jsxNodes}</Body>
</Html>
);
};
packages/twenty-emails/src/utils/email-renderer/nodes/bullet-list.tsx
+1 -1
View File
@@ -6,7 +6,7 @@ export const bulletList = (node: JSONContent): ReactNode => {
return (
<ul
style={{
marginBottom: '8px',
marginBottom: '16px',
lineHeight: '1.5',
}}
>
packages/twenty-emails/src/utils/email-renderer/nodes/heading.tsx
+3 -3
View File
@@ -12,9 +12,9 @@ type HeadingStyle = {
};
const HEADING_STYLES: Record<HeadingLevel, HeadingStyle> = {
1: { element: 'h1', fontSize: '36px' },
2: { element: 'h2', fontSize: '30px' },
3: { element: 'h3', fontSize: '24px' },
1: { element: 'h1', fontSize: '32px' },
2: { element: 'h2', fontSize: '24px' },
3: { element: 'h3', fontSize: '16px' },
};
export const heading = (node: JSONContent): ReactNode => {
packages/twenty-emails/src/utils/email-renderer/nodes/ordered-list.tsx
+1 -1
View File
@@ -6,7 +6,7 @@ export const orderedList = (node: JSONContent): ReactNode => {
return (
<ol
style={{
marginBottom: '8px',
marginBottom: '16px',
lineHeight: '1.5',
}}
>
packages/twenty-emails/src/utils/email-renderer/nodes/paragraph.tsx
+7 -1
View File
@@ -4,5 +4,11 @@ import { type ReactNode } from 'react';
import { mappedNodeContent } from 'src/utils/email-renderer/renderers/render-node';
export const paragraph = (node: JSONContent): ReactNode => {
return <Text>{mappedNodeContent(node)}</Text>;
const content = mappedNodeContent(node);
return (
<Text style={{ lineHeight: '1.5', margin: '0', padding: '0' }}>
{content.length === 0 ? <>&nbsp;</> : content}
</Text>
);
};
packages/twenty-front/src/modules/advanced-text-editor/components/AdvancedTextEditor.tsx
+3 -5
View File
@@ -21,8 +21,6 @@ const StyledEditorContainer = styled.div<{
width: 100%;
height: 100%;
min-height: ${({ minHeight }) => minHeight}px;
max-width: ${({ maxWidth }) => maxWidth}px;
margin: 0 auto;
}
.tiptap {
@@ -56,15 +54,15 @@ const StyledEditorContainer = styled.div<{
}
h1 {
font-size: 36px;
font-size: 32px;
}
h2 {
font-size: 30px;
font-size: 24px;
}
h3 {
font-size: 24px;
font-size: 16px;
}
li {