public/Boostnote
1
0
Fork 0
mirror of https://github.com/BoostIo/Boostnote synced 2025-12-14 02:06:29 +00:00
Code Issues Releases Wiki Activity

Fix preview-window's scroll behavior, #3289

Browse Source
This commit is contained in:
hikerpig
2019-10-21 13:14:34 +08:00
committed by Junyoung Choi
parent d010c5532d
commit 77833ff980
2 changed files with 23 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
browser/components/MarkdownEditor.js
View File

@@ -119,7 +119,7 @@ class MarkdownEditor extends React.Component {
status: 'PREVIEW' status: 'PREVIEW'
}, () => { }, () => {
this.refs.preview.focus() this.refs.preview.focus()
this.refs.preview.scrollTo(cursorPosition.line) this.refs.preview.scrollToRow(cursorPosition.line)
}) })
eventEmitter.emit('topbar:togglelockbutton', this.state.status) eventEmitter.emit('topbar:togglelockbutton', this.state.status)
} }

27
browser/components/MarkdownPreview.js
View File

@@ -102,7 +102,11 @@ ${markdownStyle}
body { body {
font-family: '${fontFamily.join("','")}'; font-family: '${fontFamily.join("','")}';
font-size: ${fontSize}px; font-size: ${fontSize}px;
${scrollPastEnd ? 'padding-bottom: 90vh;' : ''} ${scrollPastEnd ? `
padding-bottom: 90vh;
box-sizing: border-box;
`
: ''}
${optimizeOverflowScroll ? 'height: 100%;' : ''} ${optimizeOverflowScroll ? 'height: 100%;' : ''}
} }
@media print { @media print {
@@ -611,7 +615,7 @@ export default class MarkdownPreview extends React.Component {
// Should scroll to top after selecting another note // Should scroll to top after selecting another note
if (prevProps.noteKey !== this.props.noteKey) { if (prevProps.noteKey !== this.props.noteKey) {
this.getWindow().scrollTo(0, 0) this.scrollTo(0, 0)
} }
} }
@@ -996,7 +1000,11 @@ export default class MarkdownPreview extends React.Component {
return this.refs.root.contentWindow return this.refs.root.contentWindow
} }
scrollTo (targetRow) { /**
* @public
* @param {Number} targetRow
*/
scrollToRow (targetRow) {
const blocks = this.getWindow().document.querySelectorAll( const blocks = this.getWindow().document.querySelectorAll(
'body>[data-line]' 'body>[data-line]'
) )
@@ -1006,12 +1014,21 @@ export default class MarkdownPreview extends React.Component {
const row = parseInt(block.getAttribute('data-line')) const row = parseInt(block.getAttribute('data-line'))
if (row > targetRow || index === blocks.length - 1) { if (row > targetRow || index === blocks.length - 1) {
block = blocks[index - 1] block = blocks[index - 1]
block != null && this.getWindow().scrollTo(0, block.offsetTop) block != null && this.scrollTo(0, block.offsetTop)
break break
} }
} }
} }
/**
* `document.body.scrollTo`
* @param {Number} x
* @param {Number} y
*/
scrollTo (x, y) {
this.getWindow().document.body.scrollTo(x, y)
}
preventImageDroppedHandler (e) { preventImageDroppedHandler (e) {
e.preventDefault() e.preventDefault()
e.stopPropagation() e.stopPropagation()
@@ -1054,7 +1071,7 @@ export default class MarkdownPreview extends React.Component {
) )
if (targetElement != null) { if (targetElement != null) {
this.getWindow().scrollTo(0, targetElement.offsetTop) this.scrollTo(0, targetElement.offsetTop)
} }
return return
} }