Multi-line support and cursor position in overflow

[skhan02]

Hi all - this is a great project. Quick question:

1. Is there support to insert new lines? This can be helpful when entering systems of equations
2. When characters overflow and overflow is set to scroll the editor doesn't scroll to end itself. Hence the added characters and the caret position is hidden. Any thoughts on how to ensure the cursor is always in view?

[saivan]

To answer two, yes! Just set pointerevents to none in your css

[skhan02]

Thanks @saivan for the answer. I had updated my second question. My question was:

2. When characters overflow and overflow is set to scroll the editor doesn't scroll to end itself. Hence the added characters and the caret position is hidden. Any thoughts on how to ensure the cursor is always in view?

Any thoughts on it? Thanks!

[saivan]

You can do that reasonably easily too. Just get the position of the Cursor and when a key is pressed, set the scroll offset in JavaScript. You might want to make a pr for that because it sounds like useful functionality

[skhan02]

Great will defn pr it once ready, @saivan . I can set the scroll offset for the element after a symbol/string is inserted. I was able to compile and run it. Looked through engine and guppy - any idea how i can get the current cursor position?

[JMSS-Unknown]

This is probably not a good way to go about it but up until now I had used

function getGuppyCursor() {
    return (document.getElementsByClassName("cursor main_cursor")[0]
        || document.getElementsByClassName("mord main_cursor")[0])
}

[saivan]

You can then get the bbox of the cursor to find out where it is

[skhan02]

Thanks for the insight @JMSS-Unknown and @saivan. Had some issues with build (local npm issue) so I ended up coming up with a solution using the existing guppy apis. This works really well. Note it uses jquery but can defn do it with vanilla js.

1. Add a event listener for change event name
   Guppy("guppyTest").event("change", onEditorChange)

2. Implement event handler
   function onEditorChange(){
document.getElementById("guppyTest").scrollLeft = 0; // reset scroll
var a = $(".main_cursor")[0]; // or use getGuppyCursor() from earlier comment
document.getElementById("guppy1").scrollLeft = $a.offset().left;
}

Closing for now since guppy instances can be used for multi-line support