diff --git a/browser/components/MarkdownPreview.js b/browser/components/MarkdownPreview.js index 15941cf87..50f073e5c 100755 --- a/browser/components/MarkdownPreview.js +++ b/browser/components/MarkdownPreview.js @@ -42,16 +42,31 @@ const CSS_FILES = [ `${appPath}/node_modules/react-image-carousel/lib/css/main.min.css` ] -function buildStyle ( - fontFamily, - fontSize, - codeBlockFontFamily, - lineNumber, - scrollPastEnd, - 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'; @@ -81,12 +96,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 { @@ -312,7 +329,7 @@ export default class MarkdownPreview extends React.Component { customCSS } = this.getStyleParams() - const inlineStyles = buildStyle( + const inlineStyles = buildStyle({ fontFamily, fontSize, codeBlockFontFamily, @@ -321,7 +338,7 @@ export default class MarkdownPreview extends React.Component { theme, allowCustomCSS, customCSS - ) + }) let body = this.markdown.render(noteContent) body = attachmentManagement.fixLocalURLS( body, @@ -652,16 +669,18 @@ export default class MarkdownPreview extends React.Component { this.getWindow().document.getElementById( 'codeTheme' ).href = this.getCodeThemeLink(codeBlockTheme) - this.getWindow().document.getElementById('style').innerHTML = buildStyle( + this.getWindow().document.getElementById('style').innerHTML = buildStyle({ fontFamily, fontSize, codeBlockFontFamily, lineNumber, scrollPastEnd, + optimizeOverflowScroll: true, theme, allowCustomCSS, customCSS - ) + }) + this.getWindow().document.documentElement.style.overflowY = 'hidden' } getCodeThemeLink (name) {