Cursor

[karhu1]

The text area issue now needs a cursor! This should move with the active word being typed and be in front of the letter that we are looking to type.

Adding smoothing to the movement should not be a concern at the moment, but if an easy implementation is found, maybe try it out!

Part of #2

[elimelt]

Cursor still needs a little bit of work, but it has come along nicely.

Major issues

• cursor should only be visible when the user's focus is on the text-area input
• since we are using a query selector to position the cursor, it is initially positioned in the top left of the screen. There is probably a bunch of ways to solve this, but the easiest might be to initially apply the appropriate className to the first letter rendered in text-area
• if the user resizes (or even moves) their browser window, the positioning of the cursor goes way off. a workaround might be to unfocus the text-area so that the cursor is invisible anyways until they click on it again, which you could then use as a trigger to reposition the cursor. this is just a workaround though, and doesn't really address the underlying problem

Minor issue

• Some of the characters are wider than others, which sometimes leads to the cursor overlapping with the next character a little bit.

[karhu1]

Major issues that were resolved:

• Cursor goes visible/hidden based on input tag's focus.
• Starts at the right position on initial render. (technically does, but certain edge cases seem to still happen. Will keep an eye out.)

Still to be fixed:

• Make cursor hidden when resizing page, and move to the right position before making visible.

[karhu1]

Small progress update...

Issues that were resolved:

• Cursor becomes hidden when resizing the page.

Issues to be fixed:

• Cursor does not move properly on initial render, and is visible for some reason.

[elimelt]

Currently the biggest issue is that when the user changes their window size, the cursor position doesn't get updated as well. This leads to the cursor being positioned incorrectly when they click on the input.

We really just need to figure out a way to get the cursor to reposition itself when the user clicks on the input box. Perhaps you could use an event listener on the input box? Or maybe directly update the cursor position in the window event listener.

[karhu1]

Issues that were resolved:

• Cursor positions properly on initial render of App.
• Cursor becomes hidden and repositions itself each time window is resized.

Because there are so many edge cases that needed to be handled with the cursor, I added comments at the top of each case in the Cursor.js file to make it easier to understand. We might revisit this issue later if problems come up, but for now the cursor seems stable.

[elimelt]

This issue should remain open until we've fully tested the resolution.

There is a site-breaking bug in production right now that causes the screen to go blank.

Also, the cursor is indeed hidden while I resize the window, but the positioning is still off by quite a lot after clicking on the text-area again.

[karhu1]

Issues that were resolved:

• Cursor no longer breaks at an empty line.

This is bad design as cursorPos does not exist when we reach an empty line. This fix should only be a temporary fix, and should act as a band aid until we revisit TextArea.