Skip to content

Commit 1332b33

Browse files
authored
Merge pull request #3136 from hikerpig/feature/scrollbarAppearance
tweak MarkdownPreview style to optimize overflow scrollbar display
2 parents e9975d1 + 9a704a2 commit 1332b33

File tree

1 file changed

+34
-15
lines changed

1 file changed

+34
-15
lines changed

browser/components/MarkdownPreview.js

Lines changed: 34 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -42,16 +42,31 @@ const CSS_FILES = [
4242
`${appPath}/node_modules/react-image-carousel/lib/css/main.min.css`
4343
]
4444

45-
function buildStyle (
46-
fontFamily,
47-
fontSize,
48-
codeBlockFontFamily,
49-
lineNumber,
50-
scrollPastEnd,
51-
theme,
52-
allowCustomCSS,
53-
customCSS
54-
) {
45+
/**
46+
* @param {Object} opts
47+
* @param {String} opts.fontFamily
48+
* @param {Numberl} opts.fontSize
49+
* @param {String} opts.codeBlockFontFamily
50+
* @param {String} opts.theme
51+
* @param {Boolean} [opts.lineNumber] Should show line number
52+
* @param {Boolean} [opts.scrollPastEnd]
53+
* @param {Boolean} [opts.optimizeOverflowScroll] Should tweak body style to optimize overflow scrollbar display
54+
* @param {Boolean} [opts.allowCustomCSS] Should add custom css
55+
* @param {String} [opts.customCSS] Will be added to bottom, only if `opts.allowCustomCSS` is truthy
56+
* @returns {String}
57+
*/
58+
function buildStyle (opts) {
59+
const {
60+
fontFamily,
61+
fontSize,
62+
codeBlockFontFamily,
63+
lineNumber,
64+
scrollPastEnd,
65+
optimizeOverflowScroll,
66+
theme,
67+
allowCustomCSS,
68+
customCSS
69+
} = opts
5570
return `
5671
@font-face {
5772
font-family: 'Lato';
@@ -81,12 +96,14 @@ function buildStyle (
8196
url('${appPath}/resources/fonts/MaterialIcons-Regular.woff') format('woff'),
8297
url('${appPath}/resources/fonts/MaterialIcons-Regular.ttf') format('truetype');
8398
}
99+
84100
${markdownStyle}
85101
86102
body {
87103
font-family: '${fontFamily.join("','")}';
88104
font-size: ${fontSize}px;
89-
${scrollPastEnd && 'padding-bottom: 90vh;'}
105+
${scrollPastEnd ? 'padding-bottom: 90vh;' : ''}
106+
${optimizeOverflowScroll ? 'height: 100%;' : ''}
90107
}
91108
@media print {
92109
body {
@@ -312,7 +329,7 @@ export default class MarkdownPreview extends React.Component {
312329
customCSS
313330
} = this.getStyleParams()
314331

315-
const inlineStyles = buildStyle(
332+
const inlineStyles = buildStyle({
316333
fontFamily,
317334
fontSize,
318335
codeBlockFontFamily,
@@ -321,7 +338,7 @@ export default class MarkdownPreview extends React.Component {
321338
theme,
322339
allowCustomCSS,
323340
customCSS
324-
)
341+
})
325342
let body = this.markdown.render(noteContent)
326343
body = attachmentManagement.fixLocalURLS(
327344
body,
@@ -652,16 +669,18 @@ export default class MarkdownPreview extends React.Component {
652669
this.getWindow().document.getElementById(
653670
'codeTheme'
654671
).href = this.getCodeThemeLink(codeBlockTheme)
655-
this.getWindow().document.getElementById('style').innerHTML = buildStyle(
672+
this.getWindow().document.getElementById('style').innerHTML = buildStyle({
656673
fontFamily,
657674
fontSize,
658675
codeBlockFontFamily,
659676
lineNumber,
660677
scrollPastEnd,
678+
optimizeOverflowScroll: true,
661679
theme,
662680
allowCustomCSS,
663681
customCSS
664-
)
682+
})
683+
this.getWindow().document.documentElement.style.overflowY = 'hidden'
665684
}
666685

667686
getCodeThemeLink (name) {

0 commit comments

Comments
 (0)