rapier-markdown-kit 1.1.24 → 1.1.28

package/dist/spec/md-layout.mjs

@@ -2,12 +2,14 @@
 
 // `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.
-export const fields = new Set(['align', 'width', 'wrap', 'x', 'y', 'rotate', 'opacity']);
+// `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.
+export const fields = new Set(['align', 'width', 'wrap', 'x', 'y', 'rotate', 'opacity', 'first', 'indent']);
 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 level = value => Number.isInteger(value) && value >= 1 && value <= 4;
 const oneDecimalDegrees = value => typeof value === 'number' && Number.isFinite(value) &&
   value > -180 && value <= 180 && Math.abs(value * 10 - Math.round(value * 10)) < 1e-9;
 
@@ -22,6 +24,7 @@ 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, 'align') && (has(value, 'wrap') || has(value, 'x')));
 }
 
@@ -56,6 +59,9 @@ export function parseLayout(comment) {
     } else if (key === 'opacity') {
       if (!/^[1-9]\d{0,2}%$/.test(raw)) return null;
       value.opacity = Number(raw.slice(0, -1));
+    } else if (key === 'first' || key === 'indent') {
+      if (!/^[1-4]$/.test(raw)) return null;
+      value[key] = Number(raw);
     } else value[key] = raw;
   }
   return validLayout(value) ? value : null;

package/dist/spec/md-marks.mjs

@@ -55,6 +55,10 @@ export function scanColorMarkers(source) {
 	return markers;
 }
 
+export function pairColorMarkers(source) {
+	return pairMarkers(source, 'color');
+}
+
 export function stripColorMarkers(text) {
 	return String(text == null ? '' : text).replace(new RegExp('<!--(?:c ' + COLOR_VALUE + '|/c)-->', 'g'), '');
 }
@@ -63,6 +67,168 @@ export function hasColorMarker(text) {
 	return new RegExp('<!--(?:c ' + COLOR_VALUE + '|/c)-->').test(String(text == null ? '' : text));
 }
 
+// Ink (docs/markdown-standard.md, "Ink"; the design docs/briefs/ink.md): a pen stroke that stays with the words it
+// marks, a paired comment with the colour span's shape. The opener holds the stroke:
+//   <!--ink KIND [COLOUR] [box=W,H] [at=X,Y] PATH-->words<!--/ink-->
+// KIND is the stroke's kind, decided once when it was lifted; COLOUR is exactly the colour span's value, red when
+// absent; box is the frame's size when the stroke was drawn and at the frame's offset from the words' box, both in
+// hundredths of an em; PATH is the stroke, its first point absolute in the frame and the rest as moves, hundredths of an
+// em. One spelling: the fields in this order, one space between, integers only. A comment that does not read this way
+// is ordinary comment text and marks nothing. Ink pairs do not nest in each other.
+const INK_KINDS = Object.freeze(['under', 'strike', 'ring', 'bracket', 'free']);
+const INK_CLOSE = '<!--/ink-->';
+const INK_PATH_MAX = 160;
+const INK_INT_MAX = 999999;
+const INK_INT = '-?\\d{1,6}';
+const INK_OPEN_BODY = '(' + INK_KINDS.join('|') + ')(?: (' + COLOR_VALUE + '))?(?: box=(\\d{1,6}),(\\d{1,6}))?(?: at=(' + INK_INT + '),(' + INK_INT + '))?'
+	+ ' (' + INK_INT + ',' + INK_INT + '(?: ' + INK_INT + ',' + INK_INT + ')*)';
+const INK_OPEN_PATTERN = '<!--ink ' + INK_OPEN_BODY + '-->';
+
+export { INK_KINDS, INK_CLOSE, INK_PATH_MAX, INK_INT_MAX };
+
+const inkInt = (value, name) => {
+	if (!Number.isInteger(value) || Math.abs(value) > INK_INT_MAX) throw new TypeError('ink: ' + name + ' must be an integer within ' + INK_INT_MAX);
+	return value;
+};
+const inkPair = (value, name, nonNegative = false) => {
+	if (!Array.isArray(value) || value.length !== 2) throw new TypeError('ink: ' + name + ' must be a pair of integers');
+	const pair = [inkInt(value[0], name), inkInt(value[1], name)];
+	if (nonNegative && (pair[0] < 0 || pair[1] < 0)) throw new TypeError('ink: ' + name + ' must not be negative');
+	return pair;
+};
+
+// {kind, hex?, box?, at?, path} to the opener; the path's points are absolute in the frame and become moves after the
+// first. Refuses with a TypeError rather than writing a spelling the reader would not read.
+export function formatInkOpen(mark) {
+	if (!mark || typeof mark !== 'object') throw new TypeError('ink: a mark is an object');
+	if (!INK_KINDS.includes(mark.kind)) throw new TypeError('ink: the kind is one of ' + INK_KINDS.join(', '));
+	let colour = '';
+	if (mark.hex != null) {
+		const value = TEXT_COLOR_HEX_TO_NAME[mark.hex] || mark.hex;
+		if (!new RegExp('^' + COLOR_VALUE + '$').test(value)) throw new TypeError('ink: the colour is the colour span\'s value');
+		colour = ' ' + value;
+	}
+	const box = mark.box == null ? '' : ' box=' + inkPair(mark.box, 'box', true).join(',');
+	const at = mark.at == null ? '' : ' at=' + inkPair(mark.at, 'at').join(',');
+	if (!Array.isArray(mark.path) || !mark.path.length || mark.path.length > INK_PATH_MAX) throw new TypeError('ink: the path holds 1 to ' + INK_PATH_MAX + ' points');
+	const points = mark.path.map(point => inkPair(point, 'path'));
+	const moves = [points[0].join(',')];
+	for (let i = 1; i < points.length; i++) moves.push([inkInt(points[i][0] - points[i - 1][0], 'path move'), inkInt(points[i][1] - points[i - 1][1], 'path move')].join(','));
+	return '<!--ink ' + mark.kind + colour + box + at + ' ' + moves.join(' ') + '-->';
+}
+
+export function formatInkRun(mark, content) {
+	return formatInkOpen(mark) + content + INK_CLOSE;
+}
+
+function readInkMatch(match) {
+	const moves = match[7].split(' ').map(pair => pair.split(',').map(Number));
+	if (moves.length > INK_PATH_MAX) return null;
+	const path = [moves[0]];
+	for (let i = 1; i < moves.length; i++) {
+		const point = [path[i - 1][0] + moves[i][0], path[i - 1][1] + moves[i][1]];
+		if (Math.abs(point[0]) > INK_INT_MAX || Math.abs(point[1]) > INK_INT_MAX) return null;
+		path.push(point);
+	}
+	const colour = match[2] || null;
+	return Object.freeze({
+		kind: match[1],
+		hex: colour == null ? null : (colour.charCodeAt(0) === 0x23 ? colour : TEXT_COLOR_NAMES[colour]),
+		box: match[3] == null ? null : [Number(match[3]), Number(match[4])],
+		at: match[5] == null ? null : [Number(match[5]), Number(match[6])],
+		path,
+	});
+}
+
+// Returns {mark, length in UTF-16 units} or null; not end-anchored.
+export function matchInkOpen(text) {
+	if (typeof text !== 'string') return null;
+	const match = new RegExp('^' + INK_OPEN_PATTERN).exec(text);
+	if (!match) return null;
+	const mark = readInkMatch(match);
+	return mark && { mark, length: match[0].length };
+}
+
+export function parseInkOpen(comment) {
+	if (typeof comment !== 'string') return null;
+	const match = new RegExp('^' + INK_OPEN_PATTERN + '$').exec(comment);
+	return match && readInkMatch(match);
+}
+
+// The opener's body is what a rendered span carries (a renderer's sanitizer drops an attribute whose value holds the
+// comment's own close): the opener after `<!--ink ` and before `-->`, so the attribute reads `under red box=… 0,95 …`,
+// and only a body that reads as a mark goes back. Read and write through the same grammar, so an invalid body cannot
+// invent a mark. Relocated into the parse Worker with the three above: reads INK_OPEN_PATTERN and readInkMatch alone.
+export function inkOpenBody(opener) {
+	if (typeof opener !== 'string') return null;
+	const match = new RegExp('^' + INK_OPEN_PATTERN + '$').exec(opener);
+	return match && readInkMatch(match) ? opener.slice(8, -3) : null;
+}
+export function parseInkBody(body) {
+	return typeof body === 'string' ? parseInkOpen('<!--ink ' + body + '-->') : null;
+}
+export function formatInkOpenFromBody(body) {
+	return parseInkBody(body) ? '<!--ink ' + body + '-->' : null;
+}
+
+export function isInkClose(comment) {
+	return comment === INK_CLOSE;
+}
+
+// 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).
+export function scanInkMarkers(source) {
+	const text = String(source == null ? '' : source);
+	const scan = new RegExp(INK_OPEN_PATTERN + '|' + INK_CLOSE.replace(/[-]/g, '\\-'), 'g');
+	const markers = [];
+	let match;
+	while ((match = scan.exec(text))) {
+		if (match[0] === INK_CLOSE) { markers.push({ start: match.index, end: match.index + match[0].length, mark: null, close: true }); continue; }
+		const mark = readInkMatch(match);
+		if (mark) markers.push({ start: match.index, end: match.index + match[0].length, mark, close: false });
+	}
+	return markers;
+}
+
+// The runs: an opener and the next closer with no opener between them. A marker that pairs with nothing is text
+// (it shows nothing and marks nothing) and is listed under strays.
+export function pairInkMarkers(source) {
+	return pairMarkers(source, 'ink');
+}
+
+// Colour keeps the first opener, as its inline parser does; ink replaces an unclosed opener.
+// Neither kind nests in itself. The shared range shape lets custody owners treat both alike.
+export function pairMarkers(source, kind) {
+	if (kind !== 'ink' && kind !== 'color') throw new TypeError('Unknown paired marker kind');
+	const color = kind === 'color';
+	const runs = [], strays = [];
+	let open = null;
+	for (const marker of color ? scanColorMarkers(source) : scanInkMarkers(source)) {
+		if (color ? marker.hex !== null : !marker.close) {
+			if (open) {
+				strays.push(color ? marker : open);
+				if (color) continue;
+			}
+			open = marker;
+			continue;
+		}
+		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 }) });
+		open = null;
+	}
+	if (open) strays.push(open);
+	return { runs, strays };
+}
+
+export function stripInkMarkers(text) {
+	return String(text == null ? '' : text).replace(new RegExp(INK_OPEN_PATTERN + '|' + INK_CLOSE.replace(/[-]/g, '\\-'), 'g'), '');
+}
+
+export function hasInkMarker(text) {
+	return new RegExp(INK_OPEN_PATTERN + '|' + INK_CLOSE.replace(/[-]/g, '\\-')).test(String(text == null ? '' : text));
+}
+
 // The only spelling.
 export function formatPageBreak() {
 	return PAGE_BREAK_MARKER;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rapier-markdown-kit",
-  "version": "1.1.24",
+  "version": "1.1.28",
   "description": "Read, write and style Self-contained Markdown: the universal stylesheet, picture layout, text marks, picture appendix, line planner and Will/1 markers. MIT, no dependencies.",
   "author": "Jack Skipworth",
   "license": "MIT",

package/style.css

@@ -95,6 +95,14 @@
 :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}
 .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}