rapier-markdown-kit 1.1.99 → 1.1.101

package/dist/spec/html-blocks.mjs

@@ -0,0 +1,143 @@
+// SPDX-License-Identifier: MIT
+// Fenced HTML stays source. Its preview has no document authority.
+import {formatLayout, imageStyle} from './md-layout.mjs';
+
+export function htmlAttributes(info) {
+  const match = /^html(?:\s+\{([^{}]*)\})?\s*$/i.exec(String(info));
+  if (!match) return null;
+  const attrs = {};
+  for (const part of (match[1] || '').match(/(?:[^\s"']+|"[^"]*"|'[^']*')+/g) || []) {
+    if (part[0] === '#') {if (attrs.id) return null; attrs.id = part.slice(1);}
+    else if (part[0] === '.') {if (!/^\.[A-Za-z_][\w-]*$/.test(part)) return null; attrs.class = [attrs.class, part.slice(1)].filter(Boolean).join(' ');}
+    else {
+      const pair = /^([a-z][a-z-]*)=(.*)$/.exec(part); if (!pair || Object.hasOwn(attrs, pair[1])) return null;
+      attrs[pair[1]] = pair[2].replace(/^(["'])(.*)\1$/, '$2');
+    }
+  }
+  if (attrs.id && !/^[A-Za-z][A-Za-z0-9_-]{0,127}$/.test(attrs.id)) return null;
+  if (attrs.height && attrs.height !== 'auto' && (!/^(?:\d+(?:\.\d+)?|\.\d+)$/.test(attrs.height) || +attrs.height < .5 || +attrs.height > 512)) return null;
+  if (attrs.width && (!/^(?:\d+(?:\.\d+)?|\.\d+)%$/.test(attrs.width) || parseFloat(attrs.width) <= 0 || parseFloat(attrs.width) > 100)) return null;
+  if (attrs.float && !['left', 'right', 'none'].includes(attrs.float)) return null;
+  for (const key of ['x', 'y']) if (attrs[key] && (!Number.isFinite(+attrs[key]) || Math.abs(+attrs[key]) > 1000)) return null;
+  return attrs;
+}
+
+export function htmlFence(raw) {
+  const opening = /^( {0,3})(`{3,}|~{3,})([^\r\n]*)\r?\n/.exec(raw);
+  if (!opening) return null;
+  const attrs = htmlAttributes(opening[3].trim()); if (!attrs) return null;
+  const mark = opening[2], close = new RegExp('^ {0,3}' + mark[0] + '{' + mark.length + ',}[ \\t]*\\r?$', 'm');
+  const rest = raw.slice(opening[0].length), found = close.exec(rest);
+  if (!found) return null;
+  const end = opening[0].length + found.index + found[0].length;
+  if (raw.slice(end).trim()) return null;
+  return {attrs, info: opening[3].trim(), body: rest.slice(0, found.index), infoStart: opening[1].length + mark.length,
+    infoEnd: opening[0].replace(/\r?\n$/, '').length, source: raw, start: 0, end: raw.length};
+}
+
+export function htmlLayout(attrs) {
+  const width = attrs.float && attrs.float !== 'none' ? parseFloat(attrs.width || '40%') : 100;
+  return {width, ...(attrs.float && attrs.float !== 'none' ? {wrap: 'box', x: attrs.x == null ? attrs.float === 'right' ? 100 - width / 2 : width / 2 : +attrs.x, y: +(attrs.y || 0)} : {})};
+}
+
+export function htmlImageRecord(raw) {
+  const fence = htmlFence(raw); if (!fence) return null;
+  return {...fence, htmlBlock: true, renderIndex: 0, alt: fence.attrs.id || 'HTML', altSource: '',
+    tokenEnd: raw.length, source: raw, layout: htmlLayout(fence.attrs), placement: htmlLayout(fence.attrs), standalone: true, imageOnly: true};
+}
+
+export function htmlLayoutEdit(record, value) {
+  const fence = htmlFence(record.block.raw); if (!fence) return null;
+  const attrs = {...fence.attrs}, previous = htmlLayout(attrs), positioned = ['around', 'box', 'front', 'behind'].includes(value.wrap);
+  attrs.float = positioned ? (value.x ?? 0) > 50 ? 'right' : 'left' : 'none';
+  if (positioned) {attrs.width = Math.min(100, Math.max(.1, value.width || previous.width)) + '%'; attrs.x = value.x; attrs.y = value.y || 0;}
+  else {delete attrs.width; delete attrs.x; delete attrs.y;}
+  if (value.lines != null) attrs.height = value.lines;
+  else if (attrs.height && attrs.height !== 'auto' && value.width && value.width !== previous.width)
+    attrs.height = Math.min(512, Math.max(.5, Math.round(+attrs.height * value.width / previous.width * 10) / 10));
+  const fields = Object.entries(attrs).filter(([,v]) => v !== undefined).map(([k,v]) => k === 'id' ? '#' + v : k === 'class' ? String(v).split(/\s+/).map(name => '.' + name).join(' ') : k + '=' + (/^[\w.%+-]+$/.test(String(v)) ? v : JSON.stringify(String(v))));
+  return {start: fence.infoStart, end: fence.infoEnd, text: 'html {' + fields.join(' ') + '}'};
+}
+
+export function htmlPlaceholder(token, escape) {
+  const attrs = htmlAttributes(token.info); if (!attrs || token.content.length > 1048576 || token.meta?.rapierFenceClosed === false) return null;
+  const layout = htmlLayout(attrs), marker = encodeURIComponent(formatLayout(layout));
+  const height = attrs.height && attrs.height !== 'auto' ? attrs.height : 8;
+  const source = encodeURIComponent(JSON.stringify({info: token.info, body: token.content, attrs}));
+  // The image is the existing placement owner's measurable box. Preview content is mounted separately.
+  const pixel = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR4nGNgAAIAAAUAAXpeqz8AAAAASUVORK5CYII=';
+  return '<p class="rapier-html-block" data-md-layout="' + escape(marker) + '"><img data-rapier-markdown-image="" data-rapier-image-index="0" data-rapier-html="' + escape(source) + '" data-rapier-image-layout="' + escape(marker) + '" src="' + pixel + '" alt="' + escape(attrs.id || 'HTML block') + '" style="' + imageStyle(layout) + ';height:calc(' + height + ' * var(--md-line, 1.6em));object-fit:fill" /></p>\n';
+}
+
+// Self-contained so exported pages run the same policy without fetching a runtime.
+export function mountHtmlBlocks(doc) {
+  const win = doc.defaultView, parentNonce = doc.currentScript?.nonce, owned = new Map(); let pending = 0;
+  const schedule = () => {if (!pending) pending = win.requestAnimationFrame(update);};
+  const update = () => {
+    pending = 0;
+    for (const [image, frame] of owned) {
+      if (!image.isConnected) {resize.unobserve(image); frame.remove(); owned.delete(image); continue;}
+      const box = image.getBoundingClientRect(), parent = frame.offsetParent, origin = parent?.getBoundingClientRect() || {left: 0, top: 0};
+      frame.style.left = box.left - origin.left + (parent?.scrollLeft || 0) - (parent?.clientLeft || 0) + 'px';
+      frame.style.top = box.top - origin.top + (parent?.scrollTop || 0) - (parent?.clientTop || 0) + 'px';
+      frame.style.width = box.width + 'px'; frame.style.height = box.height + 'px';
+      frame.hidden = !box.width || !box.height;
+      frame.style.zIndex = String(Math.max(1, parseInt(win.getComputedStyle(image).zIndex) || 0) + 1);
+    }
+  };
+  const resize = new win.ResizeObserver(schedule);
+  const install = image => {
+    if (owned.has(image)) return;
+    let value; try {value = JSON.parse(decodeURIComponent(image.getAttribute('data-rapier-html')));} catch {return;}
+    if (typeof value.body !== 'string' || value.body.length > 1048576) return;
+    const template = doc.createElement('template'); template.innerHTML = value.body;
+    const allowed = new Set('a abbr address article aside b bdi bdo blockquote br button caption circle clipPath code col colgroup dd defs del details dfn div dl dt ellipse em fieldset figcaption figure footer g h1 h2 h3 h4 h5 h6 header hr i img input kbd label legend li line linearGradient main mark mask meter nav ol optgroup option p path pattern picture polygon polyline pre progress q radialGradient rect s samp section select small source span stop strong style sub summary sup svg table tbody td text textarea th thead time title tr tspan u ul use var'.toLowerCase().split(' '));
+    const walk = root => {
+      for (const el of [...root.children]) {
+        const tag = el.localName.toLowerCase();
+        if (!allowed.has(tag)) {el.remove(); continue;}
+        for (const attr of [...el.attributes]) {
+          const key = attr.name.toLowerCase();
+          if (key.startsWith('on') || ['nonce','srcdoc','is','autofocus','form','formaction','action','target','download','ping','xmlns:xlink'].includes(key)) el.removeAttribute(attr.name);
+          if (['src','srcset','href','xlink:href'].includes(key) && !(key.endsWith('href') && /^#[A-Za-z][\w.-]*$/.test(attr.value) || key === 'src' && tag === 'img' && /^data:image\/(?:png|jpeg|webp|gif|avif|svg\+xml);/i.test(attr.value))) el.removeAttribute(attr.name);
+        }
+        if (tag === 'button') el.setAttribute('type', 'button');
+        walk(el);
+      }
+    };
+    walk(template.content);
+    const nonce = parentNonce || [...win.crypto.getRandomValues(new Uint8Array(16))].map(n => n.toString(16).padStart(2, '0')).join('');
+    const policy = "default-src 'none'; connect-src 'none'; img-src data:; font-src data:; media-src 'none'; style-src 'unsafe-inline'; script-src 'nonce-" + nonce + "'; base-uri 'none'; form-action 'none'; frame-src 'none'; object-src 'none'; worker-src 'none'";
+    const frame = doc.createElement('iframe'); frame.title = value.attrs?.id || 'HTML block';
+    frame.setAttribute('sandbox', 'allow-scripts'); frame.setAttribute('referrerpolicy', 'no-referrer');
+    frame.setAttribute('allow', "camera 'none'; microphone 'none'; geolocation 'none'; clipboard-read 'none'; clipboard-write 'none'");
+    frame.setAttribute('data-rapier-html-preview', '');
+    frame.style.cssText = 'position:absolute;border:0;margin:0;padding:0;pointer-events:none;z-index:1;background:transparent;max-width:none';
+    const script = "const report=()=>parent.postMessage({type:'rapier-html-height',height:Math.ceil(document.body.getBoundingClientRect().height)},'*');new ResizeObserver(report).observe(document.body);addEventListener('load',report);report();";
+    frame.srcdoc = '<!doctype html><html><head><meta charset="utf-8"><meta http-equiv="Content-Security-Policy" content="' + policy + '"><meta name="referrer" content="no-referrer"><style>html{color-scheme:light dark}body{margin:0;display:flow-root;overflow-wrap:anywhere}*{box-sizing:border-box}img,svg{max-width:100%}</style></head><body>' + template.innerHTML + '<script nonce="' + nonce + '">' + script + '</script></body></html>';
+    (image.closest('.block-read') || image.parentElement.parentElement).append(frame);
+    owned.set(image, frame); resize.observe(image);
+    if (!value.attrs?.height || value.attrs.height === 'auto') frame.dataset.autoHeight = 'true';
+    image.dataset.rapierNaturalWidth = String(Math.max(1, image.getBoundingClientRect().width));
+    image.dataset.rapierNaturalHeight = String(Math.max(1, image.getBoundingClientRect().height));
+    schedule();
+  };
+  const scan = () => {for (const image of doc.querySelectorAll('img[data-rapier-html]')) install(image); schedule();};
+  win.addEventListener('message', event => {
+    if (event.data?.type !== 'rapier-html-height' || !Number.isFinite(event.data.height)) return;
+    for (const [image, frame] of owned) if (frame.contentWindow === event.source && frame.dataset.autoHeight === 'true') {
+      let line = 0;
+      for (let parent = image.parentElement; parent && !line; parent = parent.parentElement)
+        line = parseFloat(win.getComputedStyle(parent).lineHeight) || 0;
+      line ||= 24;
+      const height = Math.max(line, Math.min(4096, Math.ceil(event.data.height / line) * line));
+      if (image.dataset.rapierNaturalHeight !== String(height)) {
+        image.style.height = height + 'px'; image.dataset.rapierNaturalHeight = String(height);
+        image.dispatchEvent(new win.Event('rapier-html-resize', {bubbles: true})); schedule();
+      }
+    }
+  });
+  new win.MutationObserver(records => {if (records.some(row => row.type === 'childList' || row.target.matches?.('img[data-rapier-html]'))) scan();}).observe(doc.body, {subtree: true, childList: true, attributes: true, attributeFilter: ['src', 'data-rapier-html', 'data-rapier-image-gesture', 'style']});
+  win.addEventListener('resize', schedule); doc.addEventListener('scroll', schedule, true);
+  scan();
+}

package/dist/spec/md-assets.mjs

@@ -1,11 +1,12 @@
 // SPDX-License-Identifier: MIT
 // Pure text and markdown-it tokens: no DOM, no byte decoding, no globalThis.Rapier* (MIT kit; decoders stay in images/assets.mjs).
 
-export const IMAGE_LIMITS = Object.freeze({bytes: 16 * 1024 * 1024, sourceChars: 25 * 1024 * 1024, dimension: 16384, pixels: 24000000, assets: 1024});
+export const IMAGE_LIMITS = Object.freeze({bytes: 16 * 1024 * 1024, sourceChars: 64 * 1024 * 1024, dimension: 16384, pixels: 24000000, assets: 1024});
 const parsers = new WeakMap();
 const cached = [];
+let preparedDefinitions = [];
 let configured = null, splitSource = null;
-export function configureParser(parser, split) { configured = parser; splitSource = split; cached.length = 0; }
+export function configureParser(parser, split) { configured = parser; splitSource = split; cached.length = 0; preparedDefinitions = []; }
 function fail(reason) { throw new Error(reason); }
 export const normalizeLabel = label => String(label).trim().replace(/\s+/g, ' ').toLowerCase().toUpperCase();
 // New titles have one identity before hashing, serializing or matching a repeated append.
@@ -18,6 +19,10 @@ export function installMarkdownImages(md) {
   md.__rapierImagesInstalled = true;
   const validate = md.validateLink;
   md.validateLink = url => /^data:image\/(?:jxl|svg\+xml);base64,[A-Za-z0-9+/]+={0,2}$/i.test(url) || validate(url);
+  const normalize = md.normalizeLink;
+  // An exact base64 data URL contains no URI escapes or host name to normalize.
+  // Preserve its spelling and avoid allocating one URI-normalizer item per raster byte.
+  md.normalizeLink = url => /^data:image\/(?:jxl|png|jpeg|webp|svg\+xml);base64,[A-Za-z0-9+/]+={0,2}$/i.test(url) ? url : normalize(url);
   const reference = md.block.ruler.__rules__.find(row => row.name === 'reference').fn;
   md.block.ruler.at('reference', (state, start, end, silent) => {
     if (silent) return reference(state, start, end, silent);
@@ -70,6 +75,8 @@ export const markdownBodyOffset = source => splitSource ? splitSource(source).bo
 
 export function dataImage(url) {
   if (typeof url !== 'string' || url.length > IMAGE_LIMITS.sourceChars) return null;
+  const prepared = preparedDefinitions.find(row => row.image.url === url)?.image;
+  if (prepared) return {codec: prepared.codec, byteLength: prepared.byteLength, payloadStart: url.indexOf(',') + 1};
   const match = /^data:(image\/(?:jxl|png|jpeg|webp|svg\+xml));base64,([A-Za-z0-9+/]+={0,2})$/i.exec(url);
   if (!match || match[2].length % 4) return null;
   const padding = match[2].endsWith('==') ? 2 : match[2].endsWith('=') ? 1 : 0;
@@ -85,6 +92,8 @@ export function parseAssets(source, factory = configured || globalThis.markdowni
   if (!source.includes(']:')) return {assets: new Map(), blocks: [], duplicateLabels: new Set(), appendixStart: source.length, references: Object.create(null)};
   const prior = cached.find(row => row.source === source && row.factory === factory && row.bodyOffset === bodyOffset);
   if (prior) return prior.index;
+  const definition = !bodyOffset && preparedDefinitions.find(row => row.source === source && row.factory === factory);
+  if (definition) return definition.index;
   const parser = parserFor(factory), env = {}, tokens = [];
   const starts = [bodyOffset];
   for (let at = bodyOffset; at < source.length; at++) {
@@ -129,6 +138,56 @@ export function parseAssets(source, factory = configured || globalThis.markdowni
 }
 export function documentAssets(source, factory) { return parseAssets(source, factory, markdownBodyOffset(source)); }
 
+// The source worker admits these rows with the same Markdown grammar. Send positions and
+// small facts back, then take the large picture strings from the exact request's source.
+export function packAssetIndex(index, offset = 0) {
+  const positions = ['start', 'end', 'urlStart', 'urlEnd', 'payloadStart', 'payloadEnd'];
+  const blocks = index.blocks.map(row => {
+    const packed = {...row};
+    delete packed.source;
+    if (Number.isSafeInteger(row.urlStart) && Number.isSafeInteger(row.urlEnd)) delete packed.url;
+    for (const key of positions) if (Number.isSafeInteger(packed[key])) packed[key] -= offset;
+    return packed;
+  });
+  const references = Object.create(null);
+  for (const [label, definition] of Object.entries(index.references)) {
+    const image = index.assets.get(label);
+    references[label] = image?.url === definition.href
+      ? {row: index.blocks.indexOf(image), title: definition.title}
+      : {...definition};
+  }
+  return {blocks, references, duplicateLabels: [...index.duplicateLabels], appendixStart: index.appendixStart - offset};
+}
+
+export function restoreAssetIndex(source, packet, {offset = 0, bodyOffset = 0, factory = configured || globalThis.markdownit} = {}) {
+  const positions = ['start', 'end', 'urlStart', 'urlEnd', 'payloadStart', 'payloadEnd'];
+  const blocks = packet.blocks.map(packed => {
+    const row = {...packed};
+    for (const key of positions) if (Number.isSafeInteger(row[key])) row[key] += offset;
+    row.source = source.slice(row.start, row.end);
+    if (Number.isSafeInteger(row.urlStart) && Number.isSafeInteger(row.urlEnd)) row.url = source.slice(row.urlStart, row.urlEnd);
+    return row;
+  });
+  const references = Object.create(null), assets = new Map();
+  for (const row of blocks) if (row.active) assets.set(row.id, row);
+  for (const [label, definition] of Object.entries(packet.references)) references[label] = Number.isSafeInteger(definition.row)
+    ? {href: blocks[definition.row].url, title: definition.title} : {...definition};
+  const index = {assets, blocks, duplicateLabels: new Set(packet.duplicateLabels), appendixStart: packet.appendixStart + offset, references};
+  cached.unshift({source, factory, bodyOffset, index});
+  if (cached.length > 3) cached.pop();
+  // A top-level reference token is exactly the block the editor keeps. Its own parse has
+  // one first definition even when it followed a duplicate in the whole document.
+  preparedDefinitions = blocks.filter(row => row.topLevel).map(row => {
+    const local = {...row, start: 0, end: row.source.length, active: true, status: 'unverified'};
+    for (const key of positions.slice(2)) if (Number.isSafeInteger(local[key])) local[key] -= row.start;
+    const image = Object.freeze({url: row.url, codec: row.codec, byteLength: row.byteLength});
+    return {source: row.source, factory, image, index: {assets: new Map([[row.id, local]]), blocks: [local],
+      references: Object.assign(Object.create(null), {[row.id]: {href: row.url, title: row.title}}),
+      duplicateLabels: new Set(), appendixStart: 0}};
+  });
+  return index;
+}
+
 // Project only parser-recognized payload spans. Their ordinary data URL remains a data URL,
 // with every source newline intact; the parser never needs megabytes of picture bytes.
 export function projectImageDefinitions(source, index) {
@@ -145,8 +204,8 @@ export function projectImageDefinitions(source, index) {
   parts.push(source.slice(at));
   const references = Object.create(null);
   for (const [label, definition] of Object.entries(index.references)) {
-    const image = dataImage(definition.href);
-    references[label] = {href: image ? definition.href.slice(0, image.payloadStart) + 'AA==' : definition.href,
+    const image = index.assets.get(label);
+    references[label] = {href: image?.url === definition.href ? 'data:' + image.codec + ';base64,AA==' : definition.href,
       title: definition.title};
   }
   return {source: records.length ? parts.join('') : source, records, references};
@@ -274,7 +333,10 @@ function occurrenceChange(image, splices) {
 // A permissive gate keeps ordinary typing out of full-document image parsing.
 // Recognition and retirement proof still belong to Markdown-it below.
 export function mayRetireImageDefinitions(source, splices, factory) {
-  if (!/data:image\//i.test(source)) return false;
+  const store = typeof source === 'string' ? null : source;
+  // A definition's closing bracket is immediately followed by its colon (parseAssets uses the same necessary condition).
+  if (store ? !store.contains(']:') || !store.contains('data:image/', true)
+    : !source.includes(']:') || !/data:image\//i.test(source)) return false;
   const original = (at, right, count) => {
     for (let index = count - 1; index >= 0; index--) {
       const row = splices[index], end = row.pos + row.inserted.length;
@@ -286,10 +348,20 @@ export function mayRetireImageDefinitions(source, splices, factory) {
   const possible = splices.some((row, index) => {
     if (!row.removed && !row.inserted) return false;
     const start = original(row.pos, false, index), end = original(row.pos + row.removed.length, true, index);
+    if (store) {
+      const from = Math.max(0, start - 8192);
+      const local = store.readSlice(from, Math.min(store.length, end + 4));
+      const image = local.lastIndexOf('![', end - from);
+      const separator = Math.max(local.lastIndexOf('\n\n', start - from),
+        local.lastIndexOf('\r\n\r\n', start - from), local.lastIndexOf('\r\r', start - from));
+      if (image >= 0) return image + from >= start || separator < image;
+      return from > 0 && separator < 0;
+    }
     const image = source.lastIndexOf('![', end);
     return image >= 0 && (image >= start || Math.max(source.lastIndexOf('\n\n', start),
       source.lastIndexOf('\r\n\r\n', start), source.lastIndexOf('\r\r', start)) < image);
   });
+  if (store) return possible && mayRetireImageDefinitions(store.read(), splices, factory);
   if (!possible || splices.length !== 1) return possible;
   const row = splices[0];
   if (row.removed.includes('![') || /[\r\n]/.test(row.removed) || /[\r\n]/.test(row.inserted)) return true;

package/dist/spec/md-layout.mjs

@@ -2,12 +2,13 @@
 
 // `rotate`: degrees in (-180, 180], one decimal, omitted when 0; never written for a Rapier drawing (its turn lives in its SVG).
 // `opacity`: a picture's fade, a whole percent from 5 to 100, omitted at 100; the picture's bytes never change.
-// `lines`: a picture's height in lines of the text beside it, set as a drop cap is (CSS `initial-letter`): its top on the first line's cap height, its foot on the
-// Nth line's baseline, its width from its own aspect. A whole number 1 to 12; never with `width`.
+// `lines`: a picture or paragraph's initial letter spans 1 to 12 lines, from the first line's cap height to the Nth
+// baseline. A picture keeps its aspect ratio; never with `width`.
 // `first`/`indent`: signed levels of 2em, at most six decimals, in [-64,64], omitted at zero. `marker` moves a list
 // item's marker independently of its words, on the same scale; only the item's leading paragraph carries it.
 // `lock=on`: a picture locked in place: a tap goes to the words, never the picture; a hold takes it to unlock it. Omitted when off.
-export const fields = new Set(['align', 'width', 'lines', 'wrap', 'x', 'y', 'rotate', 'opacity', 'first', 'indent', 'marker', 'lock']);
+// `hyphens=auto`, `caps=small`, `hanging=on`: paragraph typography; absence preserves ordinary text.
+export const fields = new Set(['align', 'width', 'lines', 'wrap', 'x', 'y', 'rotate', 'opacity', 'first', 'indent', 'marker', 'lock', 'hyphens', 'caps', 'hanging']);
 export const alignments = new Set(['left', 'center', 'right', 'justify']);
 // `behind`/`front`: out of flow; the paragraph lays out as though the picture were absent.
 export const wraps = new Set(['around', 'box', 'behind', 'front']);
@@ -41,6 +42,9 @@ export function validLayout(value) {
     (!has(value, 'first') || indentLevel(value.first)) && (!has(value, 'indent') || indentLevel(value.indent)) &&
     (!has(value, 'marker') || indentLevel(value.marker)) &&
     (!has(value, 'lock') || value.lock === 'on') &&
+    (!has(value, 'hyphens') || value.hyphens === 'auto') &&
+    (!has(value, 'caps') || value.caps === 'small') &&
+    (!has(value, 'hanging') || value.hanging === 'on') &&
     !(has(value, 'align') && (has(value, 'wrap') || has(value, 'x')));
 }
 

package/dist/spec/md-marks.mjs

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// The one place these literal grammars are written (docs/markdown-standard.md, "Text colour", "Page break").
+// The one owner of colour, font, ink and page-break markers.
 
 // The exported page retains this reader alone. The editor uses the same closure, then adds its writers and scans.
 const inkReader = () => {
@@ -134,6 +134,81 @@ export function hasColorMarker(text) {
 	return new RegExp('<!--(?:c ' + COLOR_VALUE + '|/c)-->').test(String(text == null ? '' : text));
 }
 
+export const FONT_CLOSE = '<!--/f-->';
+export const FONT_STACKS = Object.freeze({
+	sans: Object.freeze({stack: 'sans', css: '', word: ''}),
+	serif: Object.freeze({stack: 'serif', css: "Georgia,'Palatino Linotype',Palatino,'Times New Roman',Times,serif", word: 'Georgia'}),
+	mono: Object.freeze({stack: 'mono', css: "ui-monospace,'Courier New',Courier,monospace", word: 'Courier New'}),
+	system: Object.freeze({stack: 'system', css: 'system-ui,sans-serif', word: 'Calibri'}),
+	hand: Object.freeze({stack: 'hand', css: 'cursive', word: 'Segoe Print'}),
+});
+
+// A family is one font-table name, never a CSS list or an HTML fragment. These readers are also
+// relocated into the parse worker with FONT_CLOSE and their original function names.
+export function normalizeFontFamily(value) {
+	if (typeof value !== 'string') return null;
+	const family = value.trim();
+	return family && family.length <= 256 && family.isWellFormed() && !/[\u0000-\u001f\u007f<>\u2028\u2029]/.test(family) && !family.includes('--') ? family : null;
+}
+
+export function fontFamilyCss(value) {
+	const family = normalizeFontFamily(value);
+	if (family == null) return '';
+	const generic = Object.hasOwn(FONT_STACKS, family.toLowerCase()) ? FONT_STACKS[family.toLowerCase()] : null;
+	return generic ? generic.css || "'Geist',system-ui,sans-serif" : '"' + family.replace(/[\\"]/g, '\\$&') + '"';
+}
+
+export function formatFontOpen(family) {
+	const name = normalizeFontFamily(family);
+	if (!name) throw new TypeError('font: use one family name');
+	return '<!--f ' + name + '-->';
+}
+
+export function formatFontRun(family, content) {
+	return formatFontOpen(family) + content + FONT_CLOSE;
+}
+
+export function matchFontOpen(text) {
+	if (typeof text !== 'string') return null;
+	const match = /^<!--f ([^<>\r\n]{1,256})-->/.exec(text);
+	const family = match && normalizeFontFamily(match[1]);
+	return family ? {family, length: match[0].length} : null;
+}
+
+export function parseFontOpen(comment) {
+	const match = matchFontOpen(comment);
+	return match && match.length === comment.length ? match.family : null;
+}
+
+export function isFontClose(comment) {
+	return comment === FONT_CLOSE;
+}
+
+export function scanFontMarkers(source) {
+	const text = String(source ?? ''), markers = [];
+	const scan = /<!--(?:f [^<>\r\n]{1,256}|\/f)-->/g;
+	for (const match of text.matchAll(scan)) {
+		const family = match[0] === FONT_CLOSE ? null : parseFontOpen(match[0]);
+		if (family || match[0] === FONT_CLOSE) markers.push({start: match.index, end: match.index + match[0].length, family});
+	}
+	return markers;
+}
+
+export function pairFontMarkers(source, markers = null) {
+	return pairMarkers(source, 'font', markers);
+}
+
+export function stripFontMarkers(source) {
+	const text = String(source ?? '');
+	let result = '', at = 0;
+	for (const marker of scanFontMarkers(text)) { result += text.slice(at, marker.start); at = marker.end; }
+	return result + text.slice(at);
+}
+
+export function hasFontMarker(source) {
+	return scanFontMarkers(source).length > 0;
+}
+
 const INK_CLOSE = '<!--/ink-->';
 export { INK_KINDS, INK_CLOSE, INK_PATH_MAX, INK_INT_MAX, INK_OPEN_PATTERN };
 
@@ -211,6 +286,37 @@ export function isInkClose(comment) {
 
 // Every ink marker in order: {start, end, mark} for an opener (mark null for a closer, and an opener whose path
 // overflows is not a marker at all).
+// Without a prior arrow or adjacent marker bytes, only an edit boundary can empty a span.
+// Read those boundaries through the planned rows before asking the full grammar to retire ink.
+export function mayRetireInk(source, rows) {
+  if (source.contains('<!--ink arrow ') || source.contains('<!--ink end ') || source.contains('--><!--')) return true;
+  let pieces = [{from: 0, length: source.length}], length = source.length;
+  const slice = (start, end) => {
+    const selected = [];
+    let at = 0;
+    for (const piece of pieces) {
+      const low = Math.max(start, at), high = Math.min(end, at + piece.length);
+      if (high > low) selected.push(piece.text === undefined
+        ? {from: piece.from + low - at, length: high - low}
+        : {text: piece.text.slice(low - at, high - at), length: high - low});
+      at += piece.length;
+      if (at >= end) break;
+    }
+    return selected;
+  };
+  const read = (start, end) => slice(start, end).map(piece => piece.text === undefined
+    ? source.readSlice(piece.from, piece.from + piece.length) : piece.text).join('');
+  for (const row of rows) {
+    const end = row.pos + row.removed.length;
+    if (row.pos < 0 || end > length) return true;
+    const local = read(Math.max(0, row.pos - 6), row.pos) + row.inserted + read(end, Math.min(length, end + 6));
+    if (local.includes('--><!--')) return true;
+    pieces = [...slice(0, row.pos), {text: row.inserted, length: row.inserted.length}, ...slice(end, length)];
+    length += row.inserted.length - row.removed.length;
+  }
+  return false;
+}
+
 export function scanInkMarkers(source) {
 	const text = String(source == null ? '' : source);
 	const scan = new RegExp(INK_OPEN_PATTERN + '|' + INK_CLOSE.replace(/[-]/g, '\\-'), 'g');
@@ -236,7 +342,7 @@ export function pairInkSpans(source, markers = null) {
 	return pairSpanMarkers(source, 'ink', markers);
 }
 
-// Colour keeps its first opener; ink pairs each closer with the innermost opener. The shared range
+// Colour and font keep their first opener; ink pairs each closer with the innermost opener. The shared range
 // shape lets custody owners keep every independent stroke, including strokes on identical words.
 export function pairMarkers(source, kind, markers = null) {
 	const paired = pairSpanMarkers(source, kind, markers);
@@ -483,19 +589,19 @@ export function quotedWillSpan(source, spans) {
 }
 
 function pairSpanMarkers(source, kind, markers = null) {
-	if (kind !== 'ink' && kind !== 'color') throw new TypeError('Unknown paired marker kind');
-	const color = kind === 'color';
+	if (kind !== 'ink' && kind !== 'color' && kind !== 'font') throw new TypeError('Unknown paired marker kind');
+	const color = kind === 'color', font = kind === 'font';
 	const runs = [], strays = [], stack = [];
-	for (const marker of markers || (color ? scanColorMarkers(source) : scanInkMarkers(source))) {
-		if (color ? marker.hex !== null : !marker.close) {
-			if (color && stack.length) { strays.push(marker); continue; }
+	for (const marker of markers || (color ? scanColorMarkers(source) : font ? scanFontMarkers(source) : scanInkMarkers(source))) {
+		if (color ? marker.hex !== null : font ? marker.family !== null : !marker.close) {
+			if ((color || font) && stack.length) { strays.push(marker); continue; }
 			stack.push(marker);
 			continue;
 		}
 		const open = stack.pop();
 		if (!open) { strays.push(marker); continue; }
 		runs.push({ start: open.start, end: marker.end, innerStart: open.end, innerEnd: marker.start,
-			...(color ? { hex: open.hex } : { mark: open.mark }) });
+			...(color ? { hex: open.hex } : font ? {family: open.family} : { mark: open.mark }) });
 	}
 	strays.push(...stack);
 	runs.sort((a, b) => a.start - b.start);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rapier-markdown-kit",
-  "version": "1.1.99",
+  "version": "1.1.101",
   "description": "Read, render and write Self-contained Markdown: one .md file that carries its pictures, drawings and layout, and that any Markdown app can read. HTML renderer, stylesheet, text layout, Will/1 agent permissions, and an edit history with authorship and offline merge. MIT, no dependencies.",
   "keywords": [
     "markdown",