Apply hodor suggestion

Author: Timo Dahlenburg

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

@@ -7,6 +7,6 @@ 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: true }), [document]);
   return <HighlightedCodePanel type="html" value={code} />;
 }

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 };

frontend/email-builder/src/outlook.ts

@@ -141,7 +141,13 @@ function escapeTemplateString(value: string) {
 }
 
 function makeSafeTemplate(raw: string) {
-  return `{{ Safe "${escapeTemplateString(raw)}" }}`;
+  // Encode angle brackets so DOMParser does not consume Outlook conditional comments
+  // before the Go template expression is evaluated.
+  const escaped = escapeTemplateString(raw)
+    .replace(/</g, '\\x3c')
+    .replace(/>/g, '\\x3e');
+
+  return `{{ Safe "${escaped}" }}`;
 }
 
 function getWrapperOptions(style: string | null) {
@@ -155,7 +161,9 @@ function getWrapperOptions(style: string | null) {
 }
 
 function buildPresentationTable(contents: string, width: string = '100%') {
-  return `<table role="presentation" width="${width}" cellpadding="0" cellspacing="0" border="0" style="${PRESENTATION_TABLE_STYLE}">${contents}</table>`;
+  const widthAttr = width && width !== 'auto' ? ` width="${escapeAttribute(width)}"` : '';
+
+  return `<table role="presentation"${widthAttr} cellpadding="0" cellspacing="0" border="0" style="${PRESENTATION_TABLE_STYLE}">${contents}</table>`;
 }
 
 function hasSingleChildMatching(div: HTMLDivElement, predicate: (child: Element) => boolean) {
@@ -164,10 +172,7 @@ function hasSingleChildMatching(div: HTMLDivElement, predicate: (child: Element)
 }
 
 function addTableDefaults(doc: Document) {
-  doc.querySelectorAll('table').forEach((table) => {
-    if (!table.getAttribute('role')) {
-      table.setAttribute('role', 'presentation');
-    }
+  doc.querySelectorAll('table[role="presentation"]').forEach((table) => {
     if (!table.getAttribute('cellpadding')) {
       table.setAttribute('cellpadding', '0');
     }
@@ -189,6 +194,25 @@ function addTableDefaults(doc: Document) {
   });
 }
 
+function isStandaloneImage(img: HTMLImageElement) {
+  const parent = img.parentElement;
+  if (!parent) {
+    return false;
+  }
+
+  if (parent.tagName === 'DIV') {
+    return hasSingleChildMatching(parent as HTMLDivElement, (child) => child.tagName === 'IMG');
+  }
+
+  if (parent.tagName === 'A' && parent.children.length === 1) {
+    const grandparent = parent.parentElement;
+    return grandparent?.tagName === 'DIV'
+      && hasSingleChildMatching(grandparent as HTMLDivElement, (child) => child.tagName === 'A');
+  }
+
+  return false;
+}
+
 function hardenImages(doc: Document) {
   doc.querySelectorAll('img').forEach((img) => {
     img.setAttribute('border', '0');
@@ -198,18 +222,24 @@ function hardenImages(doc: Document) {
       img.setAttribute('width', width);
     }
 
-    img.setAttribute('style', setStyleValues(img.getAttribute('style'), [
-      ['display', 'block'],
+    const standaloneImage = isStandaloneImage(img);
+    const declarations: Array<[string, string | null]> = [
       ['border', '0'],
       ['outline', 'none'],
       ['text-decoration', 'none'],
       ['height', 'auto'],
       ['-ms-interpolation-mode', 'bicubic'],
-      ['vertical-align', null],
-    ]));
+    ];
+
+    if (standaloneImage) {
+      declarations.unshift(['display', 'block']);
+      declarations.push(['vertical-align', null]);
+    }
+
+    img.setAttribute('style', setStyleValues(img.getAttribute('style'), declarations));
 
     const parent = img.parentElement;
-    if (parent?.tagName === 'A') {
+    if (standaloneImage && parent?.tagName === 'A') {
       parent.setAttribute('style', setStyleValues(parent.getAttribute('style'), [
         ['display', 'inline-block'],
         ['border', '0'],
@@ -306,7 +336,7 @@ function buildBulletproofButton(anchor: HTMLAnchorElement, wrapperStyle: string)
   const targetAttr = target ? ` target="${escapeAttribute(target)}"` : '';
 
   if (fullWidth) {
-    const anchorStyle = appendMissingStyles(anchor.getAttribute('style'), [
+    const anchorStyle = setStyleValues(anchor.getAttribute('style'), [
       ['display', 'block'],
       ['text-align', 'center'],
       ['border', '1px solid ' + buttonColor],
@@ -326,12 +356,14 @@ function buildBulletproofButton(anchor: HTMLAnchorElement, wrapperStyle: string)
   const estimatedHeight = Math.max(lineHeight + paddingValues.top + paddingValues.bottom, 32);
   const arcsize = Math.max(0, Math.min(50, Math.round((borderRadius / estimatedHeight) * 100)));
   const cleanAnchorStyle = anchor.getAttribute('style') || '';
-  const vml = makeSafeTemplate(`<!--[if mso]><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="${escapeAttribute(href)}" style="height:${estimatedHeight}px;v-text-anchor:middle;width:${estimatedWidth}px;" arcsize="${arcsize}%" strokecolor="${escapeAttribute(buttonColor)}" fillcolor="${escapeAttribute(buttonColor)}"><w:anchorlock/><center style="color:${escapeAttribute(textColor)};font-family:${escapeAttribute(fontFamily)};font-size:${fontSize}px;font-weight:${escapeAttribute(fontWeight)};">${escapeHtml(text)}</center></v:roundrect><![endif]-->`);
+  const msoStart = makeSafeTemplate('<!--[if mso]>');
+  const msoEnd = makeSafeTemplate('<![endif]-->');
+  const vml = `<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="${escapeAttribute(href)}" style="height:${estimatedHeight}px;v-text-anchor:middle;width:${estimatedWidth}px;" arcsize="${arcsize}%" strokecolor="${escapeAttribute(buttonColor)}" fillcolor="${escapeAttribute(buttonColor)}"><w:anchorlock/><center style="color:${escapeAttribute(textColor)};font-family:${escapeAttribute(fontFamily)};font-size:${fontSize}px;font-weight:${escapeAttribute(fontWeight)};">${escapeHtml(text)}</center></v:roundrect>`;
   const nonMsoStart = makeSafeTemplate('<!--[if !mso]><!-->');
   const nonMsoEnd = makeSafeTemplate('<!--<![endif]-->');
 
   return buildPresentationTable(
-    `<tbody><tr><td align="${escapeAttribute(align)}" style="${escapeAttribute(wrapperStyle)}">${vml}${nonMsoStart}<a href="${escapeAttribute(href)}"${targetAttr} style="${escapeAttribute(cleanAnchorStyle)}">${escapeHtml(text)}</a>${nonMsoEnd}</td></tr></tbody>`
+    `<tbody><tr><td align="${escapeAttribute(align)}" style="${escapeAttribute(wrapperStyle)}">${msoStart}${vml}${msoEnd}${nonMsoStart}<a href="${escapeAttribute(href)}"${targetAttr} style="${escapeAttribute(cleanAnchorStyle)}">${escapeHtml(text)}</a>${nonMsoEnd}</td></tr></tbody>`
   );
 }
 

frontend/email-builder/src/utils.tsx

@@ -3,13 +3,28 @@ import { TEditorConfiguration } from './documents/editor/core';
 import { postProcessForOutlook } from './outlook';
 
 const VIEWPORT_META = '<meta name="viewport" content="width=device-width, initial-scale=1.0">';
-const MSO_DOCUMENT_SETTINGS = '<!--[if mso]><noscript><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml></noscript><![endif]-->';
+const MSO_DOCUMENT_SETTINGS = '<!--[if mso]><noscript><xml xmlns:o="urn:schemas-microsoft-com:office:office"><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml></noscript><![endif]-->';
 
-export function renderHtmlWithMeta(document: TEditorConfiguration, options: { rootBlockId: string }): string {
-  const html = postProcessForOutlook(renderToStaticMarkup(document, options));
+function injectHeadContents(html: string, contents: string) {
+  const headMatch = html.match(/<head\b([^>]*)>/i);
+  if (headMatch) {
+    return html.replace(/<head\b([^>]*)>/i, `<head$1>${contents}`);
+  }
 
-  return html.replace(
-    /<head([^>]*)>/i,
-    `<head$1>${VIEWPORT_META}${MSO_DOCUMENT_SETTINGS}`
-  );
+  const htmlMatch = html.match(/<html\b([^>]*)>/i);
+  if (htmlMatch) {
+    return html.replace(/<html\b([^>]*)>/i, `<html$1><head>${contents}</head>`);
+  }
+
+  return `<head>${contents}</head>${html}`;
+}
+
+export function renderHtmlWithMeta(
+  document: TEditorConfiguration,
+  options: { rootBlockId: string; outlook?: boolean }
+): string {
+  const html = renderToStaticMarkup(document, options);
+  const output = options.outlook ? postProcessForOutlook(html) : html;
+
+  return injectHeadContents(output, `${VIEWPORT_META}${MSO_DOCUMENT_SETTINGS}`);
 }

frontend/src/components/Editor.vue

@@ -136,6 +136,17 @@ export default {
   },
 
   methods: {
+    syncVisualSnapshot(value) {
+      if (value.contentType === 'visual') {
+        this.visualSnapshotBody = value.body || '';
+        this.visualSnapshotSource = value.bodySource;
+        return;
+      }
+
+      this.visualSnapshotBody = null;
+      this.visualSnapshotSource = null;
+    },
+
     onContentTypeChange(to, from) {
       if (!this.self.body.trim()) {
         this.convertContentType(to, from);
@@ -351,11 +362,7 @@ export default {
     // Set initial content type for the selector.
     this.contentTypeSel = this.value.contentType;
     this.templateId = this.value.templateId;
-
-    if (this.value.contentType === 'visual') {
-      this.visualSnapshotBody = this.value.body || '';
-      this.visualSnapshotSource = this.value.bodySource;
-    }
+    this.syncVisualSnapshot(this.value);
 
     window.addEventListener('keydown', this.onKeyboardShortcut);
 
@@ -392,6 +399,12 @@ export default {
   },
 
   watch: {
+    value(to) {
+      this.contentTypeSel = to.contentType;
+      this.templateId = to.templateId;
+      this.syncVisualSnapshot(to);
+    },
+
     validTemplates() {
       // When the filtered list of validTemplates changes (visual vs. regular),
       // select the appropriate 'default' in the template select list.

frontend/src/components/VisualEditor.vue

@@ -30,10 +30,26 @@ export default {
   data() {
     return {
       isMediaVisible: false,
+      changeTimer: null,
     };
   },
 
   methods: {
+    emitVisualChange(data, body) {
+      if (this.changeTimer) {
+        window.clearTimeout(this.changeTimer);
+      }
+
+      this.changeTimer = window.setTimeout(() => {
+        const iframe = this.$refs.visualEditor;
+        const renderHtml = iframe.contentWindow.EmailBuilder?.renderHtmlWithMeta;
+        const processedBody = typeof renderHtml === 'function'
+          ? renderHtml(data, { rootBlockId: 'root', outlook: true })
+          : body;
+        this.$emit('change', { source: JSON.stringify(data), body: processedBody });
+      }, 150);
+    },
+
     loadScript() {
       return new Promise((resolve, reject) => {
         const iframe = this.$refs.visualEditor;
@@ -67,7 +83,7 @@ export default {
           onChange: (data, body) => {
             // Hack to fix quotes in Go {{ templating }} in the HTML body.
             const tpl = body.replace(/\{\{[^}]*\}\}/g, (match) => match.replace(/"/g, '"'));
-            this.$emit('change', { source: JSON.stringify(data), body: tpl });
+            this.emitVisualChange(data, tpl);
           },
         });
       }
@@ -165,6 +181,9 @@ export default {
   },
 
   unmounted() {
+    if (this.changeTimer) {
+      window.clearTimeout(this.changeTimer);
+    }
     window.removeEventListener('message', this.onSidebarMount, false);
   },
 };