diff --git a/client/pages/viewerpage/editor.js b/client/pages/viewerpage/editor.js index 6871850e..ea5788f9 100644 --- a/client/pages/viewerpage/editor.js +++ b/client/pages/viewerpage/editor.js @@ -57,11 +57,20 @@ export class Editor extends React.Component { this.props.event.subscribe((data) => { const [type, value] = data; if(type === "goTo"){ - const pY = this.state.editor.charCoords({line: value, ch: 0}, "local").top; this.state.editor.operation((cm) => { - this.state.editor.scrollTo(null, pY); this.state.editor.setSelection({line: value, ch: 0}, {line: value, ch: this.state.editor.getLine(value).length}); }); + + requestAnimationFrame(() => { + // For some reasons I ignore, codemirror would give different value for scroll position, depending on + // when you ask for it. Based on a few debug sessions, I found out the results to be much more accurate when + // wrapped around an async hack like that + const pY = this.state.editor.charCoords({line: value, ch: 0}, "local").top; + this.state.editor.operation((cm) => { + this.state.editor.scrollTo(null, pY); + this.state.editor.setSelection({line: value, ch: 0}, {line: value, ch: this.state.editor.getLine(value).length}); + }); + }); }else if(type === "refresh"){ const cursor = this.state.editor.getCursor(); const selections = this.state.editor.listSelections(); diff --git a/client/pages/viewerpage/editor.scss b/client/pages/viewerpage/editor.scss index 88f91bec..647cf95d 100644 --- a/client/pages/viewerpage/editor.scss +++ b/client/pages/viewerpage/editor.scss @@ -93,7 +93,12 @@ /* Make things more confy */ .CodeMirror{ - .CodeMirror-code{ line-height: 1.3em; } + .CodeMirror-code{ + line-height: 1.3em; + > div{ + clear: both; + } + } &[mode="orgmode"] .CodeMirror-code, &[mode="yaml-frontmatter"] .CodeMirror-code{ line-height: 1.5em; } @@ -139,7 +144,7 @@ overflow: hidden; white-space: nowrap; } -.cm-s-default .cm-header.cm-comment{font-weight: normal; font-size: 0.9em!important; float: right; display: inline-block; color: var(--secondary);} +.cm-s-default .cm-header.cm-comment{font-weight: normal; font-size: 0.9em!important; float: right; display: inline-block; color: var(--secondary); line-height: 23px;} pre.CodeMirror-line{clear: right;}