Merge pull request #1531 from hackmdio/feature/editor-scroll-over-lines

Make editor can scroll over lines
This commit is contained in:
Raccoon 2020-06-01 23:39:56 +08:00 committed by GitHub
commit c6b6d63301
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 5 deletions

View File

@ -588,6 +588,7 @@ function checkEditorStyle () {
} }
// workaround editor will have wrong doc height when editor height changed // workaround editor will have wrong doc height when editor height changed
editor.setSize(null, ui.area.edit.height()) editor.setSize(null, ui.area.edit.height())
checkEditorScrollOverLines()
// make editor resizable // make editor resizable
if (!ui.area.resize.handle.length) { if (!ui.area.resize.handle.length) {
ui.area.edit.resizable({ ui.area.edit.resizable({
@ -674,6 +675,15 @@ function checkEditorScrollbarInner () {
editor.scrollTo(null, scrollInfo.top) editor.scrollTo(null, scrollInfo.top)
} }
function checkEditorScrollOverLines () {
const desireHeight = parseInt(ui.area.codemirrorScroll[0].style.height) || parseInt(ui.area.codemirrorScroll[0].style.minHeight)
// make editor have extra padding in the bottom (except small screen)
const paddingBottom = editor.doc && editor.doc.height > defaultTextHeight ? (desireHeight - defaultTextHeight) : 0
if (parseInt(ui.area.codemirrorLines.css('padding-bottom')) !== paddingBottom) {
ui.area.codemirrorLines.css('padding-bottom', paddingBottom + 'px')
}
}
function checkTocStyle () { function checkTocStyle () {
// toc right // toc right
var paddingRight = parseFloat(ui.area.markdown.css('padding-right')) var paddingRight = parseFloat(ui.area.markdown.css('padding-right'))
@ -2554,9 +2564,11 @@ function enforceMaxLength (cm, change) {
} }
return false return false
} }
let lastDocHeight
var ignoreEmitEvents = ['setValue', 'ignoreHistory'] var ignoreEmitEvents = ['setValue', 'ignoreHistory']
editorInstance.on('beforeChange', function (cm, change) { editorInstance.on('beforeChange', function (cm, change) {
if (debug) { console.debug(change) } if (debug) { console.debug(change) }
lastDocHeight = editor.doc.height
removeNullByte(cm, change) removeNullByte(cm, change)
if (enforceMaxLength(cm, change)) { if (enforceMaxLength(cm, change)) {
$('.limit-modal').modal('show') $('.limit-modal').modal('show')
@ -2590,6 +2602,7 @@ editorInstance.on('paste', function () {
// na // na
}) })
editorInstance.on('changes', function (editor, changes) { editorInstance.on('changes', function (editor, changes) {
const docHeightChanged = editor.doc.height !== lastDocHeight
updateHistory() updateHistory()
var docLength = editor.getValue().length var docLength = editor.getValue().length
// workaround for big documents // workaround for big documents
@ -2605,13 +2618,18 @@ editorInstance.on('changes', function (editor, changes) {
viewportMargin = newViewportMargin viewportMargin = newViewportMargin
windowResize() windowResize()
} }
if (docHeightChanged) {
checkEditorScrollbar() checkEditorScrollbar()
checkEditorScrollOverLines()
// always sync edit scrolling to view if user is editing
if (ui.area.codemirrorScroll[0].scrollHeight > ui.area.view[0].scrollHeight && editorHasFocus()) { if (ui.area.codemirrorScroll[0].scrollHeight > ui.area.view[0].scrollHeight && editorHasFocus()) {
postUpdateEvent = function () { postUpdateEvent = function () {
syncScrollToView() syncScrollToView()
postUpdateEvent = null postUpdateEvent = null
} }
} }
}
lastDocHeight = editor.doc.height
}) })
editorInstance.on('focus', function (editor) { editorInstance.on('focus', function (editor) {
for (var i = 0; i < onlineUsers.length; i++) { for (var i = 0; i < onlineUsers.length; i++) {

View File

@ -70,6 +70,9 @@ export const getUIElements = () => ({
codemirrorSizerInner: $( codemirrorSizerInner: $(
'.ui-edit-area .CodeMirror .CodeMirror-sizer > div' '.ui-edit-area .CodeMirror .CodeMirror-sizer > div'
), ),
codemirrorLines: $(
'.ui-edit-area .CodeMirror .CodeMirror-lines'
),
markdown: $('.ui-view-area .markdown-body'), markdown: $('.ui-view-area .markdown-body'),
resize: { resize: {
handle: $('.ui-resizable-handle'), handle: $('.ui-resizable-handle'),