demo · v143
Underline gallery
The fix in v143 makes TextFormat.underlineStyle match the W3C enumeration: none, solid, dashed, dotted, wavy, and squiggle. underlineThickness matches none, thin, thick. This gallery renders every combination side by side so editors can preview them and pick the right pair for each IME state.
Drag the sample text to test contrast. Use the pickers below to compare any pair against the others.
Selected pair, big preview
preview
The quick brown fox jumps over the lazy dog.
Full matrix
Where the values come from
| style | typical use |
|---|---|
| solid thin | committed inline highlight (e.g. selection target) |
| solid thick | strong composition emphasis |
| dashed | quoted region / drag preview |
| dotted | weak suggestion |
| wavy | spell-check error |
| squiggle | grammar suggestion |
Snippet
editContext.addEventListener("textformatupdate", (e) => {
for (const fmt of e.getTextFormats()) {
// BEFORE v143: incorrect enum values returned
// AFTER v143: matches the W3C enumeration
paintRange(fmt.rangeStart, fmt.rangeEnd, {
style: fmt.underlineStyle, // "wavy" | "solid" | ...
thickness: fmt.underlineThickness, // "thin" | "thick" | "none"
color: fmt.underlineColor,
});
}
});