From addf9b920f4572f7979797556fb4a35b7d31d1ff Mon Sep 17 00:00:00 2001
From: hikerpig <hikerpigwinnie@gmail.com>
Date: Sun, 21 Jul 2019 14:43:59 +0800
Subject: [PATCH 1/2] tweak MarkdownPreview style to optimize overflow
 scrollbar display, fix #2902

---
 browser/components/MarkdownPreview.js | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js
index 11d8dca6..4c56125b 100755
--- a/browser/components/MarkdownPreview.js
+++ b/browser/components/MarkdownPreview.js
@@ -53,6 +53,7 @@ function buildStyle (
   codeBlockFontFamily,
   lineNumber,
   scrollPastEnd,
+  optimizeOverflowScroll,
   theme,
   allowCustomCSS,
   customCSS
@@ -86,12 +87,14 @@ function buildStyle (
        url('${appPath}/resources/fonts/MaterialIcons-Regular.woff') format('woff'),
        url('${appPath}/resources/fonts/MaterialIcons-Regular.ttf') format('truetype');
 }
+
 ${markdownStyle}
 
 body {
   font-family: '${fontFamily.join("','")}';
   font-size: ${fontSize}px;
-  ${scrollPastEnd && 'padding-bottom: 90vh;'}
+  ${scrollPastEnd ? 'padding-bottom: 90vh;' : ''}
+  ${optimizeOverflowScroll ? 'height: 100%;' : ''}
 }
 @media print {
   body {
@@ -341,6 +344,7 @@ export default class MarkdownPreview extends React.Component {
       codeBlockFontFamily,
       lineNumber,
       scrollPastEnd,
+      false,
       theme,
       allowCustomCSS,
       customCSS
@@ -663,16 +667,19 @@ export default class MarkdownPreview extends React.Component {
     this.getWindow().document.getElementById(
       'codeTheme'
     ).href = this.GetCodeThemeLink(codeBlockTheme)
+
     this.getWindow().document.getElementById('style').innerHTML = buildStyle(
       fontFamily,
       fontSize,
       codeBlockFontFamily,
       lineNumber,
       scrollPastEnd,
+      true,
       theme,
       allowCustomCSS,
-      customCSS
+      customCSS,
     )
+    this.getWindow().document.documentElement.style.overflowY = 'hidden'
   }
 
   GetCodeThemeLink (name) {

From c2a26a854703a140ac2f3dbe4af5d3167ec8264d Mon Sep 17 00:00:00 2001
From: hikerpig <hikerpigwinnie@gmail.com>
Date: Sun, 21 Jul 2019 15:24:26 +0800
Subject: [PATCH 2/2] improvement: refactor `buildStyle` to NamedParameters
 style, and add some jsdoc

---
 browser/components/MarkdownPreview.js | 49 +++++++++++++++++----------
 1 file changed, 31 insertions(+), 18 deletions(-)

diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js
index 4c56125b..6c1d68e0 100755
--- a/browser/components/MarkdownPreview.js
+++ b/browser/components/MarkdownPreview.js
@@ -47,17 +47,31 @@ const CSS_FILES = [
 ]
 const win = global.process.platform === 'win32'
 
-function buildStyle (
-  fontFamily,
-  fontSize,
-  codeBlockFontFamily,
-  lineNumber,
-  scrollPastEnd,
-  optimizeOverflowScroll,
-  theme,
-  allowCustomCSS,
-  customCSS
-) {
+/**
+ * @param {Object} opts
+ * @param {String} opts.fontFamily
+ * @param {Numberl} opts.fontSize
+ * @param {String} opts.codeBlockFontFamily
+ * @param {String} opts.theme
+ * @param {Boolean} [opts.lineNumber] Should show line number
+ * @param {Boolean} [opts.scrollPastEnd]
+ * @param {Boolean} [opts.optimizeOverflowScroll] Should tweak body style to optimize overflow scrollbar display
+ * @param {Boolean} [opts.allowCustomCSS] Should add custom css
+ * @param {String} [opts.customCSS] Will be added to bottom, only if `opts.allowCustomCSS` is truthy
+ * @returns {String}
+ */
+function buildStyle (opts) {
+  const {
+    fontFamily,
+    fontSize,
+    codeBlockFontFamily,
+    lineNumber,
+    scrollPastEnd,
+    optimizeOverflowScroll,
+    theme,
+    allowCustomCSS,
+    customCSS
+  } = opts
   return `
 @font-face {
   font-family: 'Lato';
@@ -338,17 +352,16 @@ export default class MarkdownPreview extends React.Component {
       customCSS
     } = this.getStyleParams()
 
-    const inlineStyles = buildStyle(
+    const inlineStyles = buildStyle({
       fontFamily,
       fontSize,
       codeBlockFontFamily,
       lineNumber,
       scrollPastEnd,
-      false,
       theme,
       allowCustomCSS,
       customCSS
-    )
+    })
     let body = this.markdown.render(noteContent)
     body = attachmentManagement.fixLocalURLS(
       body,
@@ -668,17 +681,17 @@ export default class MarkdownPreview extends React.Component {
       'codeTheme'
     ).href = this.GetCodeThemeLink(codeBlockTheme)
 
-    this.getWindow().document.getElementById('style').innerHTML = buildStyle(
+    this.getWindow().document.getElementById('style').innerHTML = buildStyle({
       fontFamily,
       fontSize,
       codeBlockFontFamily,
       lineNumber,
       scrollPastEnd,
-      true,
+      optimizeOverflowScroll: true,
       theme,
       allowCustomCSS,
-      customCSS,
-    )
+      customCSS
+    })
     this.getWindow().document.documentElement.style.overflowY = 'hidden'
   }