@react-x11/components 0.9.0 → 0.10.0

package/src/rich-text-editor/marks.ts

@@ -0,0 +1,101 @@
+// `toggleMark` from prosemirror-commands, with one difference: a mark is
+// added the way prosemirror-transform already removes one.
+//
+// Its `addMark` makes a step for each run of text that lacks the mark, and a
+// run ends where its textblock does. Bold over a document of 1,700 paragraphs
+// is 1,700 steps, and each step copies the document's top-level children:
+// quadratic in blocks, 425 ms a toggle over the sweep's 600 KB report.
+// `removeMark` joins its runs across blocks already.
+//
+// `addMarkAcross` joins consecutive inline nodes that lack the mark whatever
+// lies between them, which can only be block structure. An `AddMarkStep`
+// marks the inline nodes of its range whose parent allows the mark and leaves
+// everything else alone, and its inverse removes the mark from those same
+// nodes, every one of which lacked it. So the document, the undo, and a
+// position mapped through the transaction (a mark step maps nothing) are
+// what they were. A node that already has the mark, or cannot take it, ends
+// the run, as it did.
+
+import { toggleMark as pmToggleMark } from 'prosemirror-commands';
+import type { Attrs, Mark, MarkType } from 'prosemirror-model';
+import type { Command, EditorState } from 'prosemirror-state';
+import {
+  AddMarkStep,
+  RemoveMarkStep,
+  type Transform,
+} from 'prosemirror-transform';
+
+interface Run {
+  from: number;
+  to: number;
+}
+
+/** `tr.addMark(from, to, mark)`, one step for a run however many blocks it crosses. */
+export function addMarkAcross(
+  tr: Transform,
+  from: number,
+  to: number,
+  mark: Mark,
+): Transform {
+  const removed: Array<Run & { mark: Mark }> = [];
+  const added: Run[] = [];
+  let removing: (Run & { mark: Mark }) | null = null;
+  let adding: Run | null = null;
+  tr.doc.nodesBetween(from, to, (node, pos, parent) => {
+    if (!node.isInline) return;
+    const marks = node.marks;
+    if (
+      mark.isInSet(marks) ||
+      !parent ||
+      !parent.type.allowsMarkType(mark.type)
+    ) {
+      adding = null;
+      return;
+    }
+    const start = Math.max(pos, from);
+    const end = Math.min(pos + node.nodeSize, to);
+    // the marks this one excludes come off first, run for run as addMark does
+    const newSet = mark.addToSet(marks);
+    for (const other of marks) {
+      if (other.isInSet(newSet)) continue;
+      if (removing && removing.to === start && removing.mark.eq(other))
+        removing.to = end;
+      else removed.push((removing = { from: start, to: end, mark: other }));
+    }
+    if (adding) adding.to = end;
+    else added.push((adding = { from: start, to: end }));
+  });
+  for (const r of removed) tr.step(new RemoveMarkStep(r.from, r.to, r.mark));
+  for (const a of added) tr.step(new AddMarkStep(a.from, a.to, mark));
+  return tr;
+}
+
+/** prosemirror-commands' `toggleMark`, adding through `addMarkAcross`. */
+export function toggleMark(
+  markType: MarkType,
+  attrs: Attrs | null = null,
+  options?: Parameters<typeof pmToggleMark>[2],
+): Command {
+  const command = pmToggleMark(markType, attrs, options);
+  return (state, dispatch, view) =>
+    command(dispatch ? addingAcross(state) : state, dispatch, view);
+}
+
+/**
+ * The state as the command sees it: every transaction it starts adds marks
+ * through `addMarkAcross`. Only that transaction's own `addMark` is replaced,
+ * so nothing else in the process changes.
+ */
+function addingAcross(state: EditorState): EditorState {
+  return new Proxy(state, {
+    get(target, prop) {
+      if (prop !== 'tr') return Reflect.get(target, prop, target);
+      const tr = target.tr;
+      tr.addMark = (from: number, to: number, mark: Mark) => {
+        addMarkAcross(tr, from, to, mark);
+        return tr;
+      };
+      return tr;
+    },
+  });
+}

package/src/rich-text-editor/render.ts

@@ -147,6 +147,53 @@ function isOrdered(list: PMNode): boolean {
   return domTagOf(list.type.spec, list)?.tag === 'ol';
 }
 
+/**
+ * The element last made for a block, by its node. A block whose node, key
+ * and surroundings are what they were gets that element back, and React
+ * bails out of an element it has rendered before without so much as
+ * comparing its props — so a keystroke reconciles the block it changed,
+ * where it made and compared an element for every block in view: a hundred
+ * of them in a long document's window. Weak, so a node nobody draws any
+ * more takes its element with it.
+ */
+const madeFor = new WeakMap<
+  PMNode,
+  {
+    key: string;
+    ctx: RenderContext;
+    bctx: BlockContext;
+    at: number;
+    register: RowProps['register'] | null;
+    element: ReactElement;
+  }
+>();
+
+function blockElement(
+  node: PMNode,
+  key: string,
+  ctx: RenderContext,
+  bctx: BlockContext,
+  at: number,
+  register: RowProps['register'] | null,
+): ReactElement {
+  const made = madeFor.get(node);
+  if (
+    made &&
+    made.key === key &&
+    made.ctx === ctx &&
+    made.bctx === bctx &&
+    made.at === at &&
+    made.register === register
+  ) {
+    return made.element;
+  }
+  const element = register
+    ? h(BlockRow, { key, blockKey: key, node, ctx, bctx, at, register })
+    : h(BlockView, { key, blockKey: key, node, ctx, bctx });
+  madeFor.set(node, { key, ctx, bctx, at, register, element });
+  return element;
+}
+
 /** The blocks inside `parent`, whose content starts at `contentStart`. */
 export function renderBlocks(
   parent: PMNode,
@@ -158,7 +205,7 @@ export function renderBlocks(
   parent.forEach((child, offset) => {
     const pos = contentStart + offset;
     const key = ctx.view.keys.keyAt(pos) ?? `p${pos}`;
-    out.push(h(BlockView, { key, blockKey: key, node: child, ctx, bctx }));
+    out.push(blockElement(child, key, ctx, bctx, -1, null));
   });
   return out;
 }
@@ -288,17 +335,7 @@ export function renderBlockRange(
   doc.forEach((child, offset, index) => {
     if (index < first || index >= last) return;
     const key = ctx.view.keys.keyAt(offset) ?? `p${offset}`;
-    out.push(
-      h(BlockRow, {
-        key,
-        blockKey: key,
-        node: child,
-        ctx,
-        bctx: PLAIN,
-        at: index,
-        register,
-      }),
-    );
+    out.push(blockElement(child, key, ctx, PLAIN, index, register));
   });
   return out;
 }

package/src/rich-text-editor/toolbar.ts

@@ -30,7 +30,6 @@ import type { ReactElement, ReactNode } from 'react';
 import type { MouseEvent as X11MouseEvent } from 'react-x11';
 import { tint } from 'react-x11/style';
 import type { Style } from 'react-x11/style';
-import { toggleMark } from 'prosemirror-commands';
 import { redo, redoDepth, undo, undoDepth } from 'prosemirror-history';
 import type { Schema } from 'prosemirror-model';
 import type { Command, EditorState } from 'prosemirror-state';
@@ -48,6 +47,7 @@ import {
   toggleWrap,
 } from './commands.js';
 import type { EditorLook } from './look.js';
+import { toggleMark } from './marks.js';
 import {
   addColumnAfter,
   addColumnBefore,

package/src/rich-text-editor/virtual.ts

@@ -131,11 +131,36 @@ export function useBlockWindow(inputs: BlockWindowInputs): BlockWindowState {
   }
   heights.sync(rows, estimate);
 
+  /**
+   * One drawn block into the index, for the window's trim: it drops a block
+   * only once the index knows the height it is laid out at, and a scroll
+   * reaches the blocks behind it long before `measure` below has run — so
+   * it dropped none, and a scroll through a long document kept every block
+   * it passed mounted (the flick `<Table>` and `<Tree>` had, and the same
+   * hook: `measure` on the window's inputs).
+   */
+  const measureDrawn = useCallback(
+    (id: RowKey, at: number): boolean => {
+      const drawn = nodes.current.get(id);
+      if (!drawn || drawn.at !== at || !(drawn.node.abs.height > 0)) {
+        return false;
+      }
+      heights.measure(
+        id,
+        at,
+        drawn.node.abs.height / scaleOf(drawn.node) + gapRef.current,
+      );
+      return heights.isMeasured(at);
+    },
+    [heights],
+  );
+
   const win = useVirtualWindow({
     box,
     heights,
     rows,
     exact: false,
+    measure: measureDrawn,
     virtualizing,
     overscan: DEFAULT_OVERSCAN,
     prefetch: DEFAULT_PREFETCH,

package/src/richtext/node.ts

@@ -82,6 +82,10 @@ export interface TextRun {
   weight?: number | 'normal' | 'bold';
   style?: 'normal' | 'italic';
   color?: string;
+  /** Pixels added after every glyph — CSS's `letter-spacing`. Both text
+   *  engines take it on a span, and it passes through to them as the rest
+   *  of the ntk vocabulary does. */
+  letterSpacing?: number;
   /** Fill painted behind the run — the inline-code chip. */
   bg?: string;
   /**
@@ -101,16 +105,37 @@ export interface TextRun {
    *  sub-parameters, which a captured terminal session carries. Ignored
    *  without `underline`, which is what says the rule exists at all. */
   underlineStyle?: 'single' | 'double' | 'curly' | 'dotted' | 'dashed';
+  /** How far below the baseline the underline's top is, and how thick it
+   *  is, in the unit `size` is in — CSS's `text-underline-offset` and
+   *  `text-decoration-thickness`. Unset, two pixels below and one thick. */
+  underlineOffset?: number;
+  underlineThickness?: number;
   /** 1px rule through the x-height, in this colour — `~~del~~`. */
   strike?: string;
   /** Link target. `null` is a link still streaming in (not clickable). */
   href?: string | null;
+  /** OpenType features the run is shaped with, by tag — `{ tnum: 1 }`,
+   *  `{ liga: 0 }` — which both text engines take on a span. A run's fields
+   *  are compared by identity (`sameRuns`), so the same features should be
+   *  the same object. */
+  features?: Readonly<Record<string, number>>;
+  /** Runs that share a truthy `nowrap` have no break inside them or between
+   *  them — the text of one element with `white-space: nowrap`, the element
+   *  being the value. ntk's, from 8.13.0; CoreText breaks as it would. */
+  nowrap?: unknown;
+  /** Shaped on its own: ntk shapes a word that runs across spans shaped
+   *  alike as one, kerned and joined across them, and a run marked so is
+   *  kept apart from the ones either side of it — as CSS keeps the text
+   *  either side of an inline box's margin, border or padding. ntk's, from
+   *  8.14.2. */
+  shapeApart?: boolean;
 }
 
 /** The props `<richtext>` takes. */
 export interface RichTextProps {
-  /** The styled runs. Give a stable array identity — the layout cache and
-   *  the streaming path both key off it. */
+  /** The styled runs. Give a stable array identity where you can — the
+   *  streaming path keys off it; an equal new array keeps its layout, for
+   *  one pass over the runs (`sameRuns`). */
   runs: TextRun[];
   /** False lays the text out at its natural width, unwrapped — code. */
   wrap?: boolean;
@@ -178,6 +203,113 @@ interface FontsLike {
   ): TextLayoutLike;
 }
 
+/** Spacing that tells runs apart and moves nothing: an engine that merges
+ *  adjacent runs alike (CoreText) keeps a tab's space to itself. */
+const HAIR = 1e-6;
+
+/**
+ * The runs with each tab laid out as a space of its own, letter-spaced to
+ * the next stop: every eight spaces from its line's start, and past one
+ * less than half a "0" on (CSS Text 3, 4.2's `tab-size`). Neither engine
+ * sets a tab so — ntk has no glyph for one and draws a box, and CoreText
+ * stops every 28 points — so a tab-indented fence in `<Markdown>` or a
+ * `<Code>` block came out boxed or ragged. The space is the tab's length,
+ * so every offset holds, and the text a selection copies keeps its tabs.
+ * Placed from a first layout that has each tab as an unspaced space; a
+ * later tab on a line moves by what the ones before it added.
+ */
+function tabbedRuns(
+  fonts: FontsLike,
+  runs: TextRun[],
+  base: Record<string, unknown>,
+): TextRun[] {
+  const out: TextRun[] = [];
+  const tabs: { at: number; index: number }[] = [];
+  let units = 0;
+  for (const run of runs) {
+    const text = run.text;
+    if (!text.includes('\t')) {
+      out.push(run);
+      units += text.length;
+      continue;
+    }
+    let done = 0;
+    for (let p = text.indexOf('\t'); p >= 0; p = text.indexOf('\t', p + 1)) {
+      if (p > done) out.push({ ...run, text: text.slice(done, p) });
+      tabs.push({ at: units + p, index: out.length });
+      out.push({
+        ...run,
+        text: ' ',
+        letterSpacing: (run.letterSpacing ?? 0) + tabs.length * HAIR,
+      });
+      done = p + 1;
+    }
+    if (done < text.length) out.push({ ...run, text: text.slice(done) });
+    units += text.length;
+  }
+  const natural = fonts.layout(out, base, {});
+  const found = new Map<number, { x: number; line: number }>();
+  natural.lines.forEach((line, i) => {
+    for (const run of line.runs ?? []) {
+      found.set(run.start, { x: line.x + run.x, line: i });
+    }
+  });
+  /** The room tabs have added to each line so far. */
+  const added = new Map<number, number>();
+  for (const tab of tabs) {
+    const run = out[tab.index];
+    const face = {
+      ...base,
+      ...(run.family !== undefined ? { family: run.family } : null),
+      ...(run.size !== undefined ? { size: run.size } : null),
+      ...(run.weight !== undefined ? { weight: run.weight } : null),
+      ...(run.style !== undefined ? { style: run.style } : null),
+    };
+    const space = advanceOf(fonts, face, ' ');
+    const every = 8 * space;
+    const own = space + (run.letterSpacing ?? 0);
+    const at = found.get(tab.at) ?? natural.caretPosition(tab.at);
+    const before = added.get(at.line) ?? 0;
+    const x = at.x + before;
+    let advance = own;
+    if (every > 0) {
+      let stop = (Math.floor(x / every) + 1) * every;
+      if (stop - x < advanceOf(fonts, face, '0') / 2) stop += every;
+      advance = stop - x;
+    }
+    out[tab.index] = {
+      ...run,
+      letterSpacing: (run.letterSpacing ?? 0) + advance - own,
+    };
+    added.set(at.line, before + advance - own);
+  }
+  return out;
+}
+
+/** A character's advance in a face: between two letters, so that no engine
+ *  drops it as a line's end. Kept per engine and face: a file indented with
+ *  tabs asks for it thousands of times. */
+function advanceOf(
+  fonts: FontsLike,
+  face: Record<string, unknown>,
+  char: string,
+): number {
+  let kept = ADVANCES.get(fonts);
+  if (!kept) ADVANCES.set(fonts, (kept = new Map()));
+  const key = `${face.family}|${face.size}|${face.weight}|${face.style}|${char}`;
+  let advance = kept.get(key);
+  if (advance === undefined) {
+    advance =
+      fonts.layout([{ ...face, text: `x${char}x` } as TextRun], face, {})
+        .width -
+      fonts.layout([{ ...face, text: 'xx' } as TextRun], face, {}).width;
+    kept.set(key, advance);
+  }
+  return advance;
+}
+
+const ADVANCES = new WeakMap<FontsLike, Map<string, number>>();
+
 /**
  * The bands a highlight over `[start, end)` fills, in layout coordinates —
  * one per line, and more than one on a line that changes direction. The
@@ -212,9 +344,38 @@ function rangeBands(
   return bands;
 }
 
+/**
+ * Whether two `runs` props say the same thing. A component that builds its
+ * runs in render hands over a new array whenever it renders, whether or not
+ * the text changed — the rich text editor does on every keystroke, for
+ * paragraphs the keystroke never reached — and the array's identity was
+ * all a layout cache cleared on. A run's fields are all primitives, so one
+ * shallow pass decides it, where the layout it spares is a paragraph shaped
+ * and broken again.
+ */
+function sameRuns(a: unknown, b: unknown): boolean {
+  if (a === b) return true;
+  if (!Array.isArray(a) || !Array.isArray(b) || a.length !== b.length) {
+    return false;
+  }
+  for (let i = 0; i < a.length; i++) {
+    const x = a[i] as Record<string, unknown>;
+    const y = b[i] as Record<string, unknown>;
+    if (x === y) continue;
+    if (!x || !y) return false;
+    const keys = Object.keys(x);
+    if (keys.length !== Object.keys(y).length) return false;
+    for (const key of keys) if (x[key] !== y[key]) return false;
+  }
+  return true;
+}
+
 export class RichTextNode extends Node {
   private _layouts = new Map<string, TextLayoutLike | null>();
   private _text: string | null = null;
+  /** The runs as laid out where a tab is among them, and what from. */
+  private _tabbed: { from: TextRun[]; scale: number; to: TextRun[] } | null =
+    null;
 
   /**
    * `kind` is for a subclass registered under a name of its own — the rich
@@ -266,21 +427,36 @@ export class RichTextNode extends Node {
     let layout: TextLayoutLike | null = null;
     if (fonts) {
       const s = this._scale;
-      layout = fonts.layout(
-        this._deviceRuns(s),
-        { family: 'sans-serif', size: 14 * s },
-        {
-          maxWidth: Number.isFinite(maxWidth) ? maxWidth : undefined,
-          lineHeight: this.style.lineHeight,
-          align: this.style.textAlign,
-        },
-      );
+      const base = { family: 'sans-serif', size: 14 * s };
+      layout = fonts.layout(this._tabRuns(fonts, base, s), base, {
+        maxWidth: Number.isFinite(maxWidth) ? maxWidth : undefined,
+        lineHeight: this.style.lineHeight,
+        align: this.style.textAlign,
+      });
     }
     if (this._layouts.size > 32) this._layouts.clear();
     this._layouts.set(key, layout);
     return layout;
   }
 
+  /** The runs with their tabs set to their stops (`tabbedRuns`), found
+   *  once for a list of runs: most have none, and are handed on as they
+   *  are. */
+  private _tabRuns(
+    fonts: FontsLike,
+    base: Record<string, unknown>,
+    scale: number,
+  ): TextRun[] {
+    const from = this._runs();
+    const runs = this._deviceRuns(scale);
+    if (!runs.some((run) => run.text.includes('\t'))) return runs;
+    const kept = this._tabbed;
+    if (kept && kept.from === from && kept.scale === scale) return kept.to;
+    const to = tabbedRuns(fonts, runs, base);
+    this._tabbed = { from, scale, to };
+    return to;
+  }
+
   // --- units ---------------------------------------------------------------
   //
   // The layout, `abs` and the paint are device pixels (react-x11's
@@ -305,7 +481,20 @@ export class RichTextNode extends Node {
     const runs = this._runs();
     if (scale === 1) return runs;
     return runs.map((r) =>
-      typeof r.size === 'number' ? { ...r, size: r.size * scale } : r,
+      typeof r.size === 'number' ||
+      r.underlineOffset !== undefined ||
+      r.underlineThickness !== undefined
+        ? {
+            ...r,
+            ...(typeof r.size === 'number' ? { size: r.size * scale } : null),
+            ...(r.underlineOffset !== undefined
+              ? { underlineOffset: r.underlineOffset * scale }
+              : null),
+            ...(r.underlineThickness !== undefined
+              ? { underlineThickness: r.underlineThickness * scale }
+              : null),
+          }
+        : r,
     );
   }
 
@@ -327,15 +516,34 @@ export class RichTextNode extends Node {
   ): void {
     super.applyProps(nextProps, prevProps);
     if (
-      nextProps.runs !== prevProps.runs ||
-      nextProps.wrap !== prevProps.wrap
+      nextProps.wrap !== prevProps.wrap ||
+      !sameRuns(nextProps.runs, prevProps.runs)
     ) {
       this._layouts.clear();
       this._text = null;
+      this._tabbed = null;
       this.invalidateMeasure('content');
     }
   }
 
+  /** A new `runs` array that says what the last one said changes nothing
+   *  drawn — see `sameRuns`. */
+  override paintChanged(
+    nextProps: Record<string, unknown>,
+    prevProps: Record<string, unknown>,
+  ): boolean {
+    if (
+      nextProps.runs !== prevProps.runs &&
+      sameRuns(nextProps.runs, prevProps.runs)
+    ) {
+      return super.paintChanged(
+        { ...nextProps, runs: prevProps.runs },
+        prevProps,
+      );
+    }
+    return super.paintChanged(nextProps, prevProps);
+  }
+
   override destroySubtree(): void {
     this._layouts.clear();
     super.destroySubtree();
@@ -440,6 +648,19 @@ export class RichTextNode extends Node {
     ctx.restore();
   }
 
+  /**
+   * How far this element draws past its box: a code chip is padded two
+   * pixels past the run behind it (`paintRunBackgrounds`), and at the start
+   * or the end of a line the pad is outside the box. Said for every
+   * paragraph, chips or not — core reads it when it rebuilds the paint
+   * bounds a claim covers, and the claim after an edit that took the last
+   * chip away still has to cover the chip the frame before drew. An older
+   * core never asks.
+   */
+  override paintOverhang(): number {
+    return Math.round(2 * this.scale);
+  }
+
   /**
    * The selection band, between the run backgrounds and the ink. The default
    * is core's document selection: the band the `selectable` surface above

package/src/richtext/runs.ts

@@ -34,10 +34,10 @@ export function canFill(ctx: unknown): ctx is FillContext {
  *
  * `span` and `run` are what ntk's layout hands back and what every
  * decoration is read from: the span the run came from, markers and all, and
- * the face it was shaped with. Both are optional because react-x11's Cocoa
- * engine (2.3.x) reports only a run's geometry — `{ x, width, start, end }`
- * — and a paint that assumed the rest threw on the first paragraph on
- * macOS. A run without its span has no decoration to draw; a run without
+ * the face it was shaped with. Both are optional because an engine may
+ * report only a run's geometry — `{ x, width, start, end }` — as react-x11's
+ * Windows engine does and its Cocoa engine did before 2.22.8, and a paint
+ * that assumed the rest threw on the first paragraph on macOS. A run without its span has no decoration to draw; a run without
  * its face takes its vertical extent from the line, which both engines
  * report.
  */
@@ -102,7 +102,8 @@ let warnedSpanless = false;
  * Say so, once, when a laid-out run arrives without the span it came from:
  * every decoration is read off that span, so none will be drawn, and a
  * document that suddenly has no code chips or link underlines should not be
- * a mystery. react-x11's Cocoa engine (2.3.x) is the one that does this.
+ * a mystery. react-x11's Windows engine does this, and its Cocoa engine did
+ * before 2.22.8.
  *
  * `process` and `console` come off `globalThis` because `src/` compiles
  * with `types: []` — a Node global that wandered in would fail the build
@@ -120,7 +121,8 @@ function warnSpanless(): void {
     '@react-x11/components: the text engine handed back laid-out runs ' +
       'without their spans, so run decorations (backgrounds, underlines, ' +
       "strikethrough) and inline link hit-testing are off. react-x11's " +
-      "Cocoa text engine (2.3.x) does this; ntk's does not.",
+      'Windows text engine does this, as its Cocoa engine did before ' +
+      "2.22.8; ntk's does not.",
   );
 }
 
@@ -174,30 +176,39 @@ export function paintRunBackgrounds(
   }
 }
 
-/** The rules that sit **over** the glyphs: link underlines, strikethrough.
- *  A rule is one logical pixel thick — `scale` device pixels, so a link on a
- *  2x panel is underlined as heavily as on a 1x one, not with a hairline. */
+/** The rules drawn with a run: its underline and its strikethrough. A rule
+ *  is one logical pixel thick — `scale` device pixels, so a link on a 2x
+ *  panel is underlined as heavily as on a 1x one, not with a hairline —
+ *  and an underline two below the baseline, where the run sets neither
+ *  (`underlineThickness`, `underlineOffset`, in device pixels by now).
+ *  `rules` picks a pass: CSS draws an underline under the glyphs and a
+ *  line through over them (CSS 2.1 Appendix E), which is two passes around
+ *  the glyphs'; drawn in one, both go over. */
 export function paintRunRules(
   ctx: FillContext,
   line: LaidLine,
   dx: number,
   dy: number,
   scale = 1,
+  rules: 'under' | 'over' | 'all' = 'all',
 ): void {
   const t = ruleThickness(scale);
   for (const r of line.runs) {
     const span = r.span;
     if (!span) continue;
-    const { underline, strike } = span;
+    const underline = rules !== 'over' ? span.underline : undefined;
+    const strike = rules !== 'under' ? span.strike : undefined;
     if (underline) {
       ctx.fillStyle = underline;
       underlineRule(
         ctx,
         Math.round(dx + line.x + r.x),
-        Math.round(dy + line.baseline + 2 * t),
+        Math.round(dy + line.baseline + (span.underlineOffset ?? 2 * t)),
         Math.ceil(r.width),
         span.underlineStyle ?? 'single',
-        t,
+        span.underlineThickness === undefined
+          ? t
+          : Math.max(1, Math.round(span.underlineThickness)),
       );
     }
     if (strike) {