Live editing prototype

This is an editable region -- click in to see the TinyMCE interface appear. Add and delete content, create and fix issues. The easiest way to get a new tip to appear is to type a sentence in caps lock.

Some things you might notice that I'd especially like thoughts on:

• Tips will fade out when you click into paragraphs, to prevent tips covering where you are typing.
• There's a fairly long hesitation (~1s) between checks. This greatly helps with performance, but...is it a good balance of performance and frequency?

Some things that are unfinished but known...

• Tip drawing and fade-out when outside the editable container is half-finished -- you may notice it taking a moment for tips to align, or offscreen tips messing with the page's scrollbar.
• The minimized main panel looks the same when it is minimized and when it is off. I need to add a third state to differentiate.
• The tips have a new button after the [?] that moves the cursor to where the issue is. That probably needs a better label or position. I have considered keeping it as an icon and putting it up at the top of the modal with the [x], or changing it to spell out a label like "Edit text" or "Select issue."

Sample issues

https://This link is going to wrap on to a lot of lines because it has a lot of text, and it is going to trip the https test because it starts with https.

This floating image has no alt text:

This is a big paragraph with several alerts that place their tips fairly close together:, click here, and https://princeton.edu, and ""

Tables

Tables without valid headers

Empty table header cells

Position collisions

• There are five alerts here and the buttons don't fit; the collision detection is moving them off each other too far, so several are only reachable via the main panel "next" button. Need to improve collision handling.
• click here
• click here
• click here
• click here
• click here