@stenographers/markdown 0.0.0-stage → 0.4.0

package/src/html.js

@@ -0,0 +1,80 @@
+// What a piece of Markdown means in HTML: mdast-util-to-hast's translation (the one remark-rehype makes in BelType's belt), written as markup and parsed by the browser, so raw HTML split across several mdast nodes (`<span>`, text, `</span>`) becomes the one element it is.
+import { toHast } from 'mdast-util-to-hast';
+
+const VOID = new Set(['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'link', 'meta', 'source', 'track', 'wbr']);
+const escText = (s) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+const escAttr = (s) => s.replace(/&/g, '&amp;').replace(/"/g, '&quot;');
+// hast's property names as HTML's attribute names, for the properties mdast-util-to-hast writes.
+const attrName = (k) => (k === 'className' ? 'class' : k === 'htmlFor' ? 'for' : k.startsWith('aria') ? `aria-${k.slice(4).toLowerCase()}` : k.startsWith('data') ? k.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`) : k.toLowerCase());
+
+/** The markup of a hast tree. */
+export function htmlOf(node) {
+  if (node.type === 'text') return escText(node.value);
+  if (node.type === 'raw') return node.value;
+  if (node.type === 'comment') return `<!--${node.value}-->`;
+  const inner = (node.children ?? []).map(htmlOf).join('');
+  if (node.type !== 'element') return inner;
+  const attrs = Object.entries(node.properties ?? {}).filter(([, v]) => v != null && v !== false)
+    .map(([k, v]) => (v === true ? ` ${attrName(k)}=""` : ` ${attrName(k)}="${escAttr(Array.isArray(v) ? v.join(' ') : String(v))}"`)).join('');
+  return VOID.has(node.tagName) ? `<${node.tagName}${attrs}>` : `<${node.tagName}${attrs}>${inner}</${node.tagName}>`;
+}
+
+// A container directive as to-hast draws an unknown node (its element from `data`, its children), with core's title paragraph first when ./directive.js found one.
+function containerDirective(state, node) {
+  const children = state.all(node);
+  if (node.data?.directiveTitle != null) children.unshift({ type: 'element', tagName: 'p', properties: { className: ['directive-title'] }, children: [{ type: 'text', value: node.data.directiveTitle }] });
+  const el = { type: 'element', tagName: 'div', properties: {}, children };
+  state.patch(node, el);
+  return state.applyData(node, el);
+}
+
+/** The hast of an mdast tree. A text directive has no HTML of its own here (BelType's directive handlers give it one; the plan's round 3), so it is a `span`: inline, it stays in its paragraph, where to-hast's default would make it a `div` the browser closes the paragraph for. */
+export function hastOf(mdast) {
+  (function inline(node) {
+    if (node.type === 'textDirective') node.data = { ...node.data, hName: node.data?.hName ?? 'span' };
+    node.children?.forEach(inline);
+  })(mdast);
+  return toHast(mdast, { allowDangerousHtml: true, handlers: { containerDirective } });
+}
+
+/** The DOM nodes an mdast node stands for in HTML. */
+export function domOf(mdast) {
+  const t = document.createElement('template');
+  t.innerHTML = htmlOf(hastOf(mdast));
+  return [...t.content.childNodes];
+}
+
+/** Whether a DOM node is what an mdast node means in HTML (the test that lets an unchanged node keep its bytes), the whitespace between its blocks aside (`bare`). */
+export function means(node, mdast) {
+  const dom = domOf(mdast).filter((n) => n.nodeType !== 3 || /\S/.test(n.data) || n.data === node.data);
+  return dom.length === 1 && bare(dom[0]).isEqualNode(bare(node));
+}
+
+// The elements whose neighbours' whitespace is layout, not text: blocks and the parts of lists and tables.
+const STRUCTURE = new Set(['address', 'article', 'aside', 'blockquote', 'details', 'div', 'dl', 'dd', 'dt', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'header', 'hr', 'li', 'main', 'menu', 'nav', 'ol', 'p', 'pre', 'section', 'table', 'thead', 'tbody', 'tfoot', 'tr', 'td', 'th', 'caption', 'ul']);
+const layout = (n) => !n || (n.nodeType === 1 && STRUCTURE.has(n.localName));
+// Layout whitespace is HTML's own (space, tab, line ends); a no-break space or an em space is text.
+const LAYOUT = /^[ \t\n\r\f]+$/;
+
+/** A copy of an element, its count left out (`uncounted`), without the whitespace between its blocks, which mdast-util-to-hast writes as line ends and an editor's serializer need not write at all: what a container's read-back compares. Whitespace with no element beside it (a cell's or a paragraph's whole text) is kept: it is content. */
+export function bare(el) {
+  const copy = uncounted(el).cloneNode(true);
+  copy.normalize?.();
+  // A preformatted block's whitespace is its text.
+  (function walk(p) {
+    if (p.localName === 'pre') return;
+    for (const c of [...p.childNodes]) {
+      if (c.nodeType === 3 && LAYOUT.test(c.data) && STRUCTURE.has(p.localName) && (c.previousSibling || c.nextSibling) && layout(c.previousSibling) && layout(c.nextSibling)) c.remove();
+      else if (c.nodeType === 1) walk(c);
+    }
+  })(copy);
+  return copy;
+}
+
+// A footnote reference's number and id are the document's count, not the reference's meaning: a paragraph read alone counts from one.
+export function uncounted(node) {
+  if (node.nodeType !== 1 || !node.querySelector('a[data-footnote-ref]')) return node;
+  const copy = node.cloneNode(true);
+  for (const a of copy.querySelectorAll('a[data-footnote-ref]')) { a.textContent = ''; a.removeAttribute('id'); }
+  return copy;
+}

package/src/list.js

@@ -0,0 +1,119 @@
+// The list's stenographers (the studio's notes/markdown-plan.md, "The list item, worked through"): a list over its old items, an item over its old blocks. A list pairs its new items with the old (the common head and tail by meaning, the middle in order when the counts match) and writes each pair over the old slice. An item without a partner is written fresh at the marker and content indent of the item above it (the one below when it is first), numbered one past the one above in an ordered list, the items below left as they are; an old item without a partner is gone with its gap. A list turned tight or loose gets a blank line between its items or loses them, and nothing else of the gaps changes. An item's task box is written over the old box's bytes when its state changed.
+import { isBlock, sliceOf, span, start, end, writeNode, writeFresh } from './write.js';
+import { parseMarkdown } from './parse.js';
+import { domOf, bare } from './html.js';
+
+// Tight or loose, as mdast-util-to-hast decides it: a list is loose when it or any item is spread, an item whose `spread` is unknown when it holds more than one child.
+const looseItem = (item) => (item.spread == null ? item.children.length > 1 : item.spread);
+const looseList = (list) => list.spread || list.children.some(looseItem);
+const boxOf = (li) => (li.classList.contains('task-list-item') ? li.querySelector('input[type="checkbox"]') : null);
+// An item's marker as its first line holds it, with the spaces up to its content.
+const markerOf = (k, ctx) => { const m = /^(?:[-*+]|\d{1,9}[.)])(?: {1,4})?/.exec(sliceOf(ctx, k))[0]; return /\s$/.test(m) ? m : `${m} `; };
+// The marker after another's: an ordered list counts on, keeping the delimiter and the spaces.
+const bump = (marker) => marker.replace(/^\d+/, (d) => +d + 1);
+
+export function list(el, md, ctx) {
+  const items = [...el.children].filter((c) => c.localName === 'li');
+  const old = md.children;
+  const n = items.length, m = old.length;
+  if (!n) return null;
+  const loose = items.some((li) => [...li.children].some((c) => c.localName === 'p'));
+  const turned = loose !== looseList(md);
+  // The old items as the HTML of the list turned tight or loose as it now is, so an item that did not change is the same element in both.
+  const oldLis = [...domOf({ ...md, spread: loose, children: old.map((k) => ({ ...k, spread: loose })) })[0].children].filter((c) => c.localName === 'li');
+  const same = (i, j) => !ctx.force && bare(items[i]).isEqualNode(bare(oldLis[j]));
+  let h = 0;
+  while (h < n && h < m && same(h, h)) h++;
+  let t = 0;
+  while (t < n - h && t < m - h && same(n - 1 - t, m - 1 - t)) t++;
+  // Each new item with its old partner or null; a middle that does not pair has no partners, and its old items are out.
+  const pairs = items.map((li, i) => [li, i < h ? old[i] : i >= n - t ? old[m - n + i] : n === m ? old[i] : null]);
+  const gaps = old.slice(1).map((k, i) => span(ctx, end(old[i]), start(k)));
+  const defaultGap = looseList(md) ? '\n\n' : '\n';
+  const below = pairs.find(([, k]) => k)?.[1] ?? old[0];
+  let out = span(ctx, start(md), start(old[0])), gap = gaps[0] ?? defaultGap, last = null;
+  for (const [i, [li, k]] of pairs.entries()) {
+    let w, marker;
+    if (k) {
+      w = writeNode(li, { text: sliceOf(ctx, k), column: k.position.start.column - 1, defs: ctx.defs, markdown: ctx.markdown }, ctx);
+      if (w == null) return null;
+      marker = markerOf(k, ctx);
+      // The last old item has no gap after it; the one before it has the list's last.
+      gap = gaps[old.indexOf(k)] ?? gaps.at(-1) ?? defaultGap;
+    } else {
+      marker = last ? bump(last) : markerOf(below, ctx);
+      w = freshItem(li, marker, loose, ctx);
+    }
+    last = marker;
+    // Tight to loose: a blank line in a gap that has none; loose to tight: the blank lines out.
+    const g = !turned ? gap : loose ? (/\n[ \t]*\n/.test(gap) ? gap : gap.replace('\n', '\n\n')) : gap.replace(/\n[ \t]*(?=\n)/g, '');
+    out += w + (i + 1 < n ? g : '');
+  }
+  // Read back as a whole: a gap inside an item can keep a list loose that was turned tight, and one item cannot be loose at all.
+  // ponytail: such a list changes lane; removing the blank lines between an item's own blocks would keep it Markdown.
+  out += span(ctx, end(old.at(-1)), end(md));
+  const back = parseMarkdown(ctx.defs ? `${out}\n\n${ctx.defs}` : out, ctx.markdown).children[0];
+  const dom = back && domOf(back).find((d) => d.nodeType === 1);
+  return dom && bare(dom).isEqualNode(bare(el)) ? out : null;
+}
+
+// An item with no old bytes: its neighbour's marker, its blocks written fresh (a tight item's text is the one paragraph), the lines after the first at the content indent.
+function freshItem(li, marker, loose, ctx) {
+  li = li.cloneNode(true);
+  const box = boxOf(li);
+  const head = box ? `[${box.hasAttribute('checked') ? 'x' : ' '}] ` : '';
+  const body = blocksOf(li).map((b) => lane(b, writeFresh(b, ctx))).join(loose ? '\n\n' : '\n');
+  return (head + body ? marker + head + body : marker.trimEnd()).replace(/\n(?=[^\n])/g, `\n${' '.repeat(marker.length)}`);
+}
+
+// The paragraphs `blocksOf` makes of a tight item's text, which the HTML does not have: one that changes lane is its content as HTML, not a `p` that would make the item loose.
+const MADE = new WeakSet();
+const lane = (part, bytes) => (bytes === part.outerHTML && MADE.has(part) ? part.innerHTML : bytes);
+
+/** An item's content as blocks: a stretch of inline content (a tight item's text) is one paragraph, the whitespace between blocks is the gap's, a task item's checkbox is its marker's. */
+function blocksOf(li) {
+  // `li` is writeNode's copy, so it is taken apart in place.
+  const box = li.classList.contains('task-list-item') && li.querySelector('input[type="checkbox"]');
+  if (box) {
+    const after = box.nextSibling;
+    box.remove();
+    if (after?.nodeType === 3 && after.data.startsWith(' ')) after.data = after.data.slice(1);
+  }
+  const out = [], runs = [];
+  let run = null;
+  for (const n of [...li.childNodes]) {
+    if (isBlock(n)) { run = null; out.push(n); continue; }
+    // Whitespace between blocks is the gap's; whitespace that starts a stretch of text is the text's.
+    if (n.nodeType === 3 && !/\S/.test(n.data) && !run && (!n.nextSibling || isBlock(n.nextSibling))) continue;
+    if (!run) { run = document.createElement('p'); MADE.add(run); out.push(run); runs.push(run); }
+    run.append(n);
+  }
+  // The line end mdast-util-to-hast puts between a tight item's text and its sublist is the gap's, not the text's.
+  for (const r of runs) {
+    const last = r.lastChild;
+    if (last?.nodeType === 3) last.data = last.data.replace(/\n$/, '');
+    if (last?.nodeType === 3 && !last.data) last.remove();
+  }
+  return out;
+}
+
+export function item(el, md, ctx) {
+  const kids = md.children;
+  // A task item stays one: the box is the marker's, and its state is written over the old box's bytes, an `x` or `X` kept while it stays ticked.
+  const box = boxOf(el);
+  if ((md.checked != null) !== !!box) return null;
+  const ticked = box?.hasAttribute('checked');
+  const mark = (s) => (box && ticked !== md.checked ? s.replace(/\[[ xX]\]/, ticked ? '[x]' : '[ ]') : s);
+  const parts = blocksOf(el);
+  if (!kids.length) return parts.length ? null : mark(sliceOf(ctx, md));
+  if (parts.length !== kids.length) return null;
+  let out = mark(span(ctx, start(md), start(kids[0])));
+  for (const [i, part] of parts.entries()) {
+    const k = kids[i];
+    const w = writeNode(part, { text: sliceOf(ctx, k), column: k.position.start.column - 1, defs: ctx.defs, markdown: ctx.markdown }, ctx);
+    // A part no stenographer writes changes lane, at the item's content indent so it stays in the item.
+    out += (w ?? lane(part, part.outerHTML).replace(/\n/g, `\n${' '.repeat(k.position.start.column - 1)}`)) + span(ctx, end(k), i + 1 < kids.length ? start(kids[i + 1]) : end(md));
+  }
+  return out;
+}
+

package/src/parse.js

@@ -0,0 +1,48 @@
+// The plain parse (the studio's notes/markdown-plan.md, "The root parser"): BelType's four syntax extensions (frontmatter, math, directive, GFM's parts) and no belt plugin, because it is the only parse whose positions are exact (notes/unified-write-back.md); BelType's notations and figures are found on its tree afterwards, by this package's own code, which keeps every position exact. GFM's parts are registered in the order BelType's own `plugins/gfm.js` registers them, autolink literals and tables off unless asked for, as there.
+import { fromMarkdown } from 'mdast-util-from-markdown';
+import { frontmatter } from 'micromark-extension-frontmatter';
+import { frontmatterFromMarkdown } from 'mdast-util-frontmatter';
+import { math } from 'micromark-extension-math';
+import { mathFromMarkdown } from 'mdast-util-math';
+import { directive } from 'micromark-extension-directive';
+import { directiveFromMarkdown } from 'mdast-util-directive';
+import { gfmAutolinkLiteral } from 'micromark-extension-gfm-autolink-literal';
+import { gfmAutolinkLiteralFromMarkdown } from 'mdast-util-gfm-autolink-literal';
+import { gfmFootnote } from 'micromark-extension-gfm-footnote';
+import { gfmFootnoteFromMarkdown } from 'mdast-util-gfm-footnote';
+import { gfmStrikethrough } from 'micromark-extension-gfm-strikethrough';
+import { gfmStrikethroughFromMarkdown } from 'mdast-util-gfm-strikethrough';
+import { gfmTable } from 'micromark-extension-gfm-table';
+import { gfmTableFromMarkdown } from 'mdast-util-gfm-table';
+import { gfmTaskListItem } from 'micromark-extension-gfm-task-list-item';
+import { gfmTaskListItemFromMarkdown } from 'mdast-util-gfm-task-list-item';
+import { dialect } from './dialect.js';
+import { figures } from './figure.js';
+import { directives } from './directive.js';
+
+/**
+ * @typedef {{ gfm?: { autolinks?: boolean, tables?: boolean }, mark?: boolean, supersub?: boolean, figure?: boolean, directives?: Record<string, { tag?: string, className?: string, defaultTitle?: string }> }} Markdown
+ *   the venue's `markdown:` options, in core's shape and under core's names: GFM's autolink literals and tables, off unless asked for (BelType's manual has both on); `==mark==`, `~sub~` and `^sup^`, and a titled image alone in its paragraph as a figure, on unless switched off; the directives' bindings over core's built-ins (the config's `directives:`, a `render` hook not run)
+ */
+
+/**
+ * The mdast of a Markdown text, every node positioned in it, with BelType's notations (./dialect.js), figures (./figure.js) and directives' elements (./directive.js) found on it.
+ * @param {string} text
+ * @param {Markdown} [markdown]
+ */
+export function parseMarkdown(text, markdown = {}) {
+  const { autolinks = false, tables = false } = markdown.gfm ?? {};
+  const extensions = [frontmatter(), math(), directive()];
+  const mdastExtensions = [frontmatterFromMarkdown(), mathFromMarkdown(), directiveFromMarkdown()];
+  if (autolinks) { extensions.push(gfmAutolinkLiteral()); mdastExtensions.push(gfmAutolinkLiteralFromMarkdown()); }
+  extensions.push(gfmFootnote(), gfmStrikethrough({ singleTilde: false }));
+  mdastExtensions.push(gfmFootnoteFromMarkdown(), gfmStrikethroughFromMarkdown());
+  if (tables) { extensions.push(gfmTable()); mdastExtensions.push(gfmTableFromMarkdown()); }
+  extensions.push(gfmTaskListItem());
+  mdastExtensions.push(gfmTaskListItemFromMarkdown());
+  const tree = fromMarkdown(text, { extensions, mdastExtensions });
+  dialect(tree, text, markdown);
+  if (markdown.figure !== false) figures(tree);
+  directives(tree, markdown.directives);
+  return tree;
+}

package/src/quote.js

@@ -0,0 +1,51 @@
+// The blockquote (the studio's notes/markdown-round-3-orchestration.md, round 3b): a quote over its old bytes, which ./write.js's `block` asks for a `blockquote` over a blockquote. Each line's `> ` prefix is taken off (remembering it exactly; a lazy line has none) and the body parsed alone, the file's definitions after it, so the blocks are written the way a document's are: the new blocks are paired with the old by meaning (the common head and tail, the middle in order when the counts match), a pair is written over its old slice by `writeNode`, a block without a partner is written fresh, an old one without a partner goes with its gap, and the gaps are the body's. The prefixes go back line by line while the line count is unchanged; once it changed every line takes the first line's prefix (a blank one the prefix trimmed). The result is read back and must mean the element, whitespace between its blocks aside, or the quote refuses. A body holding a definition refuses (to-hast has no element for it to pair).
+import { sliceOf, span, start, end, writeNode, writeFresh, isBlock } from './write.js';
+import { parseMarkdown } from './parse.js';
+import { domOf, means, bare } from './html.js';
+
+/**
+ * A blockquote's bytes over its old slice, or null (the lane change).
+ * @param {Element} el the quote as the HTML it means
+ * @param {object} md the blockquote's mdast
+ * @param {object} ctx the stenographers' context (./write.js)
+ * @returns {string | null}
+ */
+export function quote(el, md, ctx) {
+  const kids = [...el.childNodes].filter((n) => n.nodeType !== 3 || /\S/.test(n.data));
+  // Blocks and comments (a comment is a block of raw HTML in the quote, written as itself).
+  if (!kids.length || kids.some((n) => n.nodeType !== 1 && n.nodeType !== 8)) return null;
+  const lines = sliceOf(ctx, md).split('\n');
+  const prefixes = lines.map((l) => /^ {0,3}> ?/.exec(l)?.[0] ?? '');
+  const body = lines.map((l, i) => l.slice(prefixes[i].length)).join('\n');
+  const tree = parseMarkdown(ctx.defs ? `${body}\n\n${ctx.defs}` : body, ctx.markdown);
+  // The file's definitions, appended after the body, are not the quote's blocks.
+  const old = tree.children.filter((k) => start(k) < body.length);
+  if (!old.length || old.some((k) => k.type === 'definition' || k.type === 'footnoteDefinition')) return null;
+  const b = { src: body };
+  const n = kids.length, m = old.length;
+  const same = (i, j) => !ctx.force && means(kids[i], old[j]);
+  let h = 0;
+  while (h < n && h < m && same(h, h)) h++;
+  let t = 0;
+  while (t < n - h && t < m - h && same(n - 1 - t, m - 1 - t)) t++;
+  const pairs = kids.map((c, i) => [c, i < h ? old[i] : i >= n - t ? old[m - n + i] : n === m ? old[i] : null]);
+  const gaps = old.slice(1).map((k, i) => span(b, end(old[i]), start(k)));
+  let out = span(b, 0, start(old[0])), gap = gaps[0] ?? '\n\n';
+  for (const [i, [c, k]] of pairs.entries()) {
+    let w;
+    if (k) {
+      // A block its old one's stenographer cannot write (it changed kind: a paragraph made a heading) is written fresh, Markdown where it can be, raw HTML where not.
+      w = writeNode(c, { text: sliceOf(b, k), column: 0, defs: ctx.defs, markdown: ctx.markdown }, ctx) ?? writeFresh(c, ctx);
+      gap = gaps[old.indexOf(k)] ?? gaps.at(-1) ?? '\n\n';
+    } else w = writeFresh(c, ctx);
+    out += w + (i + 1 < n ? gap : '');
+  }
+  out += span(b, end(old.at(-1)), body.length);
+  const outLines = out.split('\n');
+  const first = prefixes[0];
+  // A blank line never takes a lazy line's empty prefix: without its `>` it would end the quote.
+  const result = outLines.map((l, i) => (outLines.length === lines.length && (l || prefixes[i]) ? prefixes[i] : l ? first : first.trimEnd()) + l).join('\n');
+  const back = parseMarkdown(ctx.defs ? `${result}\n\n${ctx.defs}` : result, ctx.markdown).children[0];
+  const dom = back?.type === 'blockquote' && domOf(back).find((d) => d.nodeType === 1);
+  return dom && bare(dom).isEqualNode(bare(el)) ? result : null;
+}

package/src/table.js

@@ -0,0 +1,117 @@
+// The table (the studio's notes/markdown-round-3-orchestration.md, round 3b): a GFM table over its old bytes, which ./write.js's `block` asks for a `table` over a table. The header row and the divider row are kept, as is the column count and every alignment (a change of either refuses, for the lane change). The body rows pair with the old by meaning from both ends inward, as a list's items do (the middle in order when the counts match); a paired row keeps the bytes of every cell that did not change and writes the cells that did over their old width (the author's padding is kept where the new content fits, otherwise the cell is `one space, content, one space` and the row is left ragged), an inserted row copies the row beside it (its pipes, its padding), a deleted row goes with its line. A cell holding a block or a line break refuses. The result is read back as a whole and must mean the element. Whitespace between the table's elements is ignored everywhere, as an editor's serializer need not write what mdast-util-to-hast does.
+import { isBlock, span, start, end, sliceOf, inline, fresh } from './write.js';
+import { parseMarkdown } from './parse.js';
+import { domOf, bare } from './html.js';
+
+const rowsOf = (table) => [...table.querySelectorAll('tr')];
+const cellsOf = (tr) => [...tr.children];
+
+// A row's cells as the bytes hold them: mdast gives a cell its leading pipe and, for the last, its trailing one, so a cell is `lead`, `seg` (the padding and the content) and, last, `trail`.
+function cutRow(row, ctx) {
+  return row.children.map((cell, i) => {
+    const raw = sliceOf(ctx, cell);
+    const lead = raw.startsWith('|') ? '|' : '';
+    const last = i === row.children.length - 1;
+    const trail = last && raw.length > lead.length && /(^|[^\\])(\\\\)*\|$/.test(raw) ? '|' : '';
+    return { lead, seg: raw.slice(lead.length, raw.length - trail.length), trail };
+  });
+}
+
+// `content` in a cell of `old`'s width (`open`: the last cell of a row with no closing pipe): the old leading padding and a trailing space where it had one, filled up to the old width; if it does not fit, one space each side.
+function fit(old, content, open) {
+  const blank = !old.trim();
+  const lead = blank ? Math.min(1, old.length >> 1) : /^ */.exec(old)[0].length;
+  const trail = blank ? lead : /\s$/.test(old) ? 1 : 0;
+  // A last cell with no closing pipe has no width to fill.
+  if (open) return ' '.repeat(lead) + content;
+  return lead + content.length + trail <= old.length ? ' '.repeat(lead) + content.padEnd(old.length - lead) : ` ${content} `;
+}
+
+// A cell's content as Markdown, `|` escaped (typed or not, one that is not already is a cell's end); null when it holds what a cell cannot.
+function cellBytes(td, old, ctx) {
+  if ([...td.querySelectorAll('*')].some((e) => isBlock(e) || e.localName === 'br')) return null;
+  const nodes = [...td.childNodes];
+  const out = old?.children.length ? inline(nodes, old.children, ctx) : nodes.map(fresh).join('');
+  return /\n/.test(out) ? null : out.replace(/(\\*)\|/g, (m, b) => (b.length % 2 ? m : `${b}\\|`));
+}
+
+/**
+ * A table's bytes over its old slice, or null (the lane change).
+ * @param {Element} el the table as the HTML it means
+ * @param {object} md the table's mdast
+ * @param {object} ctx the stenographers' context (./write.js)
+ * @returns {string | null}
+ */
+export function table(el, md, ctx) {
+  const now = bare(el);
+  const was = bare(domOf(md).find((n) => n.nodeType === 1));
+  const rows = rowsOf(now), oldRows = rowsOf(was);
+  const old = md.children;
+  const cols = md.align.length;
+  // The header is the first row, alone in a thead; every cell is as wide as the columns and aligned as the divider says.
+  if (now.querySelectorAll('thead tr').length !== 1 || rows[0].parentNode.localName !== 'thead' || rows.slice(1).some((tr) => tr.parentNode.localName === 'thead')) return null;
+  if (cellsOf(rows[0]).length !== cols) return null;
+  for (const tr of rows) {
+    for (const [i, c] of cellsOf(tr).entries()) if (i >= cols || (c.getAttribute('align') ?? null) !== (md.align[i] ?? null)) return null;
+  }
+  const n = rows.length - 1, m = old.length - 1;
+  const same = (a, b) => !ctx.force && bare(rows[a]).isEqualNode(bare(oldRows[b]));
+  let h = 1;
+  while (h <= n && h <= m && same(h, h)) h++;
+  let t = 0;
+  while (t < n - h + 1 && t < m - h + 1 && same(n - t, m - t)) t++;
+  // Each new row with its old partner or null; the header's is the old header. A middle that does not pair has none, and its old rows are out.
+  const pairs = rows.map((tr, i) => [tr, i < h ? old[i] : i > n - t ? old[m - n + i] : n === m ? old[i] : null]);
+  const divider = old.length > 1 ? span(ctx, end(old[0]), start(old[1])) : `${span(ctx, end(old[0]), end(md))}\n`;
+  const gaps = old.slice(2).map((k, i) => span(ctx, end(old[i + 1]), start(k)));
+  const defaultGap = `\n${/\n( *)/.exec(divider)?.[1] ?? ''}`;
+  const written = [];
+  for (const [i, [tr, k]] of pairs.entries()) {
+    const cells = cellsOf(tr);
+    let bytes;
+    if (k) {
+      // A row longer than the columns has cells to-hast leaves out; they keep their bytes.
+      const oldCells = cellsOf(oldRows[old.indexOf(k)]);
+      if (cells.length !== oldCells.length) return null;
+      const cut = cutRow(k, ctx);
+      bytes = '';
+      for (const [j, { lead, seg, trail }] of cut.entries()) {
+        const c = cells[j];
+        let s = seg;
+        if (c && (ctx.force || !bare(c).isEqualNode(bare(oldCells[j])))) {
+          const content = cellBytes(c, k.children[j], ctx);
+          if (content == null) return null;
+          s = fit(seg, content, j === cut.length - 1 && !trail);
+        }
+        bytes += lead + s + trail;
+      }
+    } else {
+      // A row with no old bytes copies the one above it (the one below when it is the first body row) down to the pipes and the padding.
+      const near = pairs.slice(0, i).reverse().find(([, o]) => o && o !== old[0]) ?? pairs.slice(i + 1).find(([, o]) => o);
+      let cut = near && near[1].children.length === cells.length ? cutRow(near[1], ctx) : null;
+      cut ??= cutRow(old[0], ctx);
+      if (cells.length !== cols) return null;
+      bytes = '';
+      for (const [j, c] of cells.entries()) {
+        const content = cellBytes(c, null, ctx);
+        if (content == null) return null;
+        bytes += cut[j].lead + fit(cut[j].seg, content, j === cut.length - 1 && !cut[j].trail) + cut[j].trail;
+      }
+    }
+    written.push([bytes, k]);
+  }
+  let out = span(ctx, start(md), start(old[0])) + written[0][0];
+  if (written.length === 1) out += divider.trimEnd();
+  else {
+    out += divider;
+    for (const [i, [bytes, k]] of written.entries()) {
+      if (!i) continue;
+      out += bytes + (i < written.length - 1 ? (k && gaps[old.indexOf(k) - 1]) || gaps.at(-1) || defaultGap : '');
+    }
+  }
+  if (old.length > 1) out += span(ctx, end(old.at(-1)), end(md));
+  // Read back as a whole.
+  const back = parseMarkdown(ctx.defs ? `${out}\n\n${ctx.defs}` : out, ctx.markdown).children[0];
+  const dom = back?.type === 'table' && end(back) === out.length && domOf(back).find((d) => d.nodeType === 1);
+  return dom && bare(dom).isEqualNode(now) ? out : null;
+}