demo · v143

IME style painter

Pick a TextFormat preset to see what an IME composition would look like once the EditContext reports the underline correctly. Solid, dotted, dashed, double, squiggle — each is now distinguishable in the textformatupdate event.

solid — committed segment
dotted — unselected candidate
dashed — conversion target
double thick — clause boundary
squiggle — grammar / spell

the call

const ctx = new EditContext({ text: "" });
target.editContext = ctx;

ctx.addEventListener("textformatupdate", (e) => {
  // v143: these now carry the right values; before, they were stuck at defaults
  for (const f of e.getTextFormats()) {
    paintRange(f.rangeStart, f.rangeEnd, {
      style: f.underlineStyle,       // "solid" | "dotted" | "dashed" | "wavy" | "squiggle" | "double"
      thickness: f.underlineThickness // "none" | "thin" | "thick"
    });
  }
});

why this angle

The other concept hooks a real EditContext and logs events. This one shows what those values are for — they map directly to IME conventions across CJK input methods plus the grammar / spell-check experience. Before v143, every segment ended up looking the same, which broke kanji conversion UI in particular.

see also