From f23703c8b0d52f977967eb47ac5605584eb63dbc Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Thu, 7 Nov 2019 17:11:53 +0700
Subject: [PATCH] Fixed scrolling and hid scrollbars in email preview

---
 .../components/modal-post-email-preview.js    | 28 ++++++++++++++++++-
 .../app/styles/layouts/preview-email.css      | 10 ++-----
 .../components/modal-post-email-preview.hbs   |  6 ++--
 3 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/ghost/admin/app/components/modal-post-email-preview.js b/ghost/admin/app/components/modal-post-email-preview.js
index 438ca57fc7..c000067987 100644
--- a/ghost/admin/app/components/modal-post-email-preview.js
+++ b/ghost/admin/app/components/modal-post-email-preview.js
@@ -6,10 +6,13 @@ import {inject as service} from '@ember/service';
 export default ModalComponent.extend({
     ghostPaths: service(),
     ajax: service(),
+
     type: 'desktop',
     previewHtml: '',
     previewEmailSubject: null,
+
     post: alias('model'),
+
     actions: {
         changeType(type) {
             this.set('type', type);
@@ -22,6 +25,7 @@ export default ModalComponent.extend({
             const url = this.get('ghostPaths.url').api('/email_preview/posts', resourceId);
             let htmlData = this.get('previewHtml');
             let emailSubject = this.get('previewEmailSubject');
+
             if (!htmlData) {
                 const response = await this.ajax.request(url);
                 let [emailPreview] = response.email_previews;
@@ -29,15 +33,37 @@ export default ModalComponent.extend({
                 emailSubject = emailPreview.subject;
             }
 
+            let domParser = new DOMParser();
+            let htmlDoc = domParser.parseFromString(htmlData, 'text/html');
+
+            let stylesheet = htmlDoc.querySelector('style');
+            let originalCss = stylesheet.innerHTML;
+            let extraCss = `
+html::-webkit-scrollbar {
+    display: none;
+    width: 0;
+    background: transparent
+}
+html {
+    scrollbar-width: none;
+}
+body {
+    pointer-events: none !important;
+}
+            `;
+            stylesheet.innerHTML = `${originalCss}\n\n${extraCss}`;
+
             let iframe = this.element.querySelector('iframe');
             if (iframe) {
                 iframe.contentWindow.document.open();
-                iframe.contentWindow.document.write(htmlData);
+                iframe.contentWindow.document.write(htmlDoc.documentElement.innerHTML);
                 iframe.contentWindow.document.close();
             }
+
             this.set('previewHtml', htmlData);
             this.set('previewEmailSubject', emailSubject);
         } catch (error) {
+            console.log({error});
             // re-throw if we don't have a validation error
             if (error) {
                 throw error;
diff --git a/ghost/admin/app/styles/layouts/preview-email.css b/ghost/admin/app/styles/layouts/preview-email.css
index 5fd802a66d..8638832a68 100644
--- a/ghost/admin/app/styles/layouts/preview-email.css
+++ b/ghost/admin/app/styles/layouts/preview-email.css
@@ -104,12 +104,8 @@
     overflow: hidden;
 }
 
-.gh-pe-iframe {
-    pointer-events: none !important;
-}
-
 .gh-pe-mobile-container .gh-pe-iframe {
-    height: 100%; 
+    height: 100%;
     width: calc(43vh - 40px);
     overflow-x: hidden;
     padding: 0;
@@ -119,8 +115,8 @@
     .gh-pe-header {
         flex-direction: column;
     }
-    
+
     .gh-pe-header h2 {
         display: none
     }
-}
\ No newline at end of file
+}
diff --git a/ghost/admin/app/templates/components/modal-post-email-preview.hbs b/ghost/admin/app/templates/components/modal-post-email-preview.hbs
index 478f421184..733efffd7b 100644
--- a/ghost/admin/app/templates/components/modal-post-email-preview.hbs
+++ b/ghost/admin/app/templates/components/modal-post-email-preview.hbs
@@ -10,15 +10,17 @@
         </button>
     </div>
 </header>
+
 {{#if (eq type "mobile")}}
     <div class="modal-body modal-preview-email-content gh-pe-mobile-container" style="display: flex;justify-content: center;padding-top: 12px;">
-        <div class="gh-pe-mobile-bezel"> 
-            <div class="gh-pe-mobile-screen"> 
+        <div class="gh-pe-mobile-bezel">
+            <div class="gh-pe-mobile-screen">
                 <iframe class="bn gh-pe-iframe" {{did-insert this.renderEmailPreview}}></iframe>
             </div>
         </div>
     </div>
 {{/if}}
+
 {{#if (eq type "desktop")}}
     <div class="modal-body modal-preview-email-content gh-pe-desktop-container">
         <iframe class="bn miw-100 gh-pe-iframe" style="height:100%;" {{did-insert this.renderEmailPreview}}></iframe>