@textui/core 0.1.0 → 0.2.0

package/src/util/markdown.ts

@@ -1,4 +1,7 @@
-import type { MarkdownLayoutOptions, MarkdownRow, MarkdownRun } from '../types/markdown.js';
+import type {
+  MarkdownAlign, MarkdownLayoutOptions, MarkdownRow, MarkdownRun,
+} from '../types/markdown.js';
+import type { TableRules } from '../types/style.js';
 import type { StyleColor } from '../types/style.js';
 import { graphemes, stringWidth, wrapText } from './text.js';
 
@@ -141,14 +144,18 @@ export function layoutMarkdown(
   source: string | string[],
   options: MarkdownLayoutOptions,
 ): MarkdownRow[] {
-  const { width, bullet = '-', quoteBar = '|', ruled = true } = options;
+  const { width, bullet = '-', quoteBar = '|', ruled = true, tableRules = 'header' } = options;
   const lines = Array.isArray(source) ? source : source.replace(/\r\n/g, '\n').split('\n');
   const rows: MarkdownRow[] = [];
   let fence = 0;
   let inFence = false;
   let language = '';
+  let table = 0;
 
-  for (const line of lines) {
+  // By index rather than by value: a table is only a table because of the line
+  // *after* its header, so this loop has to be able to look at it.
+  for (let at = 0; at < lines.length; at++) {
+    const line = lines[at] as string;
     const marker = /^\s*```(\S*)\s*$/.exec(line);
     if (marker) {
       // An open fence is laid out as a fence from the moment it opens. A turn
@@ -166,6 +173,24 @@ export function layoutMarkdown(
       continue;
     }
 
+    // Before headings and lists, because a cell may contain either and the
+    // pipes are what decide. After fences, because inside one nothing is.
+    if (line.includes('|') && DIVIDER.test(lines[at + 1] ?? '')) {
+      const align = cellsOf(lines[at + 1] as string).map(alignOf);
+      const body: string[][] = [];
+      let end = at + 2;
+      while (end < lines.length) {
+        const next = lines[end] as string;
+        if (!next.includes('|') || next.trim() === '') break;
+        body.push(cellsOf(next));
+        end++;
+      }
+      rows.push(...tableRows(cellsOf(line), body, align, width, table, tableRules));
+      table++;
+      at = end - 1;
+      continue;
+    }
+
     const heading = /^(#{1,6})\s+(.*)$/.exec(line);
     if (heading) {
       const level = (heading[1] as string).length;
@@ -212,6 +237,180 @@ export function layoutMarkdown(
   return rows;
 }
 
+/**
+ * The `|---|:--:|---:|` line, which is what makes the line above it a header.
+ *
+ * A row of pipes on its own is a row of pipes - `a | b` is arithmetic or a
+ * shell pipeline far more often than it is a one-column table, and treating
+ * every line with a bar in it as a table is how prose ends up in a grid.
+ */
+const DIVIDER = /^\s*\|?\s*:?-+:?\s*(\|\s*:?-+:?\s*)*\|?\s*$/;
+
+/**
+ * One line into its cells.
+ *
+ * The outer pipes are optional in every dialect anybody writes, so they are
+ * stripped rather than required. `\|` is an escaped bar inside a cell and not
+ * a boundary - which is the only way to put a bar in a table at all.
+ */
+function cellsOf(line: string): string[] {
+  const trimmed = line.trim().replace(/^\|/, '').replace(/\|$/, '');
+  return trimmed
+    .split(/(?<!\\)\|/)
+    .map((cell) => cell.replace(/\\\|/g, '|').trim());
+}
+
+function alignOf(spec: string): MarkdownAlign {
+  const left = spec.startsWith(':');
+  const right = spec.endsWith(':');
+  if (left && right) return 'center';
+  return right ? 'right' : 'left';
+}
+
+/**
+ * Cut and pad one cell to exactly `width`, keeping the styles.
+ *
+ * Cut, never wrapped: a table row has to stay one row tall or the document's
+ * length stops being a count of rows, and every viewer that windows this
+ * scrolls to the wrong place.
+ */
+function fitRuns(runs: MarkdownRun[], width: number, align: MarkdownAlign): MarkdownRun[] {
+  const out: MarkdownRun[] = [];
+  let used = 0;
+  for (const run of runs) {
+    if (used >= width) break;
+    const room = width - used;
+    if (stringWidth(run.text) <= room) {
+      out.push(run);
+      used += stringWidth(run.text);
+      continue;
+    }
+    // The ellipsis costs a cell, so it is only worth it when there is a cell
+    // to spend: at a width of one, a bare glyph says less than the letter.
+    const keep = room > 1 ? room - 1 : room;
+    const cut: string[] = [];
+    let taken = 0;
+    for (const g of graphemes(run.text)) {
+      const w = stringWidth(g);
+      if (taken + w > keep) break;
+      cut.push(g);
+      taken += w;
+    }
+    out.push({ ...run, text: room > 1 ? `${cut.join('')}\u2026` : cut.join('') });
+    used = width;
+    break;
+  }
+
+  const slack = Math.max(0, width - used);
+  if (slack === 0) return out;
+  const before = align === 'right' ? slack : align === 'center' ? Math.floor(slack / 2) : 0;
+  const after = slack - before;
+  return [
+    ...(before ? [{ text: ' '.repeat(before) }] : []),
+    ...out,
+    ...(after ? [{ text: ' '.repeat(after) }] : []),
+  ];
+}
+
+/**
+ * A whole table, measured once.
+ *
+ * The columns are as wide as their widest cell wants, and when that is more
+ * than the space there is they give it back in proportion - the widest loses
+ * the most, because it is the one with the most to lose. Three cells is the
+ * floor: below that a column is an ellipsis and a space, which is narrower
+ * than saying nothing.
+ */
+function tableRows(
+  head: string[],
+  body: string[][],
+  align: MarkdownAlign[],
+  width: number,
+  table: number,
+  rules: TableRules,
+): MarkdownRow[] {
+  const columns = Math.max(head.length, align.length, ...body.map((r) => r.length));
+  const at = (row: string[], i: number): string => row[i] ?? '';
+  const runsFor = (text: string, bold: boolean): MarkdownRun[] =>
+    inlineRuns(text).map((run) => (bold ? { ...run, bold: true } : run));
+
+  const natural = Array.from({ length: columns }, (_, i) => Math.max(
+    stringWidth(at(head, i)),
+    ...body.map((row) => stringWidth(at(row, i))),
+    1,
+  ));
+
+  // A rule between every pair of columns, and a box around the lot. The box
+  // is what makes it read as a table rather than as text that happens to line
+  // up - which matters most on a theme that draws no borders anywhere else,
+  // because there a table with only its columns ruled has nothing to say it
+  // ended.
+  const gaps = (columns - 1) * SEPARATOR + OUTER;
+  const room = width > 0 ? Math.max(columns * MIN_COLUMN, width - gaps) : Infinity;
+  const wanted = natural.reduce((sum, n) => sum + n, 0);
+  const widths = wanted <= room
+    ? natural
+    : share(natural, room);
+
+  const line = (cells: string[], part: 'head' | 'body'): MarkdownRow => ({
+    kind: 'table',
+    table,
+    part,
+    widths,
+    align,
+    cells: widths.map((w, i) => fitRuns(
+      runsFor(at(cells, i), part === 'head'),
+      w,
+      align[i] ?? 'left',
+    )),
+  });
+
+  const edge = (part: 'top' | 'rule' | 'bottom'): MarkdownRow =>
+    ({ kind: 'table', table, part, cells: [], widths, align });
+
+  return [
+    edge('top'),
+    line(head, 'head'),
+    edge('rule'),
+    // A rule between every pair, when the theme asked for them. Between, not
+    // after: a rule under the last row and then the box's own bottom edge is
+    // two lines saying the same thing.
+    ...body.flatMap((row, i) => (rules === 'all' && i > 0
+      ? [edge('rule'), line(row, 'body')]
+      : [line(row, 'body')])),
+    edge('bottom'),
+  ];
+}
+
+/** Cells between two columns: a space, a rule, a space. */
+const SEPARATOR = 3;
+/** The box: a rule and a space at each end. */
+const OUTER = 4;
+const MIN_COLUMN = 3;
+
+/**
+ * Shrink columns into `room`, proportionally, without losing a cell to
+ * rounding.
+ *
+ * The remainder goes to the widest columns one at a time rather than to the
+ * first: handing every leftover cell to column one is what turns a five-column
+ * table into one wide column and four ellipses.
+ */
+function share(natural: number[], room: number): number[] {
+  const total = natural.reduce((sum, n) => sum + n, 0);
+  const scaled = natural.map((n) => Math.max(MIN_COLUMN, Math.floor((n / total) * room)));
+  let spare = room - scaled.reduce((sum, n) => sum + n, 0);
+  const order = natural
+    .map((n, i) => [n, i] as const)
+    .sort((a, b) => b[0] - a[0])
+    .map(([, i]) => i);
+  for (let i = 0; spare > 0; i = (i + 1) % order.length) {
+    scaled[order[i] as number] = (scaled[order[i] as number] as number) + 1;
+    spare--;
+  }
+  return scaled;
+}
+
 /** Every run's text, for a measurement or a test that does not care how it looks. */
 export function runsToText(runs: MarkdownRun[]): string {
   return runs.map((run) => run.text).join('');

package/src/util/paths.ts

@@ -51,7 +51,7 @@ export function segments(path: string): string[] {
  * Canonical map key for a path: segments joined, no sigil.
  *
  * The segments are re-escaped on the way out. Everything downstream - the
- * store's own walk, `ancestorKeys`, `matchKey` - splits a key on `/`, so a
+ * store's own walk, `keysTouch`, `matchKey` - splits a key on `/`, so a
  * segment that legitimately contains one (a URI used as a key, a filename with
  * a slash) has to stay escaped or it silently becomes several segments and the
  * value lands somewhere nobody looks.
@@ -98,25 +98,22 @@ export function parentKey(key: string): string | null {
   return i === -1 ? (key === '' ? null : '') : key.slice(0, i);
 }
 
-/** Every ancestor key of `key`, closest first, including `''` for the root. */
-export function ancestorKeys(key: string): string[] {
-  const out: string[] = [];
-  let cur = key;
-  for (;;) {
-    const p = parentKey(cur);
-    if (p === null) break;
-    out.push(p);
-    cur = p;
-    if (p === '') break;
-  }
-  return out;
-}
-
 export function isDescendantKey(key: string, ancestor: string): boolean {
   if (ancestor === '') return key !== '';
   return key.startsWith(ancestor + '/');
 }
 
+/**
+ * Whether two concrete keys can affect the same subscribed value.
+ *
+ * A write to a descendant changes the ancestor object a subscriber reads, and a
+ * write to an ancestor may replace the whole subtree below it. This relation is
+ * symmetric and avoids building ancestor lists in hot subscription checks.
+ */
+export function keysTouch(a: string, b: string): boolean {
+  return a === b || isDescendantKey(a, b) || isDescendantKey(b, a);
+}
+
 export function hasWildcard(path: string): boolean {
   return path.includes('*');
 }