demo · v143

Custom Input Method

A simulated IME built on EditContext. Type in the composition field below, pick a suggestion, and watch the edit region show the text with TextFormat underlines — dotted for provisional, solid for selected — with configurable thickness.

EditContext or TextFormat is not available in this browser. Chrome 121+ is required for EditContext; Chrome 143+ for underlineStyle and underlineThickness in TextFormat. The demo renders but live interaction may not work.

EDIT REGION (EditContext-powered)

Simulated IME Panel

Suggestions:

Underline style picker

Choose an underline style and thickness to apply to the current composition text via TextFormat. Changes are reflected live in the edit region.

Preview: composition text

Format log — applyTextFormat events

No events yet — start composing above.

How it works

  1. A div is wired to an EditContext instance. The browser treats that div as an editable region and routes IME events to the EditContext object.
  2. On textupdate, we re-render the edit region's text content from editContext.text.
  3. On composition update, we call editContext.updateTextFormats([new TextFormat({ rangeStart, rangeEnd, underlineStyle, underlineThickness })]) to paint underlines.
  4. Chrome 143 adds underlineStyle ("solid" | "dotted" | "dashed" | "wavy" | "none") and underlineThickness ("thin" | "thick" | "none") to TextFormat.
// Create an EditContext and attach it to a div
const ec = new EditContext();
const div = document.getElementById("editor");
div.editContext = ec;

// Apply IME underline via TextFormat
ec.updateTextFormats([
  new TextFormat({
    rangeStart: compositionStart,
    rangeEnd:   compositionEnd,
    underlineStyle:     "dotted", // new in Chrome 143
    underlineThickness: "thin",   // new in Chrome 143
  })
]);

See also