Script to focus on caret on key press

[ferrlen]

Hey all,

I've been running an old version of Trilium and wrote a script to focus on the caret when the window was showing a different part of the text, since Trilium didn't do that in the past. I updated Trilium to the latest version, but I noticed that for Ctrl Z and Ctrl Y (undo and redo) the window doesn't scroll back to the caret. Thus, one might accidentally undo or redo something and never notice it.

The following script makes Trilium focus on the caret when one wants. Additionally, I wrote it so that by pressing Shift by itself will scroll back to the caret.

Update: I slightly improved the first conditional for triggering the function

/***
Note type: JS frontend

Purpose: when the caret isn't within view, typing won't always scroll back to the caret position, so in large text notes it's not easy to discover where the caret was. In the latest version, only Ctrl + Z or Ctrl + Y will not scroll back, but regular key strokes *will* scroll back to the caret, as will Ctrl + V. 

This script will scroll to the position of the caret whenever there's a key press that's not accompanied by Alt (e.g., Alt + Tab) or Ctrl/Cmd + V, X, Y or Z.

For the script to always run when Trilium frontend loads, add the as Owned Properties to this JS frontend script note: #run=frontendStartup . Otherwise you'll have to first click on "execute" for it to work each time.

Bug: it might need more than 1 (usually 2) key downs for it to work. Not sure why, I think that if one is scrolling, the position won't be updated properly the first time there's a key press.
***/


window.addEventListener("keydown",
    function(ev) {
        // ignore key presses with alt, ctrl, possibly also ev.shiftKey
        // for Ctrl, don't ignore and do scroll for paste, cut, undo, redo (ctrl + v, x, y, z)
        if (ev.altKey || (ev.ctrlKey && !"vxzy".includes(ev.key.toLowerCase())) || (ev.key === 'CapsLock') || (ev.key === 'Meta')) {
            return;
        }


        const selection = window.getSelection();
        if (selection.rangeCount === 0) return; // no selection or caret position available

        const range = selection.getRangeAt(0);
        const rect = range.getBoundingClientRect();

        if (rect.top < 0 || rect.bottom > window.innerHeight) {
            ev.target.scrollBy({top: rect.y - 200, behavior: "smooth"});

            // for some reason, longer notes seem to only scroll in a "component scrolling-container" div, so this has to used instead of the ev.target
            let parent = ev.target.parentElement;
            while (parent && !parent.classList.contains('scrolling-container')) {
                parent = parent.parentElement;
            }
            if (parent) parent.scrollBy({top: rect.y - 200, behavior: "smooth"});
        }
    },
{capture: true}); // needs capture phase, because CKEditor intercepts and prevents propagation of bubble phase for Ctrl + keys (undo, redo, cut, paste etc.) in an editor element

[Nriver]

Little buggy but works.