Apply hodor suggestion

Author: Timo Dahlenburg

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) {
@@ -326,12 +334,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,24 @@ 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]-->';
+
+function injectHeadContents(html: string, contents: string) {
+  const headMatch = html.match(/<head\b([^>]*)>/i);
+  if (headMatch) {
+    return html.replace(/<head\b([^>]*)>/i, `<head$1>${contents}`);
+  }
+
+  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 }): string {
   const html = postProcessForOutlook(renderToStaticMarkup(document, options));
 
-  return html.replace(
-    /<head([^>]*)>/i,
-    `<head$1>${VIEWPORT_META}${MSO_DOCUMENT_SETTINGS}`
-  );
+  return injectHeadContents(html, `${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.