bustle/mobiledoc-kit

How to get input-like overflow scroll behavior?

Closed this issue · 2 comments

In some places we want to use mobiledocs as a single-line text input. To accomplish this we set white-space: nowrap to prevent wrapping in the document, as well as some other styles to make the editor appear similar to our other input elements.

However there's a problem with the text in the editor overflows the container. In normal <input> elements, they automatically track the cursor as you type. Like this:
gif demonstration

I thought maybe this was impossible with contenteditable elements, however the accepted answer on this Stackoverflow question works fine.

What am I missing? Is this even possible to do with Mobiledoc editor?

I should have posted a gif of a single-line mobiledoc input as well, sorry. Here it is:
gif of problem

The only way to make the editor scroll to the right (that I'm aware of) is to hit command+right_arrow

I finally broke down and added a cursorDidChange hook to calculate the pixel offset of the cursor (using a modified version of this) and then call el.scroll(x, 0) on the appropriate element, which works fine if not being a pita