observablehq / feedback

Customer submitted bugs and feature requests
42 stars 3 forks source link

HTML/Markdown: Highlighting of unclosed elements too aggressive #457

Open mootari opened 2 years ago

mootari commented 2 years ago

Describe the bug

When a non-empty element without a closing tag is edited inside a Markdown or HTML cell, the opening tag is highlighted in red(-dish) while the cursor is between < and >. The resulting contrast makes the edited text barely legible.

image

Suggested solution

Highlight only the tag name, or highlight the tag only while the cursor is within the tag name.

Additional context

While Observable's editor automatically adds closing tags, this autocompletion rarely kicks in (in the intended way) during my editing behavior. I often edit large chunks of attributes where the highlight background becomes a major annoyance. I also skip the closing tag most of the time, because htl takes care of it automatically.

mythmon commented 2 years ago

For reference: both the blue text (font:13px...) and the red text (div) fail to meet WCAG contrast guidelines. The blue has a contrast of 2.42 and the red 3.82. The WCAG standard for accessible text is a contrast of 4.5 for body text, which I think this counts as.

mootari commented 2 years ago

The highlighting is also inconsistent:

  1. It will stop if the cursor is positioned after a closing parens: image image
  2. The highlight does not cover the full line height (which may be intentional, but is afaik unique to this particular case): image