Today I learned that the editor only works properly when the last
<chunk> tag has a <br> inside it at the end. This last <br> is
invisible and is automatically created by all major browsers when you
use the enter key to type a newline at the end of a story to "prevent
the element from collapsing". When there's more than one <br> at the
end of the last <chunk>, only the last of those <br>s is invisible, so
if you have three <br>s, they are rendered as two newlines. This only
applies to the last <chunk>, so if the second last <chunk> has three
<br>s at the end, they are still rendered as three newlines. Since
the browser is really insistent on doing this, this commit mostly deals
with dynamically creating and deleting <br> tags at the ends of <chunk>
tags as needed to provide a consistent experience, and making sure
that all <br> tags actually go inside of <chunk> tags to prevent
breaking the editor. The latter behaviour was exhibited by Chrome and
caused a bug when you added a newline at the end of your story using
the editor.
For some reason the original way only works in Safari after pressing the
refresh button. It did not work if you typed the URL into the address
bar in Safari without refreshing afterwards.
I don't know why Firefox is so weird but we need to do this or else
some chunks don't update properly when you edit multiple chunks at the
same time.
One example of when this happened is when you have a story with at least
one chunk other than the prompt. Then, if you select the entire story
except for the first few characters of the prompt and then delete the
selected characters, and then defocus the story to save your changes,
the last chunk in the story will not register as having been deleted,
which you can verify if you refresh the page.
Another example. If your story has a chunk with no trailing newlines
followed by a chunk with exactly two leading newlines, if you delete
the first newline from the latter chunk and then defocus to save your
edits, the newline will be there again when you refresh the page.
There was an unneeded scrollbar growing as you were expanding towards the top of the screen, now this scrollbar is hidden until you actually need it making the UI look a bit more polished.
So that if the animation is triggered multiple times you don't have to
wait for all the animations to be performed one after the other before
you can finally manually scroll.
For stories that are long enough for the scroll bar to appear on the
screen, Firefox on desktop would originally only allow you to start
editing if you click on the actual text, i.e. you couldn't click on the
blank part of a line. This behaviour is now fixed.
It wouldn't trigger any events originally when you click on parts of the
story text area that didn't contain any text, e.g. on a blank line or on
the blank part of a line to the right of the actual text.
If its invisible then it will be harder for new players to know its there. Now its less visible when its not selected, a little more visible when the box is selected, and fully visible when your hovering over.
