rapier-markdown-kit 1.1.84 → 1.1.86

package/LICENSE

@@ -49,3 +49,7 @@ re-imports and re-exports that surface unchanged (one owner, no copy) and keeps
 needs the AGPL decoders, so it is AGPL-3.0-only like the rest of the editor. The `rapier-markdown-kit`
 package re-exports `spec/md-assets.mjs` directly, never `images/assets.mjs`, so its import graph
 never touches AGPL code.
+
+The JPEG XL encoder and worker modules in `images/jxl/` carry their MIT license in
+`images/jxl/LICENSE`. The MIT-marked `images/encoder.mjs` and `images/codec.mjs`
+re-export those modules. Their runtime import graph contains no editor code.

package/README.md

@@ -30,9 +30,8 @@ import {parseAssets} from 'rapier-markdown-kit/assets';   // the picture appendi
 
 `rapier-markdown-kit/render` exports `createRenderer`, `createMarkdownRenderer`,
 `createRenderStyles`, `createRenderSanitizer` and `createPrintRenderer`. These are the
-actual editor/Share owners, not a second Markdown dialect or a lookalike stylesheet.
-Their host dependencies are explicit named properties in each factory's first argument;
-no factory reaches into an editor session to find its document. `style.css` is the exact
+functions used by the editor and exported pages. Each factory takes explicit host dependencies
+in its first argument. `style.css` is the
 MIT `spec/markdown-style.css`, including the numbered-list, checkbox, callout, table,
 footnote and picture-layout treatment.
 
@@ -52,20 +51,15 @@ Every existing lower-level method is also returned for hosts that compose the st
 Create a new bound instance when its parser or host state changes; do not share mutable
 DOM objects between document realms.
 
-This is a **DOM-hosted library**, not a bundled headless browser, DOM shim, parser or
-image decoder. Supplying only `{source}` or running it in bare Node without those ports
-is not supported. A host must provide a real DOM and sanitizer, the Rapier grammar,
+This **DOM-hosted library** requires a DOM and sanitizer, the Rapier grammar,
 portable image preparation, style access and the named codec/layout ports it uses.
 Those dependencies keep their own licences: the MIT grant here does not relicense a
 separately supplied host or vendor. The repository's `editor/render-host.js` binds the
 editor; `server/` provides a complete local host with a pinned Chromium process. Its
 Word exporter and filesystem service are AGPL, not part of this MIT package.
 
-The extraction receipt in the existing `html-export-corpus` row fixes all 226 baseline
-writer pages byte for byte. That corpus supplies a clean DOM and named style/sanitizer
-adapters: it proves serialization and source recovery, not browser appearance or
-sanitizer security. The server's integration cells additionally use a real DOM and
-round-trip the actual HTTP output.
+Serialization tests preserve source bytes through HTML export and recovery. Server integration
+tests also check the exported HTTP response through a browser DOM.
 
 ## What it gives you
 

package/dist/kit/render-markdown.mjs

@@ -119,6 +119,17 @@ function initMarkdownIt() {
 		if (!env.rapierPage && typeof globalThis.RapierEmbeddedImages?.imageHtml === 'function' &&
 			(_rapierEmbedAssetSource?.(src) || asset && (reference || asset.codec === 'image/jxl' || asset.codec === 'image/svg+xml'))) return globalThis.RapierEmbeddedImages.imageHtml(
 			reference, alt, title, size, layout, rawAlt, token.meta?.mdImage?.source, src);
+		let loadable = false;
+		try { loadable = !!src.trim() && /^(?:https?|file|blob|data):$/.test(new URL(src, globalThis.document?.baseURI || globalThis.location?.href || 'https://rapier.invalid/').protocol); } catch (_) {}
+		if (!loadable) {
+			const escape = md.utils.escapeHtml;
+			return '<span data-rapier-markdown-image="" data-rapier-remote-src="' + escape(src) + '" data-rapier-remote-alt="' + escape(alt) + '"'
+				+ (title ? ' data-rapier-remote-title="' + escape(title) + '"' : '')
+				+ (size ? ' data-rapier-image-alt-source="' + escape(rawAlt) + '"' : '')
+				+ (layout ? ' data-rapier-image-layout="' + escape(encodeURIComponent(layout)) + '"' : '')
+				+ (token.meta?.mdImage?.source ? ' data-rapier-image-source="' + escape(encodeURIComponent(token.meta.mdImage.source)) + '"' : '')
+				+ '>' + escape(alt || src) + '</span>';
+		}
 		if (!env.rapierPage && !_rapierRemoteContent.allowed && _rapierRemoteSubresourceOrigin(src)) {
 			const html = _rapierRemoteImagePlaceholder(src, alt, title, size, layout, rawAlt);
 			return html.replace('<span ', '<span data-rapier-markdown-image="" ' +
@@ -906,9 +917,9 @@ function _rapierProjectPortableRoot(semanticRoot, options) {
 	// consumers that read HTML -- publishing/fragment export, TXT. DOCX is not an HTML consumer: its
 	// writer (interchange/docx.mjs) reads the layout comment itself, so stripping it first and
 	// handing back CSS only throws the fact away before the writer ever sees it. `keepLayoutData`
-	// leaves `data-rapier-image-layout` (width, align AND rotation) and the paragraph's
-	// `data-md-align` exactly as the semantic root already carries them, instead of the CSS-only
-	// projection, so the one existing layout representation reaches the writer.
+	// leaves the image and text layout records, ink meaning and paragraph alignment exactly as
+	// the semantic root carries them. Ordinary paragraph/list CSS measurements also reach their
+	// native reader; no derived private CSS is needed.
 	const keepLayoutData = !!opts.keepLayoutData;
 	const root = semanticRoot.cloneNode(true), nativeElements = new Set();
 	// A source soft break is a reading space, never the editor's invisible token.
@@ -986,10 +997,16 @@ function _rapierProjectPortableRoot(semanticRoot, options) {
 	root.querySelectorAll('*').forEach(element => {
 		if (nativeElements.has(element)) return;
 		const lang = element.tagName === 'CODE' ? _rapierLanguageClass(element) : '';
+		// The native note reader needs these transient roles to omit the renderer's
+		// separator and return-link spacing before it compares source-owned review notes.
+		const footnoteRole = keepLayoutData ? ['footnote-backref', 'footnotes-sep']
+			.filter(name => element.classList.contains(name)).join(' ') : '';
 		const columnAlignment = /^(TH|TD)$/.test(element.tagName) && /^(left|center|right)$/.test(element.style.textAlign)
 			? element.style.textAlign : '';
 		const alignment = globalThis.RapierMarkdownLayout.parseLayoutAttribute(element.getAttribute('data-md-layout'))?.align || columnAlignment;
 		const imageLayout = element.tagName === 'IMG' ? globalThis.RapierMarkdownLayout.parseLayoutAttribute(element.getAttribute('data-rapier-image-layout')) : null;
+		const measurements = keepLayoutData && /^(?:P|H[1-6]|LI|OL|UL)$/.test(element.tagName)
+			? ['text-indent', 'margin-inline-start'].map(property => [property, element.style.getPropertyValue(property)]) : [];
 
 		const colorHex = element.tagName === 'SPAN' ? element.getAttribute('data-md-color') : null;
 
@@ -1002,14 +1019,16 @@ function _rapierProjectPortableRoot(semanticRoot, options) {
 		const isPageBreak = element.hasAttribute('data-md-break');
 		Array.from(element.attributes).forEach(attribute => {
 			const name = attribute.name.toLowerCase();
-			if (keepLayoutData && (name === 'data-rapier-image-layout' || name === 'data-md-align')) return;
+			if (keepLayoutData && (name === 'data-rapier-image-layout' || name === 'data-md-layout' || name === 'data-md-align' || name === 'data-rapier-ink')) return;
 			if (name === 'class' || name === 'style' || name.startsWith('data-')
 					|| name === 'contenteditable' || name === 'spellcheck'
 					|| name === 'tabindex' || name === 'disabled' || name === 'aria-disabled') {
 				element.removeAttribute(attribute.name);
 			}
 		});
+		if (footnoteRole) element.className = footnoteRole;
 		if (lang) element.className = 'language-' + lang;
+		for (const [property, value] of measurements) if (value) element.style.setProperty(property, value);
 		if (alignment) element.style.textAlign = alignment;
 		if (imageLayout && !keepLayoutData) {
 			const pictureStyle = globalThis.RapierMarkdownLayout.imageStyle(imageLayout);
@@ -1051,11 +1070,11 @@ function _rapierPictureWords(alt, src) {
 	return alt ? '[Image: ' + alt + ']' : '[Image]';
 }
 
-// A remote picture written as Markdown stands in the editor, until the person allows remote content, as a placeholder: its words, its origin and a
-// button. The text file says the picture as it does once the person has allowed it, its words and its address, never the placeholder's controls.
+// Held Markdown and HTML pictures keep their addresses as inert data. Text export reads them before
+// the portable projection removes editor attributes, without restoring a fetching image source.
 function _rapierHeldPicturesAsWords(root) {
 	const copy = root.cloneNode(true);
-	copy.querySelectorAll('span[data-rapier-remote-src]').forEach(held => held.replaceWith(document.createTextNode(
+	copy.querySelectorAll('span[data-rapier-remote-src],img[data-rapier-remote-src]').forEach(held => held.replaceWith(document.createTextNode(
 		_rapierPictureWords(String(held.getAttribute('data-rapier-remote-alt') || '').trim(), String(held.getAttribute('data-rapier-remote-src') || '').trim()))));
 	return copy;
 }
@@ -1133,7 +1152,7 @@ function _rapierPortablePlainText(root, options) {
 	const opts = options || {};
 	const blocks = [];
 	const blockTags = new Set([
-		'ADDRESS','ARTICLE','ASIDE','BLOCKQUOTE','DETAILS','DIV','DL','FIELDSET','FIGURE','FOOTER',
+		'ADDRESS','ARTICLE','ASIDE','BLOCKQUOTE','DETAILS','DIV','DL','FIELDSET','FIGCAPTION','FIGURE','FOOTER',
 		'FORM','H1','H2','H3','H4','H5','H6','HEADER','HR','MAIN','NAV','OL','P','PRE','SECTION','TABLE','UL'
 	]);
 
@@ -1235,13 +1254,6 @@ function _rapierPortablePlainText(root, options) {
 			Array.from(node.children).filter(child => child !== summary).forEach(collectBlock);
 			return;
 		}
-		if (tag === 'FIGURE') {
-			const image = node.querySelector(':scope > img');
-			if (image) pushBlock(_rapierPortableInlineText(image, opts), false);
-			const caption = node.querySelector(':scope > figcaption');
-			if (caption) pushBlock(_rapierNormalizeInlineText(_rapierPortableInlineText(caption, opts)), false);
-			return;
-		}
 		collectChildren(node);
 	};
 

package/dist/kit/render-sanitize.mjs

@@ -270,7 +270,7 @@ function _rapierInstallSanitizeHooks() {
 			&& _rapierSafeRasterDataUrl(compact);
 		if (!rasterAllowed) data.keepAttr = false;
 	});
-	// Paste and render sanitise: a remote <img src> would fetch the instant its markup lands in the page,
+	// Paste, render and export sanitise: a remote <img src> would fetch the instant its markup lands in the page,
 	// so the src the hook below is about to strip never survives. Move it to a data-* attribute first
 	// (DOMPurify already leaves data-* alone, and the sanitizer's own inert document never fetches it
 	// either), so the picture and its alt text still reach Turndown's rapierImage rule as a live
@@ -279,7 +279,7 @@ function _rapierInstallSanitizeHooks() {
 	// only the three this hook sets on the node it holds back stay. A picture inside a link is the same
 	// node with the same fix: the outer <a> rule reads this img's own converted markdown as its content.
 	DOMPurify.addHook('uponSanitizeElement', node => {
-		if (_rapierRemoteContent.allowed || !/^(?:paste|render|raw)$/.test(_rapierSanitizeRuntime.context)) return;
+		if (_rapierRemoteContent.allowed || !/^(?:paste|render|raw|export)$/.test(_rapierSanitizeRuntime.context)) return;
 		if (!node || node.nodeName !== 'IMG' || node.hasAttribute('data-rapier-remote-src')) return;
 		const src = node.getAttribute('src') || '';
 		if (!src || !_rapierRemoteSubresourceOrigin(src)) return;
@@ -318,6 +318,8 @@ function _rapierInstallSanitizeHooks() {
 			return;
 		}
 		const attribute = String(data.attrName || '').toLowerCase();
+		// These attributes carry authored text, never resource requests.
+		if (attribute === 'alt' || attribute === 'title') return;
 		if (/^data-rapier-remote-(?:src|alt|title)$/.test(attribute) && node && node._rapierHeldBack === true) { data.forceKeepAttr = true; return; }
 		if (attribute.startsWith('data-')) return;
 		const element = String(node && node.nodeName || '').toUpperCase();

package/dist/spec/md-layout.mjs

@@ -4,17 +4,25 @@
 // `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`.
-// `first`/`indent`: a paragraph's first-line indent and its whole-block indent, in levels of one step (2em), a whole number from 1 to 4, omitted when 0; text
-// only.
+// `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', 'lock']);
+export const fields = new Set(['align', 'width', 'lines', 'wrap', 'x', 'y', 'rotate', 'opacity', 'first', 'indent', 'marker', 'lock']);
 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']);
 const has = (value, key) => Object.hasOwn(value, key);
 const percent = value => typeof value === 'number' && Number.isFinite(value) && value >= 0 && value <= 100;
 const lineCount = value => Number.isInteger(value) && value >= 1 && value <= 12;
-const level = value => Number.isInteger(value) && value >= 1 && value <= 4;
+export const INDENT_LIMIT = 64;
+export const indentLevel = value => typeof value === 'number' && Number.isFinite(value) && value !== 0 &&
+  Math.abs(value) <= INDENT_LIMIT && Number(value.toFixed(6)) === value;
+// A key press advances an imported measure by one level without truncating its fraction or jumping across zero.
+export function stepIndent(value, step) {
+  const next = Number(((value || 0) + step).toFixed(6));
+  if (Math.abs(next) > INDENT_LIMIT) return value || 0;
+  return !value && step < 0 || value && Math.sign(value) !== Math.sign(next) ? 0 : next;
+}
 const oneDecimalDegrees = value => typeof value === 'number' && Number.isFinite(value) &&
   value > -180 && value <= 180 && Math.abs(value * 10 - Math.round(value * 10)) < 1e-9;
 
@@ -30,7 +38,8 @@ export function validLayout(value) {
     (!has(value, 'y') || typeof value.y === 'number' && Number.isFinite(value.y) && value.y >= -50 && has(value, 'wrap')) &&
     (!has(value, 'rotate') || oneDecimalDegrees(value.rotate)) &&
     (!has(value, 'opacity') || Number.isInteger(value.opacity) && value.opacity >= 5 && value.opacity <= 100) &&
-    (!has(value, 'first') || level(value.first)) && (!has(value, 'indent') || level(value.indent)) &&
+    (!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, 'align') && (has(value, 'wrap') || has(value, 'x')));
 }
@@ -69,8 +78,8 @@ export function parseLayout(comment) {
     } else if (key === 'lines') {
       if (!/^[1-9]\d?$/.test(raw)) return null;
       value.lines = Number(raw);
-    } else if (key === 'first' || key === 'indent') {
-      if (!/^[1-4]$/.test(raw)) return null;
+    } else if (key === 'first' || key === 'indent' || key === 'marker') {
+      if (!/^-?(?:0|[1-9]\d?)(?:\.\d{1,6})?$/.test(raw)) return null;
       value[key] = Number(raw);
     } else value[key] = raw;
   }
@@ -85,6 +94,38 @@ export function decodeLayoutAttribute(value) {
 
 export const parseLayoutAttribute = value => parseLayout(decodeLayoutAttribute(value));
 
+// Indentation uses the document's body type, including on headings. Native table measurements
+// become ordinary CSS points; an item's margin is compensated by its paragraph and nested list.
+export function textStyle(value, {portable = false, pointSize, indentOffset = 0} = {}) {
+  if (!validLayout(value)) return '';
+  const property = {first: 'text-indent', indent: 'margin-inline-start'};
+  return (portable ? ['first', 'indent'] : ['first', 'indent', 'marker'])
+    .filter(key => has(value, key) || key === 'indent' && indentOffset).map(key => {
+      const level = (value[key] || 0) + (key === 'indent' ? indentOffset : 0);
+      const measure = decimal(Number((level * 2).toFixed(6)));
+      return (portable ? property[key] : '--md-' + key) + ':' + (portable ?
+        pointSize ? decimal(Math.round(level * pointSize * 40) / 20) + 'pt' : measure + 'em' :
+        'calc(' + measure + ' * var(--md-text-body))');
+    }).join(';');
+}
+
+// Raw HTML tables carry ordinary paragraph CSS. Read the browser's parsed declarations on the same
+// admitted scale; the native caller supplies the body's point size. A list marker belongs to its own li,
+// never to a paragraph or a picture.
+export function textLayout(style, {listMarker = false, pointSize, offset = 0} = {}) {
+  const value = {};
+  for (const [key, property] of (listMarker ? [['marker', 'margin-inline-start']] : [['first', 'text-indent'], ['indent', 'margin-inline-start']])) {
+    const raw = style?.getPropertyValue(property).trim() || '';
+    const match = /^(-?(?:0|[1-9]\d*)(?:\.\d{1,6})?)(em|pt)$/.exec(raw);
+    const level = Number(((match ? Number(match[1]) / (match[2] === 'pt' ? pointSize : 1) / 2 : 0) +
+      (key === 'first' ? 0 : offset)).toFixed(6));
+    // Public CSS may compensate an enclosing item's margin; the resolved native coordinate,
+    // rather than each intermediate declaration, is the measurement the writer must keep.
+    if (Number.isFinite(level) && level) value[key] = level;
+  }
+  return value;
+}
+
 // The picture's own CSS: its normal-flow width and x, its height in lines, and its fade. `1cap` is the cap height of the
 // picture's own text; a renderer that sets the picture beside its anchor measures that paragraph's line and cap instead.
 export function imageStyle(value) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rapier-markdown-kit",
-  "version": "1.1.84",
+  "version": "1.1.86",
   "description": "Read, render, write and style Self-contained Markdown, and carry its optional edit ledger: the shared HTML writer, semantic renderer, stylesheet, layout, marks, pictures, Will/1, replay, authorship and offline merge. MIT, no npm dependencies.",
   "keywords": [
     "markdown",

package/style.css

@@ -132,14 +132,8 @@
 :where(.md-render) [data-md-align="center"]{text-align:center!important}
 :where(.md-render) [data-md-align="right"]{text-align:right!important}
 :where(.md-render) [data-md-align="justify"]{text-align:justify!important}
-:where(.md-render) p[data-md-first="1"]{text-indent:2em}
-:where(.md-render) p[data-md-first="2"]{text-indent:4em}
-:where(.md-render) p[data-md-first="3"]{text-indent:6em}
-:where(.md-render) p[data-md-first="4"]{text-indent:8em}
-:where(.md-render) p[data-md-indent="1"]{margin-inline-start:2em}
-:where(.md-render) p[data-md-indent="2"]{margin-inline-start:4em}
-:where(.md-render) p[data-md-indent="3"]{margin-inline-start:6em}
-:where(.md-render) p[data-md-indent="4"]{margin-inline-start:8em}
+:where(.md-render) p[data-md-first]{--md-first:0px;text-indent:var(--md-first)}
+.md-render :is(p,h1,h2,h3,h4,h5,h6)[data-md-indent]{--md-indent:0px;margin-inline-start:var(--md-indent)}
 .md-render p[data-md-align="center"]>img{margin-inline:auto}
 .md-render p[data-md-align="right"]>img{margin-left:auto;margin-right:0}
 :where(.md-render) p[data-md-layout-tight]{margin-block:0!important}
@@ -264,10 +258,10 @@
 .md-render p{margin:0 0 var(--md-line)}
 .md-render ul,.md-render ol{margin:0 0 var(--md-line);padding-inline-start:var(--md-space-5)}
 .md-render ul{list-style:none}
-.md-render ul>li{position:relative}
+.md-render ul>li{position:relative;--md-marker:0px}
 
 .md-render ul>li::before{
-	content:'';position:absolute;inset-inline-start:calc(-1*var(--md-space-4));top:.66em;
+	content:'';position:absolute;inset-inline-start:calc(-1*var(--md-space-4) + var(--md-marker, 0px));top:.66em;
 	width:7px;height:7px;border-radius:50%;background:currentColor}
 .md-render ul ul>li::before{
 	box-sizing:border-box;background:transparent;border:2px solid currentColor}
@@ -347,6 +341,7 @@
 }
 .md-render ol>li{
 	position:relative;
+	--md-marker:0px;
 	counter-increment:rapier-ol;
 	min-height:calc(2 * var(--md-unit));
 	padding-top:calc(0.15 * var(--md-unit));
@@ -355,7 +350,7 @@
 	content:counter(rapier-ol);
 	position:absolute;
 	/* The circle is centred on the item's first line: the li's own padding, plus half of what the 2rem circle is taller than one line. */
-	inset-inline-start:calc(-2.75 * var(--md-unit)); top:calc(calc(0.15 * var(--md-unit)) + (var(--md-line) - calc(2 * var(--md-unit))) / 2);
+	inset-inline-start:calc(-2.75 * var(--md-unit) + var(--md-marker, 0px)); top:calc(calc(0.15 * var(--md-unit)) + (var(--md-line) - calc(2 * var(--md-unit))) / 2);
 	width:calc(2 * var(--md-unit)); height:calc(2 * var(--md-unit));
 	display:flex; align-items:center; justify-content:center;
 	border:2px solid var(--md-color-line);
@@ -372,7 +367,7 @@
 	content:'';
 	position:absolute;
 
-	inset-inline-start:calc(calc(-1.75 * var(--md-unit)) - 1.5px);
+	inset-inline-start:calc(calc(-1.75 * var(--md-unit)) - 1.5px + var(--md-marker, 0px));
 	top:calc(2.2 * var(--md-unit));
 	bottom:calc(var(--md-line) / -4);
 	border-inline-start:3px dotted var(--md-color-line);