zadam/trilium
1
1
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2024-09-20 23:55:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

toc scrolls smoothly

Browse source
This commit is contained in:
SnnBcd xt 2023-05-17 10:18:58 +00:00
parent d7d98b29a7
commit 085c0e76ca
1 changed files with 5 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
src/public/app/widgets/toc.js
View file

@ -176,7 +176,9 @@ export default class TocWidget extends RightPanelWidget {
const headingElement = $container.find(":header")[headingIndex];
if (headingElement != null) {
headingElement.scrollIntoView();
headingElement.scrollIntoView({
behavior: 'smooth'
});
}
} else {
const textEditor = await this.noteContext.getTextEditor();
@ -192,50 +194,9 @@ export default class TocWidget extends RightPanelWidget {
// navigate (note that the TOC rendering and other TOC
// entries' navigation could be wrong too)
if (headingNode != null) {
// Setting the selection alone doesn't scroll to the
// caret, needs to be done explicitly and outside of
// the writer change callback so the scroll is
// guaranteed to happen after the selection is
// updated.
// In addition, scrolling to a caret later in the
// document (ie "forward scrolls"), only scrolls
// barely enough to place the caret at the bottom of
// the screen, which is a usability issue, you would
// like the caret to be placed at the top or center
// of the screen.
// To work around that issue, first scroll to the
// end of the document, then scroll to the desired
// point. This causes all the scrolls to be
// "backward scrolls" no matter the current caret
// position, which places the caret at the top of
// the screen.
// XXX This could be fixed in another way by using
// the underlying CKEditor5
// scrollViewportToShowTarget, which allows to
// provide a larger "viewportOffset", but that
// has coding complications (requires calling an
// internal CKEditor utils funcion and passing
// an HTML element, not a CKEditor node, and
// CKEditor5 doesn't seem to have a
// straightforward way to convert a node to an
// HTML element? (in CKEditor4 this was done
// with $(node.$) )
// Scroll to the end of the note to guarantee the
// next scroll is a backwards scroll that places the
// caret at the top of the screen
model.change(writer => {
writer.setSelection(root.getChild(root.childCount - 1), 0);
$(textEditor.editing.view.domRoots.values().next().value).find(':header')[headingIndex].scrollIntoView({
behavior: 'smooth'
});
textEditor.editing.view.scrollToTheSelection();
// Backwards scroll to the heading
model.change(writer => {
writer.setSelection(headingNode, 0);
});
textEditor.editing.view.scrollToTheSelection();
}
}
}