From 76a69350048c269278d84d71fdd1dc73d079e3da Mon Sep 17 00:00:00 2001
From: Ian Bicking <ianb@colorstudy.com>
Date: Mon, 23 Jul 2018 15:00:04 -0500
Subject: [PATCH] Fix #85, apply some styling to readable content

This gives the content a max width, and also parses the content and adds inline max-width to any images.
---
 addon/emailTemplates.jsx | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/addon/emailTemplates.jsx b/addon/emailTemplates.jsx
index 399e3c9..40d1ce6 100644
--- a/addon/emailTemplates.jsx
+++ b/addon/emailTemplates.jsx
@@ -88,10 +88,15 @@ this.emailTemplates = (function () {
         if (tab.selection) {
           selection = <Fragment>{selectionDisplay(tab.selection)} <br /><br /></Fragment>;
         }
-        let readability = "no readability";
+        let readability = null;
         if (tab.readability && tab.readability.content) {
+          let content = parseReadableDocument(tab.readability.content);
+          for (let img of content.querySelectorAll("img")) {
+            img.style.maxWidth = "600px";
+            img.style.height = "auto";
+          }
           let hr = index === this.props.tabs.length - 1 ? null : <hr />;
-          readability = <Fragment><div dangerouslySetInnerHTML={{__html: tab.readability.content}} /> { hr }</Fragment>;
+          readability = <Fragment><div style={{maxWidth: "600px", border: "2px solid #aaa", borderRadius: "3px", padding: "10px"}} dangerouslySetInnerHTML={{__html: content.outerHTML}} /> { hr }</Fragment>;
         }
         return <Fragment key={index}>
           <a href={tab.url}>{tab.title}</a> <br />
@@ -103,6 +108,15 @@ this.emailTemplates = (function () {
     }
   }
 
+  function parseReadableDocument(d) {
+    let parser = new DOMParser();
+    let doc = parser.parseFromString(d, "text/html");
+    if (doc.body.childNodes.length !== 1) {
+      console.warn("Readable body did not have exactly one element:", doc.body.childNodes.length, "elements found");
+    }
+    return doc.body.childNodes[0];
+  }
+
   exports.FullArticles = FullArticles;
 
   exports.renderEmail = function(tabs, BaseComponent) {