Outlook-safe rendering for visual email builder output

frontend/email-builder/.eslintrc.cjs

@@ -0,0 +1,26 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true,
+    es2022: true,
+  },
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  plugins: ['@typescript-eslint', 'react-hooks', 'simple-import-sort'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', 'node_modules'],
+  rules: {
+    'simple-import-sort/imports': 'off',
+  },
+};

frontend/email-builder/src/App/InspectorDrawer/ConfigurationPanel/input-panels/EmailLayoutSidebarPanel.tsx

@@ -7,6 +7,7 @@ import EmailLayoutPropsSchema, {
 } from '../../../../documents/blocks/EmailLayout/EmailLayoutPropsSchema';
 
 import BaseSidebarPanel from './helpers/BaseSidebarPanel';
+import BooleanInput from './helpers/inputs/BooleanInput';
 import ColorInput, { NullableColorInput } from './helpers/inputs/ColorInput';
 import { NullableFontFamily } from './helpers/inputs/FontFamily';
 import SliderInput from './helpers/inputs/SliderInput';
@@ -66,6 +67,11 @@ export default function EmailLayoutSidebarFields({ data, setData }: EmailLayoutS
         defaultValue={data.textColor ?? '#262626'}
         onChange={(textColor) => updateData({ ...data, textColor })}
       />
+      <BooleanInput
+        label="Outlook compatibility"
+        defaultValue={data.outlook ?? false}
+        onChange={(outlook) => updateData({ ...data, outlook })}
+      />
     </BaseSidebarPanel>
   );
 }

frontend/email-builder/src/App/TemplatePanel/HtmlPanel.tsx

@@ -7,6 +7,9 @@ import HighlightedCodePanel from './helper/HighlightedCodePanel';
 
 export default function HtmlPanel() {
   const document = useDocument();
-  const code = useMemo(() => renderHtmlWithMeta(document, { rootBlockId: 'root' }), [document]);
+  const code = useMemo(
+    () => renderHtmlWithMeta(document, { rootBlockId: 'root', outlook: Boolean(document.root?.data?.outlook) }),
+    [document]
+  );
   return <HighlightedCodePanel type="html" value={code} />;
 }

frontend/email-builder/src/documents/blocks/EmailLayout/EmailLayoutPropsSchema.tsx

@@ -29,6 +29,7 @@ const EmailLayoutPropsSchema = z.object({
   textColor: COLOR_SCHEMA,
   fontFamily: FONT_FAMILY_SCHEMA,
   childrenIds: z.array(z.string()).optional().nullable(),
+  outlook: z.boolean().optional().nullable(),
 });
 
 export default EmailLayoutPropsSchema;

frontend/email-builder/src/main.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App, { AppProps, DEFAULT_SOURCE } from './App';
 import { setDocument, resetDocument } from './documents/editor/EditorContext';
+import { renderHtmlWithMeta } from './utils';
 
 import { CssBaseline, ThemeProvider } from '@mui/material';
 import theme from './theme';
@@ -31,4 +32,4 @@ function render(containerId: string, props: AppProps, force: boolean = false) {
   }
 }
 
-export { App, setDocument, resetDocument, render, isRendered, DEFAULT_SOURCE };
+export { App, setDocument, resetDocument, render, isRendered, DEFAULT_SOURCE, renderHtmlWithMeta };