Make mathquill field scroll always with the cursor

Question

When the cursor is outside of viewport, in Mathquill the cursor stay hidden unless the user scroll. Normally like in normal calculator views the mathfield should auto-scroll with the cursor so the cursor is always shown to the user.

Behavior of Other Math editors : https://i.imgur.com/1JbRv2F.gifv

Behavior of Mathquill : https://i.imgur.com/9E15uS2.gifv

I have tried to check if the cursor is outside viewport then I scroll automatically but the problem is the cursor lose the focus and become a null element and I can't scroll to it.

Answer 1

I solved this problem by using the following code :

First I added a function to detect if the cursor is outside viewport (source : https://stackoverflow.com/a/15203639/3880171)

function isElementVisible(el) {
    var rect = el.getBoundingClientRect(),
        vWidth = window.innerWidth || document.documentElement.clientWidth,
        vHeight = window.innerHeight || document.documentElement.clientHeight,
        efp = function (x, y) {
            return document.elementFromPoint(x, y)
        };

    // Return false if it's not in the viewport
    if (rect.right < 0 || rect.bottom < 0
        || rect.left > vWidth || rect.top > vHeight)
        return false;

    // Return true if any of its four corners are visible
    return (
        el.contains(efp(rect.left, rect.top))
        || el.contains(efp(rect.right, rect.top))
        || el.contains(efp(rect.right, rect.bottom))
        || el.contains(efp(rect.left, rect.bottom))
    );
}

I added onKeyUp Event to mathview :

<span id="expression" onkeyup="onEditorKeyPress()"></span>

finally, the function that do the magic of scrolling is :

function scrollToCursor() {
    mathField.focus();
    var cursor = document.querySelector(".mq-cursor");
    if (cursor != null && !isElementVisible(cursor)) {
        document.querySelector(".mq-cursor").scrollIntoView();
    }
}

function onEditorKeyPress() {
    scrollToCursor();
}