From 9a2766feae11968273baefafe36bb5aa76308bab Mon Sep 17 00:00:00 2001
From: Arik Chakma <arikchangma@gmail.com>
Date: Sun, 21 Sep 2025 20:55:34 +0600
Subject: [PATCH] feat: rich text email body (#14482)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Raphaël Bosi <71827178+bosiraphael@users.noreply.github.com>
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
Co-authored-by: Félix Malfait <felix@twenty.com>
---
 package.json                                  |   4 +-
 packages/twenty-emails/package.json           |   1 +
 packages/twenty-emails/src/index.ts           |   4 +-
 .../utils/email-renderer/email-renderer.tsx   |  34 ++
 .../src/utils/email-renderer/marks/bold.tsx   |   6 +
 .../src/utils/email-renderer/marks/italic.tsx |   6 +
 .../src/utils/email-renderer/marks/link.tsx   |  21 ++
 .../src/utils/email-renderer/marks/strike.tsx |   6 +
 .../utils/email-renderer/marks/underline.tsx  |   6 +
 .../utils/email-renderer/nodes/heading.tsx    |  35 ++
 .../src/utils/email-renderer/nodes/image.tsx  |  31 ++
 .../utils/email-renderer/nodes/paragraph.tsx  |   8 +
 .../src/utils/email-renderer/nodes/text.tsx   |  17 +
 .../email-renderer/nodes/variable-tag.tsx     |  12 +
 .../email-renderer/renderers/render-mark.tsx  |  46 +++
 .../email-renderer/renderers/render-node.tsx  |  40 +++
 packages/twenty-front/package.json            |   7 +
 .../fullscreen/hooks/useFullScreenModal.tsx   |  89 +++++
 .../WorkflowEditActionServerlessFunction.tsx  | 164 ++++-----
 ...owEditActionServerlessFunction.stories.tsx | 222 ++++++++++++
 .../WorkflowEditActionSendEmail.tsx           |   6 +-
 .../components/WorkflowEmailEditor.tsx        |  98 ++++++
 .../components/WorkflowSendEmailBody.tsx      | 261 ++++++++++++++
 .../WorkflowEmailEditor.stories.tsx           | 276 +++++++++++++++
 .../WorkflowSendEmailBody.stories.tsx         | 320 ++++++++++++++++++
 .../image-bubble-menu/ImageBubbleMenu.tsx     |  96 ++++++
 .../link-bubble-menu/LinkBubbleMenu.tsx       |  62 ++++
 .../text-bubble-menu/BubbleMenuIconButton.tsx |  44 +++
 .../text-bubble-menu/EditLinkPopover.tsx      |  79 +++++
 .../text-bubble-menu/TextBubbleMenu.tsx       |  87 +++++
 .../TurnIntoBlockDropdown.tsx                 |  89 +++++
 .../resizable-image/ResizableImage.ts         |  21 ++
 .../resizable-image/ResizableImageView.tsx    | 215 ++++++++++++
 .../resizable-image/UploadImageExtension.ts   |  61 ++++
 .../resizable-image/UploadImagePlugin.ts      | 128 +++++++
 .../email-action/hooks/useEmailEditor.ts      | 103 ++++++
 .../email-action/hooks/useTextBubbleState.ts  |  20 ++
 .../hooks/useTurnIntoBlockOptions.ts          |  81 +++++
 .../email-action/utils/isTextSelected.ts      |  27 ++
 .../components/WorkflowVariablesDropdown.tsx  |   1 +
 .../utils/getInitialEmailEditorContent.ts     |  31 ++
 packages/twenty-server/package.json           |   4 +-
 .../approved-access-domain.service.ts         |   4 +-
 .../services/approved-access-domain.spec.ts   |  11 +
 .../auth/services/auth.service.ts             |   4 +-
 .../services/reset-password.service.spec.ts   |  11 +
 .../auth/services/reset-password.service.ts   |   4 +-
 .../services/email-verification.service.ts    |   4 +-
 .../tools/send-email-tool/send-email-tool.ts  |  13 +-
 .../workspace-invitation.service.spec.ts      |  11 +
 .../services/workspace-invitation.service.ts  |   4 +-
 .../services/cleaner.workspace-service.ts     |   8 +-
 .../constants/standard-field-ids.ts           |   2 +
 .../attachment.workspace-entity.ts            |  17 +
 .../messaging-send-message-gmail.spec.ts      | 147 ++++++++
 .../messaging-send-message.service.ts         |  23 +-
 .../__tests__/gmail-mime-message.spec.ts      |  61 ++++
 .../workflow.workspace-entity.ts              |  13 +
 .../src/utils/parse-email-body.ts             |  11 +
 packages/twenty-shared/src/utils/index.ts     |  11 +
 .../twenty-shared/src/utils/tiptap/index.ts   |   1 +
 .../src/utils/tiptap/tiptap-marks.ts          |  42 +++
 .../display/icon/components/TablerIcons.ts    |  11 +-
 packages/twenty-ui/src/display/index.ts       |  11 +-
 .../code-editor/components/CodeEditor.tsx     |   3 +-
 yarn.lock                                     | 292 ++++++++--------
 66 files changed, 3312 insertions(+), 276 deletions(-)
 create mode 100644 packages/twenty-emails/src/utils/email-renderer/email-renderer.tsx
 create mode 100644 packages/twenty-emails/src/utils/email-renderer/marks/bold.tsx
 create mode 100644 packages/twenty-emails/src/utils/email-renderer/marks/italic.tsx
 create mode 100644 packages/twenty-emails/src/utils/email-renderer/marks/link.tsx
 create mode 100644 packages/twenty-emails/src/utils/email-renderer/marks/strike.tsx
 create mode 100644 packages/twenty-emails/src/utils/email-renderer/marks/underline.tsx
 create mode 100644 packages/twenty-emails/src/utils/email-renderer/nodes/heading.tsx
 create mode 100644 packages/twenty-emails/src/utils/email-renderer/nodes/image.tsx
 create mode 100644 packages/twenty-emails/src/utils/email-renderer/nodes/paragraph.tsx
 create mode 100644 packages/twenty-emails/src/utils/email-renderer/nodes/text.tsx
 create mode 100644 packages/twenty-emails/src/utils/email-renderer/nodes/variable-tag.tsx
 create mode 100644 packages/twenty-emails/src/utils/email-renderer/renderers/render-mark.tsx
 create mode 100644 packages/twenty-emails/src/utils/email-renderer/renderers/render-node.tsx
 create mode 100644 packages/twenty-front/src/modules/ui/layout/fullscreen/hooks/useFullScreenModal.tsx
 create mode 100644 packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/code-action/components/__stories__/WorkflowEditActionServerlessFunction.stories.tsx
 create mode 100644 packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/components/WorkflowEmailEditor.tsx
 create mode 100644 packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/components/WorkflowSendEmailBody.tsx
 create mode 100644 packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/components/__stories__/WorkflowEmailEditor.stories.tsx
 create mode 100644 packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/components/__stories__/WorkflowSendEmailBody.stories.tsx
 create mode 100644 packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/components/image-bubble-menu/ImageBubbleMenu.tsx
 create mode 100644 packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/components/link-bubble-menu/LinkBubbleMenu.tsx
 create mode 100644 packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/components/text-bubble-menu/BubbleMenuIconButton.tsx
 create mode 100644 packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/components/text-bubble-menu/EditLinkPopover.tsx
 create mode 100644 packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/components/text-bubble-menu/TextBubbleMenu.tsx
 create mode 100644 packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/components/text-bubble-menu/TurnIntoBlockDropdown.tsx
 create mode 100644 packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/extensions/resizable-image/ResizableImage.ts
 create mode 100644 packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/extensions/resizable-image/ResizableImageView.tsx
 create mode 100644 packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/extensions/resizable-image/UploadImageExtension.ts
 create mode 100644 packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/extensions/resizable-image/UploadImagePlugin.ts
 create mode 100644 packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/hooks/useEmailEditor.ts
 create mode 100644 packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/hooks/useTextBubbleState.ts
 create mode 100644 packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/hooks/useTurnIntoBlockOptions.ts
 create mode 100644 packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/utils/isTextSelected.ts
 create mode 100644 packages/twenty-front/src/modules/workflow/workflow-variables/utils/getInitialEmailEditorContent.ts
 create mode 100644 packages/twenty-server/src/modules/messaging/message-import-manager/services/__tests__/messaging-send-message-gmail.spec.ts
 create mode 100644 packages/twenty-server/src/modules/messaging/message-import-manager/utils/__tests__/gmail-mime-message.spec.ts
 create mode 100644 packages/twenty-server/src/utils/parse-email-body.ts
 create mode 100644 packages/twenty-shared/src/utils/tiptap/index.ts
 create mode 100644 packages/twenty-shared/src/utils/tiptap/tiptap-marks.ts

diff --git a/package.json b/package.json
index fc8a1bad4f..56d2cbdbfd 100644
--- a/package.json
+++ b/package.json
@@ -7,8 +7,8 @@
     "@floating-ui/react": "^0.24.3",
     "@linaria/core": "^6.2.0",
     "@linaria/react": "^6.2.1",
-    "@react-email/components": "0.0.35",
-    "@react-email/render": "0.0.17",
+    "@react-email/components": "^0.5.3",
+    "@react-email/render": "^1.2.3",
     "@sentry/profiling-node": "^9.26.0",
     "@sentry/react": "^9.26.0",
     "@sniptt/guards": "^0.2.0",
diff --git a/packages/twenty-emails/package.json b/packages/twenty-emails/package.json
index dc09c2eb71..07f3da620e 100644
--- a/packages/twenty-emails/package.json
+++ b/packages/twenty-emails/package.json
@@ -21,6 +21,7 @@
     "@lingui/cli": "^5.1.2",
     "@lingui/swc-plugin": "^5.6.0",
     "@lingui/vite-plugin": "^5.1.2",
+    "@tiptap/core": "^3.4.2",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "react-email": "4.0.3"
diff --git a/packages/twenty-emails/src/index.ts b/packages/twenty-emails/src/index.ts
index 07ff30d923..afc26b303d 100644
--- a/packages/twenty-emails/src/index.ts
+++ b/packages/twenty-emails/src/index.ts
@@ -1,7 +1,9 @@
+export type { JSONContent } from '@tiptap/core';
 export * from './emails/clean-suspended-workspace.email';
 export * from './emails/password-reset-link.email';
 export * from './emails/password-update-notify.email';
 export * from './emails/send-email-verification-link.email';
 export * from './emails/send-invite-link.email';
-export * from './emails/warn-suspended-workspace.email';
 export * from './emails/validate-approved-access-domain.email';
+export * from './emails/warn-suspended-workspace.email';
+export * from './utils/email-renderer/email-renderer';
diff --git a/packages/twenty-emails/src/utils/email-renderer/email-renderer.tsx b/packages/twenty-emails/src/utils/email-renderer/email-renderer.tsx
new file mode 100644
index 0000000000..99d59bf2fe
--- /dev/null
+++ b/packages/twenty-emails/src/utils/email-renderer/email-renderer.tsx
@@ -0,0 +1,34 @@
+import { Body, Container, Head, Html } from '@react-email/components';
+import { type JSONContent } from '@tiptap/core';
+import { mappedNodeContent } from 'src/utils/email-renderer/renderers/render-node';
+
+export const reactMarkupFromJSON = (json: JSONContent | string) => {
+  if (typeof json === 'string') {
+    return json;
+  }
+
+  const jsxNodes = mappedNodeContent(json);
+  return (
+    <Html>
+      <Head>
+        <style
+          dangerouslySetInnerHTML={{
+            __html: `blockquote,h1,h2,h3,img,li,ol,p,ul{margin-top:0;margin-bottom:0}`,
+          }}
+        />
+      </Head>
+      <Body>
+        <Container
+          style={{
+            width: '100%',
+            marginLeft: 'auto',
+            marginRight: 'auto',
+            borderStyle: 'solid',
+          }}
+        >
+          {jsxNodes}
+        </Container>
+      </Body>
+    </Html>
+  );
+};
diff --git a/packages/twenty-emails/src/utils/email-renderer/marks/bold.tsx b/packages/twenty-emails/src/utils/email-renderer/marks/bold.tsx
new file mode 100644
index 0000000000..139cd71d6b
--- /dev/null
+++ b/packages/twenty-emails/src/utils/email-renderer/marks/bold.tsx
@@ -0,0 +1,6 @@
+import { type ReactNode } from 'react';
+import { type TipTapMark } from 'twenty-shared/utils';
+
+export const bold = (_: TipTapMark, children: ReactNode): ReactNode => {
+  return <strong>{children}</strong>;
+};
diff --git a/packages/twenty-emails/src/utils/email-renderer/marks/italic.tsx b/packages/twenty-emails/src/utils/email-renderer/marks/italic.tsx
new file mode 100644
index 0000000000..0fb98fbda2
--- /dev/null
+++ b/packages/twenty-emails/src/utils/email-renderer/marks/italic.tsx
@@ -0,0 +1,6 @@
+import { type ReactNode } from 'react';
+import { type TipTapMark } from 'twenty-shared/utils';
+
+export const italic = (_: TipTapMark, children: ReactNode): ReactNode => {
+  return <em>{children}</em>;
+};
diff --git a/packages/twenty-emails/src/utils/email-renderer/marks/link.tsx b/packages/twenty-emails/src/utils/email-renderer/marks/link.tsx
new file mode 100644
index 0000000000..1fd49299ec
--- /dev/null
+++ b/packages/twenty-emails/src/utils/email-renderer/marks/link.tsx
@@ -0,0 +1,21 @@
+import { type ReactNode } from 'react';
+import { type LinkMarkAttributes, type TipTapMark } from 'twenty-shared/utils';
+
+export const link = (mark: TipTapMark, children: ReactNode): ReactNode => {
+  const {
+    href,
+    target = '_blank',
+    rel = 'noopener noreferrer',
+  } = (mark.attrs as LinkMarkAttributes) || {};
+
+  return (
+    <a
+      href={href}
+      target={target}
+      rel={rel}
+      style={{ textDecoration: 'underline' }}
+    >
+      {children}
+    </a>
+  );
+};
diff --git a/packages/twenty-emails/src/utils/email-renderer/marks/strike.tsx b/packages/twenty-emails/src/utils/email-renderer/marks/strike.tsx
new file mode 100644
index 0000000000..198d0ccd58
--- /dev/null
+++ b/packages/twenty-emails/src/utils/email-renderer/marks/strike.tsx
@@ -0,0 +1,6 @@
+import { type ReactNode } from 'react';
+import { type TipTapMark } from 'twenty-shared/utils';
+
+export const strike = (_: TipTapMark, children: ReactNode): ReactNode => {
+  return <span style={{ textDecoration: 'line-through' }}>{children}</span>;
+};
diff --git a/packages/twenty-emails/src/utils/email-renderer/marks/underline.tsx b/packages/twenty-emails/src/utils/email-renderer/marks/underline.tsx
new file mode 100644
index 0000000000..36aa0e4863
--- /dev/null
+++ b/packages/twenty-emails/src/utils/email-renderer/marks/underline.tsx
@@ -0,0 +1,6 @@
+import { type ReactNode } from 'react';
+import { type TipTapMark } from 'twenty-shared/utils';
+
+export const underline = (_: TipTapMark, children: ReactNode): ReactNode => {
+  return <span style={{ textDecoration: 'underline' }}>{children}</span>;
+};
diff --git a/packages/twenty-emails/src/utils/email-renderer/nodes/heading.tsx b/packages/twenty-emails/src/utils/email-renderer/nodes/heading.tsx
new file mode 100644
index 0000000000..0cbafd5c2f
--- /dev/null
+++ b/packages/twenty-emails/src/utils/email-renderer/nodes/heading.tsx
@@ -0,0 +1,35 @@
+import { Heading } from '@react-email/components';
+import { type JSONContent } from '@tiptap/core';
+import { type ReactNode } from 'react';
+import { mappedNodeContent } from 'src/utils/email-renderer/renderers/render-node';
+import { isDefined } from 'twenty-shared/utils';
+
+type HeadingLevel = 1 | 2 | 3;
+
+type HeadingStyle = {
+  element: 'h1' | 'h2' | 'h3';
+  fontSize: string;
+};
+
+const HEADING_STYLES: Record<HeadingLevel, HeadingStyle> = {
+  1: { element: 'h1', fontSize: '36px' },
+  2: { element: 'h2', fontSize: '30px' },
+  3: { element: 'h3', fontSize: '24px' },
+};
+
+export const heading = (node: JSONContent): ReactNode => {
+  const { level } = node?.attrs || {};
+
+  if (!isDefined(level) || !HEADING_STYLES[level as HeadingLevel]) {
+    return null;
+  }
+
+  const content = mappedNodeContent(node);
+  const { element, fontSize } = HEADING_STYLES[level as HeadingLevel];
+
+  return (
+    <Heading as={element} style={{ fontSize }}>
+      {content}
+    </Heading>
+  );
+};
diff --git a/packages/twenty-emails/src/utils/email-renderer/nodes/image.tsx b/packages/twenty-emails/src/utils/email-renderer/nodes/image.tsx
new file mode 100644
index 0000000000..505a416e34
--- /dev/null
+++ b/packages/twenty-emails/src/utils/email-renderer/nodes/image.tsx
@@ -0,0 +1,31 @@
+import { Column, Row } from '@react-email/components';
+import { type JSONContent } from '@tiptap/core';
+import { type ReactNode } from 'react';
+import { isDefined } from 'twenty-shared/utils';
+
+export const image = (node: JSONContent): ReactNode => {
+  const { src, alt, align = 'left', width } = node?.attrs || {};
+  if (!isDefined(src)) {
+    return null;
+  }
+
+  return (
+    <Row>
+      <Column align={align}>
+        <img
+          src={src}
+          alt={alt}
+          style={{
+            width: isDefined(width) ? width : 'auto',
+            height: 'auto',
+            maxWidth: '100%',
+            outline: 'none',
+            border: 'none',
+            textDecoration: 'none',
+            display: 'block',
+          }}
+        />
+      </Column>
+    </Row>
+  );
+};
diff --git a/packages/twenty-emails/src/utils/email-renderer/nodes/paragraph.tsx b/packages/twenty-emails/src/utils/email-renderer/nodes/paragraph.tsx
new file mode 100644
index 0000000000..1325d17923
--- /dev/null
+++ b/packages/twenty-emails/src/utils/email-renderer/nodes/paragraph.tsx
@@ -0,0 +1,8 @@
+import { Text } from '@react-email/components';
+import { type JSONContent } from '@tiptap/core';
+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>;
+};
diff --git a/packages/twenty-emails/src/utils/email-renderer/nodes/text.tsx b/packages/twenty-emails/src/utils/email-renderer/nodes/text.tsx
new file mode 100644
index 0000000000..e274e4a05e
--- /dev/null
+++ b/packages/twenty-emails/src/utils/email-renderer/nodes/text.tsx
@@ -0,0 +1,17 @@
+import { type JSONContent } from '@tiptap/core';
+import { type ReactNode } from 'react';
+import { renderMark } from 'src/utils/email-renderer/renderers/render-mark';
+import { isDefined } from 'twenty-shared/utils';
+
+export const text = (node: JSONContent): ReactNode => {
+  if (isDefined(node?.marks)) {
+    return renderMark(node);
+  }
+
+  const { text } = node;
+  if (!isDefined(text)) {
+    return <>&nbsp;</>;
+  }
+
+  return <>{text}</>;
+};
diff --git a/packages/twenty-emails/src/utils/email-renderer/nodes/variable-tag.tsx b/packages/twenty-emails/src/utils/email-renderer/nodes/variable-tag.tsx
new file mode 100644
index 0000000000..38d51eff27
--- /dev/null
+++ b/packages/twenty-emails/src/utils/email-renderer/nodes/variable-tag.tsx
@@ -0,0 +1,12 @@
+import { type JSONContent } from '@tiptap/core';
+import { type ReactNode } from 'react';
+import { isDefined } from 'twenty-shared/utils';
+
+export const variableTag = (node: JSONContent): ReactNode => {
+  const { variable } = node?.attrs || {};
+  if (!isDefined(variable)) {
+    return <>&nbsp;</>;
+  }
+
+  return <>{variable}</>;
+};
diff --git a/packages/twenty-emails/src/utils/email-renderer/renderers/render-mark.tsx b/packages/twenty-emails/src/utils/email-renderer/renderers/render-mark.tsx
new file mode 100644
index 0000000000..c5ea0cdef4
--- /dev/null
+++ b/packages/twenty-emails/src/utils/email-renderer/renderers/render-mark.tsx
@@ -0,0 +1,46 @@
+import { type JSONContent } from '@tiptap/core';
+import { type ReactNode } from 'react';
+import {
+  type TipTapMark,
+  type TipTapMarkType,
+  TIPTAP_MARKS_RENDER_ORDER,
+  TIPTAP_MARK_TYPES,
+} from 'twenty-shared/utils';
+import { bold } from '../marks/bold';
+import { italic } from '../marks/italic';
+import { link } from '../marks/link';
+import { strike } from '../marks/strike';
+import { underline } from '../marks/underline';
+
+const MARK_RENDERERS = {
+  [TIPTAP_MARK_TYPES.BOLD]: bold,
+  [TIPTAP_MARK_TYPES.ITALIC]: italic,
+  [TIPTAP_MARK_TYPES.UNDERLINE]: underline,
+  [TIPTAP_MARK_TYPES.STRIKE]: strike,
+  [TIPTAP_MARK_TYPES.LINK]: link,
+} as const;
+
+export const renderMark = (node: JSONContent): ReactNode => {
+  const text = node?.text || <>&nbsp;</>;
+  const marks = (node?.marks as TipTapMark[]) || [];
+
+  // Sort marks according to the defined render order
+  marks.sort((a, b) => {
+    return (
+      TIPTAP_MARKS_RENDER_ORDER.indexOf(a.type) -
+      TIPTAP_MARKS_RENDER_ORDER.indexOf(b.type)
+    );
+  });
+
+  // Apply marks from innermost to outermost
+  return marks.reduce((children: ReactNode, mark: TipTapMark) => {
+    const renderer = MARK_RENDERERS[mark.type as TipTapMarkType];
+
+    if (!renderer) {
+      // Fallback for unknown mark types - skip unknown marks
+      return children;
+    }
+
+    return renderer(mark, children);
+  }, text);
+};
diff --git a/packages/twenty-emails/src/utils/email-renderer/renderers/render-node.tsx b/packages/twenty-emails/src/utils/email-renderer/renderers/render-node.tsx
new file mode 100644
index 0000000000..0b71d24a6b
--- /dev/null
+++ b/packages/twenty-emails/src/utils/email-renderer/renderers/render-node.tsx
@@ -0,0 +1,40 @@
+import { type JSONContent } from '@tiptap/core';
+import { Fragment, type ReactNode } from 'react';
+import { TIPTAP_NODE_TYPES, type TipTapNodeType } from 'twenty-shared/utils';
+import { heading } from '../nodes/heading';
+import { image } from '../nodes/image';
+import { paragraph } from '../nodes/paragraph';
+import { text } from '../nodes/text';
+import { variableTag } from '../nodes/variable-tag';
+
+const NODE_RENDERERS = {
+  [TIPTAP_NODE_TYPES.PARAGRAPH]: paragraph,
+  [TIPTAP_NODE_TYPES.TEXT]: text,
+  [TIPTAP_NODE_TYPES.HEADING]: heading,
+  [TIPTAP_NODE_TYPES.VARIABLE_TAG]: variableTag,
+  [TIPTAP_NODE_TYPES.IMAGE]: image,
+};
+
+const renderNode = (node: JSONContent): ReactNode => {
+  const renderer = NODE_RENDERERS[node.type as TipTapNodeType];
+
+  if (!renderer) {
+    return null;
+  }
+
+  return renderer(node);
+};
+
+export const mappedNodeContent = (node: JSONContent): JSX.Element[] => {
+  const allNodes = node.content || [];
+  return allNodes
+    .map((childNode, index) => {
+      const component = renderNode(childNode);
+      if (!component) {
+        return null;
+      }
+
+      return <Fragment key={index}>{component}</Fragment>;
+    })
+    .filter((n) => n !== null);
+};
diff --git a/packages/twenty-front/package.json b/packages/twenty-front/package.json
index 90cd99bc26..40bc0e346f 100644
--- a/packages/twenty-front/package.json
+++ b/packages/twenty-front/package.json
@@ -53,10 +53,17 @@
     "@react-pdf/renderer": "^4.1.6",
     "@scalar/api-reference-react": "^0.4.36",
     "@tiptap/core": "^3.4.2",
+    "@tiptap/extension-bold": "^3.4.2",
     "@tiptap/extension-document": "^3.4.2",
     "@tiptap/extension-hard-break": "^3.4.2",
+    "@tiptap/extension-heading": "^3.4.2",
+    "@tiptap/extension-image": "^3.4.4",
+    "@tiptap/extension-italic": "^3.4.2",
+    "@tiptap/extension-link": "^3.4.2",
     "@tiptap/extension-paragraph": "^3.4.2",
+    "@tiptap/extension-strike": "^3.4.2",
     "@tiptap/extension-text": "^3.4.2",
+    "@tiptap/extension-underline": "^3.4.2",
     "@tiptap/extensions": "^3.4.2",
     "@tiptap/react": "^3.4.2",
     "@xyflow/react": "^12.4.2",
diff --git a/packages/twenty-front/src/modules/ui/layout/fullscreen/hooks/useFullScreenModal.tsx b/packages/twenty-front/src/modules/ui/layout/fullscreen/hooks/useFullScreenModal.tsx
new file mode 100644
index 0000000000..f4cbf45e9a
--- /dev/null
+++ b/packages/twenty-front/src/modules/ui/layout/fullscreen/hooks/useFullScreenModal.tsx
@@ -0,0 +1,89 @@
+import { RootStackingContextZIndices } from '@/ui/layout/constants/RootStackingContextZIndices';
+import { PageHeader } from '@/ui/layout/page/components/PageHeader';
+import {
+  Breadcrumb,
+  type BreadcrumbProps,
+} from '@/ui/navigation/bread-crumb/components/Breadcrumb';
+import styled from '@emotion/styled';
+import { useRef } from 'react';
+import { createPortal } from 'react-dom';
+
+const StyledFullScreenOverlay = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: ${({ theme }) => theme.background.noisy};
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100vh;
+  z-index: ${RootStackingContextZIndices.RootModal};
+`;
+
+const StyledFullScreenHeader = styled(PageHeader)`
+  padding-left: ${({ theme }) => theme.spacing(3)};
+`;
+
+const StyledFullScreenContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(3)};
+  flex: 1;
+  min-height: 0;
+  padding: ${({ theme }) =>
+    `0 ${theme.spacing(3)} ${theme.spacing(3)} ${theme.spacing(3)}`};
+
+  // Make the immediate child a flex column that grows, so nested components
+  // with height="100%" (e.g., editors) can size correctly.
+  > * {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    row-gap: ${({ theme }) => theme.spacing(5)};
+  }
+`;
+
+type UseFullScreenModalProps = {
+  links: BreadcrumbProps['links'];
+  onClose: () => void;
+  hasClosePageButton?: boolean;
+};
+
+export const useFullScreenModal = ({
+  links,
+  onClose,
+  hasClosePageButton = true,
+}: UseFullScreenModalProps) => {
+  const overlayRef = useRef<HTMLDivElement>(null);
+
+  const renderFullScreenModal = (
+    children: React.ReactNode,
+    isOpen: boolean,
+  ) => {
+    if (!isOpen) return null;
+
+    return createPortal(
+      <StyledFullScreenOverlay
+        ref={overlayRef}
+        data-globally-prevent-click-outside="true"
+        tabIndex={-1}
+      >
+        <StyledFullScreenHeader
+          title={<Breadcrumb links={links} />}
+          hasClosePageButton={hasClosePageButton}
+          onClosePage={onClose}
+        />
+        <StyledFullScreenContent>{children}</StyledFullScreenContent>
+      </StyledFullScreenOverlay>,
+      document.body,
+    );
+  };
+
+  return {
+    overlayRef,
+    renderFullScreenModal,
+  };
+};
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/code-action/components/WorkflowEditActionServerlessFunction.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/code-action/components/WorkflowEditActionServerlessFunction.tsx
index 5b2077ca6b..80573e74ba 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/code-action/components/WorkflowEditActionServerlessFunction.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/code-action/components/WorkflowEditActionServerlessFunction.tsx
@@ -1,13 +1,8 @@
 import { useGetAvailablePackages } from '@/settings/serverless-functions/hooks/useGetAvailablePackages';
 import { useServerlessFunctionUpdateFormState } from '@/settings/serverless-functions/hooks/useServerlessFunctionUpdateFormState';
 import { useUpdateOneServerlessFunction } from '@/settings/serverless-functions/hooks/useUpdateOneServerlessFunction';
-import { RootStackingContextZIndices } from '@/ui/layout/constants/RootStackingContextZIndices';
-import { PageHeader } from '@/ui/layout/page/components/PageHeader';
-import { PAGE_BAR_MIN_HEIGHT } from '@/ui/layout/page/constants/PageBarMinHeight';
-import {
-  Breadcrumb,
-  type BreadcrumbProps,
-} from '@/ui/navigation/bread-crumb/components/Breadcrumb';
+import { useFullScreenModal } from '@/ui/layout/fullscreen/hooks/useFullScreenModal';
+import { type BreadcrumbProps } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
 import { useGetUpdatableWorkflowVersionOrThrow } from '@/workflow/hooks/useGetUpdatableWorkflowVersionOrThrow';
 import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
 import { workflowVisualizerWorkflowIdComponentState } from '@/workflow/states/workflowVisualizerWorkflowIdComponentState';
@@ -47,8 +42,7 @@ import { WorkflowActionFooter } from '@/workflow/workflow-steps/components/Workf
 import { type Monaco } from '@monaco-editor/react';
 import { type editor } from 'monaco-editor';
 import { AutoTypings } from 'monaco-editor-auto-typings';
-import { useEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
+import { useEffect, useState } from 'react';
 import { useRecoilState } from 'recoil';
 import { Key } from 'ts-key-enum';
 import { isDefined } from 'twenty-shared/utils';
@@ -68,35 +62,6 @@ const StyledCodeEditorContainer = styled.div`
   overflow: hidden;
 `;
 
-const StyledFullScreenOverlay = styled.div`
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: ${({ theme }) => theme.background.noisy};
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100vh;
-  z-index: ${RootStackingContextZIndices.Dialog};
-`;
-
-const StyledFullScreenHeader = styled(PageHeader)`
-  padding-left: ${({ theme }) => theme.spacing(3)};
-`;
-
-const StyledFullScreenContent = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: ${({ theme }) => theme.spacing(3)};
-  height: calc(
-    100% - ${PAGE_BAR_MIN_HEIGHT}px - ${({ theme }) => theme.spacing(2 * 2 + 5)}
-  );
-  padding: ${({ theme }) =>
-    `0 ${theme.spacing(3)} ${theme.spacing(3)} ${theme.spacing(3)}`};
-`;
-
 const StyledTabList = styled(TabList)`
   background-color: ${({ theme }) => theme.background.secondary};
   padding-left: ${({ theme }) => theme.spacing(2)};
@@ -131,7 +96,6 @@ export const WorkflowEditActionServerlessFunction = ({
   const { t } = useLingui();
   const [isFullScreen, setIsFullScreen] = useState(false);
   const isMobile = useIsMobile();
-  const fullScreenOverlayRef = useRef<HTMLDivElement>(null);
   const serverlessFunctionId = action.settings.input.serverlessFunctionId;
   const fullScreenFocusId = `code-editor-fullscreen-${serverlessFunctionId}`;
   const activeTabId = useRecoilComponentValue(
@@ -352,17 +316,6 @@ export const WorkflowEditActionServerlessFunction = ({
     dependencies: [isFullScreen],
   });
 
-  useListenClickOutside({
-    refs: [fullScreenOverlayRef],
-    callback: () => {
-      if (isFullScreen) {
-        handleExitFullScreen();
-      }
-    },
-    listenerId: `full-screen-overlay-${serverlessFunctionId}`,
-    enabled: isFullScreen,
-  });
-
   const headerTitle = isDefined(action.name)
     ? action.name
     : 'Code - Serverless Function';
@@ -372,19 +325,6 @@ export const WorkflowEditActionServerlessFunction = ({
 
   const testLogsTextAreaId = `${serverlessFunctionId}-test-logs`;
 
-  const handleEnterFullScreen = () => {
-    setIsFullScreen(true);
-    setTimeout(() => {
-      if (isDefined(fullScreenOverlayRef.current)) {
-        fullScreenOverlayRef.current.focus();
-      }
-    }, 0);
-  };
-
-  const handleExitFullScreen = () => {
-    setIsFullScreen(false);
-  };
-
   const breadcrumbLinks: BreadcrumbProps['links'] = [
     {
       children: workflow?.name?.trim() || t`Untitled Workflow`,
@@ -399,46 +339,64 @@ export const WorkflowEditActionServerlessFunction = ({
     },
   ];
 
-  const fullScreenOverlay = isFullScreen
-    ? createPortal(
-        <StyledFullScreenOverlay
-          ref={fullScreenOverlayRef}
-          data-globally-prevent-click-outside="true"
-          tabIndex={-1}
-        >
-          <StyledFullScreenHeader
-            title={<Breadcrumb links={breadcrumbLinks} />}
-            hasClosePageButton={!isMobile}
-            onClosePage={handleExitFullScreen}
-          />
-          <StyledFullScreenContent data-globally-prevent-click-outside="true">
-            <WorkflowEditActionServerlessFunctionFields
-              functionInput={functionInput}
-              VariablePicker={WorkflowVariablePicker}
-              onInputChange={handleInputChange}
-              readonly={actionOptions.readonly}
-            />
-            <StyledFullScreenCodeEditorContainer>
-              <CodeEditor
-                height="100%"
-                value={formValues.code?.[INDEX_FILE_PATH]}
-                language="typescript"
-                onChange={handleCodeChange}
-                onMount={handleEditorDidMount}
-                setMarkers={getWrongExportedFunctionMarkers}
-                options={{
-                  readOnly: actionOptions.readonly,
-                  domReadOnly: actionOptions.readonly,
-                  scrollBeyondLastLine: false,
-                  padding: { top: 4, bottom: 4 },
-                }}
-              />
-            </StyledFullScreenCodeEditorContainer>
-          </StyledFullScreenContent>
-        </StyledFullScreenOverlay>,
-        document.body,
-      )
-    : null;
+  const { overlayRef: fullScreenOverlayRef, renderFullScreenModal } =
+    useFullScreenModal({
+      links: breadcrumbLinks,
+      onClose: () => setIsFullScreen(false),
+      hasClosePageButton: !isMobile,
+    });
+
+  useListenClickOutside({
+    refs: [fullScreenOverlayRef],
+    callback: () => {
+      if (isFullScreen) {
+        handleExitFullScreen();
+      }
+    },
+    listenerId: `full-screen-overlay-${serverlessFunctionId}`,
+    enabled: isFullScreen,
+  });
+
+  const handleEnterFullScreen = () => {
+    setIsFullScreen(true);
+    setTimeout(() => {
+      if (isDefined(fullScreenOverlayRef.current)) {
+        fullScreenOverlayRef.current.focus();
+      }
+    }, 0);
+  };
+
+  const handleExitFullScreen = () => {
+    setIsFullScreen(false);
+  };
+
+  const fullScreenOverlay = renderFullScreenModal(
+    <div data-globally-prevent-click-outside="true">
+      <WorkflowEditActionServerlessFunctionFields
+        functionInput={functionInput}
+        VariablePicker={WorkflowVariablePicker}
+        onInputChange={handleInputChange}
+        readonly={actionOptions.readonly}
+      />
+      <StyledFullScreenCodeEditorContainer>
+        <CodeEditor
+          height="100%"
+          value={formValues.code?.[INDEX_FILE_PATH]}
+          language="typescript"
+          onChange={handleCodeChange}
+          onMount={handleEditorDidMount}
+          setMarkers={getWrongExportedFunctionMarkers}
+          options={{
+            readOnly: actionOptions.readonly,
+            domReadOnly: actionOptions.readonly,
+            scrollBeyondLastLine: false,
+            padding: { top: 4, bottom: 4 },
+          }}
+        />
+      </StyledFullScreenCodeEditorContainer>
+    </div>,
+    isFullScreen,
+  );
 
   return (
     !loading && (
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/code-action/components/__stories__/WorkflowEditActionServerlessFunction.stories.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/code-action/components/__stories__/WorkflowEditActionServerlessFunction.stories.tsx
new file mode 100644
index 0000000000..b580253f28
--- /dev/null
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/code-action/components/__stories__/WorkflowEditActionServerlessFunction.stories.tsx
@@ -0,0 +1,222 @@
+import { type WorkflowCodeAction } from '@/workflow/types/Workflow';
+import { WorkflowEditActionServerlessFunction } from '@/workflow/workflow-steps/workflow-actions/code-action/components/WorkflowEditActionServerlessFunction';
+import { type Meta, type StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { graphql, HttpResponse } from 'msw';
+import { ComponentDecorator, RouterDecorator } from 'twenty-ui/testing';
+import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
+import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
+import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
+import { WorkflowStepActionDrawerDecorator } from '~/testing/decorators/WorkflowStepActionDrawerDecorator';
+import { WorkflowStepDecorator } from '~/testing/decorators/WorkflowStepDecorator';
+import { WorkspaceDecorator } from '~/testing/decorators/WorkspaceDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+import { getWorkflowNodeIdMock } from '~/testing/mock-data/workflow';
+
+const DEFAULT_ACTION: WorkflowCodeAction = {
+  id: getWorkflowNodeIdMock(),
+  name: 'Code',
+  type: 'CODE',
+  valid: false,
+  settings: {
+    input: {
+      serverlessFunctionId: '',
+      serverlessFunctionVersion: 'draft',
+      serverlessFunctionInput: {},
+    },
+    outputSchema: {},
+    errorHandlingOptions: {
+      retryOnFailure: {
+        value: false,
+      },
+      continueOnFailure: {
+        value: false,
+      },
+    },
+  },
+};
+
+const CONFIGURED_ACTION: WorkflowCodeAction = {
+  id: getWorkflowNodeIdMock(),
+  name: 'Process Data',
+  type: 'CODE',
+  valid: true,
+  settings: {
+    input: {
+      serverlessFunctionId: 'test-function-id',
+      serverlessFunctionVersion: 'draft',
+      serverlessFunctionInput: {
+        name: 'John Doe',
+        email: 'john@example.com',
+        score: 95,
+      },
+    },
+    outputSchema: {
+      result: {
+        type: 'TEXT',
+        label: 'Result',
+        value: 'Processing completed',
+        isLeaf: true,
+      },
+      status: {
+        type: 'TEXT',
+        label: 'Status',
+        value: 'success',
+        isLeaf: true,
+      },
+    },
+    errorHandlingOptions: {
+      retryOnFailure: {
+        value: true,
+      },
+      continueOnFailure: {
+        value: false,
+      },
+    },
+  },
+};
+
+const meta: Meta<typeof WorkflowEditActionServerlessFunction> = {
+  title: 'Modules/Workflow/Actions/Code/EditAction',
+  component: WorkflowEditActionServerlessFunction,
+  parameters: {
+    msw: {
+      handlers: [
+        ...graphqlMocks.handlers,
+        graphql.query('FindManyServerlessFunctions', () => {
+          return HttpResponse.json({
+            data: {
+              findManyServerlessFunctions: [
+                {
+                  id: 'test-function-id',
+                  name: 'Test Function',
+                  description: 'A test serverless function',
+                  runtime: 'nodejs22.x',
+                  createdAt: '2024-01-01T00:00:00.000Z',
+                  updatedAt: '2024-01-01T00:00:00.000Z',
+                },
+              ],
+            },
+          });
+        }),
+        graphql.query('FindOneServerlessFunction', () => {
+          return HttpResponse.json({
+            data: {
+              findOneServerlessFunction: {
+                id: 'test-function-id',
+                name: 'Test Function',
+                description: 'A test serverless function',
+                runtime: 'nodejs22.x',
+                createdAt: '2024-01-01T00:00:00.000Z',
+                updatedAt: '2024-01-01T00:00:00.000Z',
+              },
+            },
+          });
+        }),
+        graphql.query('FindManyAvailablePackages', () => {
+          return HttpResponse.json({
+            data: {
+              getAvailablePackages: ['axios', 'lodash', 'moment'],
+            },
+          });
+        }),
+      ],
+    },
+  },
+  args: {
+    action: DEFAULT_ACTION,
+  },
+  decorators: [
+    WorkflowStepActionDrawerDecorator,
+    WorkflowStepDecorator,
+    ComponentDecorator,
+    ObjectMetadataItemsDecorator,
+    SnackBarDecorator,
+    RouterDecorator,
+    WorkspaceDecorator,
+    I18nFrontDecorator,
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof WorkflowEditActionServerlessFunction>;
+
+export const Default: Story = {
+  args: {
+    actionOptions: {
+      onActionUpdate: fn(),
+    },
+  },
+};
+
+export const Configured: Story = {
+  args: {
+    action: CONFIGURED_ACTION,
+    actionOptions: {
+      onActionUpdate: fn(),
+    },
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    action: CONFIGURED_ACTION,
+    actionOptions: {
+      readonly: true,
+    },
+  },
+};
+
+export const WithTestResults: Story = {
+  args: {
+    action: {
+      ...CONFIGURED_ACTION,
+      settings: {
+        ...CONFIGURED_ACTION.settings,
+        outputSchema: {
+          result: {
+            type: 'TEXT',
+            label: 'Processing Result',
+            value: 'Successfully processed 150 records',
+            isLeaf: true,
+          },
+          executionTime: {
+            type: 'NUMBER',
+            label: 'Execution Time (ms)',
+            value: 245,
+            isLeaf: true,
+          },
+          errors: {
+            type: 'ARRAY',
+            label: 'Errors',
+            value: [],
+            isLeaf: true,
+          },
+        },
+      },
+    },
+    actionOptions: {
+      onActionUpdate: fn(),
+    },
+  },
+};
+
+export const EmptyFunction: Story = {
+  args: {
+    action: {
+      ...DEFAULT_ACTION,
+      settings: {
+        ...DEFAULT_ACTION.settings,
+        input: {
+          serverlessFunctionId: '',
+          serverlessFunctionVersion: 'draft',
+          serverlessFunctionInput: {},
+        },
+      },
+    },
+    actionOptions: {
+      onActionUpdate: fn(),
+    },
+  },
+};
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionSendEmail.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionSendEmail.tsx
index e30d1bd363..e96c111332 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionSendEmail.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/components/WorkflowEditActionSendEmail.tsx
@@ -14,6 +14,7 @@ import { type WorkflowSendEmailAction } from '@/workflow/types/Workflow';
 import { WorkflowActionFooter } from '@/workflow/workflow-steps/components/WorkflowActionFooter';
 import { WorkflowStepBody } from '@/workflow/workflow-steps/components/WorkflowStepBody';
 import { WorkflowStepHeader } from '@/workflow/workflow-steps/components/WorkflowStepHeader';
+import { WorkflowSendEmailBody } from '@/workflow/workflow-steps/workflow-actions/email-action/components/WorkflowSendEmailBody';
 import { useWorkflowActionHeader } from '@/workflow/workflow-steps/workflow-actions/hooks/useWorkflowActionHeader';
 import { WorkflowVariablePicker } from '@/workflow/workflow-variables/components/WorkflowVariablePicker';
 import { useTheme } from '@emotion/react';
@@ -220,6 +221,7 @@ export const WorkflowEditActionSendEmail = ({
   const navigate = useNavigateSettings();
 
   const { closeCommandMenu } = useCommandMenu();
+
   return (
     !loading && (
       <>
@@ -283,7 +285,8 @@ export const WorkflowEditActionSendEmail = ({
             }}
             VariablePicker={WorkflowVariablePicker}
           />
-          <FormTextFieldInput
+          <WorkflowSendEmailBody
+            action={action}
             label="Body"
             placeholder="Enter email body"
             readonly={actionOptions.readonly}
@@ -292,7 +295,6 @@ export const WorkflowEditActionSendEmail = ({
               handleFieldChange('body', body);
             }}
             VariablePicker={WorkflowVariablePicker}
-            multiline
           />
         </WorkflowStepBody>
         {!actionOptions.readonly && <WorkflowActionFooter stepId={action.id} />}
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/components/WorkflowEmailEditor.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/components/WorkflowEmailEditor.tsx
new file mode 100644
index 0000000000..b80adeceb0
--- /dev/null
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/components/WorkflowEmailEditor.tsx
@@ -0,0 +1,98 @@
+import { FORM_FIELD_PLACEHOLDER_STYLES } from '@/object-record/record-field/ui/form-types/constants/FormFieldPlaceholderStyles';
+import { ImageBubbleMenu } from '@/workflow/workflow-steps/workflow-actions/email-action/components/image-bubble-menu/ImageBubbleMenu';
+import { LinkBubbleMenu } from '@/workflow/workflow-steps/workflow-actions/email-action/components/link-bubble-menu/LinkBubbleMenu';
+import { TextBubbleMenu } from '@/workflow/workflow-steps/workflow-actions/email-action/components/text-bubble-menu/TextBubbleMenu';
+import styled from '@emotion/styled';
+import { EditorContent, type Editor } from '@tiptap/react';
+
+const EMAIL_EDITOR_MIN_HEIGHT = 340;
+const EMAIL_EDITOR_MAX_WIDTH = 600;
+
+const StyledEditorContainer = styled.div<{
+  readonly?: boolean;
+}>`
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  box-sizing: border-box;
+
+  .editor-content {
+    flex-grow: 1;
+    width: 100%;
+    height: 100%;
+    min-height: ${EMAIL_EDITOR_MIN_HEIGHT}px;
+    max-width: ${EMAIL_EDITOR_MAX_WIDTH}px;
+    margin: 0 auto;
+  }
+
+  .tiptap {
+    padding: ${({ theme }) => `${theme.spacing(1)} ${theme.spacing(2)}`};
+    box-sizing: border-box;
+    height: 100%;
+    color: ${({ theme, readonly }) =>
+      readonly ? theme.font.color.light : theme.font.color.primary};
+    font-family: ${({ theme }) => theme.font.family};
+    font-weight: ${({ theme }) => theme.font.weight.regular};
+    border: none !important;
+
+    p.is-editor-empty:first-of-type::before {
+      ${FORM_FIELD_PLACEHOLDER_STYLES}
+      content: attr(data-placeholder);
+      float: left;
+      height: 0;
+      pointer-events: none;
+    }
+
+    p {
+      line-height: 1.5;
+      margin: 0;
+    }
+
+    .variable-tag {
+      background-color: ${({ theme }) => theme.color.blue10};
+      border-radius: ${({ theme }) => theme.border.radius.sm};
+      color: ${({ theme }) => theme.color.blue};
+      padding: ${({ theme }) => theme.spacing(1)};
+    }
+
+    h1 {
+      font-size: 36px;
+    }
+
+    h2 {
+      font-size: 30px;
+    }
+
+    h3 {
+      font-size: 24px;
+    }
+  }
+
+  .ProseMirror-focused {
+    outline: none;
+  }
+
+  .ProseMirror-hideselection * {
+    caret-color: transparent;
+  }
+`;
+
+type WorkflowEmailEditorProps = {
+  readonly: boolean | undefined;
+  editor: Editor;
+};
+
+export const WorkflowEmailEditor = ({
+  readonly,
+  editor,
+}: WorkflowEmailEditorProps) => {
+  return (
+    <StyledEditorContainer readonly={readonly}>
+      <EditorContent className="editor-content" editor={editor} />
+      <ImageBubbleMenu editor={editor} />
+      <TextBubbleMenu editor={editor} />
+      <LinkBubbleMenu editor={editor} />
+    </StyledEditorContainer>
+  );
+};
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/components/WorkflowSendEmailBody.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/components/WorkflowSendEmailBody.tsx
new file mode 100644
index 0000000000..ca6cafe6fb
--- /dev/null
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/components/WorkflowSendEmailBody.tsx
@@ -0,0 +1,261 @@
+import { useUploadAttachmentFile } from '@/activities/files/hooks/useUploadAttachmentFile';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { FormFieldInputContainer } from '@/object-record/record-field/ui/form-types/components/FormFieldInputContainer';
+import { type VariablePickerComponent } from '@/object-record/record-field/ui/form-types/types/VariablePickerComponent';
+import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
+import { InputErrorHelper } from '@/ui/input/components/InputErrorHelper';
+import { InputHint } from '@/ui/input/components/InputHint';
+import { InputLabel } from '@/ui/input/components/InputLabel';
+import { StyledDropdownButtonContainer } from '@/ui/layout/dropdown/components/StyledDropdownButtonContainer';
+import { useFullScreenModal } from '@/ui/layout/fullscreen/hooks/useFullScreenModal';
+import { type BreadcrumbProps } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
+import { usePushFocusItemToFocusStack } from '@/ui/utilities/focus/hooks/usePushFocusItemToFocusStack';
+import { useRemoveFocusItemFromFocusStackById } from '@/ui/utilities/focus/hooks/useRemoveFocusItemFromFocusStackById';
+import { FocusComponentType } from '@/ui/utilities/focus/types/FocusComponentType';
+import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
+import { useWorkflowWithCurrentVersion } from '@/workflow/hooks/useWorkflowWithCurrentVersion';
+import { workflowVisualizerWorkflowIdComponentState } from '@/workflow/states/workflowVisualizerWorkflowIdComponentState';
+import { type WorkflowSendEmailAction } from '@/workflow/types/Workflow';
+import { WorkflowEmailEditor } from '@/workflow/workflow-steps/workflow-actions/email-action/components/WorkflowEmailEditor';
+import { useEmailEditor } from '@/workflow/workflow-steps/workflow-actions/email-action/hooks/useEmailEditor';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { useLingui } from '@lingui/react/macro';
+import { useId, useState } from 'react';
+import { isDefined } from 'twenty-shared/utils';
+import { IconMaximize } from 'twenty-ui/display';
+import { useIsMobile } from 'twenty-ui/utilities';
+
+const StyledWorkflowSendEmailBodyContainer = styled(FormFieldInputContainer)`
+  flex-grow: 1;
+`;
+
+const StyledWorkflowSendEmailFieldContainer = styled.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing(2)};
+  flex-grow: 1;
+`;
+
+const StyledWorkflowSendEmailBodyInnerContainer = styled.div`
+  flex-grow: 1;
+  background-color: ${({ theme }) => theme.background.transparent.lighter};
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+
+  box-sizing: border-box;
+  display: flex;
+  overflow: auto;
+  width: 100%;
+`;
+
+const StyledEmailEditorActionButtonContainer = styled.div`
+  position: absolute;
+  top: ${({ theme }) => theme.spacing(0)};
+  right: ${({ theme }) => theme.spacing(7.5)};
+  z-index: 1;
+`;
+
+const StyledFullScreenEmailEditorContainer = styled.div`
+  background-color: ${({ theme }) => theme.background.secondary};
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  flex: 1;
+  min-height: 0;
+  padding: ${({ theme }) => theme.spacing(2)};
+  overflow-y: auto;
+`;
+
+const StyledFullScreenButtonContainer = styled(StyledDropdownButtonContainer)`
+  background-color: 'transparent';
+
+  color: ${({ theme }) => theme.font.color.tertiary};
+  padding: ${({ theme }) => theme.spacing(2)};
+  :hover {
+    cursor: pointer;
+    background-color: ${({ theme }) => theme.background.transparent.light};
+  }
+`;
+
+type WorkflowSendEmailBodyProps = {
+  action: WorkflowSendEmailAction;
+  label?: string;
+  error?: string;
+  hint?: string;
+  defaultValue: string | undefined | null;
+  onChange: (value: string) => void;
+  readonly?: boolean;
+  placeholder?: string;
+  VariablePicker?: VariablePickerComponent;
+};
+
+export const WorkflowSendEmailBody = ({
+  action,
+  label,
+  error,
+  hint,
+  defaultValue,
+  placeholder,
+  onChange,
+  readonly,
+  VariablePicker,
+}: WorkflowSendEmailBodyProps) => {
+  const instanceId = useId();
+  const isMobile = useIsMobile();
+  const [isFullScreen, setIsFullScreen] = useState(false);
+  const theme = useTheme();
+
+  const { uploadAttachmentFile } = useUploadAttachmentFile();
+  const { enqueueErrorSnackBar } = useSnackBar();
+  const { t } = useLingui();
+  const { pushFocusItemToFocusStack } = usePushFocusItemToFocusStack();
+  const { removeFocusItemFromFocusStackById } =
+    useRemoveFocusItemFromFocusStackById();
+  const workflowVisualizerWorkflowId = useRecoilComponentValue(
+    workflowVisualizerWorkflowIdComponentState,
+  );
+  const workflow = useWorkflowWithCurrentVersion(workflowVisualizerWorkflowId);
+
+  const headerTitle = isDefined(action.name) ? action.name : 'Send Email';
+
+  const handleUploadAttachment = async (file: File) => {
+    if (!isDefined(workflowVisualizerWorkflowId)) {
+      return undefined;
+    }
+
+    const { attachmentAbsoluteURL } = await uploadAttachmentFile(file, {
+      id: workflowVisualizerWorkflowId,
+      targetObjectNameSingular: CoreObjectNameSingular.Workflow,
+    });
+
+    return attachmentAbsoluteURL;
+  };
+
+  const handleImageUploadError = (error: Error, file: File) => {
+    enqueueErrorSnackBar({
+      message: t`Failed to upload image: `.concat(file.name),
+    });
+  };
+
+  const editor = useEmailEditor(
+    {
+      placeholder: placeholder ?? 'Enter email',
+      readonly,
+      defaultValue,
+      onUpdate: (editor) => {
+        const jsonContent = editor.getJSON();
+        onChange(JSON.stringify(jsonContent));
+      },
+      onFocus: () => {
+        pushFocusItemToFocusStack({
+          focusId: instanceId,
+          component: {
+            type: FocusComponentType.FORM_FIELD_INPUT,
+            instanceId: instanceId,
+          },
+          globalHotkeysConfig: {
+            enableGlobalHotkeysConflictingWithKeyboard: false,
+          },
+        });
+      },
+      onBlur: () => {
+        removeFocusItemFromFocusStackById({ focusId: instanceId });
+      },
+      onImageUpload: handleUploadAttachment,
+      onImageUploadError: handleImageUploadError,
+    },
+    [isFullScreen],
+  );
+
+  const handleEnterFullScreen = () => {
+    setIsFullScreen(true);
+  };
+
+  const handleExitFullScreen = () => {
+    setIsFullScreen(false);
+  };
+
+  const handleVariableTagInsert = (variableName: string) => {
+    if (!isDefined(editor)) {
+      throw new Error(
+        'Expected the editor to be defined when a variable is selected',
+      );
+    }
+
+    editor.commands.insertVariableTag(variableName);
+  };
+
+  const breadcrumbLinks: BreadcrumbProps['links'] = [
+    {
+      children: workflow?.name?.trim() || t`Untitled Workflow`,
+      href: '#',
+    },
+    {
+      children: headerTitle,
+      href: '#',
+    },
+    {
+      children: t`Email Editor`,
+    },
+  ];
+
+  const { renderFullScreenModal } = useFullScreenModal({
+    links: breadcrumbLinks,
+    onClose: handleExitFullScreen,
+    hasClosePageButton: !isMobile,
+  });
+
+  const fullScreenOverlay = renderFullScreenModal(
+    <div data-globally-prevent-click-outside="true">
+      <StyledFullScreenEmailEditorContainer>
+        <WorkflowEmailEditor editor={editor} readonly={readonly} />
+      </StyledFullScreenEmailEditorContainer>
+    </div>,
+    isFullScreen,
+  );
+
+  if (!isDefined(editor)) {
+    return null;
+  }
+
+  return (
+    <>
+      <StyledWorkflowSendEmailBodyContainer>
+        {label ? <InputLabel>{label}</InputLabel> : null}
+
+        <StyledWorkflowSendEmailFieldContainer>
+          <StyledWorkflowSendEmailBodyInnerContainer>
+            {!isFullScreen && (
+              <WorkflowEmailEditor editor={editor} readonly={readonly} />
+            )}
+
+            <StyledEmailEditorActionButtonContainer>
+              {!readonly && !isFullScreen && (
+                <StyledFullScreenButtonContainer
+                  isUnfolded={false}
+                  transparentBackground
+                  onClick={handleEnterFullScreen}
+                >
+                  <IconMaximize size={theme.icon.size.md} />
+                </StyledFullScreenButtonContainer>
+              )}
+            </StyledEmailEditorActionButtonContainer>
+
+            {VariablePicker && !readonly ? (
+              <VariablePicker
+                instanceId={instanceId}
+                multiline={true}
+                onVariableSelect={handleVariableTagInsert}
+              />
+            ) : null}
+          </StyledWorkflowSendEmailBodyInnerContainer>
+        </StyledWorkflowSendEmailFieldContainer>
+        {hint && <InputHint>{hint}</InputHint>}
+        {error && <InputErrorHelper>{error}</InputErrorHelper>}
+      </StyledWorkflowSendEmailBodyContainer>
+
+      {fullScreenOverlay}
+    </>
+  );
+};
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/components/__stories__/WorkflowEmailEditor.stories.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/components/__stories__/WorkflowEmailEditor.stories.tsx
new file mode 100644
index 0000000000..5f2999211b
--- /dev/null
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/components/__stories__/WorkflowEmailEditor.stories.tsx
@@ -0,0 +1,276 @@
+import { WorkflowEmailEditor } from '@/workflow/workflow-steps/workflow-actions/email-action/components/WorkflowEmailEditor';
+import { useEmailEditor } from '@/workflow/workflow-steps/workflow-actions/email-action/hooks/useEmailEditor';
+import { type Meta, type StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { ComponentDecorator, RouterDecorator } from 'twenty-ui/testing';
+import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
+import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
+import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
+import { WorkflowStepActionDrawerDecorator } from '~/testing/decorators/WorkflowStepActionDrawerDecorator';
+import { WorkflowStepDecorator } from '~/testing/decorators/WorkflowStepDecorator';
+import { WorkspaceDecorator } from '~/testing/decorators/WorkspaceDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+
+const EditorWrapper = ({
+  readonly = false,
+  placeholder = 'Enter email content...',
+  defaultValue = null,
+  onUpdate = fn(),
+}: {
+  readonly?: boolean;
+  placeholder?: string;
+  defaultValue?: string | null;
+  onUpdate?: (content: string) => void;
+}) => {
+  const editor = useEmailEditor({
+    placeholder,
+    readonly,
+    defaultValue,
+    onUpdate: (editor) => {
+      const jsonContent = editor.getJSON();
+      onUpdate(JSON.stringify(jsonContent));
+    },
+    onImageUpload: async (file: File) => {
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      return `https://via.placeholder.com/400x200?text=${encodeURIComponent(file.name)}`;
+    },
+    onImageUploadError: (_error: Error, _file: File) => {
+      // Handle image upload error
+    },
+  });
+
+  if (!editor) {
+    return <div>Loading editor...</div>;
+  }
+
+  return <WorkflowEmailEditor editor={editor} readonly={readonly} />;
+};
+
+const meta: Meta<typeof EditorWrapper> = {
+  title: 'Modules/Workflow/Actions/SendEmail/EmailEditor',
+  component: EditorWrapper,
+  parameters: {
+    msw: graphqlMocks,
+  },
+  decorators: [
+    WorkflowStepActionDrawerDecorator,
+    WorkflowStepDecorator,
+    ComponentDecorator,
+    ObjectMetadataItemsDecorator,
+    SnackBarDecorator,
+    RouterDecorator,
+    WorkspaceDecorator,
+    I18nFrontDecorator,
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof EditorWrapper>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const WithContent: Story = {
+  args: {
+    defaultValue: JSON.stringify({
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'text',
+              text: 'Hello ',
+            },
+            {
+              type: 'text',
+              marks: [{ type: 'bold' }],
+              text: 'John',
+            },
+            {
+              type: 'text',
+              text: ',',
+            },
+          ],
+        },
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'text',
+              text: 'This is a sample email with ',
+            },
+            {
+              type: 'text',
+              marks: [{ type: 'italic' }],
+              text: 'italic',
+            },
+            {
+              type: 'text',
+              text: ' and ',
+            },
+            {
+              type: 'text',
+              marks: [{ type: 'underline' }],
+              text: 'underlined',
+            },
+            {
+              type: 'text',
+              text: ' text.',
+            },
+          ],
+        },
+      ],
+    }),
+  },
+};
+
+export const WithHeadings: Story = {
+  args: {
+    defaultValue: JSON.stringify({
+      type: 'doc',
+      content: [
+        {
+          type: 'heading',
+          attrs: { level: 1 },
+          content: [{ type: 'text', text: 'Welcome Email' }],
+        },
+        {
+          type: 'heading',
+          attrs: { level: 2 },
+          content: [{ type: 'text', text: 'Getting Started' }],
+        },
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'text',
+              text: 'Thank you for joining us! Here are some next steps:',
+            },
+          ],
+        },
+        {
+          type: 'heading',
+          attrs: { level: 3 },
+          content: [{ type: 'text', text: 'Next Steps' }],
+        },
+        {
+          type: 'paragraph',
+          content: [{ type: 'text', text: '1. Complete your profile' }],
+        },
+      ],
+    }),
+  },
+};
+
+export const WithLinks: Story = {
+  args: {
+    defaultValue: JSON.stringify({
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            { type: 'text', text: 'Visit our ' },
+            {
+              type: 'text',
+              marks: [{ type: 'link', attrs: { href: 'https://twenty.com' } }],
+              text: 'website',
+            },
+            { type: 'text', text: ' for more information.' },
+          ],
+        },
+        {
+          type: 'paragraph',
+          content: [
+            { type: 'text', text: 'Contact us at ' },
+            {
+              type: 'text',
+              marks: [
+                { type: 'link', attrs: { href: 'mailto:support@twenty.com' } },
+              ],
+              text: 'support@twenty.com',
+            },
+          ],
+        },
+      ],
+    }),
+  },
+};
+
+export const WithVariableTags: Story = {
+  args: {
+    defaultValue: JSON.stringify({
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            { type: 'text', text: 'Dear ' },
+            {
+              type: 'variableTag',
+              attrs: { variable: '{{firstName}}' },
+            },
+            { type: 'text', text: ',' },
+          ],
+        },
+        {
+          type: 'paragraph',
+          content: [
+            { type: 'text', text: 'Your order ' },
+            {
+              type: 'variableTag',
+              attrs: { variable: '{{orderNumber}}' },
+            },
+            { type: 'text', text: ' has been shipped!' },
+          ],
+        },
+      ],
+    }),
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    readonly: true,
+    defaultValue: JSON.stringify({
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'text',
+              marks: [{ type: 'bold' }],
+              text: 'Read-only mode',
+            },
+          ],
+        },
+        {
+          type: 'paragraph',
+          content: [
+            {
+              type: 'text',
+              text: 'This editor is in read-only mode and cannot be edited.',
+            },
+          ],
+        },
+      ],
+    }),
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    placeholder: 'Start typing your email content...',
+  },
+};
+
+export const Interactive: Story = {
+  args: {
+    onUpdate: fn(),
+    placeholder: 'Try typing, formatting text, or uploading images...',
+  },
+};
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/components/__stories__/WorkflowSendEmailBody.stories.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/components/__stories__/WorkflowSendEmailBody.stories.tsx
new file mode 100644
index 0000000000..82b558123c
--- /dev/null
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/components/__stories__/WorkflowSendEmailBody.stories.tsx
@@ -0,0 +1,320 @@
+import { type WorkflowSendEmailAction } from '@/workflow/types/Workflow';
+import { WorkflowSendEmailBody } from '@/workflow/workflow-steps/workflow-actions/email-action/components/WorkflowSendEmailBody';
+import { WorkflowVariablePicker } from '@/workflow/workflow-variables/components/WorkflowVariablePicker';
+import { type Meta, type StoryObj } from '@storybook/react';
+import { expect, fn, userEvent, within } from '@storybook/test';
+import { graphql, HttpResponse } from 'msw';
+import { ComponentDecorator, RouterDecorator } from 'twenty-ui/testing';
+import { I18nFrontDecorator } from '~/testing/decorators/I18nFrontDecorator';
+import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
+import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
+import { WorkflowStepActionDrawerDecorator } from '~/testing/decorators/WorkflowStepActionDrawerDecorator';
+import { WorkflowStepDecorator } from '~/testing/decorators/WorkflowStepDecorator';
+import { WorkspaceDecorator } from '~/testing/decorators/WorkspaceDecorator';
+import { graphqlMocks } from '~/testing/graphqlMocks';
+import { getWorkflowNodeIdMock } from '~/testing/mock-data/workflow';
+
+const DEFAULT_ACTION: WorkflowSendEmailAction = {
+  id: getWorkflowNodeIdMock(),
+  name: 'Send Email',
+  type: 'SEND_EMAIL',
+  valid: false,
+  settings: {
+    input: {
+      connectedAccountId: '',
+      email: '',
+      subject: '',
+      body: '',
+    },
+    outputSchema: {},
+    errorHandlingOptions: {
+      retryOnFailure: { value: false },
+      continueOnFailure: { value: false },
+    },
+  },
+};
+
+const RICH_CONTENT_ACTION: WorkflowSendEmailAction = {
+  id: getWorkflowNodeIdMock(),
+  name: 'Welcome Email',
+  type: 'SEND_EMAIL',
+  valid: true,
+  settings: {
+    input: {
+      connectedAccountId: 'test-account-id',
+      email: 'user@example.com',
+      subject: 'Welcome to Twenty!',
+      body: JSON.stringify({
+        type: 'doc',
+        content: [
+          {
+            type: 'heading',
+            attrs: { level: 1 },
+            content: [{ type: 'text', text: 'Welcome to Twenty!' }],
+          },
+          {
+            type: 'paragraph',
+            content: [
+              { type: 'text', text: 'Dear ' },
+              {
+                type: 'variableTag',
+                attrs: { variable: '{{firstName}}' },
+              },
+              { type: 'text', text: ',' },
+            ],
+          },
+          {
+            type: 'paragraph',
+            content: [
+              { type: 'text', text: 'Thank you for joining us! We are ' },
+              {
+                type: 'text',
+                marks: [{ type: 'bold' }],
+                text: 'excited',
+              },
+              { type: 'text', text: ' to have you on board.' },
+            ],
+          },
+          {
+            type: 'paragraph',
+            content: [
+              { type: 'text', text: 'Visit our ' },
+              {
+                type: 'text',
+                marks: [
+                  { type: 'link', attrs: { href: 'https://twenty.com' } },
+                ],
+                text: 'website',
+              },
+              { type: 'text', text: ' to get started.' },
+            ],
+          },
+        ],
+      }),
+    },
+    outputSchema: {},
+    errorHandlingOptions: {
+      retryOnFailure: { value: true },
+      continueOnFailure: { value: false },
+    },
+  },
+};
+
+const meta: Meta<typeof WorkflowSendEmailBody> = {
+  title: 'Modules/Workflow/Actions/SendEmail/EmailBody',
+  component: WorkflowSendEmailBody,
+  parameters: {
+    msw: {
+      handlers: [
+        ...graphqlMocks.handlers,
+        graphql.query('FindManyWorkflows', () => {
+          return HttpResponse.json({
+            data: {
+              workflows: [
+                {
+                  id: getWorkflowNodeIdMock(),
+                  name: 'Test Workflow',
+                  __typename: 'Workflow',
+                },
+              ],
+            },
+          });
+        }),
+      ],
+    },
+  },
+  decorators: [
+    WorkflowStepActionDrawerDecorator,
+    WorkflowStepDecorator,
+    ComponentDecorator,
+    ObjectMetadataItemsDecorator,
+    SnackBarDecorator,
+    RouterDecorator,
+    WorkspaceDecorator,
+    I18nFrontDecorator,
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    action: DEFAULT_ACTION,
+    label: 'Email Body',
+    placeholder: 'Enter your email content...',
+    defaultValue: '',
+    onChange: fn(),
+    readonly: false,
+    VariablePicker: WorkflowVariablePicker,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(await canvas.findByText('Email Body')).toBeVisible();
+    expect(await canvas.findByRole('textbox')).toBeVisible();
+  },
+};
+
+export const WithRichContent: Story = {
+  args: {
+    action: RICH_CONTENT_ACTION,
+    label: 'Email Body',
+    placeholder: 'Enter your email content...',
+    defaultValue: RICH_CONTENT_ACTION.settings.input.body,
+    onChange: fn(),
+    readonly: false,
+    VariablePicker: WorkflowVariablePicker,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(await canvas.findByText('Email Body')).toBeVisible();
+    expect(await canvas.findByText('Welcome to Twenty!')).toBeVisible();
+    expect(await canvas.findByText('excited')).toBeVisible();
+    expect(await canvas.findByText('website')).toBeVisible();
+  },
+};
+
+export const ReadOnly: Story = {
+  args: {
+    action: RICH_CONTENT_ACTION,
+    label: 'Email Body (Read Only)',
+    defaultValue: RICH_CONTENT_ACTION.settings.input.body,
+    onChange: fn(),
+    readonly: true,
+    VariablePicker: WorkflowVariablePicker,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(await canvas.findByText('Email Body (Read Only)')).toBeVisible();
+    expect(await canvas.findByText('Welcome to Twenty!')).toBeVisible();
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    action: DEFAULT_ACTION,
+    label: 'Email Body',
+    error: 'Email body is required',
+    placeholder: 'Enter your email content...',
+    defaultValue: '',
+    onChange: fn(),
+    readonly: false,
+    VariablePicker: WorkflowVariablePicker,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(await canvas.findByText('Email Body')).toBeVisible();
+    expect(await canvas.findByText('Email body is required')).toBeVisible();
+  },
+};
+
+export const WithHint: Story = {
+  args: {
+    action: DEFAULT_ACTION,
+    label: 'Email Body',
+    hint: 'You can use variables, format text, and add images to your email content.',
+    placeholder: 'Enter your email content...',
+    defaultValue: '',
+    onChange: fn(),
+    readonly: false,
+    VariablePicker: WorkflowVariablePicker,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(await canvas.findByText('Email Body')).toBeVisible();
+    expect(
+      await canvas.findByText(
+        'You can use variables, format text, and add images to your email content.',
+      ),
+    ).toBeVisible();
+  },
+};
+
+export const Interactive: Story = {
+  args: {
+    action: DEFAULT_ACTION,
+    label: 'Email Body',
+    placeholder: 'Start typing to see the editor in action...',
+    defaultValue: '',
+    onChange: fn(),
+    readonly: false,
+    VariablePicker: WorkflowVariablePicker,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(await canvas.findByText('Email Body')).toBeVisible();
+
+    const editor = await canvas.findByRole('textbox');
+    expect(editor).toBeVisible();
+
+    await userEvent.click(editor);
+    await userEvent.type(editor, 'Hello World!');
+  },
+};
+
+export const WithoutVariablePicker: Story = {
+  args: {
+    action: DEFAULT_ACTION,
+    label: 'Email Body',
+    placeholder: 'Enter your email content...',
+    defaultValue: '',
+    onChange: fn(),
+    readonly: false,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(await canvas.findByText('Email Body')).toBeVisible();
+    expect(await canvas.findByRole('textbox')).toBeVisible();
+  },
+};
+
+export const WithLongContent: Story = {
+  args: {
+    action: {
+      ...DEFAULT_ACTION,
+      settings: {
+        ...DEFAULT_ACTION.settings,
+        input: {
+          ...DEFAULT_ACTION.settings.input,
+          body: JSON.stringify({
+            type: 'doc',
+            content: Array.from({ length: 20 }, (_, i) => ({
+              type: 'paragraph',
+              content: [
+                {
+                  type: 'text',
+                  text: `This is paragraph ${i + 1}. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.`,
+                },
+              ],
+            })),
+          }),
+        },
+      },
+    },
+    label: 'Email Body',
+    placeholder: 'Enter your email content...',
+    defaultValue: JSON.stringify({
+      type: 'doc',
+      content: Array.from({ length: 20 }, (_, i) => ({
+        type: 'paragraph',
+        content: [
+          {
+            type: 'text',
+            text: `This is paragraph ${i + 1}. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.`,
+          },
+        ],
+      })),
+    }),
+    onChange: fn(),
+    readonly: false,
+    VariablePicker: WorkflowVariablePicker,
+  },
+};
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/components/image-bubble-menu/ImageBubbleMenu.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/components/image-bubble-menu/ImageBubbleMenu.tsx
new file mode 100644
index 0000000000..c7eea22f3b
--- /dev/null
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/components/image-bubble-menu/ImageBubbleMenu.tsx
@@ -0,0 +1,96 @@
+import { BubbleMenuIconButton } from '@/workflow/workflow-steps/workflow-actions/email-action/components/text-bubble-menu/BubbleMenuIconButton';
+import { StyledBubbleMenuContainer } from '@/workflow/workflow-steps/workflow-actions/email-action/components/text-bubble-menu/TextBubbleMenu';
+import { type Editor } from '@tiptap/core';
+import { useEditorState } from '@tiptap/react';
+import { BubbleMenu } from '@tiptap/react/menus';
+import {
+  IconAlignCenter,
+  IconAlignLeft,
+  IconAlignRight,
+  IconTrash,
+} from 'twenty-ui/display';
+
+type ImageBubbleMenuProps = {
+  editor: Editor;
+};
+
+export const ImageBubbleMenu = ({ editor }: ImageBubbleMenuProps) => {
+  const state = useEditorState({
+    editor,
+    selector: (ctx) => {
+      return {
+        align: ctx.editor.getAttributes('image').align || 'left',
+      };
+    },
+  });
+
+  const handleDelete = () => {
+    editor.chain().focus().deleteSelection().run();
+  };
+
+  const alignmentActions = [
+    {
+      align: 'left',
+      Icon: IconAlignLeft,
+      onClick: () =>
+        editor
+          .chain()
+          .focus()
+          .updateAttributes('image', { align: 'left' })
+          .run(),
+      isActive: state.align === 'left',
+    },
+    {
+      align: 'center',
+      Icon: IconAlignCenter,
+      onClick: () =>
+        editor
+          .chain()
+          .focus()
+          .updateAttributes('image', { align: 'center' })
+          .run(),
+      isActive: state.align === 'center',
+    },
+    {
+      align: 'right',
+      Icon: IconAlignRight,
+      onClick: () =>
+        editor
+          .chain()
+          .focus()
+          .updateAttributes('image', { align: 'right' })
+          .run(),
+      isActive: state.align === 'right',
+    },
+  ];
+
+  const handleShouldShow = () => {
+    return editor.isActive('image');
+  };
+
+  return (
+    <BubbleMenu
+      pluginKey="image-bubble-menu"
+      editor={editor}
+      shouldShow={handleShouldShow}
+      updateDelay={0}
+    >
+      <StyledBubbleMenuContainer>
+        {alignmentActions.map(({ align, Icon, onClick, isActive }) => (
+          <BubbleMenuIconButton
+            key={`image-align-${align}`}
+            Icon={Icon}
+            onClick={onClick}
+            isActive={isActive}
+          />
+        ))}
+        <BubbleMenuIconButton
+          key="image-delete"
+          Icon={IconTrash}
+          onClick={handleDelete}
+          isActive={false}
+        />
+      </StyledBubbleMenuContainer>
+    </BubbleMenu>
+  );
+};
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/components/link-bubble-menu/LinkBubbleMenu.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/components/link-bubble-menu/LinkBubbleMenu.tsx
new file mode 100644
index 0000000000..024a0ace7c
--- /dev/null
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/components/link-bubble-menu/LinkBubbleMenu.tsx
@@ -0,0 +1,62 @@
+import { BubbleMenuIconButton } from '@/workflow/workflow-steps/workflow-actions/email-action/components/text-bubble-menu/BubbleMenuIconButton';
+import { EditLinkPopover } from '@/workflow/workflow-steps/workflow-actions/email-action/components/text-bubble-menu/EditLinkPopover';
+import { StyledBubbleMenuContainer } from '@/workflow/workflow-steps/workflow-actions/email-action/components/text-bubble-menu/TextBubbleMenu';
+import { type Editor } from '@tiptap/core';
+import { useEditorState } from '@tiptap/react';
+import { BubbleMenu } from '@tiptap/react/menus';
+import { IconExternalLink, IconLinkOff } from 'twenty-ui/display';
+
+type LinkBubbleMenuProps = {
+  editor: Editor;
+};
+
+export const LinkBubbleMenu = ({ editor }: LinkBubbleMenuProps) => {
+  const state = useEditorState({
+    editor,
+    selector: (ctx) => {
+      return {
+        linkHref: ctx.editor.getAttributes('link').href || '',
+      };
+    },
+  });
+
+  const handleShouldShow = () => {
+    return editor.isActive('link');
+  };
+
+  const menuActions = [
+    {
+      Icon: IconExternalLink,
+      onClick: () => {
+        window.open(state.linkHref, '_blank');
+      },
+    },
+    {
+      Icon: IconLinkOff,
+      onClick: () =>
+        editor.chain().focus().extendMarkRange('link').unsetLink().run(),
+    },
+  ];
+
+  return (
+    <BubbleMenu
+      pluginKey="link-bubble-menu"
+      editor={editor}
+      shouldShow={handleShouldShow}
+      updateDelay={0}
+    >
+      <StyledBubbleMenuContainer>
+        <EditLinkPopover defaultValue={state.linkHref} editor={editor} />
+        {menuActions.map(({ Icon, onClick }) => {
+          return (
+            <BubbleMenuIconButton
+              key={Icon.name || Icon.displayName || 'unknown'}
+              Icon={Icon}
+              onClick={onClick}
+            />
+          );
+        })}
+      </StyledBubbleMenuContainer>
+    </BubbleMenu>
+  );
+};
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/components/text-bubble-menu/BubbleMenuIconButton.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/components/text-bubble-menu/BubbleMenuIconButton.tsx
new file mode 100644
index 0000000000..4e0c06aab5
--- /dev/null
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/components/text-bubble-menu/BubbleMenuIconButton.tsx
@@ -0,0 +1,44 @@
+import styled from '@emotion/styled';
+import React from 'react';
+import type { IconComponent } from 'twenty-ui/display';
+import { FloatingIconButton } from 'twenty-ui/input';
+
+type BubbleMenuIconButtonProps = {
+  className?: string;
+  Icon?: IconComponent;
+  disabled?: boolean;
+  focus?: boolean;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  isActive?: boolean;
+};
+
+const StyledBubbleMenuIconButton = styled(FloatingIconButton)`
+  border: none;
+  border-radius: ${({ theme }) => theme.spacing(1.5)};
+  width: ${({ theme }) => theme.spacing(6)};
+  height: ${({ theme }) => theme.spacing(6)};
+`;
+
+export const BubbleMenuIconButton = ({
+  className,
+  Icon,
+  disabled = false,
+  focus = false,
+  onClick,
+  isActive,
+}: BubbleMenuIconButtonProps) => {
+  return (
+    <StyledBubbleMenuIconButton
+      className={className}
+      Icon={Icon}
+      disabled={disabled}
+      focus={focus}
+      onClick={onClick}
+      isActive={isActive}
+      applyShadow={false}
+      applyBlur={false}
+      size="medium"
+      position="standalone"
+    />
+  );
+};
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/components/text-bubble-menu/EditLinkPopover.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/components/text-bubble-menu/EditLinkPopover.tsx
new file mode 100644
index 0000000000..c5eb44bf9b
--- /dev/null
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/components/text-bubble-menu/EditLinkPopover.tsx
@@ -0,0 +1,79 @@
+import { TextInput } from '@/ui/input/components/TextInput';
+import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
+import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
+import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { useToggleDropdown } from '@/ui/layout/dropdown/hooks/useToggleDropdown';
+import { BubbleMenuIconButton } from '@/workflow/workflow-steps/workflow-actions/email-action/components/text-bubble-menu/BubbleMenuIconButton';
+import { useLingui } from '@lingui/react/macro';
+import { isNonEmptyString } from '@sniptt/guards';
+import { type Editor } from '@tiptap/core';
+import { useId, useState, type FocusEvent, type FormEvent } from 'react';
+import { isDefined } from 'twenty-shared/utils';
+import { IconLink, IconPencil } from 'twenty-ui/display';
+
+type EditLinkPopoverProps = {
+  defaultValue: string | undefined;
+  editor: Editor;
+};
+
+export const EditLinkPopover = ({
+  defaultValue = '',
+  editor,
+}: EditLinkPopoverProps) => {
+  const instanceId = useId();
+  const dropdownId = `edit-link-popover-${instanceId}`;
+  const isActive = isNonEmptyString(defaultValue);
+  const { t } = useLingui();
+
+  const [value, setValue] = useState(defaultValue);
+  const { toggleDropdown } = useToggleDropdown();
+
+  const handleSubmit = (
+    event: FormEvent<HTMLFormElement> | FocusEvent<HTMLInputElement>,
+  ) => {
+    event.preventDefault();
+
+    if (!isDefined(value)) {
+      editor.chain().focus().extendMarkRange('link').unsetLink().run();
+    } else {
+      editor
+        .chain()
+        .focus()
+        .extendMarkRange('link')
+        .setLink({ href: value })
+        .run();
+    }
+
+    toggleDropdown({ dropdownComponentInstanceIdFromProps: dropdownId });
+  };
+
+  return (
+    <Dropdown
+      onOpen={() => {
+        setValue(defaultValue);
+      }}
+      dropdownComponents={
+        <DropdownContent>
+          <DropdownMenuItemsContainer>
+            <form onSubmit={handleSubmit}>
+              <TextInput
+                placeholder={t`Enter link`}
+                value={value}
+                onChange={setValue}
+                onBlur={handleSubmit}
+              />
+            </form>
+          </DropdownMenuItemsContainer>
+        </DropdownContent>
+      }
+      dropdownId={dropdownId}
+      isDropdownInModal={true}
+      clickableComponent={
+        <BubbleMenuIconButton
+          isActive={isActive}
+          Icon={isActive ? IconPencil : IconLink}
+        />
+      }
+    />
+  );
+};
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/components/text-bubble-menu/TextBubbleMenu.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/components/text-bubble-menu/TextBubbleMenu.tsx
new file mode 100644
index 0000000000..8705bdb165
--- /dev/null
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/components/text-bubble-menu/TextBubbleMenu.tsx
@@ -0,0 +1,87 @@
+import { BubbleMenuIconButton } from '@/workflow/workflow-steps/workflow-actions/email-action/components/text-bubble-menu/BubbleMenuIconButton';
+import { EditLinkPopover } from '@/workflow/workflow-steps/workflow-actions/email-action/components/text-bubble-menu/EditLinkPopover';
+import { TurnIntoBlockDropdown } from '@/workflow/workflow-steps/workflow-actions/email-action/components/text-bubble-menu/TurnIntoBlockDropdown';
+import { useTextBubbleState } from '@/workflow/workflow-steps/workflow-actions/email-action/hooks/useTextBubbleState';
+import { isTextSelected } from '@/workflow/workflow-steps/workflow-actions/email-action/utils/isTextSelected';
+import styled from '@emotion/styled';
+import { type Editor } from '@tiptap/core';
+import { BubbleMenu } from '@tiptap/react/menus';
+import {
+  IconBold,
+  IconItalic,
+  IconStrikethrough,
+  IconUnderline,
+} from 'twenty-ui/display';
+
+export const StyledBubbleMenuContainer = styled.div`
+  backdrop-filter: blur(20px);
+  background-color: ${({ theme }) => theme.background.primary};
+  border-radius: ${({ theme }) => theme.border.radius.md};
+  box-shadow: ${({ theme }) =>
+    `0px 2px 4px 0px ${theme.background.transparent.light}, 0px 0px 4px 0px ${theme.background.transparent.medium}`};
+  display: inline-flex;
+  gap: 2px;
+  padding: 2px;
+`;
+
+type TextBubbleMenuProps = {
+  editor: Editor;
+};
+
+export const TextBubbleMenu = ({ editor }: TextBubbleMenuProps) => {
+  const state = useTextBubbleState(editor);
+  const menuActions = [
+    {
+      Icon: IconBold,
+      onClick: () => editor.chain().focus().toggleBold().run(),
+      isActive: state.isBold,
+    },
+    {
+      Icon: IconItalic,
+      onClick: () => editor.chain().focus().toggleItalic().run(),
+      isActive: state.isItalic,
+    },
+    {
+      Icon: IconUnderline,
+      onClick: () => editor.chain().focus().toggleUnderline().run(),
+      isActive: state.isUnderline,
+    },
+    {
+      Icon: IconStrikethrough,
+      onClick: () => editor.chain().focus().toggleStrike().run(),
+      isActive: state.isStrike,
+    },
+  ];
+
+  const handleShouldShow = () => {
+    if (editor.isActive('image')) {
+      return false;
+    }
+
+    return isTextSelected({ editor });
+  };
+
+  return (
+    <BubbleMenu
+      pluginKey="text-bubble-menu"
+      editor={editor}
+      shouldShow={handleShouldShow}
+      updateDelay={0}
+    >
+      <StyledBubbleMenuContainer>
+        <TurnIntoBlockDropdown editor={editor} />
+        {menuActions.map(({ Icon, onClick, isActive }) => {
+          return (
+            <BubbleMenuIconButton
+              key={Icon.name || Icon.displayName || 'unknown'}
+              Icon={Icon}
+              onClick={onClick}
+              isActive={isActive}
+            />
+          );
+        })}
+        <EditLinkPopover defaultValue={state.linkHref} editor={editor} />
+      </StyledBubbleMenuContainer>
+    </BubbleMenu>
+  );
+};
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/components/text-bubble-menu/TurnIntoBlockDropdown.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/components/text-bubble-menu/TurnIntoBlockDropdown.tsx
new file mode 100644
index 0000000000..c1bfa1653d
--- /dev/null
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/components/text-bubble-menu/TurnIntoBlockDropdown.tsx
@@ -0,0 +1,89 @@
+import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
+import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
+import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { useToggleDropdown } from '@/ui/layout/dropdown/hooks/useToggleDropdown';
+import { useTurnIntoBlockOptions } from '@/workflow/workflow-steps/workflow-actions/email-action/hooks/useTurnIntoBlockOptions';
+import { useTheme } from '@emotion/react';
+import styled from '@emotion/styled';
+import { type Editor } from '@tiptap/react';
+import { useId } from 'react';
+import { IconPilcrow } from 'twenty-ui/display';
+import { MenuItem } from 'twenty-ui/navigation';
+
+const StyledMenuItem = styled.button`
+  align-items: center;
+  background: none;
+  border: none;
+  color: ${({ theme }) => theme.font.color.tertiary};
+  cursor: pointer;
+  display: flex;
+  font-size: ${({ theme }) => theme.font.size.sm};
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+  gap: 4px;
+  height: ${({ theme }) => theme.spacing(6)};
+  padding: 0;
+  width: 100%;
+  padding: 0 ${({ theme }) => theme.spacing(1.5)};
+  border-radius: ${({ theme }) => theme.spacing(1.5)};
+
+  :hover {
+    background: ${({ theme }) => theme.background.transparent.medium};
+  }
+
+  :focus {
+    outline: none;
+  }
+`;
+
+type TurnIntoBlockDropdownProps = {
+  editor: Editor;
+};
+
+export const TurnIntoBlockDropdown = ({
+  editor,
+}: TurnIntoBlockDropdownProps) => {
+  const theme = useTheme();
+
+  const instanceId = useId();
+  const dropdownId = `turn-into-block-dropdown-${instanceId}`;
+  const { toggleDropdown } = useToggleDropdown();
+
+  const options = useTurnIntoBlockOptions(editor);
+  const activeItem = options.find((option) => option.isActive());
+  const { icon: ActiveIcon = IconPilcrow, title: activeTitle = 'Paragraph' } =
+    activeItem ?? {};
+
+  return (
+    <Dropdown
+      dropdownComponents={
+        <DropdownContent>
+          <DropdownMenuItemsContainer>
+            {options.map(({ id, title, icon, onClick }) => (
+              <MenuItem
+                key={id}
+                text={title}
+                LeftIcon={icon}
+                onClick={() => {
+                  onClick();
+                  toggleDropdown({
+                    dropdownComponentInstanceIdFromProps: dropdownId,
+                  });
+                }}
+              />
+            ))}
+          </DropdownMenuItemsContainer>
+        </DropdownContent>
+      }
+      dropdownId={dropdownId}
+      clickableComponent={
+        <StyledMenuItem>
+          <ActiveIcon size={theme.icon.size.md} />
+          {activeTitle}
+        </StyledMenuItem>
+      }
+      dropdownOffset={{
+        y: parseInt(theme.spacing(1), 10),
+      }}
+    />
+  );
+};
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/extensions/resizable-image/ResizableImage.ts b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/extensions/resizable-image/ResizableImage.ts
new file mode 100644
index 0000000000..2ada3295d5
--- /dev/null
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/extensions/resizable-image/ResizableImage.ts
@@ -0,0 +1,21 @@
+import { ResizableImageView } from '@/workflow/workflow-steps/workflow-actions/email-action/extensions/resizable-image/ResizableImageView';
+import {
+  type ImageOptions,
+  Image as TiptapImage,
+} from '@tiptap/extension-image';
+import { ReactNodeViewRenderer } from '@tiptap/react';
+
+export const ResizableImage = TiptapImage.extend<ImageOptions>({
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      align: {
+        default: 'left',
+      },
+    };
+  },
+
+  addNodeView: () => {
+    return ReactNodeViewRenderer(ResizableImageView);
+  },
+});
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/extensions/resizable-image/ResizableImageView.tsx b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/extensions/resizable-image/ResizableImageView.tsx
new file mode 100644
index 0000000000..fd57cdd153
--- /dev/null
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/extensions/resizable-image/ResizableImageView.tsx
@@ -0,0 +1,215 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { type NodeViewProps, NodeViewWrapper } from '@tiptap/react';
+import React, { useCallback, useRef, useState } from 'react';
+import { isDefined } from 'twenty-shared/utils';
+
+const IMAGE_MIN_WIDTH = 32;
+const IMAGE_MAX_WIDTH = 600;
+
+const StyledNodeViewWrapper = styled(NodeViewWrapper)`
+  height: 100%;
+  ${({ align }) => {
+    switch (align) {
+      case 'left':
+        return css`
+          margin-left: 0;
+        `;
+      case 'right':
+        return css`
+          margin-right: 0;
+        `;
+      case 'center':
+        return css`
+          margin-left: auto;
+          margin-right: auto;
+        `;
+    }
+  }}
+`;
+
+const StyledImageWrapper = styled.div<{ width?: number }>`
+  height: 100%;
+`;
+
+const StyledImageContainer = styled.div`
+  max-width: 100%;
+  position: relative;
+`;
+
+const StyledImage = styled.img`
+  height: auto;
+  max-width: 100%;
+`;
+
+const StyledImageHandle = styled.div<{ handle: 'left' | 'right' }>`
+  border-radius: ${({ theme }) => theme.border.radius.md};
+  background-color: ${({ theme }) => theme.background.primaryInverted};
+  border: 1px solid ${({ theme }) => theme.background.primary};
+  cursor: col-resize;
+  height: ${({ theme }) => theme.spacing(8)};
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: ${({ theme }) => theme.spacing(2)};
+  z-index: 1;
+
+  ${({ handle, theme }) => {
+    if (handle === 'left') {
+      return css`
+        left: ${theme.spacing(1)};
+      `;
+    }
+
+    return css`
+      right: ${theme.spacing(1)};
+    `;
+  }}
+`;
+
+type ResizeParams = {
+  initialWidth: number;
+  initialClientX: number;
+  handleUsed: 'left' | 'right';
+};
+
+type ResizableImageViewProps = NodeViewProps;
+
+export const ResizableImageView = (props: ResizableImageViewProps) => {
+  const { editor, node, updateAttributes } = props;
+  const { width: initialWidth, align = 'left', src, alt } = node.attrs;
+
+  const imageWrapperRef = useRef<HTMLDivElement>(null);
+
+  // Controls visibility of resize handles when hovering over the image
+  const [isHovering, setIsHovering] = useState(false);
+  const [width, setWidth] = useState(initialWidth || 0);
+  // Controls actual resize operation state (null = not resizing, object = actively resizing)
+  const [resizeParams, setResizeParams] = useState<ResizeParams | null>(null);
+
+  // Create stable event handlers using a closure approach
+  const createMouseHandlers = useCallback(() => {
+    let currentResizeParams: ResizeParams | null = null;
+
+    const handleMouseMove = (event: MouseEvent) => {
+      const imageWrapper = imageWrapperRef.current;
+
+      if (!isDefined(currentResizeParams) || !isDefined(imageWrapper)) {
+        return;
+      }
+
+      const deltaX = event.clientX - currentResizeParams.initialClientX;
+      const { initialWidth, handleUsed } = currentResizeParams;
+
+      let newWidth =
+        align === 'center'
+          ? initialWidth + (handleUsed === 'left' ? -deltaX * 2 : deltaX * 2)
+          : initialWidth + (handleUsed === 'left' ? -deltaX : deltaX);
+
+      const maxWidth =
+        editor.view.dom.firstElementChild?.clientWidth || IMAGE_MAX_WIDTH;
+      newWidth = Math.min(Math.max(newWidth, IMAGE_MIN_WIDTH), maxWidth);
+
+      setWidth(newWidth);
+      imageWrapper.style.width = `${newWidth}px`;
+    };
+
+    const handleMouseUp = (event: MouseEvent) => {
+      const imageWrapper = imageWrapperRef.current;
+
+      if (!isDefined(imageWrapper) || !isDefined(currentResizeParams)) {
+        return;
+      }
+
+      if (
+        (!event.target || !imageWrapper.contains(event.target as Node)) &&
+        isHovering
+      ) {
+        setIsHovering(false);
+        return;
+      }
+
+      const finalWidth = imageWrapper.clientWidth;
+      currentResizeParams = null;
+      setResizeParams(null);
+      updateAttributes({ width: finalWidth });
+
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+
+    const startResize = (resizeParams: ResizeParams) => {
+      currentResizeParams = resizeParams;
+      setResizeParams(resizeParams);
+
+      window.addEventListener('mousemove', handleMouseMove);
+      window.addEventListener('mouseup', handleMouseUp);
+    };
+
+    return { startResize };
+  }, [editor, align, isHovering, updateAttributes]);
+
+  const { startResize } = createMouseHandlers();
+
+  const handleImageHandleMouseDown = useCallback(
+    (handle: 'left' | 'right', event: React.MouseEvent<HTMLDivElement>) => {
+      event.preventDefault();
+
+      const resizeParams = {
+        initialWidth: imageWrapperRef.current?.clientWidth ?? IMAGE_MAX_WIDTH,
+        initialClientX: event.clientX,
+        handleUsed: handle,
+      };
+
+      startResize(resizeParams);
+    },
+    [startResize],
+  );
+
+  const handleImageHover = useCallback(() => {
+    if (!editor.isEditable) {
+      return;
+    }
+
+    setIsHovering(true);
+  }, [editor.isEditable]);
+
+  const handleImageHoverEnd = useCallback(() => {
+    setIsHovering(false);
+  }, []);
+
+  return (
+    <StyledNodeViewWrapper
+      onMouseEnter={handleImageHover}
+      onMouseLeave={handleImageHoverEnd}
+      align={align}
+    >
+      <StyledImageWrapper
+        ref={imageWrapperRef}
+        style={{ width: width ? `${width}px` : 'fit-content' }}
+      >
+        <StyledImageContainer>
+          <StyledImage
+            src={src}
+            alt={alt}
+            draggable={false}
+            contentEditable={false}
+          />
+          {/* Show resize handles when hovering over image OR actively resizing */}
+          {(isHovering || isDefined(resizeParams)) && (
+            <>
+              <StyledImageHandle
+                handle="left"
+                onMouseDown={(e) => handleImageHandleMouseDown('left', e)}
+              />
+              <StyledImageHandle
+                handle="right"
+                onMouseDown={(e) => handleImageHandleMouseDown('right', e)}
+              />
+            </>
+          )}
+        </StyledImageContainer>
+      </StyledImageWrapper>
+    </StyledNodeViewWrapper>
+  );
+};
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/extensions/resizable-image/UploadImageExtension.ts b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/extensions/resizable-image/UploadImageExtension.ts
new file mode 100644
index 0000000000..9b4f9de589
--- /dev/null
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/extensions/resizable-image/UploadImageExtension.ts
@@ -0,0 +1,61 @@
+import {
+  UploadImagePlugin,
+  type UploadImagePluginProps,
+} from '@/workflow/workflow-steps/workflow-actions/email-action/extensions/resizable-image/UploadImagePlugin';
+import { Extension } from '@tiptap/core';
+
+type UploadImageOptions = Omit<UploadImagePluginProps, 'editor'> & {};
+
+type UploadImageStorage = {
+  placeholderImages: Set<string>;
+};
+
+declare module '@tiptap/core' {
+  interface Storage {
+    uploadImage: UploadImageStorage;
+  }
+}
+
+export const UploadImageExtension = Extension.create<
+  UploadImageOptions,
+  UploadImageStorage
+>({
+  name: 'uploadImage',
+
+  addOptions: () => {
+    return {
+      allowedMimeTypes: [
+        'image/jpeg',
+        'image/png',
+        'image/gif',
+        'image/webp',
+        'image/svg+xml',
+      ],
+      onImageUpload: undefined,
+      onImageUploadError: undefined,
+    };
+  },
+
+  addStorage: () => {
+    return {
+      placeholderImages: new Set(),
+    };
+  },
+
+  addProseMirrorPlugins() {
+    const { onImageUpload } = this.options;
+
+    if (!onImageUpload) {
+      return [];
+    }
+
+    return [
+      UploadImagePlugin({
+        editor: this.editor,
+        allowedMimeTypes: this.options.allowedMimeTypes,
+        onImageUpload: this.options.onImageUpload,
+        onImageUploadError: this.options.onImageUploadError,
+      }),
+    ];
+  },
+});
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/extensions/resizable-image/UploadImagePlugin.ts b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/extensions/resizable-image/UploadImagePlugin.ts
new file mode 100644
index 0000000000..b70de5ae5d
--- /dev/null
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/extensions/resizable-image/UploadImagePlugin.ts
@@ -0,0 +1,128 @@
+import { type Editor } from '@tiptap/core';
+import { type Node } from '@tiptap/pm/model';
+import { Plugin, PluginKey } from '@tiptap/pm/state';
+import { type EditorView } from '@tiptap/pm/view';
+
+export type UploadImagePluginProps = {
+  editor: Editor;
+  allowedMimeTypes?: string[];
+  onImageUpload?: (file: File) => Promise<string>;
+  onImageUploadError?: (error: Error, file: File) => void;
+};
+
+export const UploadImagePlugin = (options: UploadImagePluginProps) => {
+  const { editor, onImageUpload, allowedMimeTypes, onImageUploadError } =
+    options;
+
+  const handleImageUpload = (view: EditorView, file: File, pos?: number) => {
+    const placeholderSrc = URL.createObjectURL(file);
+
+    const { tr, schema } = view.state;
+    const imageNode = schema.nodes.image.create({
+      src: placeholderSrc,
+      alt: file.name,
+    });
+
+    editor.extensionStorage.uploadImage.placeholderImages.add(placeholderSrc);
+
+    const resolvedPos =
+      pos !== undefined
+        ? view.state.doc.resolve(pos)
+        : view.state.selection.$head;
+
+    const transaction = tr.insert(resolvedPos.pos, imageNode);
+    view.dispatch(transaction);
+
+    onImageUpload?.(file)
+      .then((uploadedSrc) => {
+        const updateTr = view.state.tr;
+
+        const predicate = (node: Node) =>
+          node.type.name === 'image' && node.attrs.src === placeholderSrc;
+
+        view.state.doc.descendants((node, pos) => {
+          if (predicate(node)) {
+            updateTr.setNodeMarkup(pos, undefined, {
+              ...node.attrs,
+              src: uploadedSrc,
+            });
+            return false;
+          }
+        });
+
+        view.dispatch(updateTr);
+      })
+      .catch((error: Error) => {
+        const removeTr = view.state.tr;
+        const predicate = (node: Node) =>
+          node.type.name === 'image' && node.attrs.src === placeholderSrc;
+
+        view.state.doc.descendants((node, pos) => {
+          if (predicate(node)) {
+            removeTr.delete(pos, pos + node.nodeSize);
+            return false; // Stop traversal after finding the target
+          }
+        });
+
+        view.dispatch(removeTr);
+
+        onImageUploadError?.(error, file);
+      })
+      .finally(() => {
+        editor.extensionStorage.uploadImage.placeholderImages.delete(
+          placeholderSrc,
+        );
+        URL.revokeObjectURL(placeholderSrc);
+      });
+  };
+
+  return new Plugin({
+    key: new PluginKey('uploadImage'),
+    props: {
+      handleDrop: (view, event) => {
+        if (!onImageUpload || !event.dataTransfer?.files?.length) {
+          return false;
+        }
+
+        const images = Array.from(event.dataTransfer.files).filter((file) =>
+          allowedMimeTypes?.includes(file.type),
+        );
+        if (images.length === 0) {
+          return false;
+        }
+
+        const pos = view.posAtCoords({
+          left: event.clientX,
+          top: event.clientY,
+        });
+        if (!pos) {
+          return false;
+        }
+
+        event.preventDefault();
+        event.stopPropagation();
+
+        images.forEach((file) => handleImageUpload(view, file, pos.pos));
+        return true;
+      },
+      handlePaste: (view, event) => {
+        if (!onImageUpload || !event.clipboardData?.files?.length) {
+          return false;
+        }
+
+        const images = Array.from(event.clipboardData.files).filter((file) =>
+          allowedMimeTypes?.includes(file.type),
+        );
+        if (images.length === 0) {
+          return false;
+        }
+
+        event.preventDefault();
+        event.stopPropagation();
+
+        images.forEach((file) => handleImageUpload(view, file));
+        return true;
+      },
+    },
+  });
+};
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/hooks/useEmailEditor.ts b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/hooks/useEmailEditor.ts
new file mode 100644
index 0000000000..9bc1172641
--- /dev/null
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/hooks/useEmailEditor.ts
@@ -0,0 +1,103 @@
+import { ResizableImage } from '@/workflow/workflow-steps/workflow-actions/email-action/extensions/resizable-image/ResizableImage';
+import { UploadImageExtension } from '@/workflow/workflow-steps/workflow-actions/email-action/extensions/resizable-image/UploadImageExtension';
+import { getInitialEmailEditorContent } from '@/workflow/workflow-variables/utils/getInitialEmailEditorContent';
+import { VariableTag } from '@/workflow/workflow-variables/utils/variableTag';
+import { Bold } from '@tiptap/extension-bold';
+import { Document } from '@tiptap/extension-document';
+import { HardBreak } from '@tiptap/extension-hard-break';
+import { Heading } from '@tiptap/extension-heading';
+import { Italic } from '@tiptap/extension-italic';
+import { Link } from '@tiptap/extension-link';
+import { Paragraph } from '@tiptap/extension-paragraph';
+import { Strike } from '@tiptap/extension-strike';
+import { Text } from '@tiptap/extension-text';
+import { Underline } from '@tiptap/extension-underline';
+import { Dropcursor, Placeholder, UndoRedo } from '@tiptap/extensions';
+import { type Editor, useEditor } from '@tiptap/react';
+import { type DependencyList, useMemo } from 'react';
+import { isDefined } from 'twenty-shared/utils';
+
+type UseEmailEditorProps = {
+  placeholder: string | undefined;
+  readonly: boolean | undefined;
+  defaultValue: string | undefined | null;
+  onUpdate: (editor: Editor) => void;
+  onFocus?: (editor: Editor) => void;
+  onBlur?: (editor: Editor) => void;
+  onImageUpload?: (file: File) => Promise<string>;
+  onImageUploadError?: (error: Error, file: File) => void;
+};
+
+export const useEmailEditor = (
+  {
+    placeholder,
+    readonly,
+    defaultValue,
+    onUpdate,
+    onFocus,
+    onBlur,
+    onImageUpload,
+    onImageUploadError,
+  }: UseEmailEditorProps,
+  dependencies?: DependencyList,
+) => {
+  const extensions = useMemo(
+    () => [
+      Document,
+      Paragraph,
+      Text,
+      Placeholder.configure({
+        placeholder,
+      }),
+      VariableTag,
+      HardBreak.configure({
+        keepMarks: false,
+      }),
+      UndoRedo,
+      Bold,
+      Italic,
+      Strike,
+      Underline,
+      Heading.configure({
+        levels: [1, 2, 3],
+      }),
+      Link.configure({
+        openOnClick: false,
+      }),
+      ResizableImage,
+      Dropcursor,
+      UploadImageExtension.configure({
+        onImageUpload,
+        onImageUploadError,
+      }),
+    ],
+    [placeholder, onImageUpload, onImageUploadError],
+  );
+
+  const editor = useEditor(
+    {
+      extensions,
+      content: isDefined(defaultValue)
+        ? getInitialEmailEditorContent(defaultValue)
+        : undefined,
+      editable: !readonly,
+      onUpdate: ({ editor }) => {
+        onUpdate(editor);
+      },
+      onFocus: ({ editor }) => {
+        onFocus?.(editor);
+      },
+      onBlur: ({ editor }) => {
+        onBlur?.(editor);
+      },
+      editorProps: {
+        scrollThreshold: 60,
+        scrollMargin: 60,
+      },
+      injectCSS: false,
+    },
+    dependencies,
+  );
+
+  return editor;
+};
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/hooks/useTextBubbleState.ts b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/hooks/useTextBubbleState.ts
new file mode 100644
index 0000000000..5c456a30fe
--- /dev/null
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/hooks/useTextBubbleState.ts
@@ -0,0 +1,20 @@
+import { type Editor } from '@tiptap/core';
+import { useEditorState } from '@tiptap/react';
+
+export const useTextBubbleState = (editor: Editor) => {
+  const state = useEditorState({
+    editor,
+    selector: (ctx) => {
+      return {
+        isBold: ctx.editor.isActive('bold'),
+        isItalic: ctx.editor.isActive('italic'),
+        isStrike: ctx.editor.isActive('strike'),
+        isUnderline: ctx.editor.isActive('underline'),
+        isLink: ctx.editor.isActive('link'),
+        linkHref: ctx.editor.getAttributes('link').href || '',
+      };
+    },
+  });
+
+  return state;
+};
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/hooks/useTurnIntoBlockOptions.ts b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/hooks/useTurnIntoBlockOptions.ts
new file mode 100644
index 0000000000..532be0a63c
--- /dev/null
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/hooks/useTurnIntoBlockOptions.ts
@@ -0,0 +1,81 @@
+import { type Editor, useEditorState } from '@tiptap/react';
+import {
+  type IconComponent,
+  IconH1,
+  IconH2,
+  IconH3,
+  IconPilcrow,
+} from 'twenty-ui/display';
+
+export type TurnIntoBlockOptions = {
+  title: string;
+  id: string;
+  disabled: () => boolean;
+  isActive: () => boolean;
+  onClick: () => void;
+  icon: IconComponent;
+};
+
+export const useTurnIntoBlockOptions = (editor: Editor) => {
+  return useEditorState({
+    editor,
+    selector: ({ editor }): TurnIntoBlockOptions[] => [
+      {
+        id: 'paragraph',
+        title: 'Paragraph',
+        icon: IconPilcrow,
+        onClick: () => {
+          return editor.chain().focus().setParagraph().run();
+        },
+        disabled: () => {
+          return !editor.can().setParagraph();
+        },
+        isActive: () => {
+          return editor.isActive('paragraph');
+        },
+      },
+      {
+        id: 'heading1',
+        title: 'Heading 1',
+        icon: IconH1,
+        onClick: () => {
+          return editor.chain().focus().setHeading({ level: 1 }).run();
+        },
+        disabled: () => {
+          return !editor.can().setHeading({ level: 1 });
+        },
+        isActive: () => {
+          return editor.isActive('heading', { level: 1 });
+        },
+      },
+      {
+        id: 'heading2',
+        title: 'Heading 2',
+        icon: IconH2,
+        onClick: () => {
+          return editor.chain().focus().setHeading({ level: 2 }).run();
+        },
+        disabled: () => {
+          return !editor.can().setHeading({ level: 2 });
+        },
+        isActive: () => {
+          return editor.isActive('heading', { level: 2 });
+        },
+      },
+      {
+        id: 'heading3',
+        title: 'Heading 3',
+        icon: IconH3,
+        onClick: () => {
+          return editor.chain().focus().setHeading({ level: 3 }).run();
+        },
+        disabled: () => {
+          return !editor.can().setHeading({ level: 3 });
+        },
+        isActive: () => {
+          return editor.isActive('heading', { level: 3 });
+        },
+      },
+    ],
+  });
+};
diff --git a/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/utils/isTextSelected.ts b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/utils/isTextSelected.ts
new file mode 100644
index 0000000000..eae922ff21
--- /dev/null
+++ b/packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/email-action/utils/isTextSelected.ts
@@ -0,0 +1,27 @@
+import { type Editor, isTextSelection } from '@tiptap/core';
+
+type IsTextSelectedProps = {
+  editor: Editor;
+};
+
+export const isTextSelected = ({ editor }: IsTextSelectedProps) => {
+  const {
+    state: {
+      doc,
+      selection,
+      selection: { empty, from, to },
+    },
+  } = editor;
+
+  // Sometime check for `empty` is not enough.
+  // Doubleclick an empty paragraph returns a node size of 2.
+  // So we check also for an empty text size.
+  const isEmptyTextBlock =
+    !doc.textBetween(from, to).length && isTextSelection(selection);
+
+  if (empty || isEmptyTextBlock || !editor.isEditable) {
+    return false;
+  }
+
+  return true;
+};
diff --git a/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdown.tsx b/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdown.tsx
index 65dcb42042..fdcf37dd48 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdown.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdown.tsx
@@ -109,6 +109,7 @@ export const WorkflowVariablesDropdown = ({
   return (
     <Dropdown
       dropdownId={dropdownId}
+      isDropdownInModal={true}
       clickableComponent={
         clickableComponent ?? (
           <StyledDropdownVariableButtonContainer
diff --git a/packages/twenty-front/src/modules/workflow/workflow-variables/utils/getInitialEmailEditorContent.ts b/packages/twenty-front/src/modules/workflow/workflow-variables/utils/getInitialEmailEditorContent.ts
new file mode 100644
index 0000000000..c2fd911435
--- /dev/null
+++ b/packages/twenty-front/src/modules/workflow/workflow-variables/utils/getInitialEmailEditorContent.ts
@@ -0,0 +1,31 @@
+import { getInitialEditorContent } from '@/workflow/workflow-variables/utils/getInitialEditorContent';
+import type { JSONContent } from '@tiptap/react';
+import { logError } from '~/utils/logError';
+
+// Previous format of the email body was plain text,
+// but from now on we will save it as JSON.
+// So it will fail to parse the content, that's why we have this fallback.
+export const getInitialEmailEditorContent = (
+  rawContent: string,
+): JSONContent => {
+  // Handle empty or null content
+  if (!rawContent || rawContent.trim() === '') {
+    return {
+      type: 'doc',
+      content: [
+        {
+          type: 'paragraph',
+          content: [],
+        },
+      ],
+    };
+  }
+
+  try {
+    const json = JSON.parse(rawContent);
+    return json;
+  } catch (error) {
+    logError(error);
+    return getInitialEditorContent(rawContent);
+  }
+};
diff --git a/packages/twenty-server/package.json b/packages/twenty-server/package.json
index b8d4cb244d..11848be100 100644
--- a/packages/twenty-server/package.json
+++ b/packages/twenty-server/package.json
@@ -69,8 +69,8 @@
     "@ptc-org/nestjs-query-core": "4.4.0",
     "@ptc-org/nestjs-query-graphql": "patch:@ptc-org/nestjs-query-graphql@4.2.0#./patches/@ptc-org+nestjs-query-graphql+4.2.0.patch",
     "@ptc-org/nestjs-query-typeorm": "4.2.1-alpha.2",
-    "@react-email/components": "0.0.35",
-    "@react-email/render": "0.0.17",
+    "@react-email/components": "^0.5.3",
+    "@react-email/render": "^1.2.3",
     "@revertdotdev/revert-react": "^0.0.21",
     "@sentry/nestjs": "^8.55.0",
     "@sentry/node": "9.26.0",
diff --git a/packages/twenty-server/src/engine/core-modules/approved-access-domain/services/approved-access-domain.service.ts b/packages/twenty-server/src/engine/core-modules/approved-access-domain/services/approved-access-domain.service.ts
index a83dd9b820..d90c5cf99b 100644
--- a/packages/twenty-server/src/engine/core-modules/approved-access-domain/services/approved-access-domain.service.ts
+++ b/packages/twenty-server/src/engine/core-modules/approved-access-domain/services/approved-access-domain.service.ts
@@ -80,8 +80,8 @@ export class ApprovedAccessDomainService {
       serverUrl: this.twentyConfigService.get('SERVER_URL'),
       locale: sender.locale,
     });
-    const html = render(emailTemplate);
-    const text = render(emailTemplate, {
+    const html = await render(emailTemplate);
+    const text = await render(emailTemplate, {
       plainText: true,
     });
 
diff --git a/packages/twenty-server/src/engine/core-modules/approved-access-domain/services/approved-access-domain.spec.ts b/packages/twenty-server/src/engine/core-modules/approved-access-domain/services/approved-access-domain.spec.ts
index 203c12e3ec..fda3d1fdf0 100644
--- a/packages/twenty-server/src/engine/core-modules/approved-access-domain/services/approved-access-domain.spec.ts
+++ b/packages/twenty-server/src/engine/core-modules/approved-access-domain/services/approved-access-domain.spec.ts
@@ -18,6 +18,17 @@ import { type WorkspaceMemberWorkspaceEntity } from 'src/modules/workspace-membe
 
 import { ApprovedAccessDomainService } from './approved-access-domain.service';
 
+// To avoid dynamic import issues in Jest
+jest.mock('@react-email/render', () => ({
+  render: jest.fn().mockImplementation(async (template, options) => {
+    if (options?.plainText) {
+      return 'Plain Text Email';
+    }
+
+    return '<html><body>HTML email content</body></html>';
+  }),
+}));
+
 describe('ApprovedAccessDomainService', () => {
   let service: ApprovedAccessDomainService;
   let approvedAccessDomainRepository: Repository<ApprovedAccessDomain>;
diff --git a/packages/twenty-server/src/engine/core-modules/auth/services/auth.service.ts b/packages/twenty-server/src/engine/core-modules/auth/services/auth.service.ts
index afe568404f..4fece60d0c 100644
--- a/packages/twenty-server/src/engine/core-modules/auth/services/auth.service.ts
+++ b/packages/twenty-server/src/engine/core-modules/auth/services/auth.service.ts
@@ -482,8 +482,8 @@ export class AuthService {
       locale: firstUserWorkspace.locale,
     });
 
-    const html = render(emailTemplate, { pretty: true });
-    const text = render(emailTemplate, { plainText: true });
+    const html = await render(emailTemplate, { pretty: true });
+    const text = await render(emailTemplate, { plainText: true });
 
     const passwordChangedMsg = msg`Your Password Has Been Successfully Changed`;
     const i18n = this.i18nService.getI18nInstance(firstUserWorkspace.locale);
diff --git a/packages/twenty-server/src/engine/core-modules/auth/services/reset-password.service.spec.ts b/packages/twenty-server/src/engine/core-modules/auth/services/reset-password.service.spec.ts
index 7a56a160bb..fdf963572a 100644
--- a/packages/twenty-server/src/engine/core-modules/auth/services/reset-password.service.spec.ts
+++ b/packages/twenty-server/src/engine/core-modules/auth/services/reset-password.service.spec.ts
@@ -18,6 +18,17 @@ import { I18nService } from 'src/engine/core-modules/i18n/i18n.service';
 
 import { ResetPasswordService } from './reset-password.service';
 
+// To avoid dynamic import issues in Jest
+jest.mock('@react-email/render', () => ({
+  render: jest.fn().mockImplementation(async (template, options) => {
+    if (options?.plainText) {
+      return 'Plain Text Email';
+    }
+
+    return '<html><body>HTML email content</body></html>';
+  }),
+}));
+
 describe('ResetPasswordService', () => {
   let service: ResetPasswordService;
   let userRepository: Repository<User>;
diff --git a/packages/twenty-server/src/engine/core-modules/auth/services/reset-password.service.ts b/packages/twenty-server/src/engine/core-modules/auth/services/reset-password.service.ts
index 24914f6bf3..583ff93d7a 100644
--- a/packages/twenty-server/src/engine/core-modules/auth/services/reset-password.service.ts
+++ b/packages/twenty-server/src/engine/core-modules/auth/services/reset-password.service.ts
@@ -163,8 +163,8 @@ export class ResetPasswordService {
 
     const emailTemplate = PasswordResetLinkEmail(emailData);
 
-    const html = render(emailTemplate, { pretty: true });
-    const text = render(emailTemplate, { plainText: true });
+    const html = await render(emailTemplate, { pretty: true });
+    const text = await render(emailTemplate, { plainText: true });
 
     const resetPasswordMsg = msg`Action Needed to Reset Password`;
     const i18n = this.i18nService.getI18nInstance(locale);
diff --git a/packages/twenty-server/src/engine/core-modules/email-verification/services/email-verification.service.ts b/packages/twenty-server/src/engine/core-modules/email-verification/services/email-verification.service.ts
index 8f518716ae..f3c3ef2e7d 100644
--- a/packages/twenty-server/src/engine/core-modules/email-verification/services/email-verification.service.ts
+++ b/packages/twenty-server/src/engine/core-modules/email-verification/services/email-verification.service.ts
@@ -80,8 +80,8 @@ export class EmailVerificationService {
 
     const emailTemplate = SendEmailVerificationLinkEmail(emailData);
 
-    const html = render(emailTemplate);
-    const text = render(emailTemplate, {
+    const html = await render(emailTemplate);
+    const text = await render(emailTemplate, {
       plainText: true,
     });
 
diff --git a/packages/twenty-server/src/engine/core-modules/tool/tools/send-email-tool/send-email-tool.ts b/packages/twenty-server/src/engine/core-modules/tool/tools/send-email-tool/send-email-tool.ts
index ca763aa3b2..f09ef2e7f9 100644
--- a/packages/twenty-server/src/engine/core-modules/tool/tools/send-email-tool/send-email-tool.ts
+++ b/packages/twenty-server/src/engine/core-modules/tool/tools/send-email-tool/send-email-tool.ts
@@ -1,6 +1,8 @@
 import { Injectable, Logger } from '@nestjs/common';
 
+import { render, toPlainText } from '@react-email/render';
 import DOMPurify from 'dompurify';
+import { reactMarkupFromJSON } from 'twenty-emails';
 import { isDefined, isValidUuid } from 'twenty-shared/utils';
 import { z } from 'zod';
 
@@ -16,6 +18,7 @@ import { ScopedWorkspaceContextFactory } from 'src/engine/twenty-orm/factories/s
 import { TwentyORMGlobalManager } from 'src/engine/twenty-orm/twenty-orm-global.manager';
 import { type ConnectedAccountWorkspaceEntity } from 'src/modules/connected-account/standard-objects/connected-account.workspace-entity';
 import { MessagingSendMessageService } from 'src/modules/messaging/message-import-manager/services/messaging-send-message.service';
+import { parseEmailBody } from 'src/utils/parse-email-body';
 
 @Injectable()
 export class SendEmailTool implements Tool {
@@ -115,17 +118,23 @@ export class SendEmailTool implements Tool {
         workspaceId,
       );
 
+      const parsedBody = parseEmailBody(body);
+      const reactMarkup = reactMarkupFromJSON(parsedBody);
+      const htmlBody = await render(reactMarkup);
+      const textBody = toPlainText(htmlBody);
+
       const { JSDOM } = await import('jsdom');
       const window = new JSDOM('').window;
       const purify = DOMPurify(window);
-      const safeBody = purify.sanitize(body || '');
+      const safeHtmlBody = purify.sanitize(htmlBody || '');
       const safeSubject = purify.sanitize(subject || '');
 
       await this.sendMessageService.sendMessage(
         {
           to: email,
           subject: safeSubject,
-          body: safeBody,
+          body: textBody,
+          html: safeHtmlBody,
         },
         connectedAccount,
       );
diff --git a/packages/twenty-server/src/engine/core-modules/workspace-invitation/services/workspace-invitation.service.spec.ts b/packages/twenty-server/src/engine/core-modules/workspace-invitation/services/workspace-invitation.service.spec.ts
index b6722f5aa3..eba44e6de9 100644
--- a/packages/twenty-server/src/engine/core-modules/workspace-invitation/services/workspace-invitation.service.spec.ts
+++ b/packages/twenty-server/src/engine/core-modules/workspace-invitation/services/workspace-invitation.service.spec.ts
@@ -23,6 +23,17 @@ import { WorkspaceInvitationService } from './workspace-invitation.service';
 // To fix a circular dependency issue
 jest.mock('src/engine/core-modules/workspace/services/workspace.service');
 
+// To avoid dynamic import issues in Jest
+jest.mock('@react-email/render', () => ({
+  render: jest.fn().mockImplementation(async (template, options) => {
+    if (options?.plainText) {
+      return 'Plain Text Email';
+    }
+
+    return '<html><body>HTML email content</body></html>';
+  }),
+}));
+
 describe('WorkspaceInvitationService', () => {
   let service: WorkspaceInvitationService;
   let appTokenRepository: Repository<AppToken>;
diff --git a/packages/twenty-server/src/engine/core-modules/workspace-invitation/services/workspace-invitation.service.ts b/packages/twenty-server/src/engine/core-modules/workspace-invitation/services/workspace-invitation.service.ts
index 905dbda772..7016986888 100644
--- a/packages/twenty-server/src/engine/core-modules/workspace-invitation/services/workspace-invitation.service.ts
+++ b/packages/twenty-server/src/engine/core-modules/workspace-invitation/services/workspace-invitation.service.ts
@@ -305,8 +305,8 @@ export class WorkspaceInvitationService {
         };
 
         const emailTemplate = SendInviteLinkEmail(emailData);
-        const html = render(emailTemplate);
-        const text = render(emailTemplate, {
+        const html = await render(emailTemplate);
+        const text = await render(emailTemplate, {
           plainText: true,
         });
 
diff --git a/packages/twenty-server/src/engine/workspace-manager/workspace-cleaner/services/cleaner.workspace-service.ts b/packages/twenty-server/src/engine/workspace-manager/workspace-cleaner/services/cleaner.workspace-service.ts
index 5cf1e3be12..f787156e98 100644
--- a/packages/twenty-server/src/engine/workspace-manager/workspace-cleaner/services/cleaner.workspace-service.ts
+++ b/packages/twenty-server/src/engine/workspace-manager/workspace-cleaner/services/cleaner.workspace-service.ts
@@ -123,8 +123,8 @@ export class CleanerWorkspaceService {
       locale: workspaceMember.locale,
     };
     const emailTemplate = WarnSuspendedWorkspaceEmail(emailData);
-    const html = render(emailTemplate, { pretty: true });
-    const text = render(emailTemplate, { plainText: true });
+    const html = await render(emailTemplate, { pretty: true });
+    const text = await render(emailTemplate, { plainText: true });
 
     const workspaceDeletionMsg = msg`Action needed to prevent workspace deletion`;
     const i18n = this.i18nService.getI18nInstance(workspaceMember.locale);
@@ -201,8 +201,8 @@ export class CleanerWorkspaceService {
       locale: workspaceMember.locale,
     };
     const emailTemplate = CleanSuspendedWorkspaceEmail(emailData);
-    const html = render(emailTemplate, { pretty: true });
-    const text = render(emailTemplate, { plainText: true });
+    const html = await render(emailTemplate, { pretty: true });
+    const text = await render(emailTemplate, { plainText: true });
 
     this.emailService.send({
       to: workspaceMember.userEmail,
diff --git a/packages/twenty-server/src/engine/workspace-manager/workspace-sync-metadata/constants/standard-field-ids.ts b/packages/twenty-server/src/engine/workspace-manager/workspace-sync-metadata/constants/standard-field-ids.ts
index ab88e6496b..715ed1cbd9 100644
--- a/packages/twenty-server/src/engine/workspace-manager/workspace-sync-metadata/constants/standard-field-ids.ts
+++ b/packages/twenty-server/src/engine/workspace-manager/workspace-sync-metadata/constants/standard-field-ids.ts
@@ -41,6 +41,7 @@ export const ATTACHMENT_STANDARD_FIELD_IDS = {
   company: '20202020-ceab-4a28-b546-73b06b4c08d5',
   opportunity: '20202020-7374-499d-bea3-9354890755b5',
   dashboard: '20202020-5324-43f3-9dbf-1a33e7de0ce6',
+  workflow: '20202020-f1e8-4c9d-8a7b-3f5e1d2c9a8b',
   custom: '20202020-302d-43b3-9aea-aa4f89282a9f',
 } as const;
 
@@ -464,6 +465,7 @@ export const WORKFLOW_STANDARD_FIELD_IDS = {
   automatedTriggers: '20202020-3319-4234-a34c-117ecad2b8a9',
   favorites: '20202020-c554-4c41-be7a-cf9cd4b0d512',
   timelineActivities: '20202020-906e-486a-a798-131a5f081faf',
+  attachments: '20202020-4a8c-4e2d-9b1c-7e5f3a2b4c6d',
   createdBy: '20202020-6007-401a-8aa5-e6f48581a6f3',
   searchVector: '20202020-535d-4ffa-b7f3-4fa0d5da1b7a',
 } as const;
diff --git a/packages/twenty-server/src/modules/attachment/standard-objects/attachment.workspace-entity.ts b/packages/twenty-server/src/modules/attachment/standard-objects/attachment.workspace-entity.ts
index 170601ce02..262c42587f 100644
--- a/packages/twenty-server/src/modules/attachment/standard-objects/attachment.workspace-entity.ts
+++ b/packages/twenty-server/src/modules/attachment/standard-objects/attachment.workspace-entity.ts
@@ -25,6 +25,7 @@ import { NoteWorkspaceEntity } from 'src/modules/note/standard-objects/note.work
 import { OpportunityWorkspaceEntity } from 'src/modules/opportunity/standard-objects/opportunity.workspace-entity';
 import { PersonWorkspaceEntity } from 'src/modules/person/standard-objects/person.workspace-entity';
 import { TaskWorkspaceEntity } from 'src/modules/task/standard-objects/task.workspace-entity';
+import { WorkflowWorkspaceEntity } from 'src/modules/workflow/common/standard-objects/workflow.workspace-entity';
 import { WorkspaceMemberWorkspaceEntity } from 'src/modules/workspace-member/standard-objects/workspace-member.workspace-entity';
 
 @WorkspaceEntity({
@@ -183,6 +184,22 @@ export class AttachmentWorkspaceEntity extends BaseWorkspaceEntity {
   })
   dashboardId: string | null;
 
+  @WorkspaceRelation({
+    standardId: ATTACHMENT_STANDARD_FIELD_IDS.workflow,
+    type: RelationType.MANY_TO_ONE,
+    label: msg`Workflow`,
+    description: msg`Attachment workflow`,
+    icon: 'IconSettingsAutomation',
+    inverseSideTarget: () => WorkflowWorkspaceEntity,
+    inverseSideFieldKey: 'attachments',
+    onDelete: RelationOnDeleteAction.CASCADE,
+  })
+  @WorkspaceIsNullable()
+  workflow: Relation<WorkflowWorkspaceEntity> | null;
+
+  @WorkspaceJoinColumn('workflow')
+  workflowId: string | null;
+
   @WorkspaceDynamicRelation({
     type: RelationType.MANY_TO_ONE,
     argsFactory: (oppositeObjectMetadata) => ({
diff --git a/packages/twenty-server/src/modules/messaging/message-import-manager/services/__tests__/messaging-send-message-gmail.spec.ts b/packages/twenty-server/src/modules/messaging/message-import-manager/services/__tests__/messaging-send-message-gmail.spec.ts
new file mode 100644
index 0000000000..2aef95c90f
--- /dev/null
+++ b/packages/twenty-server/src/modules/messaging/message-import-manager/services/__tests__/messaging-send-message-gmail.spec.ts
@@ -0,0 +1,147 @@
+import { Test, type TestingModule } from '@nestjs/testing';
+
+import { ConnectedAccountProvider } from 'twenty-shared/types';
+
+import { GmailClientProvider } from 'src/modules/messaging/message-import-manager/drivers/gmail/providers/gmail-client.provider';
+import { OAuth2ClientProvider } from 'src/modules/messaging/message-import-manager/drivers/gmail/providers/oauth2-client.provider';
+import { MicrosoftClientProvider } from 'src/modules/messaging/message-import-manager/drivers/microsoft/providers/microsoft-client.provider';
+import { SmtpClientProvider } from 'src/modules/messaging/message-import-manager/drivers/smtp/providers/smtp-client.provider';
+import { MessagingSendMessageService } from 'src/modules/messaging/message-import-manager/services/messaging-send-message.service';
+
+describe('MessagingSendMessageService - Gmail HTML Support', () => {
+  let service: MessagingSendMessageService;
+  let gmailClientProvider: jest.Mocked<GmailClientProvider>;
+  let oAuth2ClientProvider: jest.Mocked<OAuth2ClientProvider>;
+
+  beforeEach(async () => {
+    const mockGmailClient = {
+      users: {
+        messages: {
+          send: jest.fn().mockResolvedValue({ data: { id: 'message-id' } }),
+        },
+      },
+    };
+
+    const mockOAuth2Client = {
+      userinfo: {
+        get: jest.fn().mockResolvedValue({
+          data: { email: 'test@example.com', name: 'Test User' },
+        }),
+      },
+    };
+
+    const module: TestingModule = await Test.createTestingModule({
+      providers: [
+        MessagingSendMessageService,
+        {
+          provide: GmailClientProvider,
+          useValue: {
+            getGmailClient: jest.fn().mockResolvedValue(mockGmailClient),
+          },
+        },
+        {
+          provide: OAuth2ClientProvider,
+          useValue: {
+            getOAuth2Client: jest.fn().mockResolvedValue(mockOAuth2Client),
+          },
+        },
+        {
+          provide: MicrosoftClientProvider,
+          useValue: {},
+        },
+        {
+          provide: SmtpClientProvider,
+          useValue: {},
+        },
+      ],
+    }).compile();
+
+    service = module.get<MessagingSendMessageService>(
+      MessagingSendMessageService,
+    );
+    gmailClientProvider = module.get(GmailClientProvider);
+    oAuth2ClientProvider = module.get(OAuth2ClientProvider);
+  });
+
+  it('should send multipart/alternative email with both text and HTML parts via Gmail', async () => {
+    const sendMessageInput = {
+      to: 'recipient@example.com',
+      subject: 'Test HTML Email',
+      body: 'This is plain text content',
+      html: '<p>This is <strong>HTML</strong> content</p>',
+    };
+
+    const connectedAccount = {
+      provider: ConnectedAccountProvider.GOOGLE,
+      accessToken: 'access-token',
+      refreshToken: 'refresh-token',
+    } as any;
+
+    await service.sendMessage(sendMessageInput, connectedAccount);
+
+    const gmailClient =
+      await gmailClientProvider.getGmailClient(connectedAccount);
+    const sendCall = gmailClient.users.messages.send as jest.Mock;
+
+    expect(sendCall).toHaveBeenCalledTimes(1);
+
+    const sentMessage = sendCall.mock.calls[0][0];
+    const rawMessage = Buffer.from(
+      sentMessage.requestBody.raw,
+      'base64',
+    ).toString();
+
+    expect(rawMessage).toContain('MIME-Version: 1.0');
+    expect(rawMessage).toContain(
+      'Content-Type: multipart/alternative; boundary=',
+    );
+    expect(rawMessage).toContain('Content-Type: text/plain; charset="UTF-8"');
+    expect(rawMessage).toContain('Content-Type: text/html; charset="UTF-8"');
+    expect(rawMessage).toContain('This is plain text content');
+    expect(rawMessage).toContain(
+      '<p>This is <strong>HTML</strong> content</p>',
+    );
+    expect(rawMessage).toContain('To: recipient@example.com');
+    expect(rawMessage).toContain('Subject:');
+  });
+
+  it('should handle missing fromName gracefully', async () => {
+    const mockOAuth2ClientNoName = {
+      userinfo: {
+        get: jest.fn().mockResolvedValue({
+          data: { email: 'test@example.com' }, // No name field
+        }),
+      },
+    };
+
+    (oAuth2ClientProvider.getOAuth2Client as jest.Mock).mockResolvedValueOnce(
+      mockOAuth2ClientNoName,
+    );
+
+    const sendMessageInput = {
+      to: 'recipient@example.com',
+      subject: 'Test Email',
+      body: 'Plain text',
+      html: '<p>HTML content</p>',
+    };
+
+    const connectedAccount = {
+      provider: ConnectedAccountProvider.GOOGLE,
+      accessToken: 'access-token',
+      refreshToken: 'refresh-token',
+    } as any;
+
+    await service.sendMessage(sendMessageInput, connectedAccount);
+
+    const gmailClient =
+      await gmailClientProvider.getGmailClient(connectedAccount);
+    const sendCall = gmailClient.users.messages.send as jest.Mock;
+    const rawMessage = Buffer.from(
+      sendCall.mock.calls[0][0].requestBody.raw,
+      'base64',
+    ).toString();
+
+    expect(rawMessage).toContain('From: test@example.com');
+    expect(rawMessage).not.toContain('""');
+  });
+});
diff --git a/packages/twenty-server/src/modules/messaging/message-import-manager/services/messaging-send-message.service.ts b/packages/twenty-server/src/modules/messaging/message-import-manager/services/messaging-send-message.service.ts
index 04b70eeaa2..58c5026a6f 100644
--- a/packages/twenty-server/src/modules/messaging/message-import-manager/services/messaging-send-message.service.ts
+++ b/packages/twenty-server/src/modules/messaging/message-import-manager/services/messaging-send-message.service.ts
@@ -12,14 +12,15 @@ import {
 import { GmailClientProvider } from 'src/modules/messaging/message-import-manager/drivers/gmail/providers/gmail-client.provider';
 import { OAuth2ClientProvider } from 'src/modules/messaging/message-import-manager/drivers/gmail/providers/oauth2-client.provider';
 import { MicrosoftClientProvider } from 'src/modules/messaging/message-import-manager/drivers/microsoft/providers/microsoft-client.provider';
-import { SmtpClientProvider } from 'src/modules/messaging/message-import-manager/drivers/smtp/providers/smtp-client.provider';
 import { isAccessTokenRefreshingError } from 'src/modules/messaging/message-import-manager/drivers/microsoft/utils/is-access-token-refreshing-error.utils';
+import { SmtpClientProvider } from 'src/modules/messaging/message-import-manager/drivers/smtp/providers/smtp-client.provider';
 import { mimeEncode } from 'src/modules/messaging/message-import-manager/utils/mime-encode.util';
 
 interface SendMessageInput {
   body: string;
   subject: string;
   to: string;
+  html: string;
 }
 
 @Injectable()
@@ -46,26 +47,37 @@ export class MessagingSendMessageService {
         const { data } = await oAuth2Client.userinfo.get();
 
         const fromEmail = data.email;
-
         const fromName = data.name;
+        const boundary = `boundary_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
 
         const headers: string[] = [];
 
         if (isDefined(fromName)) {
           headers.push(`From: "${mimeEncode(fromName)}" <${fromEmail}>`);
+        } else {
+          headers.push(`From: ${fromEmail}`);
         }
 
         headers.push(
           `To: ${sendMessageInput.to}`,
           `Subject: ${mimeEncode(sendMessageInput.subject)}`,
           'MIME-Version: 1.0',
+          `Content-Type: multipart/alternative; boundary="${boundary}"`,
+          '',
+          `--${boundary}`,
           'Content-Type: text/plain; charset="UTF-8"',
           '',
           sendMessageInput.body,
+          '',
+          `--${boundary}`,
+          'Content-Type: text/html; charset="UTF-8"',
+          '',
+          sendMessageInput.html,
+          '',
+          `--${boundary}--`,
         );
 
         const message = headers.join('\n');
-
         const encodedMessage = Buffer.from(message).toString('base64');
 
         await gmailClient.users.messages.send({
@@ -85,8 +97,8 @@ export class MessagingSendMessageService {
         const message = {
           subject: sendMessageInput.subject,
           body: {
-            contentType: 'Text',
-            content: sendMessageInput.body,
+            contentType: 'HTML',
+            content: sendMessageInput.html,
           },
           toRecipients: [{ emailAddress: { address: sendMessageInput.to } }],
         };
@@ -130,6 +142,7 @@ export class MessagingSendMessageService {
           to: sendMessageInput.to,
           subject: sendMessageInput.subject,
           text: sendMessageInput.body,
+          html: sendMessageInput.html,
         });
         break;
       }
diff --git a/packages/twenty-server/src/modules/messaging/message-import-manager/utils/__tests__/gmail-mime-message.spec.ts b/packages/twenty-server/src/modules/messaging/message-import-manager/utils/__tests__/gmail-mime-message.spec.ts
new file mode 100644
index 0000000000..527e8d3bfc
--- /dev/null
+++ b/packages/twenty-server/src/modules/messaging/message-import-manager/utils/__tests__/gmail-mime-message.spec.ts
@@ -0,0 +1,61 @@
+import { mimeEncode } from 'src/modules/messaging/message-import-manager/utils/mime-encode.util';
+
+describe('Gmail MIME Message Format', () => {
+  it('should create valid multipart/alternative MIME structure', () => {
+    const sendMessageInput = {
+      to: 'test@example.com',
+      subject: 'Test Subject',
+      body: 'Plain text content',
+      html: '<p>HTML content</p>',
+    };
+
+    const fromEmail = 'sender@example.com';
+    const fromName = 'Test Sender';
+    const boundary = 'boundary_test_123';
+
+    const headers: string[] = [];
+
+    headers.push(`From: "${mimeEncode(fromName)}" <${fromEmail}>`);
+    headers.push(
+      `To: ${sendMessageInput.to}`,
+      `Subject: ${mimeEncode(sendMessageInput.subject)}`,
+      'MIME-Version: 1.0',
+      `Content-Type: multipart/alternative; boundary="${boundary}"`,
+      '',
+      `--${boundary}`,
+      'Content-Type: text/plain; charset="UTF-8"',
+      '',
+      sendMessageInput.body,
+      '',
+      `--${boundary}`,
+      'Content-Type: text/html; charset="UTF-8"',
+      '',
+      sendMessageInput.html,
+      '',
+      `--${boundary}--`,
+    );
+
+    const message = headers.join('\n');
+
+    expect(message).toContain('MIME-Version: 1.0');
+    expect(message).toContain('Content-Type: multipart/alternative');
+    expect(message).toContain('Content-Type: text/plain; charset="UTF-8"');
+    expect(message).toContain('Content-Type: text/html; charset="UTF-8"');
+    expect(message).toContain('Plain text content');
+    expect(message).toContain('<p>HTML content</p>');
+    expect(message).toContain(`--${boundary}`);
+    expect(message).toContain(`--${boundary}--`);
+  });
+
+  it('should handle missing fromName gracefully', () => {
+    const fromEmail = 'sender@example.com';
+    const headers: string[] = [];
+
+    headers.push(`From: ${fromEmail}`);
+
+    const message = headers.join('\n');
+
+    expect(message).toContain(`From: ${fromEmail}`);
+    expect(message).not.toContain('""');
+  });
+});
diff --git a/packages/twenty-server/src/modules/workflow/common/standard-objects/workflow.workspace-entity.ts b/packages/twenty-server/src/modules/workflow/common/standard-objects/workflow.workspace-entity.ts
index 71c77c6c8e..a430353814 100644
--- a/packages/twenty-server/src/modules/workflow/common/standard-objects/workflow.workspace-entity.ts
+++ b/packages/twenty-server/src/modules/workflow/common/standard-objects/workflow.workspace-entity.ts
@@ -24,6 +24,7 @@ import {
   type FieldTypeAndNameMetadata,
   getTsVectorColumnExpressionFromFields,
 } from 'src/engine/workspace-manager/workspace-sync-metadata/utils/get-ts-vector-column-expression.util';
+import { AttachmentWorkspaceEntity } from 'src/modules/attachment/standard-objects/attachment.workspace-entity';
 import { FavoriteWorkspaceEntity } from 'src/modules/favorite/standard-objects/favorite.workspace-entity';
 import { TimelineActivityWorkspaceEntity } from 'src/modules/timeline/standard-objects/timeline-activity.workspace-entity';
 import { WorkflowAutomatedTriggerWorkspaceEntity } from 'src/modules/workflow/common/standard-objects/workflow-automated-trigger.workspace-entity';
@@ -193,6 +194,18 @@ export class WorkflowWorkspaceEntity extends BaseWorkspaceEntity {
   @WorkspaceIsSystem()
   timelineActivities: Relation<TimelineActivityWorkspaceEntity[]>;
 
+  @WorkspaceRelation({
+    standardId: WORKFLOW_STANDARD_FIELD_IDS.attachments,
+    type: RelationType.ONE_TO_MANY,
+    label: msg`Attachments`,
+    description: msg`Attachments linked to the workflow`,
+    icon: 'IconFileUpload',
+    inverseSideTarget: () => AttachmentWorkspaceEntity,
+    onDelete: RelationOnDeleteAction.CASCADE,
+  })
+  @WorkspaceIsSystem()
+  attachments: Relation<AttachmentWorkspaceEntity[]>;
+
   @WorkspaceField({
     standardId: WORKFLOW_STANDARD_FIELD_IDS.createdBy,
     type: FieldMetadataType.ACTOR,
diff --git a/packages/twenty-server/src/utils/parse-email-body.ts b/packages/twenty-server/src/utils/parse-email-body.ts
new file mode 100644
index 0000000000..111d561941
--- /dev/null
+++ b/packages/twenty-server/src/utils/parse-email-body.ts
@@ -0,0 +1,11 @@
+import { type JSONContent } from 'twenty-emails';
+
+export const parseEmailBody = (body: string): JSONContent | string => {
+  try {
+    const json = JSON.parse(body);
+
+    return json;
+  } catch {
+    return body;
+  }
+};
diff --git a/packages/twenty-shared/src/utils/index.ts b/packages/twenty-shared/src/utils/index.ts
index f8ab61dbfd..7166914c35 100644
--- a/packages/twenty-shared/src/utils/index.ts
+++ b/packages/twenty-shared/src/utils/index.ts
@@ -34,6 +34,17 @@ export { safeParseRelativeDateFilterValue } from './safeParseRelativeDateFilterV
 export { getGenericOperationName } from './sentry/getGenericOperationName';
 export { getHumanReadableNameFromCode } from './sentry/getHumanReadableNameFromCode';
 export { capitalize } from './strings/capitalize';
+export type {
+  TipTapMarkType,
+  TipTapNodeType,
+  LinkMarkAttributes,
+  TipTapMark,
+} from './tiptap/tiptap-marks';
+export {
+  TIPTAP_MARK_TYPES,
+  TIPTAP_NODE_TYPES,
+  TIPTAP_MARKS_RENDER_ORDER,
+} from './tiptap/tiptap-marks';
 export type { StringPropertyKeys } from './trim-and-remove-duplicated-whitespaces-from-object-string-properties';
 export { trimAndRemoveDuplicatedWhitespacesFromObjectStringProperties } from './trim-and-remove-duplicated-whitespaces-from-object-string-properties';
 export { trimAndRemoveDuplicatedWhitespacesFromString } from './trim-and-remove-duplicated-whitespaces-from-string';
diff --git a/packages/twenty-shared/src/utils/tiptap/index.ts b/packages/twenty-shared/src/utils/tiptap/index.ts
new file mode 100644
index 0000000000..aeb2ede4cf
--- /dev/null
+++ b/packages/twenty-shared/src/utils/tiptap/index.ts
@@ -0,0 +1 @@
+export * from './tiptap-marks';
diff --git a/packages/twenty-shared/src/utils/tiptap/tiptap-marks.ts b/packages/twenty-shared/src/utils/tiptap/tiptap-marks.ts
new file mode 100644
index 0000000000..83cc301846
--- /dev/null
+++ b/packages/twenty-shared/src/utils/tiptap/tiptap-marks.ts
@@ -0,0 +1,42 @@
+// Shared TipTap types for consistency between frontend and email renderer
+
+export const TIPTAP_MARK_TYPES = {
+  BOLD: 'bold',
+  ITALIC: 'italic',
+  UNDERLINE: 'underline',
+  STRIKE: 'strike',
+  LINK: 'link',
+} as const;
+
+export const TIPTAP_NODE_TYPES = {
+  PARAGRAPH: 'paragraph',
+  TEXT: 'text',
+  HEADING: 'heading',
+  VARIABLE_TAG: 'variableTag',
+  IMAGE: 'image',
+} as const;
+
+export type TipTapMarkType = typeof TIPTAP_MARK_TYPES[keyof typeof TIPTAP_MARK_TYPES];
+export type TipTapNodeType = typeof TIPTAP_NODE_TYPES[keyof typeof TIPTAP_NODE_TYPES];
+
+// Order for mark rendering (inner to outer)
+export const TIPTAP_MARKS_RENDER_ORDER: readonly TipTapMarkType[] = [
+  TIPTAP_MARK_TYPES.UNDERLINE,
+  TIPTAP_MARK_TYPES.BOLD,
+  TIPTAP_MARK_TYPES.ITALIC,
+  TIPTAP_MARK_TYPES.STRIKE,
+  TIPTAP_MARK_TYPES.LINK,
+] as const;
+
+// Link mark attributes interface
+export interface LinkMarkAttributes {
+  href?: string;
+  target?: string;
+  rel?: string;
+}
+
+// Generic mark interface
+export interface TipTapMark {
+  type: TipTapMarkType;
+  attrs?: LinkMarkAttributes | Record<string, unknown>;
+}
diff --git a/packages/twenty-ui/src/display/icon/components/TablerIcons.ts b/packages/twenty-ui/src/display/icon/components/TablerIcons.ts
index 41ef1401e3..b0cee9d18f 100644
--- a/packages/twenty-ui/src/display/icon/components/TablerIcons.ts
+++ b/packages/twenty-ui/src/display/icon/components/TablerIcons.ts
@@ -3,6 +3,9 @@ export {
   IconNumber123 as Icon123,
   IconAlertCircle,
   IconAlertTriangle,
+  IconAlignCenter,
+  IconAlignLeft,
+  IconAlignRight,
   IconApi,
   IconApps,
   IconAppWindow,
@@ -21,6 +24,7 @@ export {
   IconBaselineDensitySmall,
   IconBell,
   IconBlockquote,
+  IconBold,
   IconBolt,
   IconBook2,
   IconBookmark,
@@ -42,11 +46,11 @@ export {
   IconCalendar,
   IconCalendarDue,
   IconCalendarEvent,
+  IconCalendarMonth,
   IconCalendarRepeat,
   IconCalendarTime,
-  IconCalendarX,
-  IconCalendarMonth,
   IconCalendarWeek,
+  IconCalendarX,
   IconChartBar,
   IconChartCandle,
   IconChartDots3,
@@ -190,6 +194,7 @@ export {
   IconId,
   IconInbox,
   IconInfoCircle,
+  IconItalic,
   IconJson,
   IconKey,
   IconLanguage,
@@ -305,6 +310,7 @@ export {
   IconSquareRoundedX,
   IconStatusChange,
   IconStepInto,
+  IconStrikethrough,
   IconSun,
   IconSunMoon,
   IconSwitchHorizontal,
@@ -326,6 +332,7 @@ export {
   IconTrendingDown,
   IconTrendingUp,
   IconTypography,
+  IconUnderline,
   IconUnlink,
   IconUpload,
   IconUser,
diff --git a/packages/twenty-ui/src/display/index.ts b/packages/twenty-ui/src/display/index.ts
index 16273670b8..707cdb2cd5 100644
--- a/packages/twenty-ui/src/display/index.ts
+++ b/packages/twenty-ui/src/display/index.ts
@@ -65,6 +65,9 @@ export {
   Icon123,
   IconAlertCircle,
   IconAlertTriangle,
+  IconAlignCenter,
+  IconAlignLeft,
+  IconAlignRight,
   IconApi,
   IconApps,
   IconAppWindow,
@@ -83,6 +86,7 @@ export {
   IconBaselineDensitySmall,
   IconBell,
   IconBlockquote,
+  IconBold,
   IconBolt,
   IconBook2,
   IconBookmark,
@@ -104,11 +108,11 @@ export {
   IconCalendar,
   IconCalendarDue,
   IconCalendarEvent,
+  IconCalendarMonth,
   IconCalendarRepeat,
   IconCalendarTime,
-  IconCalendarX,
-  IconCalendarMonth,
   IconCalendarWeek,
+  IconCalendarX,
   IconChartBar,
   IconChartCandle,
   IconChartDots3,
@@ -252,6 +256,7 @@ export {
   IconId,
   IconInbox,
   IconInfoCircle,
+  IconItalic,
   IconJson,
   IconKey,
   IconLanguage,
@@ -367,6 +372,7 @@ export {
   IconSquareRoundedX,
   IconStatusChange,
   IconStepInto,
+  IconStrikethrough,
   IconSun,
   IconSunMoon,
   IconSwitchHorizontal,
@@ -388,6 +394,7 @@ export {
   IconTrendingDown,
   IconTrendingUp,
   IconTypography,
+  IconUnderline,
   IconUnlink,
   IconUpload,
   IconUser,
diff --git a/packages/twenty-ui/src/input/code-editor/components/CodeEditor.tsx b/packages/twenty-ui/src/input/code-editor/components/CodeEditor.tsx
index d6f559c2a1..01a1dcfb58 100644
--- a/packages/twenty-ui/src/input/code-editor/components/CodeEditor.tsx
+++ b/packages/twenty-ui/src/input/code-editor/components/CodeEditor.tsx
@@ -27,7 +27,8 @@ const StyledEditorLoader = styled.div<{
 }>`
   align-items: center;
   display: flex;
-  height: ${({ height }) => height}px;
+  height: ${({ height }) =>
+    typeof height === 'number' ? `${height}px` : height};
   justify-content: center;
   border: 1px solid ${({ theme }) => theme.border.color.medium};
   background-color: ${({ theme }) => theme.background.transparent.lighter};
diff --git a/yarn.lock b/yarn.lock
index 2210a50bbd..d2e62c9e3f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11209,13 +11209,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@one-ini/wasm@npm:0.1.1":
-  version: 0.1.1
-  resolution: "@one-ini/wasm@npm:0.1.1"
-  checksum: 10c0/54700e055037f1a63bfcc86d24822203b25759598c2c3e295d1435130a449108aebc119c9c2e467744767dbe0b6ab47a182c61aa1071ba7368f5e20ab197ba65
-  languageName: node
-  linkType: hard
-
 "@open-draft/deferred-promise@npm:^2.1.0, @open-draft/deferred-promise@npm:^2.2.0":
   version: 2.2.0
   resolution: "@open-draft/deferred-promise@npm:2.2.0"
@@ -15022,32 +15015,32 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-email/body@npm:0.0.11":
-  version: 0.0.11
-  resolution: "@react-email/body@npm:0.0.11"
+"@react-email/body@npm:0.1.0":
+  version: 0.1.0
+  resolution: "@react-email/body@npm:0.1.0"
   peerDependencies:
     react: ^18.0 || ^19.0 || ^19.0.0-rc
-  checksum: 10c0/4a86ea8041bf94992acde12efd79cd91f980b3c40a86792f98bd546e0b49f19fbdca1fc87d5d3e472a70535a3195f2738bbec1f9dec862d48c4bc625f599d3d6
+  checksum: 10c0/deeee52e0326eed20b3267dfe970649705298efae9ff580009ee7f48c201cbca6cd200be163865178ccdab04fc8e44384c6dd7ab130557b93f421d3b263b33c8
   languageName: node
   linkType: hard
 
-"@react-email/button@npm:0.0.19":
-  version: 0.0.19
-  resolution: "@react-email/button@npm:0.0.19"
+"@react-email/button@npm:0.2.0":
+  version: 0.2.0
+  resolution: "@react-email/button@npm:0.2.0"
   peerDependencies:
     react: ^18.0 || ^19.0 || ^19.0.0-rc
-  checksum: 10c0/e96fe15cb4307c36add3ebaf382cf5f408c29fbbc433ef09b347a4d6488eecdaa23424880f8bdad18f773c91e8c0b2d24ec74c9010608f55100c5625c9c0be56
+  checksum: 10c0/1145d096ace8a459271f550faa941668122bd816adc6547390ede5becab5b0dc99a6f19c838e539fe53a73953bd4a4de790b1a7ad3d5981c44f5d34149045bfc
   languageName: node
   linkType: hard
 
-"@react-email/code-block@npm:0.0.11":
-  version: 0.0.11
-  resolution: "@react-email/code-block@npm:0.0.11"
+"@react-email/code-block@npm:0.1.0":
+  version: 0.1.0
+  resolution: "@react-email/code-block@npm:0.1.0"
   dependencies:
-    prismjs: "npm:1.29.0"
+    prismjs: "npm:^1.30.0"
   peerDependencies:
     react: ^18.0 || ^19.0 || ^19.0.0-rc
-  checksum: 10c0/98a45460620c887a8adf5c59a936dd9fa2df76101b00b246df90ffe9108158262715b00401018ba6ba22f10dfad46b7e9b71cefa3c672728deee0a18c1f13293
+  checksum: 10c0/55d84654cbf593e49102a11d1615e3beefb6943a82842ab1e51f435c6130a62f4ea2ebc034b127ebcc96822789b58cf352df340823278c9759bb3f031d8a796e
   languageName: node
   linkType: hard
 
@@ -15069,13 +15062,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-email/components@npm:0.0.35":
-  version: 0.0.35
-  resolution: "@react-email/components@npm:0.0.35"
+"@react-email/components@npm:^0.5.3":
+  version: 0.5.3
+  resolution: "@react-email/components@npm:0.5.3"
   dependencies:
-    "@react-email/body": "npm:0.0.11"
-    "@react-email/button": "npm:0.0.19"
-    "@react-email/code-block": "npm:0.0.11"
+    "@react-email/body": "npm:0.1.0"
+    "@react-email/button": "npm:0.2.0"
+    "@react-email/code-block": "npm:0.1.0"
     "@react-email/code-inline": "npm:0.0.5"
     "@react-email/column": "npm:0.0.13"
     "@react-email/container": "npm:0.0.15"
@@ -15086,16 +15079,16 @@ __metadata:
     "@react-email/html": "npm:0.0.11"
     "@react-email/img": "npm:0.0.11"
     "@react-email/link": "npm:0.0.12"
-    "@react-email/markdown": "npm:0.0.14"
-    "@react-email/preview": "npm:0.0.12"
-    "@react-email/render": "npm:1.0.5"
+    "@react-email/markdown": "npm:0.0.15"
+    "@react-email/preview": "npm:0.0.13"
+    "@react-email/render": "npm:1.2.3"
     "@react-email/row": "npm:0.0.12"
     "@react-email/section": "npm:0.0.16"
-    "@react-email/tailwind": "npm:1.0.4"
-    "@react-email/text": "npm:0.1.1"
+    "@react-email/tailwind": "npm:1.2.2"
+    "@react-email/text": "npm:0.1.5"
   peerDependencies:
     react: ^18.0 || ^19.0 || ^19.0.0-rc
-  checksum: 10c0/b227f9d06e414334bbe5fb86919f8c48f0440532a3c9dd3272899e1fb86595eead70ab79407d3325f55de3707f57f863b6bee253415b887012d2454d2016d552
+  checksum: 10c0/a0839c635cde48d45d49d3ea19aa17a8e5616225e516d76de1c4d0915d88b903241033a55f4aa047d212672e48ff809840e0d05afd80bbaacb330cef7804971a
   languageName: node
   linkType: hard
 
@@ -15171,51 +15164,37 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-email/markdown@npm:0.0.14":
-  version: 0.0.14
-  resolution: "@react-email/markdown@npm:0.0.14"
+"@react-email/markdown@npm:0.0.15":
+  version: 0.0.15
+  resolution: "@react-email/markdown@npm:0.0.15"
   dependencies:
-    md-to-react-email: "npm:5.0.5"
+    md-to-react-email: "npm:^5.0.5"
   peerDependencies:
     react: ^18.0 || ^19.0 || ^19.0.0-rc
-  checksum: 10c0/e124a1844704e3c48f189d2d2769ca9f1193499f1c7353a804161b1c5df373fa815255116e653f7228192bcd5ff826ff55eb15c972a8e7facb6c82721511c764
+  checksum: 10c0/68dc46d929ad0daf86f7d25e159455bdfbf4c0f0ca8ad152caf407f2eb154f4edb88912728cd5bba0c01f4806217e533e66baa02138c8ddcb5f2049719da7137
   languageName: node
   linkType: hard
 
-"@react-email/preview@npm:0.0.12":
-  version: 0.0.12
-  resolution: "@react-email/preview@npm:0.0.12"
+"@react-email/preview@npm:0.0.13":
+  version: 0.0.13
+  resolution: "@react-email/preview@npm:0.0.13"
   peerDependencies:
     react: ^18.0 || ^19.0 || ^19.0.0-rc
-  checksum: 10c0/54c09fb599263b7e01f290cd3ed37db31b7370cb036851496067470f4873dfe82102e0746e390e9b83e27d9a054044259412521ba65eac7366fb5e17580b7787
+  checksum: 10c0/223cff5238f0bfc4f1c3cdd1ae4f8b92cde16a60594d4d5073607b7af0b3cfaf5ae10234ca531d9403c7143afcba2e71bc12c1aba75e51f0ae58fd9c0b8bf542
   languageName: node
   linkType: hard
 
-"@react-email/render@npm:0.0.17":
-  version: 0.0.17
-  resolution: "@react-email/render@npm:0.0.17"
+"@react-email/render@npm:1.2.3, @react-email/render@npm:^1.2.3":
+  version: 1.2.3
+  resolution: "@react-email/render@npm:1.2.3"
   dependencies:
-    html-to-text: "npm:9.0.5"
-    js-beautify: "npm:^1.14.11"
-    react-promise-suspense: "npm:0.3.4"
-  peerDependencies:
-    react: ^18.2.0
-    react-dom: ^18.2.0
-  checksum: 10c0/34a1c5a55586d7cd723638d8cd5328fddf30015e5065a2e9d5204772e0532e84d63af1b2b1b8ec02cef52a8f57d34871200c0075a9ed7b2861362d8138d3db5e
-  languageName: node
-  linkType: hard
-
-"@react-email/render@npm:1.0.5":
-  version: 1.0.5
-  resolution: "@react-email/render@npm:1.0.5"
-  dependencies:
-    html-to-text: "npm:9.0.5"
-    prettier: "npm:3.4.2"
-    react-promise-suspense: "npm:0.3.4"
+    html-to-text: "npm:^9.0.5"
+    prettier: "npm:^3.5.3"
+    react-promise-suspense: "npm:^0.3.4"
   peerDependencies:
     react: ^18.0 || ^19.0 || ^19.0.0-rc
     react-dom: ^18.0 || ^19.0 || ^19.0.0-rc
-  checksum: 10c0/ea3afc75d8b5e3035664d4f01cb19b5010bc69eac56d19e889f8ea86ed259537967a192d2f7becc92d5886bf1fe050bbd347e980d45915c05533754a699b50f7
+  checksum: 10c0/7ddd786e808fae6dc9aa456965ec5a67dff5d143b027c70538158e182a99a59b784a092c44f61ace20368ab5e31c31875ae1513593efe153d029c9870928d07b
   languageName: node
   linkType: hard
 
@@ -15237,21 +15216,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@react-email/tailwind@npm:1.0.4":
-  version: 1.0.4
-  resolution: "@react-email/tailwind@npm:1.0.4"
+"@react-email/tailwind@npm:1.2.2":
+  version: 1.2.2
+  resolution: "@react-email/tailwind@npm:1.2.2"
   peerDependencies:
     react: ^18.0 || ^19.0 || ^19.0.0-rc
-  checksum: 10c0/47472ae00c1731ec9cce20e1083fcb405c049a378d28889fb5334d6d3fbd1526e13f6c775691f3fa5e6796a30b98b2f3e9e242a61454dfc097dc5f6f5dc5fc8d
+  checksum: 10c0/fa7d0a4d518a77cf0ec26c57aeac8a24509344225a19d6f3c1320a4357d88b2d48e592f312286ec59ef17333d875e3f3437cd09102d793896229e3f5502d079e
   languageName: node
   linkType: hard
 
-"@react-email/text@npm:0.1.1":
-  version: 0.1.1
-  resolution: "@react-email/text@npm:0.1.1"
+"@react-email/text@npm:0.1.5":
+  version: 0.1.5
+  resolution: "@react-email/text@npm:0.1.5"
   peerDependencies:
     react: ^18.0 || ^19.0 || ^19.0.0-rc
-  checksum: 10c0/e88e2792bef38b94f0908caeb4355e4412f472e6642daf9eecd58054eef4e729f97d397395116f4957ac087af1951cb70c312ee28f952c47343eda2629213deb
+  checksum: 10c0/ad825332903917d1185ce7c5e4d19846496565996f82b71a873648dffc6342d382606a96a5a00a15a16abef5322540d56b481ad3ca21c8b34de9b598715ec149
   languageName: node
   linkType: hard
 
@@ -19206,6 +19185,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tiptap/extension-bold@npm:^3.4.2":
+  version: 3.4.2
+  resolution: "@tiptap/extension-bold@npm:3.4.2"
+  peerDependencies:
+    "@tiptap/core": ^3.4.2
+  checksum: 10c0/f37a5701432f47c09e979c9944edccfe5fe0009b51666bd0719096e8744465bf3c38c5a405510af57aa275208bde408f6c1cd0d685a265d1659cc89ddca47cb4
+  languageName: node
+  linkType: hard
+
 "@tiptap/extension-bubble-menu@npm:^2.12.0":
   version: 2.12.0
   resolution: "@tiptap/extension-bubble-menu@npm:2.12.0"
@@ -19290,6 +19278,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tiptap/extension-heading@npm:^3.4.2":
+  version: 3.4.2
+  resolution: "@tiptap/extension-heading@npm:3.4.2"
+  peerDependencies:
+    "@tiptap/core": ^3.4.2
+  checksum: 10c0/90c61508b76469c9ae314539a363910f759e18a4090c34401d873a4e04d3b40aaf2d81f426b5403d9de035eee905fde86600ef8e6d3739318492abfa38d7e1d2
+  languageName: node
+  linkType: hard
+
 "@tiptap/extension-history@npm:^2.11.5":
   version: 2.12.0
   resolution: "@tiptap/extension-history@npm:2.12.0"
@@ -19310,6 +19307,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tiptap/extension-image@npm:^3.4.4":
+  version: 3.4.4
+  resolution: "@tiptap/extension-image@npm:3.4.4"
+  peerDependencies:
+    "@tiptap/core": ^3.4.4
+  checksum: 10c0/d42667f3dab4dae8d1776b02fc4421b51d5cfd7dd80a4b871dc13000ed272b60dbc2e90f1209e715706810d92743d0c629687df1b2ec195bdaf424e1d308101f
+  languageName: node
+  linkType: hard
+
 "@tiptap/extension-italic@npm:^2.11.5":
   version: 2.12.0
   resolution: "@tiptap/extension-italic@npm:2.12.0"
@@ -19319,6 +19325,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tiptap/extension-italic@npm:^3.4.2":
+  version: 3.4.2
+  resolution: "@tiptap/extension-italic@npm:3.4.2"
+  peerDependencies:
+    "@tiptap/core": ^3.4.2
+  checksum: 10c0/ea18f40b4676d97bc85a8d29a9625239189567260a4f13ebde3aca9253c7514d9ad21cde9ecea97b6de2dabb54db392a0504d483385b185d112e702dc5f288f7
+  languageName: node
+  linkType: hard
+
 "@tiptap/extension-link@npm:^2.11.5":
   version: 2.12.0
   resolution: "@tiptap/extension-link@npm:2.12.0"
@@ -19331,6 +19346,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tiptap/extension-link@npm:^3.4.2":
+  version: 3.4.2
+  resolution: "@tiptap/extension-link@npm:3.4.2"
+  dependencies:
+    linkifyjs: "npm:^4.3.2"
+  peerDependencies:
+    "@tiptap/core": ^3.4.2
+    "@tiptap/pm": ^3.4.2
+  checksum: 10c0/6680403c34505f37ceb067c9277ccebc0f9b1126be570ca7f3e0730586963af0c483c9abb2ab8a88c3cfddb5d243fb49dbf920dc3ac0fcbc897a582919083808
+  languageName: node
+  linkType: hard
+
 "@tiptap/extension-paragraph@npm:^2.11.5":
   version: 2.12.0
   resolution: "@tiptap/extension-paragraph@npm:2.12.0"
@@ -19358,6 +19385,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tiptap/extension-strike@npm:^3.4.2":
+  version: 3.4.2
+  resolution: "@tiptap/extension-strike@npm:3.4.2"
+  peerDependencies:
+    "@tiptap/core": ^3.4.2
+  checksum: 10c0/d763200cdcd579461492d6960705d56e9d5af4fcce026b826adc559ab5dbb2abb371cc65ac9e08b3398265a71a0bba96c864ed7a55ea69fdaf39e54d49ba8a6a
+  languageName: node
+  linkType: hard
+
 "@tiptap/extension-table-cell@npm:^2.11.5":
   version: 2.12.0
   resolution: "@tiptap/extension-table-cell@npm:2.12.0"
@@ -19403,6 +19439,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tiptap/extension-underline@npm:^3.4.2":
+  version: 3.4.2
+  resolution: "@tiptap/extension-underline@npm:3.4.2"
+  peerDependencies:
+    "@tiptap/core": ^3.4.2
+  checksum: 10c0/f4b716e1dd10f3d56232fc6a1f658ca31733ea0c604ec8cf674cbe20b86c5ba84a99f32c60a85f99c87f10ee1e9967d4262a057ddfdfb513de8ff5ded7272e13
+  languageName: node
+  linkType: hard
+
 "@tiptap/extensions@npm:^3.4.2":
   version: 3.4.2
   resolution: "@tiptap/extensions@npm:3.4.2"
@@ -27599,16 +27644,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"config-chain@npm:^1.1.13":
-  version: 1.1.13
-  resolution: "config-chain@npm:1.1.13"
-  dependencies:
-    ini: "npm:^1.3.4"
-    proto-list: "npm:~1.2.1"
-  checksum: 10c0/39d1df18739d7088736cc75695e98d7087aea43646351b028dfabd5508d79cf6ef4c5bcd90471f52cd87ae470d1c5490c0a8c1a292fbe6ee9ff688061ea0963e
-  languageName: node
-  linkType: hard
-
 "configstore@npm:^5.0.1":
   version: 5.0.1
   resolution: "configstore@npm:5.0.1"
@@ -29842,20 +29877,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"editorconfig@npm:^1.0.4":
-  version: 1.0.4
-  resolution: "editorconfig@npm:1.0.4"
-  dependencies:
-    "@one-ini/wasm": "npm:0.1.1"
-    commander: "npm:^10.0.0"
-    minimatch: "npm:9.0.1"
-    semver: "npm:^7.5.3"
-  bin:
-    editorconfig: bin/editorconfig
-  checksum: 10c0/ed6985959d7b34a56e1c09bef118758c81c969489b768d152c93689fce8403b0452462e934f665febaba3478eebc0fd41c0a36100783eaadf6d926c4abc87a3d
-  languageName: node
-  linkType: hard
-
 "ee-first@npm:1.1.1":
   version: 1.1.1
   resolution: "ee-first@npm:1.1.1"
@@ -33485,7 +33506,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob@npm:^10.0.0, glob@npm:^10.2.2, glob@npm:^10.3.10, glob@npm:^10.3.7, glob@npm:^10.4.2":
+"glob@npm:^10.0.0, glob@npm:^10.2.2, glob@npm:^10.3.10, glob@npm:^10.3.7":
   version: 10.4.5
   resolution: "glob@npm:10.4.5"
   dependencies:
@@ -37913,23 +37934,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"js-beautify@npm:^1.14.11":
-  version: 1.15.4
-  resolution: "js-beautify@npm:1.15.4"
-  dependencies:
-    config-chain: "npm:^1.1.13"
-    editorconfig: "npm:^1.0.4"
-    glob: "npm:^10.4.2"
-    js-cookie: "npm:^3.0.5"
-    nopt: "npm:^7.2.1"
-  bin:
-    css-beautify: js/bin/css-beautify.js
-    html-beautify: js/bin/html-beautify.js
-    js-beautify: js/bin/js-beautify.js
-  checksum: 10c0/300386f648579feacda98640742e8db50d4504bc896673af8bc784a5864585abf89ad8d1f257f2cfd4e3da951e0e4d1f027aa3c21537edb920bd498a0e27bd86
-  languageName: node
-  linkType: hard
-
 "js-cookie@npm:^3.0.5":
   version: 3.0.5
   resolution: "js-cookie@npm:3.0.5"
@@ -38910,6 +38914,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"linkifyjs@npm:^4.3.2":
+  version: 4.3.2
+  resolution: "linkifyjs@npm:4.3.2"
+  checksum: 10c0/1a85e6b368304a4417567fe5e38651681e3e82465590836942d1b4f3c834cc35532898eb1e2479f6337d9144b297d418eb708b6be8ed0b3dc3954a3588e07971
+  languageName: node
+  linkType: hard
+
 "listr2@npm:^4.0.5":
   version: 4.0.5
   resolution: "listr2@npm:4.0.5"
@@ -39939,7 +39950,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"md-to-react-email@npm:5.0.5":
+"md-to-react-email@npm:^5.0.5":
   version: 5.0.5
   resolution: "md-to-react-email@npm:5.0.5"
   dependencies:
@@ -41694,15 +41705,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimatch@npm:9.0.1":
-  version: 9.0.1
-  resolution: "minimatch@npm:9.0.1"
-  dependencies:
-    brace-expansion: "npm:^2.0.1"
-  checksum: 10c0/aa043eb8822210b39888a5d0d28df0017b365af5add9bd522f180d2a6962de1cbbf1bdeacdb1b17f410dc3336bc8d76fb1d3e814cdc65d00c2f68e01f0010096
-  languageName: node
-  linkType: hard
-
 "minimatch@npm:9.0.3":
   version: 9.0.3
   resolution: "minimatch@npm:9.0.3"
@@ -42860,7 +42862,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nopt@npm:^7.0.0, nopt@npm:^7.2.1":
+"nopt@npm:^7.0.0":
   version: 7.2.1
   resolution: "nopt@npm:7.2.1"
   dependencies:
@@ -45254,7 +45256,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prettier@npm:3.4.2, prettier@npm:^3.1.1, prettier@npm:^3.2.5":
+"prettier@npm:^3.1.1, prettier@npm:^3.2.5":
   version: 3.4.2
   resolution: "prettier@npm:3.4.2"
   bin:
@@ -45263,6 +45265,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"prettier@npm:^3.5.3":
+  version: 3.6.2
+  resolution: "prettier@npm:3.6.2"
+  bin:
+    prettier: bin/prettier.cjs
+  checksum: 10c0/488cb2f2b99ec13da1e50074912870217c11edaddedeadc649b1244c749d15ba94e846423d062e2c4c9ae683e2d65f754de28889ba06e697ac4f988d44f45812
+  languageName: node
+  linkType: hard
+
 "pretty-bytes@npm:^5.3.0":
   version: 5.6.0
   resolution: "pretty-bytes@npm:5.6.0"
@@ -45342,10 +45353,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prismjs@npm:1.29.0":
-  version: 1.29.0
-  resolution: "prismjs@npm:1.29.0"
-  checksum: 10c0/d906c4c4d01b446db549b4f57f72d5d7e6ccaca04ecc670fb85cea4d4b1acc1283e945a9cbc3d81819084a699b382f970e02f9d1378e14af9808d366d9ed7ec6
+"prismjs@npm:^1.30.0":
+  version: 1.30.0
+  resolution: "prismjs@npm:1.30.0"
+  checksum: 10c0/f56205bfd58ef71ccfcbcb691fd0eb84adc96c6ff21b0b69fc6fdcf02be42d6ef972ba4aed60466310de3d67733f6a746f89f2fb79c00bf217406d465b3e8f23
   languageName: node
   linkType: hard
 
@@ -45736,13 +45747,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"proto-list@npm:~1.2.1":
-  version: 1.2.4
-  resolution: "proto-list@npm:1.2.4"
-  checksum: 10c0/b9179f99394ec8a68b8afc817690185f3b03933f7b46ce2e22c1930dc84b60d09f5ad222beab4e59e58c6c039c7f7fcf620397235ef441a356f31f9744010e12
-  languageName: node
-  linkType: hard
-
 "protobufjs@npm:^7.2.5, protobufjs@npm:^7.3.0":
   version: 7.5.3
   resolution: "protobufjs@npm:7.5.3"
@@ -46519,7 +46523,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-promise-suspense@npm:0.3.4":
+"react-promise-suspense@npm:^0.3.4":
   version: 0.3.4
   resolution: "react-promise-suspense@npm:0.3.4"
   dependencies:
@@ -51632,6 +51636,7 @@ __metadata:
     "@lingui/react": "npm:^5.1.2"
     "@lingui/swc-plugin": "npm:^5.6.0"
     "@lingui/vite-plugin": "npm:^5.1.2"
+    "@tiptap/core": "npm:^3.4.2"
     "@types/react": "npm:^19"
     "@types/react-dom": "npm:^19"
     react-email: "npm:4.0.3"
@@ -51673,10 +51678,17 @@ __metadata:
     "@react-pdf/renderer": "npm:^4.1.6"
     "@scalar/api-reference-react": "npm:^0.4.36"
     "@tiptap/core": "npm:^3.4.2"
+    "@tiptap/extension-bold": "npm:^3.4.2"
     "@tiptap/extension-document": "npm:^3.4.2"
     "@tiptap/extension-hard-break": "npm:^3.4.2"
+    "@tiptap/extension-heading": "npm:^3.4.2"
+    "@tiptap/extension-image": "npm:^3.4.4"
+    "@tiptap/extension-italic": "npm:^3.4.2"
+    "@tiptap/extension-link": "npm:^3.4.2"
     "@tiptap/extension-paragraph": "npm:^3.4.2"
+    "@tiptap/extension-strike": "npm:^3.4.2"
     "@tiptap/extension-text": "npm:^3.4.2"
+    "@tiptap/extension-underline": "npm:^3.4.2"
     "@tiptap/extensions": "npm:^3.4.2"
     "@tiptap/react": "npm:^3.4.2"
     "@types/apollo-upload-client": "npm:^17.0.2"
@@ -51806,8 +51818,8 @@ __metadata:
     "@ptc-org/nestjs-query-core": "npm:4.4.0"
     "@ptc-org/nestjs-query-graphql": "patch:@ptc-org/nestjs-query-graphql@4.2.0#./patches/@ptc-org+nestjs-query-graphql+4.2.0.patch"
     "@ptc-org/nestjs-query-typeorm": "npm:4.2.1-alpha.2"
-    "@react-email/components": "npm:0.0.35"
-    "@react-email/render": "npm:0.0.17"
+    "@react-email/components": "npm:^0.5.3"
+    "@react-email/render": "npm:^1.2.3"
     "@revertdotdev/revert-react": "npm:^0.0.21"
     "@sentry/nestjs": "npm:^8.55.0"
     "@sentry/node": "npm:9.26.0"
@@ -52103,8 +52115,8 @@ __metadata:
     "@nx/vite": "npm:21.3.11"
     "@nx/web": "npm:21.3.11"
     "@playwright/test": "npm:^1.46.0"
-    "@react-email/components": "npm:0.0.35"
-    "@react-email/render": "npm:0.0.17"
+    "@react-email/components": "npm:^0.5.3"
+    "@react-email/render": "npm:^1.2.3"
     "@sentry/profiling-node": "npm:^9.26.0"
     "@sentry/react": "npm:^9.26.0"
     "@sentry/types": "npm:^8"