observablehq
HTML/Markdown: Highlighting of unclosed elements too aggressive
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.
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.
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.
The highlighting is also inconsistent:
- It will stop if the cursor is positioned after a closing parens:
- The highlight does not cover the full line height (which may be intentional, but is afaik unique to this particular case):
