rapier-markdown-kit 1.2.43 → 1.2.45

package/dist/kit/render-markdown.mjs

@@ -459,10 +459,215 @@ function initMarkdownIt() {
 	globalThis.RapierImageAssets.configureParser(md, _rapierSplitOpeningFrontmatter);
 	const render = md.renderer.render;
 	md.renderer.render = function (tokens, options, env) {
-		return render.call(this, _rapierCloseOpenDetails(tokens), options, env);
+		return render.call(this, _rapierHideForeignParagraphs(_rapierCloseOpenDetails(tokens)), options, env);
 	};
 }
 
+function _rapierHtmlTagStack(html, stack = []) {
+	if (!html) return stack;
+	const swallow = _rapierHtmlTagStack.swallow || (_rapierHtmlTagStack.swallow = new Set('select template textarea title style xmp plaintext noscript iframe noembed noframes script svg math'.split(' ')));
+	const rawTags = _rapierHtmlTagStack.raw || (_rapierHtmlTagStack.raw = new Set('script style textarea title xmp iframe noembed noframes noscript plaintext'.split(' ')));
+	let i = 0;
+	while (i < html.length) {
+		const top = stack.at(-1);
+		if (top && top.raw) {
+			const closer = new RegExp('</' + top.name + '(?=[\\t\\n\\f\\r />])', 'ig');
+			closer.lastIndex = i;
+			const found = closer.exec(html);
+			if (!found) break;
+			i = found.index;
+		}
+		const open = html.indexOf('<', i);
+		if (open < 0) break;
+		if (html.startsWith('<!--', open)) {
+			const end = html.indexOf('-->', open + 4);
+			if (end < 0) break;
+			i = end + 3;
+			continue;
+		}
+		if (html.startsWith('<!', open) || html.startsWith('<?', open)) {
+			const end = html.indexOf('>', open + 2);
+			i = end < 0 ? html.length : end + 1;
+			continue;
+		}
+		const match = /^<\/?([A-Za-z][A-Za-z0-9:-]*)/.exec(html.slice(open));
+		if (!match) { i = open + 1; continue; }
+		const name = match[1].toLowerCase();
+		let end = open + match[0].length, quote = '';
+		for (; end < html.length; end++) {
+			const character = html[end];
+			if (quote) { if (character === quote) quote = ''; }
+			else if (character === '"' || character === "'") quote = character;
+			else if (character === '>') break;
+		}
+		if (end >= html.length) break;
+		if (html[open + 1] === '/') {
+			let at = stack.length - 1;
+			while (at >= 0 && stack[at].name !== name && !swallow.has(stack[at].name)) at--;
+			if (at >= 0 && stack[at].name === name) stack.length = at;
+		} else stack.push({name, at: open, tagEnd: end + 1, raw: rawTags.has(name)});
+		i = end + 1;
+	}
+	return stack;
+}
+function _rapierForeignOpen(stack) {
+	for (let index = 0; index < stack.length; index++) {
+		const name = stack[index].name;
+		if (name === 'svg' || name === 'math') return true;
+	}
+	return false;
+}
+function _rapierSealBlockHtml(html) {
+	if (!html || html.indexOf('<') < 0) return html;
+	const stack = _rapierHtmlTagStack(html);
+	const swallow = _rapierHtmlTagStack.swallow;
+	const foreign = _rapierSealBlockHtml.foreign || (_rapierSealBlockHtml.foreign = new Set(['svg', 'math']));
+	const cut = stack.find(frame => swallow.has(frame.name) && (frame.raw || foreign.has(frame.name)));
+	if (cut) {
+		const wrappers = stack.filter(frame => frame.at < cut.at);
+		return html.slice(0, cut.at) + _rapierSealBlockTail(html.slice(cut.at), wrappers);
+	}
+	const stale = stack.filter(frame => swallow.has(frame.name));
+	if (!stale.length) return html;
+	let out = html;
+	for (const frame of stale.sort((left, right) => right.at - left.at))
+		out = out.slice(0, frame.at) + escapeRapierHtmlText(out.slice(frame.at, frame.tagEnd)) + out.slice(frame.tagEnd);
+	return out;
+}
+
+function _rapierSealBlockTail(tail, wrappers) {
+	const open = wrappers.map(frame => frame.name);
+	let out = '', i = 0;
+	while (i < tail.length) {
+		const at = tail.indexOf('<', i);
+		if (at < 0) { out += escapeRapierHtmlText(tail.slice(i)); break; }
+		out += escapeRapierHtmlText(tail.slice(i, at));
+		const match = /^<\/([A-Za-z][A-Za-z0-9:-]*)\s*>/.exec(tail.slice(at));
+		if (match && open.at(-1) === match[1].toLowerCase()) {
+			out += match[0];
+			open.pop();
+			i = at + match[0].length;
+			continue;
+		}
+		out += escapeRapierHtmlText(tail[at]);
+		i = at + 1;
+	}
+	return out;
+}
+
+function _rapierRenderTokenHtml(tokens, index, env) {
+	const token = tokens[index], rule = md.renderer.rules[token.type];
+	return token.type === 'inline' ? md.renderer.renderInline(token.children, md.options, env)
+		: rule ? rule(tokens, index, md.options, env, md.renderer) : md.renderer.renderToken(tokens, index, md.options);
+}
+
+function _rapierTokenBlocks(tokens) {
+	const blocks = [];
+	let start = 0, depth = 0;
+	for (let index = 0; index < tokens.length; index++) {
+		depth += tokens[index].nesting || 0;
+		if (depth <= 0) { blocks.push([start, index + 1]); start = index + 1; depth = 0; }
+	}
+	if (start < tokens.length) blocks.push([start, tokens.length]);
+	return blocks;
+}
+function _rapierScanHtmlBlocks(tokens, start, end, stack) {
+	for (let index = start; index < end; index++) {
+		if (tokens[index].type === 'html_block') _rapierHtmlTagStack(tokens[index].content || '', stack);
+	}
+	return stack;
+}
+function _rapierForeignSealRanges(tokens) {
+	const blocks = _rapierTokenBlocks(tokens);
+	const ranges = [];
+	const scanLater = ([start, end], frames) => {
+		if (tokens[start].type !== 'paragraph_open') return _rapierScanHtmlBlocks(tokens, start, end, frames);
+		for (const child of tokens[start + 1] && tokens[start + 1].children || [])
+			if (child.type === 'html_inline') _rapierHtmlTagStack(child.content || '', frames);
+		return frames;
+	};
+	for (let index = 0; index < blocks.length; index++) {
+		const stack = _rapierScanHtmlBlocks(tokens, blocks[index][0], blocks[index][1], []);
+		if (!_rapierForeignOpen(stack)) { ranges.push(blocks[index]); continue; }
+		const frames = stack.map(frame => ({name: frame.name, raw: frame.raw}));
+		let joined = -1;
+		for (let later = index + 1; later < blocks.length && later <= index + 512; later++) {
+			scanLater(blocks[later], frames);
+			if (!_rapierForeignOpen(frames)) { joined = later; break; }
+		}
+		if (joined < 0) { ranges.push(blocks[index]); continue; }
+		const range = [blocks[index][0], blocks[joined][1]];
+		for (let later = index + 1; later <= joined; later++) {
+			const [start, end] = blocks[later];
+			if (tokens[start].type === 'paragraph_open' && tokens[end - 1].type === 'paragraph_close' &&
+				(tokens[start + 1] && tokens[start + 1].children || []).some(child => child.type === 'html_inline'))
+				(range.hide || (range.hide = new Set())).add(start).add(end - 1);
+		}
+		ranges.push(range);
+		index = joined;
+	}
+	return ranges;
+}
+function _rapierHideForeignParagraphs(tokens) {
+	let out = tokens;
+	for (const range of _rapierForeignSealRanges(tokens)) {
+		if (!range.hide) continue;
+		if (out === tokens) out = tokens.slice();
+		for (const index of range.hide) out[index] = Object.assign(Object.create(Object.getPrototypeOf(tokens[index])), tokens[index], {hidden: true});
+	}
+	return out;
+}
+function _rapierMergeForeignBlocks(blocks, source, parser) {
+	const text = String(source || '');
+	const out = [];
+	const inline = new Map();
+	const scanLater = (row, frames) => {
+		if (!row) return frames;
+		if (row.type === 'html_block') return _rapierHtmlTagStack(String(row.raw || ''), frames);
+		if (row.type !== 'paragraph' || String(row.raw || '').indexOf('<') < 0) return frames;
+		let children = inline.get(row);
+		if (!children) {
+			if (!parser && !md) initMarkdownIt();
+			const parsed = (parser || md).parseInline(String(row.raw || ''), {});
+			children = parsed[0] && parsed[0].children || [];
+			inline.set(row, children);
+		}
+		for (const child of children) if (child.type === 'html_inline') _rapierHtmlTagStack(child.content || '', frames);
+		return frames;
+	};
+	let index = 0;
+	while (index < blocks.length) {
+		const block = blocks[index];
+		const stack = [];
+		if (block && block.type === 'html_block') _rapierHtmlTagStack(String(block.raw || ''), stack);
+		if (!_rapierForeignOpen(stack)) { out.push(block); index++; continue; }
+		const frames = stack.map(frame => ({name: frame.name, raw: frame.raw}));
+		let joined = -1;
+		for (let later = index + 1; later < blocks.length && later <= index + 512; later++) {
+			scanLater(blocks[later], frames);
+			if (!_rapierForeignOpen(frames)) { joined = later; break; }
+		}
+		if (joined < 0) { out.push(block); index++; continue; }
+		const start = Number(block._sourceStart), end = Number(blocks[joined]._sourceEnd);
+		const raw = Number.isFinite(start) && Number.isFinite(end) && start >= 0 && end >= start && end <= text.length
+			? text.slice(start, end)
+			: blocks.slice(index, joined + 1).map(row => String(row && row.raw || '')).join('\n\n');
+		out.push({...block, raw, _sourceEnd: Number.isFinite(end) ? end : block._sourceEnd, rendered: null});
+		index = joined + 1;
+	}
+	out._rapierFacts = Array.isArray(blocks && blocks._rapierFacts) ? blocks._rapierFacts.slice() : [];
+	return out;
+}
+function _rapierRenderSealedHtml(tokens, env) {
+	let html = '';
+	for (const range of _rapierForeignSealRanges(tokens)) {
+		let block = '';
+		for (let index = range[0]; index < range[1]; index++) block += range.hide && range.hide.has(index) ? (tokens[index].nesting < 0 ? '\n' : '') : _rapierRenderTokenHtml(tokens, index, env);
+		html += _rapierSealBlockHtml(block);
+	}
+	return html;
+}
+
 function _rapierRenderSemanticRoot(canonical, metadata, options = {}) {
 	const root = document.createElement('template').content.ownerDocument.createElement('div');
 	root.setAttribute('data-rapier-semantic-root', 'true');
@@ -487,20 +692,21 @@ function _rapierRenderSemanticRoot(canonical, metadata, options = {}) {
 	if (wikiLinks) env.rapierWikiLinks = wikiLinks;
 	if (options.mathEquations) env.rapierMathEquations = options.mathEquations;
 	const nesting = md && options.maxNesting > 0 ? options.maxNesting : 0;
-	let cutAt = -1, rendered;
+	let cutAt = -1, rendered = '';
 	codeLeft = options.codeBudget >= 0 ? options.codeBudget : Infinity;
 	try {
-	if (nesting || md && options.closeDetails) {
+	if (!md) rendered = '<pre><code>' + escapeRapierHtmlText(markdown) + '</code></pre>';
+	else {
 		const saved = md.options.maxNesting;
 		if (nesting) md.options.maxNesting = nesting;
 		try {
-			const tokens = md.parse(markdown, env);
+			let tokens = md.parse(markdown, env);
 			if (nesting) cutAt = _rapierNestingCutAt(tokens, nesting);
-			rendered = md.renderer.render(options.closeDetails ? _rapierCloseOpenDetails(tokens) : tokens, md.options, env);
+			tokens = _rapierCloseOpenDetails(tokens);
+			rendered = _rapierRenderSealedHtml(tokens, env);
+			if (md.renderer.rapierTransformHtml) rendered = md.renderer.rapierTransformHtml(rendered);
 		} finally { md.options.maxNesting = saved; }
-	} else rendered = md
-		? md.render(markdown, env)
-		: '<pre><code>' + escapeRapierHtmlText(markdown) + '</code></pre>';
+	}
 	} finally { codeLeft = Infinity; }
 	if (md && env.footnotes && Array.isArray(env.footnotes.list) && env.footnotes.list.length) {
 		const labels = env.footnotes.list.map((item, index) =>
@@ -565,17 +771,22 @@ async function _rapierRenderSemanticRootAsync(canonical, metadata, options = {})
 		while (part.firstChild) root.appendChild(part.firstChild);
 		html = '';
 	};
+	const finishBlock = block => {
+		const sealed = _rapierSealBlockHtml(block);
+		html += sealed;
+		if (boundary(sealed) && html.length >= 16384) append();
+	};
 	try {
-		for (let index = 0; index < tokens.length; index++) {
-			const token = tokens[index], rule = md.renderer.rules[token.type];
-			let rendered = token.type === 'inline' ? md.renderer.renderInline(token.children, md.options, env)
-				: rule ? rule(tokens, index, md.options, env, md.renderer) : md.renderer.renderToken(tokens, index, md.options);
-			html += rendered;
-			if (boundary(rendered) && html.length >= 16384) append();
-			if (performance.now() - began >= 8) {
-				await pause(work, .3 + .2 * (index + 1) / tokens.length);
-				began = performance.now();
+		for (const range of _rapierForeignSealRanges(tokens)) {
+			let block = '';
+			for (let index = range[0]; index < range[1]; index++) {
+				block += range.hide && range.hide.has(index) ? (tokens[index].nesting < 0 ? '\n' : '') : _rapierRenderTokenHtml(tokens, index, env);
+				if (performance.now() - began >= 8) {
+					await pause(work, .3 + .2 * (index + 1) / tokens.length);
+					began = performance.now();
+				}
 			}
+			finishBlock(block);
 		}
 		if (html) append();
 		if (cutAt >= 0) _rapierAppendNestingCut(root, markdown, cutAt);
@@ -1893,7 +2104,7 @@ function renderWithMathML(source, metadata = {}) {
 	return {html, equations};
 }
 
-  return {_rapierReadPartDecorations, renderWithMathML, _rapierClipboardPayloadAsync, _rapierPlainTextFileAsync, _rapierCloneRootAsync, _rapierPortablePlainTextAsync, _rapierHeldPicturesAsWordsAsync, _rapierRenderSemanticRootAsync, _rapierProjectPortableRootAsync, _rapierPortableHtmlAsync, _rapierCalloutInfo, _rapierRemoveCalloutMarker, _rapierMathSource, _rapierFlattenPortableDetails, _rapierProjectPortableRoot, _rapierPortableHtml, _rapierNormalizeInlineText, _rapierPortableInlineText, _rapierPortableListText, _rapierPortableTableText, _rapierPortablePlainText, _rapierPlainTextFile, _rapierHeldPicturesAsWords, _rapierSourceTokenValue, _rapierResolveSoftBreakTokens, _rapierInertParse, _rapierUnwrapElement, _rapierBidiStrong, render: (source, metadata = {}) => { if (!md) initMarkdownIt(); return _rapierRenderSemanticRoot(source, metadata).innerHTML; }, initMarkdownIt, _rapierRenderSemanticRoot, _rapierInstallSemanticProbe, _rapierApplyImageGeometry, _rapierImageAltSize, _rapierImageAltSourceParts, _rapierImageAltText, _rapierImageSizeAttributes, _rapierRawHtmlFragment, _rapierApplyBlockDirection, _rapierFirstStrongDir, _rapierAssignHeadingSlugs, _rapierDisambiguateRenderedAnchors, _rapierDecodeHash, _rapierDecorateJumpLists, _rapierMarkFigureCaptions, _rapierMarkListContinuations, _rapierMarkTableCaptions, _rapierNormalizeCodeElement, _rapierLanguageClass, _relabelFootnoteHtml, _footnoteIdFromLabel, wrapDisplayMath, parser: () => md};
+  return {_rapierReadPartDecorations, renderWithMathML, _rapierClipboardPayloadAsync, _rapierPlainTextFileAsync, _rapierCloneRootAsync, _rapierPortablePlainTextAsync, _rapierHeldPicturesAsWordsAsync, _rapierRenderSemanticRootAsync, _rapierProjectPortableRootAsync, _rapierPortableHtmlAsync, _rapierCalloutInfo, _rapierRemoveCalloutMarker, _rapierMathSource, _rapierFlattenPortableDetails, _rapierProjectPortableRoot, _rapierPortableHtml, _rapierNormalizeInlineText, _rapierPortableInlineText, _rapierPortableListText, _rapierPortableTableText, _rapierPortablePlainText, _rapierPlainTextFile, _rapierHeldPicturesAsWords, _rapierSourceTokenValue, _rapierResolveSoftBreakTokens, _rapierInertParse, _rapierUnwrapElement, _rapierBidiStrong, _rapierSealBlockHtml, _rapierMergeForeignBlocks, render: (source, metadata = {}) => { if (!md) initMarkdownIt(); return _rapierRenderSemanticRoot(source, metadata).innerHTML; }, initMarkdownIt, _rapierRenderSemanticRoot, _rapierInstallSemanticProbe, _rapierApplyImageGeometry, _rapierImageAltSize, _rapierImageAltSourceParts, _rapierImageAltText, _rapierImageSizeAttributes, _rapierRawHtmlFragment, _rapierApplyBlockDirection, _rapierFirstStrongDir, _rapierAssignHeadingSlugs, _rapierDisambiguateRenderedAnchors, _rapierDecodeHash, _rapierDecorateJumpLists, _rapierMarkFigureCaptions, _rapierMarkListContinuations, _rapierMarkTableCaptions, _rapierNormalizeCodeElement, _rapierLanguageClass, _relabelFootnoteHtml, _footnoteIdFromLabel, wrapDisplayMath, parser: () => md};
 }
 export {RAPIER_TABLE_CAPTION_PREFIX_RE as tableCaptionPrefix, RAPIER_PORTABLE_HIGHLIGHT_HEX as portableHighlightHex, _RAPIER_RTL_SCRIPT as rtlScripts, createMarkdownRenderer};
 

package/dist/kit/render-sanitize.mjs

@@ -69,7 +69,8 @@ function cleanDocumentStyle(tag, value, context, classes = '') {
 		const property = part.slice(0, colon).trim().toLowerCase(), body = part.slice(colon + 1).trim();
 		const diagramProperty = diagram && /^--(?:_[a-z0-9_-]+|pele-[a-z0-9-]+)$/.test(property);
 		if (!DOCUMENT_STYLE_PROPERTIES.has(property) && !/^--md-[a-z0-9-]+$/.test(property) && !diagramProperty && !(diagram && property === 'font')) return;
-		if (!body || /[\\\u0000-\u0008\u000b\u000e-\u001f{}@]|\/\*|\*\//.test(body)) return;
+		if (!body || /[\u0000-\u0008\u000b\u000e-\u001f{}@]|\/\*|\*\//.test(body) ||
+			/["'\\]/.test(body.replace(/"(?:[^"\\\n\r\f]|\\["\\])*"|'(?:[^'\\\n\r\f]|\\['\\])*'/g, ''))) return;
 		const withoutLocal = body.replace(/\burl\(\s*(['"]?)#[a-z0-9_.:-]+\1\s*\)/gi, '');
 		if (/(?:url|image|image-set|-webkit-image-set|element|paint|attr|expression)\s*\(/i.test(withoutLocal)) return;
 		kept.push(part.trim());
@@ -304,6 +305,31 @@ function _rapierInstallSanitizeHooks() {
 		if (level) node.setAttribute('data-rapier-word-level', String(level));
 		else if (node.nodeName === 'SPAN' && wordListIsMarker(style)) node.setAttribute('data-rapier-word-marker', '1');
 	});
+	DOMPurify.addHook('uponSanitizeElement', node => {
+		if (_rapierSanitizeRuntime.context !== 'paste' || !node || node.nodeName !== 'TABLE') return;
+		node.removeAttribute('data-rapier-paste-word-header');
+		try {
+			const own = (node.getAttribute('style') || '') + ' ' + (node.getAttribute('class') || '');
+			const word = /mso-yfti-|MsoTable/i.test(own) || !!node.querySelector('[style*="mso-"],[class*="Mso"]');
+			if (!word || node.tHead || node.querySelector('th')) return;
+			const row = Array.from(node.querySelectorAll('tr')).find(candidate => candidate.closest('table') === node);
+			if (!row) return;
+			const cells = Array.from(row.children).filter(cell => cell.nodeName === 'TD' || cell.nodeName === 'TH');
+			if (!cells.length) return;
+			let bold = false;
+			for (const cell of cells) {
+				const walker = node.ownerDocument.createTreeWalker(cell, NodeFilter.SHOW_TEXT);
+				for (let text = walker.nextNode(); text; text = walker.nextNode()) {
+					if (!/\S/.test(text.nodeValue || '')) continue;
+					const parent = text.parentElement;
+					const style = parent?.getAttribute?.('style') || '';
+					if (!(parent && (parent.closest('b,strong') || /font-weight\s*:\s*(?:bold|[6-9]00|1000)\b/i.test(style)))) return;
+					bold = true;
+				}
+			}
+			if (bold) node.setAttribute('data-rapier-paste-word-header', '');
+		} catch (_) {}
+	});
 }
 
 function _rapierInstallDocumentSanitizeHooks() {
@@ -414,9 +440,17 @@ function sanitize(value, context, fragment) {
 	if (purifyConfigured.get(DOMPurify) !== options) { DOMPurify.setConfig(options); purifyConfigured.set(DOMPurify, options); }
 	const previous = _rapierSanitizeRuntime.context;
 	_rapierSanitizeRuntime.context = selected;
+	ensureScratchParseHook();
+	const scratch = [];
+	const outerSink = scratchSink;
+	scratchSink = scratch;
+	let result;
 	try {
-		return DOMPurify.sanitize(value == null ? '' : String(value));
+		result = DOMPurify.sanitize(value == null ? '' : String(value));
+		return result;
 	} finally {
+		scratchSink = outerSink;
+		releaseScratchMedia(scratch, result);
 		if (labels) {
 			DOMPurify.removeHook('uponSanitizeElement', diagramLabelElement);
 			DOMPurify.removeHook('uponSanitizeAttribute', diagramLabelAttribute);
@@ -426,6 +460,37 @@ function sanitize(value, context, fragment) {
 	}
 }
 
+let scratchSink = null;
+function ensureScratchParseHook() {
+	if (typeof DOMParser !== 'function' || DOMParser.prototype.parseFromString._rapierScratch) return;
+	const original = DOMParser.prototype.parseFromString;
+	function wrapped(source, type) {
+		const doc = original.call(this, source, type);
+		scratchSink?.push(doc);
+		return doc;
+	}
+	wrapped._rapierScratch = true;
+	DOMParser.prototype.parseFromString = wrapped;
+}
+
+function releaseScratchMedia(docs, result) {
+	const kept = result && typeof result === 'object' ? result.nodeType === 9 ? result : result.ownerDocument : null;
+	for (const doc of docs) {
+		if (!doc || doc === kept || !doc.querySelectorAll) continue;
+		for (const el of [...doc.querySelectorAll('video, audio')]) releaseMediaElement(el);
+	}
+}
+function releaseMediaElement(el) {
+	if (!el || (el.nodeName !== 'VIDEO' && el.nodeName !== 'AUDIO')) return;
+	try {
+		el.pause();
+		el.removeAttribute('src');
+		for (const source of el.querySelectorAll('source')) source.removeAttribute('src');
+		el.load();
+	} catch (_) {}
+	el.remove();
+}
+
 function escapeRapierHtmlText(value) {
 	return String(value == null ? '' : value)
 		.replace(/&/g, '&')

package/dist/kit/render.mjs

@@ -725,7 +725,7 @@ function* _rapierSharedPageLayoutSteps(root) {
 	for (const image of root.querySelectorAll('img[data-rapier-image-layout]')) {
 		yield;
 		const layout = globalThis.RapierMarkdownLayout.parseLayoutAttribute(image.getAttribute('data-rapier-image-layout'));
-		if (layout?.wrap !== 'around' && layout?.wrap !== 'box') continue;
+		if (layout?.wrap !== 'around' && layout?.wrap !== 'beside' && layout?.wrap !== 'box') continue;
 		const paragraph = _rapierSharePictureParagraph(image);
 		if (!paragraph) continue;
 		const owner = globalThis.RapierMarkdownLayout.wrapNeighbour(paragraph, _rapierShareWrapKind);
@@ -1458,6 +1458,8 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, preparation) {
     if (layout.wrap === 'box') {
       value = boxProfile(image);
       if (!value && rotateRad) value = geometry.rasterTiltProfile(image.naturalWidth, image.naturalHeight, rotateRad);
+    } else if (layout.wrap === 'beside') {
+      value = rotateRad ? geometry.rasterTiltProfile(image.naturalWidth, image.naturalHeight, rotateRad) : null;
     } else {
       const occupancy = typeof geometry.parseProfile === 'function' && geometry.parseProfile(image.getAttribute('data-rapier-occupancy'));
       value = occupancy || geometry.alphaProfile(image);
@@ -1481,7 +1483,7 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, preparation) {
     for (const image of root.querySelectorAll('img[data-rapier-image-layout]')) {
       if (exclude.has(image) || !image.complete || !image.naturalWidth || !image.naturalHeight) continue;
       const layout = metadata.parseLayoutAttribute(image.getAttribute('data-rapier-image-layout'));
-      if (!layout?.rotate || ['around', 'box', 'behind', 'front'].includes(layout.wrap)) continue;
+      if (!layout?.rotate || ['around', 'beside', 'box', 'behind', 'front'].includes(layout.wrap)) continue;
       const width = image.offsetWidth, height = image.offsetHeight;
       if (!(width > 0 && height > 0)) continue;
       const paragraph = image.closest('p');
@@ -1619,7 +1621,7 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, preparation) {
       const origin = box(root).top, obstacles = [], anchors = new Map(), wrapped = new Set(), placed = [], positionedImages = new Set();
       for (const element of children) {
         const layout = metadata.parseLayoutAttribute(element.getAttribute('data-md-layout'));
-        const image = ['around', 'box', 'behind', 'front'].includes(layout?.wrap) && element.tagName === 'P'
+        const image = ['around', 'beside', 'box', 'behind', 'front'].includes(layout?.wrap) && element.tagName === 'P'
           ? element.querySelector('img[data-rapier-image-layout]') : null;
         if (!image?.complete || !image.naturalWidth || !image.naturalHeight || !imageOnly(element, image)) continue;
 
@@ -1665,7 +1667,9 @@ function _rapierProjectArtifactLayout(root, metadata, geometry, preparation) {
                   obstacle.y + obstacle.height > y - room && obstacle.y < y + rectangle.height + room)
                 y = obstacle.y + obstacle.height + room;
             }
-            obstacles.push(...geometry.linesSlices(geometry.pictureSlices(profile(image, layout), left, y, rectangle.width, rectangle.height, scale), layout, lines, y, rectangle.height));
+            let slices = geometry.pictureSlices(profile(image, layout), left, y, rectangle.width, rectangle.height, scale);
+            if (layout.wrap === 'beside') slices = geometry.besideSlices(slices, bounds.left + inset, bounds.left + inset + width, left, rectangle.width);
+            obstacles.push(...geometry.linesSlices(slices, layout, lines, y, rectangle.height));
           }
           placed.push({source, image, rectangle, left, y, wrap: layout.wrap,
             visualLeft: left + visualDeltaX, visualTop: y + visualDeltaY, visualWidth: fit.fit.width, visualHeight: fit.fit.height,
@@ -1746,7 +1750,7 @@ function _rapierArtifactLayoutScript(root, nonce = '', {pictures = true} = {}) {
   const dependencies = globalThis.RapierArtifactLayoutDependencies;
   const layoutOf = element => globalThis.RapierMarkdownLayout.parseLayoutAttribute(element.getAttribute('data-md-layout'));
   const pictureLayoutOf = image => globalThis.RapierMarkdownLayout.parseLayoutAttribute(image.getAttribute('data-rapier-image-layout'));
-  const wrapping = pictures && ([...root.querySelectorAll('p[data-md-layout]')].some(element => ['around', 'box', 'behind', 'front'].includes(layoutOf(element)?.wrap)) ||
+  const wrapping = pictures && ([...root.querySelectorAll('p[data-md-layout]')].some(element => ['around', 'beside', 'box', 'behind', 'front'].includes(layoutOf(element)?.wrap)) ||
        [...root.querySelectorAll('img[data-rapier-image-layout]')].some(image => pictureLayoutOf(image)?.rotate));
   const typography = _rapierArtifactTypographyScript(root);
   if (!wrapping && !typography) return '';

package/dist/layout/model.mjs

@@ -309,6 +309,19 @@ export function pictureSlices(profile, x, y, width, height, scale = 1) {
   return slices;
 }
 
+export function besideSlices(slices, columnLeft, columnRight, pictureLeft, pictureWidth) {
+  if (!Array.isArray(slices) || !(columnRight > columnLeft) || !(pictureWidth > 0) || !finite(pictureLeft)) return slices;
+  const blockLeft = pictureLeft + pictureWidth / 2 <= (columnLeft + columnRight) / 2;
+  return slices.map(slice => {
+    if (!slice || !finite(slice.x) || !finite(slice.width)) return slice;
+    if (blockLeft) {
+      const right = slice.x + slice.width;
+      return {...slice, x: columnLeft, width: Math.max(0, right - columnLeft)};
+    }
+    return {...slice, width: Math.max(0, columnRight - slice.x)};
+  });
+}
+
 export {slotSequence, columnsFilled};
 export function slotsForBand(width, obstacles, top, height, minWidth = 40) {
   if (!finite(width) || width <= 0 || !finite(top) || !finite(height) || height <= 0 ||

package/dist/spec/md-layout.mjs

@@ -3,7 +3,7 @@
 export const fields = new Set(['align', 'width', 'lines', 'wrap', 'x', 'y', 'rotate', 'opacity', 'first', 'indent', 'marker', 'lock', 'hyphens', 'caps', 'hanging', 'before', 'after', 'line']);
 export const SPACING_FIELDS = Object.freeze(['before', 'after', 'line']);
 export const alignments = new Set(['left', 'center', 'right', 'justify']);
-export const wraps = new Set(['around', 'box', 'behind', 'front']);
+export const wraps = new Set(['around', 'beside', '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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rapier-markdown-kit",
-  "version": "1.2.43",
+  "version": "1.2.45",
   "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",