Cleaning up fields to reduce some of the nonsense and even tune up Tiny at the same time. The 'review' tag is the master template of parsing a string of text.
...
Here's a review with <br> which is a line break.
... ...
That was a BR. Hopefully the browser broke the line!
Here's a review with text within and a background #FFD. It's on its own line even though there's no line breaks around it. Also it ought to change colors for focus/blur.
Here's a review with a <p> which starts a paragraph. ...
...
Second line also has a <p>.
It looks like this goes in the review all right...
(But this text, which inside the HTML seems to be out of the review, ends up inside too. Why?)
Because, ending the paragraph is needed. Then you can end the review tag.
Now we're "out" of the review.
Make a note; typing a <p> inside a review tag doesn't get 'out'. You don't get to unwrap a paragraph that way. choose!
2. HTML/text/words
Next thing, the html and the text.
Selection: empty
aaaa bb bb cccc
HTML (tag soup):
Text (no styling, line breaks preserved):
The text is broken up, via regular expressions, into words (clumps of non-whitespace). Since they're in a nice list, we can keep track of changes to the list during editing and color them. Each individual one is editable too and will feed back changes directly.
3. Storage
Next, making sure that LocalStorage works. These should automatically show the same value once edited: