@react-x11/components 0.1.0 → 0.2.1

package/src/terminal/vt/xterm.ts

@@ -0,0 +1,193 @@
+// `@xterm/headless`, as an interface.
+//
+// The emulator core is an **optional dependency**: it installs by default
+// (nothing else would bring it, and the terminal is a flagship), but an app
+// that ran `npm install --no-optional` must still type-check against this
+// package. `import type { Terminal } from '@xterm/headless'` would put the
+// package in the type graph and break exactly that app, so the slice we use
+// is written out structurally here — the rule `../../desktop-calendar/ical.ts`
+// established for `ical.js`, for the same reason.
+//
+// Everything below is public API in the 6.0.0 typings. Nothing here reaches
+// into `term._core`: xterm.js internals churn between majors, and a renderer
+// that depends on them is a renderer that breaks on an upgrade nobody made.
+
+/** What every xterm listener registration hands back. */
+export interface XtermDisposable {
+  dispose(): void;
+}
+
+/** xterm's event shape: call it with a listener, get a disposable. */
+export type XtermEvent<T> = (listener: (arg: T) => void) => XtermDisposable;
+
+/**
+ * One cell of the buffer.
+ *
+ * The `is*` predicates return numbers rather than booleans (the attribute
+ * bits, unshifted) — `isUnderline()` in particular carries the *style*
+ * variant, which is why it is read as a number here too.
+ */
+export interface XtermCell {
+  getWidth(): number;
+  getChars(): string;
+  getCode(): number;
+  getFgColor(): number;
+  getBgColor(): number;
+  getFgColorMode(): number;
+  getBgColorMode(): number;
+  isFgRGB(): boolean;
+  isBgRGB(): boolean;
+  isFgPalette(): boolean;
+  isBgPalette(): boolean;
+  isFgDefault(): boolean;
+  isBgDefault(): boolean;
+  isBold(): number;
+  isDim(): number;
+  isItalic(): number;
+  isUnderline(): number;
+  isBlink(): number;
+  isInverse(): number;
+  isInvisible(): number;
+  isStrikethrough(): number;
+  isOverline(): number;
+}
+
+export interface XtermLine {
+  readonly isWrapped: boolean;
+  readonly length: number;
+  /**
+   * `cell` is the reuse slot the diff loop depends on: one work cell for the
+   * whole viewport instead of an object per cell per frame. The API documents
+   * the reuse, so this is the intended shape rather than a trick.
+   */
+  getCell(x: number, cell?: XtermCell): XtermCell | undefined;
+  translateToString(
+    trimRight?: boolean,
+    startColumn?: number,
+    endColumn?: number,
+  ): string;
+}
+
+export interface XtermBuffer {
+  readonly type: 'normal' | 'alternate';
+  readonly cursorX: number;
+  readonly cursorY: number;
+  /** Buffer-absolute index of the line at the top of the viewport. */
+  readonly viewportY: number;
+  /** Buffer-absolute index of the top of the bottom page. */
+  readonly baseY: number;
+  readonly length: number;
+  getLine(y: number): XtermLine | undefined;
+  getNullCell(): XtermCell;
+}
+
+export interface XtermBuffers {
+  readonly active: XtermBuffer;
+  readonly normal: XtermBuffer;
+  readonly alternate: XtermBuffer;
+  readonly onBufferChange: XtermEvent<XtermBuffer>;
+}
+
+/** The modes the encoders branch on. All public in `IModes`. */
+export interface XtermModes {
+  readonly applicationCursorKeysMode: boolean;
+  readonly applicationKeypadMode: boolean;
+  readonly bracketedPasteMode: boolean;
+  readonly insertMode: boolean;
+  readonly mouseTrackingMode: 'none' | 'x10' | 'vt200' | 'drag' | 'any';
+  readonly originMode: boolean;
+  readonly reverseWraparoundMode: boolean;
+  readonly sendFocusMode: boolean;
+  readonly wraparoundMode: boolean;
+}
+
+export interface XtermFunctionIdentifier {
+  prefix?: string;
+  intermediates?: string;
+  final: string;
+}
+
+export interface XtermParser {
+  registerCsiHandler(
+    id: XtermFunctionIdentifier,
+    callback: (params: (number | number[])[]) => boolean,
+  ): XtermDisposable;
+  registerOscHandler(
+    ident: number,
+    callback: (data: string) => boolean,
+  ): XtermDisposable;
+}
+
+/** The options we set. A subset — xterm has many more, none of them ours. */
+export interface XtermOptions {
+  cols?: number;
+  rows?: number;
+  scrollback?: number;
+  cursorStyle?: 'block' | 'underline' | 'bar';
+  cursorBlink?: boolean;
+  drawBoldTextInBrightColors?: boolean;
+  allowProposedApi?: boolean;
+  convertEol?: boolean;
+  windowsPty?: unknown;
+}
+
+/**
+ * The emulator itself: bytes in, screen state out, and the events that say
+ * something changed.
+ *
+ * `onData` is the *reply* channel — DA, DSR, focus reports, mouse reports the
+ * core encodes itself — and it has to reach the pty, or an application that
+ * asks the terminal a question waits forever.
+ */
+export interface XtermTerminal {
+  readonly cols: number;
+  readonly rows: number;
+  readonly buffer: XtermBuffers;
+  readonly parser: XtermParser;
+  readonly modes: XtermModes;
+  options: XtermOptions;
+
+  readonly onBell: XtermEvent<void>;
+  readonly onBinary: XtermEvent<string>;
+  readonly onCursorMove: XtermEvent<void>;
+  readonly onData: XtermEvent<string>;
+  readonly onLineFeed: XtermEvent<void>;
+  readonly onResize: XtermEvent<{ cols: number; rows: number }>;
+  readonly onScroll: XtermEvent<number>;
+  readonly onTitleChange: XtermEvent<string>;
+  readonly onWriteParsed: XtermEvent<void>;
+
+  write(data: string | Uint8Array, callback?: () => void): void;
+  input(data: string, wasUserInput?: boolean): void;
+  resize(cols: number, rows: number): void;
+  scrollLines(amount: number): void;
+  scrollToBottom(): void;
+  scrollToTop(): void;
+  clear(): void;
+  reset(): void;
+  dispose(): void;
+}
+
+/** The module's shape: one constructor. */
+export interface XtermModule {
+  Terminal: new (options?: XtermOptions) => XtermTerminal;
+}
+
+/**
+ * Load `@xterm/headless`, or answer `null` if it is not installed.
+ *
+ * A dynamic `import()` that is allowed to fail, exactly like
+ * `../../desktop-calendar/ical.ts`: "the optional dependency is missing" is an
+ * ordinary state of a healthy machine, and the component reports it as
+ * `status: 'unavailable'` plus the `fallback`, never as a throw.
+ */
+let cached: Promise<XtermModule | null> | null = null;
+export function loadXterm(): Promise<XtermModule | null> {
+  cached ??= import('@xterm/headless')
+    .then((mod) => {
+      const m = mod as unknown as Partial<XtermModule>;
+      return typeof m.Terminal === 'function' ? (m as XtermModule) : null;
+    })
+    .catch(() => null);
+  return cached;
+}

package/src/terminal-output/hx.ts

@@ -0,0 +1,51 @@
+// `React.createElement`, typed against react-x11's host elements.
+//
+// The library writes `h(...)` rather than JSX — a convention inherited from
+// core, and worth keeping so moving code between the two repos stays a
+// rename. But `React.createElement`'s own overloads are `@types/react`'s, and
+// they describe the DOM: a `<box onKeyDown>` handler is checked against
+// React's `KeyboardEvent`, not react-x11's, and the whole props object is
+// measured against `DOMAttributes`. Everything interesting fails.
+//
+// So the element name is looked up in react-x11's own element table instead.
+// `hx('box', …)` gets `<box>`'s real props — `ev.keysym` on a key handler,
+// `onDraw` on a `<canvas>` — and `hx('div', …)` is an error, which is the
+// same guarantee the JSX namespace gives `examples/` and `test/types/`.
+import React from 'react';
+import type { Key, ReactElement, ReactNode } from 'react';
+import type { ReactX11Elements, Theme } from 'react-x11';
+
+/** The host elements, by name. */
+export type Host = ReactX11Elements;
+
+/**
+ * What every element takes on top of its own props.
+ *
+ * `theme` is honoured by **every** node — `Node.theme` merges `props.theme`
+ * over the inherited palette, whatever the kind — but react-x11's element
+ * declarations only put it on `<window>`. A widget re-declares the theme it
+ * read from context onto its own root so that `$token` values still resolve
+ * inside a `<popup>`, which is a separate window and does not inherit the
+ * trigger's node tree. So the prop is real; only the declaration is narrow.
+ */
+interface CommonProps {
+  key?: Key;
+  /** `Theme` is listed alongside the record because it is an interface, and
+   *  an interface has no implicit index signature — so the palette `useTheme`
+   *  hands back is not assignable to the record react-x11 declares. */
+  theme?: Theme | Record<string, string | number>;
+}
+
+export function hx<K extends keyof Host>(
+  type: K,
+  // `theme` is dropped from the element's own props before the merge:
+  // `<window>` and `<popup>` already declare it, narrower, and intersecting
+  // the two would demand a value satisfying both.
+  props?: (Omit<Host[K], 'theme'> & CommonProps) | null,
+  ...children: ReactNode[]
+): ReactElement {
+  // The cast is the whole point of the wrapper: `createElement`'s string
+  // overload insists on DOM props, and the signature above has already
+  // checked these against the element that will actually receive them.
+  return React.createElement(type as string, props as never, ...children);
+}

package/src/terminal-output/index.ts

@@ -0,0 +1,340 @@
+// <TerminalOutput> — a captured terminal session, rendered.
+//
+// The static, read-only sibling of `<Terminal>`, exactly as `<Code>` is the
+// static sibling of `<CodeEditor>`: bytes a program wrote to a pty go in, and
+// what the terminal would have drawn comes out. No pty, no process, no input,
+// no `write()` — there is nothing on the other end to write to.
+//
+// The composition is `<Code>`'s: one `<richtext>` for the whole capture in a
+// horizontally scrolling viewport, plus an optional line-number gutter, all
+// inside a `selectable` root. Selection, copy, Ctrl+A and PRIMARY are core's
+// since react-x11#291; what is left here is saying which parts are chrome, so
+// the gutter is `selectable={false}` and a copied log carries no numbering.
+//
+// Registers no element of its own — `<richtext>` is the shared module's, and
+// this calls `registerRichText()` at module scope the way every component
+// that draws one does.
+//
+// **Why a log is a document rather than a grid** is the design decision
+// behind the whole thing, and it is in `docs/prd-terminal-output.md` along
+// with what this model can and cannot represent. The short version: a build
+// log has lines, not rows, and no column count of its own, so rendering it on
+// a grid means inventing a `cols` the capture never had and then wrapping at
+// it. A capture that genuinely wanted a screen says so — `needsScreen` on the
+// document `onDocument` hands over — and rendering *that* is phase 2.
+import React from 'react';
+import type { ReactElement } from 'react';
+import { useTheme } from 'react-x11';
+import type { DrawnNode, MouseEvent as X11MouseEvent } from 'react-x11';
+import type { Style } from 'react-x11/style';
+
+import { ansiPalette, parseAnsi } from '../ansi/index.js';
+import type {
+  AnsiDocument,
+  AnsiInput,
+  AnsiPaletteOptions,
+} from '../ansi/index.js';
+import {
+  registerRichText,
+  RICHTEXT_ELEMENT,
+  useLinkClicks,
+  useSelectionMenu,
+} from '../richtext/index.js';
+import type { RichTextProps, TextRun } from '../richtext/index.js';
+import {
+  codeBlockLook,
+  codeBlockStyle,
+  codeTextStyle,
+} from '../codeblock/index.js';
+import { documentRuns } from './runs.js';
+import { hx } from './hx.js';
+
+const h = React.createElement;
+
+// The shared-module registration, at this component's own module scope — see
+// the note in `../richtext/node.ts`.
+registerRichText();
+
+/** What `data` accepts on top of raw bytes: a document parsed elsewhere. */
+export type TerminalOutputSource = AnsiInput | AnsiDocument;
+
+export interface TerminalOutputProps {
+  /**
+   * The capture.
+   *
+   * **Bytes are preferred over a string.** A `.toString()` on whatever
+   * boundary a reader chose cuts a multi-byte character in half, and no care
+   * downstream repairs it — the same rule `PtyHost.onData` carries for the
+   * live terminal. A `Uint8Array` (a node `Buffer` is one) is decoded across
+   * chunk boundaries, so passing an array of them is safe.
+   *
+   * An **array** is also the incremental path: when it grows and its existing
+   * elements keep their identity, only the new ones are parsed. A growing
+   * *string* is handled too, by prefix, which is cheaper than re-parsing but
+   * not free — push chunks into an array for a live tail.
+   *
+   * An `AnsiDocument` is taken as-is, for an app that parsed off the render
+   * path or is scrubbing a recording.
+   */
+  data: TerminalOutputSource;
+  /**
+   * Which renderer. `'auto'` (the default) and `'flow'` are the same today:
+   * the capture is rendered as a document of styled spans.
+   *
+   * `'screen'` — a real cell grid, for a capture that addressed the cursor —
+   * joins this union in phase 2, at which point `'auto'` starts following the
+   * bytes. Pin `'flow'` if a log should stay a document whatever it contains.
+   */
+  mode?: 'auto' | 'flow';
+  /**
+   * The palette. `<Terminal>`'s `colors` minus `cursor`, which a static
+   * render has no use for — the same object works for both.
+   *
+   * By default the ink is the theme's text colour and the block wears the
+   * same faint tint a `<Code>` block does, so a log sits in a page rather
+   * than punching a dark rectangle into it. Pass `background` and
+   * `foreground` to get a terminal pane instead.
+   */
+  colors?: AnsiPaletteOptions;
+  /** Default 8, the terminal's. */
+  tabWidth?: number;
+  /** Keep only the last N lines. Unbounded by default: the app read the
+   *  file, so the app decided how big it is. */
+  maxLines?: number;
+  /** Wrap long lines instead of scrolling horizontally. Default false —
+   *  a terminal's lines are the length they are. */
+  wrap?: boolean;
+  /** A line-number gutter. Numbers are not part of the selection, so a
+   *  copied log pastes clean. Ignored when `wrap` is on, for the reason
+   *  `<Code>` ignores it: a wrapped line puts the numbering out of register. */
+  lineNumbers?: boolean;
+  /** Mouse selection, Ctrl+A / Ctrl+C, PRIMARY. Default true. */
+  selectable?: boolean;
+  /** Selection band fill. Default: the theme accent at 35% opacity. */
+  selectionColor?: string;
+  /** Default: 0.9 × the theme `fontSize`, matching `<Code>` and
+   *  `<Markdown>`'s fenced blocks. */
+  fontSize?: number;
+  /** Default `'monospace'` — there is no theme token for it, and a capture
+   *  was made in a monospace font whatever the app is set in. */
+  monoFamily?: string;
+  /** An OSC 8 hyperlink was clicked. Without a handler the link text is
+   *  styled and inert; this component never opens anything by itself. */
+  onLink?: (href: string, ev: X11MouseEvent<DrawnNode>) => void;
+  /**
+   * The parse, whenever it changes.
+   *
+   * This is where a capture reports what it could not say in a document:
+   * `needsScreen` is true when the bytes addressed the cursor, entered the
+   * alternate screen or scrolled a region, and `dropped` names every sequence
+   * that went unhonoured with a count. `title` is the OSC 0/2 title, which is
+   * usually what a tab should be called.
+   */
+  onDocument?: (document: AnsiDocument) => void;
+  /** The root `<box>`'s style — width, margins, `flexGrow`. */
+  style?: Style | Style[];
+  'data-testname'?: string;
+}
+
+function isDocument(source: TerminalOutputSource): source is AnsiDocument {
+  return (
+    typeof source === 'object' &&
+    source !== null &&
+    !(source instanceof Uint8Array) &&
+    !Array.isArray(source) &&
+    'lines' in source
+  );
+}
+
+/** How far into a new value the append check will look before giving up and
+ *  re-parsing. A prefix compare is a memcmp and a parse is not, but neither
+ *  is free, and past this the array form is the answer. */
+const MAX_PREFIX_SCAN = 8 * 1024 * 1024;
+
+interface ParseCache {
+  source: TerminalOutputSource;
+  document: AnsiDocument;
+}
+
+/**
+ * Parse `data`, continuing the previous parse where the new value extends it.
+ *
+ * The two extendable shapes are the two ways a capture grows: an array whose
+ * earlier chunks kept their identity, and a string the app appended to. Both
+ * resume from the held reducer state, so a partial escape sequence or a
+ * half-arrived UTF-8 character at the boundary is carried rather than mangled
+ * — the same rule `<Markdown>` follows for an unterminated tail.
+ */
+function parseIncremental(
+  data: TerminalOutputSource,
+  previous: ParseCache | null,
+  options: { tabWidth?: number; maxLines?: number },
+): AnsiDocument {
+  if (isDocument(data)) return data;
+  const before = previous?.source;
+
+  if (
+    Array.isArray(data) &&
+    Array.isArray(before) &&
+    before.length < data.length
+  ) {
+    let shared = true;
+    for (let i = 0; i < before.length; i++) {
+      if (before[i] !== data[i]) {
+        shared = false;
+        break;
+      }
+    }
+    if (shared) {
+      return parseAnsi(data.slice(before.length), { from: previous!.document });
+    }
+  }
+
+  if (
+    typeof data === 'string' &&
+    typeof before === 'string' &&
+    before.length > 0 &&
+    before.length < data.length &&
+    before.length <= MAX_PREFIX_SCAN &&
+    data.startsWith(before)
+  ) {
+    return parseAnsi(data.slice(before.length), { from: previous!.document });
+  }
+
+  return parseAnsi(data, options);
+}
+
+/**
+ * A captured terminal session.
+ *
+ * ```jsx
+ * <TerminalOutput data={log} lineNumbers />
+ * ```
+ */
+export function TerminalOutput(props: TerminalOutputProps): ReactElement {
+  const {
+    data,
+    colors,
+    tabWidth,
+    maxLines,
+    wrap = false,
+    selectable = true,
+    selectionColor,
+    onDocument,
+  } = props;
+  const lineNumbers = (props.lineNumbers ?? false) && !wrap;
+  // `Theme` is an interface, so it has no implicit index signature — the same
+  // widening `hx.ts` documents for the `theme` prop.
+  const theme = useTheme() as unknown as Record<string, unknown>;
+  const menu = useSelectionMenu(selectable);
+  const links = useLinkClicks(props.onLink);
+
+  const cache = React.useRef<ParseCache | null>(null);
+  const document = React.useMemo(() => {
+    const parsed = parseIncremental(data, cache.current, {
+      tabWidth,
+      maxLines,
+    });
+    cache.current = { source: data, document: parsed };
+    return parsed;
+  }, [data, tabWidth, maxLines]);
+
+  // Reported off the render, and only when it changed: `dropped` and
+  // `needsScreen` are what an app builds a "this recording wanted a screen"
+  // notice out of, and a notice that re-fires every paint is a notice
+  // nobody keeps.
+  const report = React.useRef(onDocument);
+  report.current = onDocument;
+  React.useEffect(() => {
+    report.current?.(document);
+  }, [document]);
+
+  const look = React.useMemo(
+    () =>
+      codeBlockLook(theme, {
+        fontSize: props.fontSize,
+        monoFamily: props.monoFamily,
+      }),
+    [theme, props.fontSize, props.monoFamily],
+  );
+
+  // The colour maths (dim, inverse, conceal) resolves against the *page*
+  // rather than against the block's tint: the tint is translucent, and an
+  // inverted run should read as a hole in the page, which is what it is.
+  const palette = React.useMemo(
+    () =>
+      ansiPalette({
+        ...colors,
+        foreground: colors?.foreground ?? look.color,
+        background: colors?.background ?? String(theme.background ?? '#ffffff'),
+      }),
+    [colors, look.color, theme.background],
+  );
+
+  const runs: TextRun[] = React.useMemo(
+    () =>
+      documentRuns(document, { family: look.family, size: look.size }, palette),
+    [document, look.family, look.size, palette],
+  );
+
+  const outputProps: RichTextProps = { runs, style: codeTextStyle(look) };
+  if (!wrap) outputProps.wrap = false;
+
+  const lineCount = document.lines.length;
+  const gutter = lineNumbers
+    ? h(RICHTEXT_ELEMENT, {
+        // One richtext for all the numbers: same font, same line height, so
+        // it stays in register with the output beside it. `selectable={false}`
+        // is what keeps it out of a drag and out of the copied text.
+        selectable: false,
+        runs: Array.from({ length: lineCount }, (_, i) => ({
+          text: i === lineCount - 1 ? `${i + 1}` : `${i + 1}\n`,
+          family: look.family,
+          size: look.size,
+          color: look.dim,
+        })),
+        wrap: false,
+        style: {
+          lineHeight: look.lineHeight,
+          textAlign: 'right',
+          minWidth:
+            Math.max(String(lineCount).length, 2) * Math.ceil(look.size * 0.62),
+          marginRight: look.padding,
+          flexShrink: 0,
+        },
+      } as Record<string, unknown>)
+    : null;
+
+  const rootStyle: Style = {
+    ...codeBlockStyle(look),
+    ...(colors?.background ? { backgroundColor: colors.background } : null),
+    flexDirection: 'row',
+    alignItems: 'stretch',
+  };
+
+  return hx(
+    'box',
+    {
+      style: props.style
+        ? [
+            rootStyle,
+            ...(Array.isArray(props.style) ? props.style : [props.style]),
+          ]
+        : rootStyle,
+      // The whole feature: a drag selects across everything below, a double
+      // click takes a word, Ctrl+C copies, PRIMARY follows the release.
+      selectable,
+      selectionColor,
+      'aria-label': 'Terminal output',
+      ...menu,
+      ...links,
+      'data-testname': props['data-testname'],
+    } as Record<string, unknown>,
+    gutter,
+    hx(
+      'box',
+      { style: { overflow: 'scroll', flexDirection: 'column', flexGrow: 1 } },
+      h(RICHTEXT_ELEMENT, outputProps as unknown as Record<string, unknown>),
+    ),
+  );
+}

package/src/terminal-output/runs.ts

@@ -0,0 +1,79 @@
+// A parsed capture, as `<richtext>` runs. Pure — no React, no theme lookup,
+// no element — so what a span becomes is asserted directly.
+//
+// This is the second half of the "colour is intent, not pixels" split: the
+// parser said "ANSI 2", `../ansi/palette.ts` said which pixels that is, and
+// here it becomes a run the text layout can take.
+import { resolveAnsiColors } from '../ansi/index.js';
+import type { AnsiDocument, AnsiPalette, AnsiSpan } from '../ansi/index.js';
+import type { TextRun } from '../richtext/index.js';
+
+/** The font a capture is set in. The palette is separate because it changes
+ *  for a different reason — a theme flip rather than a size prop. */
+export interface OutputFont {
+  family: string;
+  size: number;
+}
+
+/**
+ * One span as one run.
+ *
+ * `bgFill: 'line'` is the whole reason `../richtext/` grew the field: a
+ * terminal's backgrounds have to abut exactly and fill the row, where an
+ * inline-code chip is inset and padded. Adjacent runs with the chip fill
+ * overlap by two pixels each side, which paints over the neighbour.
+ */
+export function spanRun(
+  span: AnsiSpan,
+  font: OutputFont,
+  palette: AnsiPalette,
+): TextRun {
+  const { fg, bg } = resolveAnsiColors(span, palette);
+  const run: TextRun = {
+    text: span.text,
+    family: font.family,
+    size: font.size,
+    color: fg,
+  };
+  if (bg !== undefined) {
+    run.bg = bg;
+    run.bgFill = 'line';
+  }
+  if (span.bold) run.weight = 'bold';
+  if (span.italic) run.style = 'italic';
+  if (span.underline) {
+    run.underline = span.underlineColor
+      ? resolveAnsiColors({ fg: span.underlineColor }, palette).fg
+      : fg;
+    run.underlineStyle = span.underline;
+  }
+  if (span.strike) run.strike = fg;
+  if (span.href) run.href = span.href;
+  return run;
+}
+
+/**
+ * The whole document as runs, which concatenate to exactly its text.
+ *
+ * The newline between two lines is a run of its own rather than the tail of
+ * the line before it: a line that ends in a coloured background would
+ * otherwise paint that colour across the line break, which is a stripe the
+ * terminal never drew.
+ */
+export function documentRuns(
+  document: AnsiDocument,
+  font: OutputFont,
+  palette: AnsiPalette,
+): TextRun[] {
+  const runs: TextRun[] = [];
+  const { lines } = document;
+  for (let i = 0; i < lines.length; i++) {
+    for (const span of lines[i]!.spans) {
+      if (span.text) runs.push(spanRun(span, font, palette));
+    }
+    if (i < lines.length - 1) {
+      runs.push({ text: '\n', family: font.family, size: font.size });
+    }
+  }
+  return runs;
+}