Live Editing Prototype

This page is running the Editable Content branch, posted for community feedback and discussion. A TinyMCE instance is included; I am also testing this code with Gutenberg and CKEditor 5.

Please experiment with editing the content below, then send me your thoughts.

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 (more in GitHub)...

  • Alert positioning, especially when scrolled outside the editable container.
  • The minimized panel does not communicate state.
  • The tips have a new button that moves the cursor into the text. It needs a better label or position.

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 ""

Suspiciously long heading with two alerts. Headings should not be used for emphasis, but rather for a document outline, so if you find yourself talking this much, this probably is being used for visual formatting, not a heading.

Tables

Tables without valid headers

A table without a TH header is invalid

Outline headers do not count

Disable should be content header test inside tables

Empty table header cells

Empty table heading cells will also be flagged:  

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