@eocrm/design-system 0.6.24 → 0.8.0

package/dist/components/RichText/engine/position.js

@@ -0,0 +1,125 @@
+import { runsLength } from "./inlines.js";
+// src/components/RichText/engine/position.ts
+/** Total character length of a block (sum of all inline run lengths). */
+function blockLength(block) {
+	return runsLength(block.inlines);
+}
+/**
+* The `Range` spanning an entire block — `offset 0` to its full length. Returns
+* `null` when `blockId` is not found. Used by block-level actions (e.g. coloring
+* a whole block from the block menu) that target a block rather than an explicit
+* text selection.
+*/
+function wholeBlockRange(doc, blockId) {
+	const idx = findBlockIndex(doc, blockId);
+	if (idx === -1) return null;
+	const block = doc.blocks[idx];
+	return {
+		anchor: {
+			blockId,
+			offset: 0
+		},
+		focus: {
+			blockId,
+			offset: blockLength(block)
+		}
+	};
+}
+/**
+* Returns the index of the block with `blockId` in `doc.blocks`, or `-1` if
+* not found. Used by transforms to locate blocks before mutation.
+*/
+function findBlockIndex(doc, blockId) {
+	return doc.blocks.findIndex((b) => b.id === blockId);
+}
+/** Document order: -1 if a before b, 1 if after, 0 if equal. */
+function comparePoints(doc, a, b) {
+	if (a.blockId === b.blockId) return a.offset < b.offset ? -1 : a.offset > b.offset ? 1 : 0;
+	const ia = findBlockIndex(doc, a.blockId);
+	const ib = findBlockIndex(doc, b.blockId);
+	return ia < ib ? -1 : ia > ib ? 1 : 0;
+}
+/**
+* The marks carried by the character immediately before `point` (raw — includes
+* `mention`). Empty (`[]`) at a block start (`offset <= 0`) or when the block is
+* not found. This primitive stays mark-agnostic; typing-inheritance paths use
+* {@link marksForTypedText}, which applies the exclusions.
+*/
+function marksBeforeCaret(doc, point) {
+	const idx = findBlockIndex(doc, point.blockId);
+	if (idx === -1 || point.offset <= 0) return [];
+	let pos = 0;
+	for (const run of doc.blocks[idx].inlines ?? []) {
+		const end = pos + run.text.length;
+		if (point.offset - 1 >= pos && point.offset - 1 < end) return run.marks;
+		pos = end;
+	}
+	return [];
+}
+/**
+* The marks carried by the character immediately AFTER `point` (raw, like
+* {@link marksBeforeCaret}). Empty (`[]`) at a block end, where no character
+* follows. Typing-inheritance paths pair it with `marksBeforeCaret` to tell a
+* caret INSIDE a run from one resting against its trailing edge.
+*/
+function marksAfterCaret(doc, point) {
+	const idx = findBlockIndex(doc, point.blockId);
+	if (idx === -1 || point.offset < 0) return [];
+	let pos = 0;
+	for (const run of doc.blocks[idx].inlines ?? []) {
+		const end = pos + run.text.length;
+		if (point.offset >= pos && point.offset < end) return run.marks;
+		pos = end;
+	}
+	return [];
+}
+/**
+* The marks text typed at `point` inherits — those of the preceding character,
+* minus the two that must not grow when the caret merely abuts them:
+* - `mention`, never (typed text never extends a mention chip);
+* - `link`, unless the FOLLOWING character carries the same href, i.e. the caret
+*   sits strictly inside the link rather than against its trailing edge.
+*
+* Without the `link` rule, typing after a link appends into the link's TEXT while
+* its href stays put. Under `renderLink` that is invisible — the widget renders
+* from the href — so the characters vanish and the caret appears frozen.
+*
+* The single source of this rule: both `insertText` and the editor's pending-mark
+* staging read it, so a mark toggled at a link's edge can't reinstate the link.
+*/
+function marksForTypedText(doc, point) {
+	const after = marksAfterCaret(doc, point);
+	return marksBeforeCaret(doc, point).filter((m) => {
+		if (m.type === "mention") return false;
+		if (m.type === "link") return after.some((a) => a.type === "link" && a.href === m.href);
+		return true;
+	});
+}
+/** A collapsed range at a single point. */
+function collapsedRange(blockId, offset = 0) {
+	return {
+		anchor: {
+			blockId,
+			offset
+		},
+		focus: {
+			blockId,
+			offset
+		}
+	};
+}
+/** Returns `true` iff `range` is collapsed — anchor and focus point to the same position. */
+function isCollapsed(range) {
+	return range.anchor.blockId === range.focus.blockId && range.anchor.offset === range.focus.offset;
+}
+/** Normalize a range so `start` ≤ `end` in document order. */
+function orderedRange(doc, range) {
+	return comparePoints(doc, range.anchor, range.focus) <= 0 ? {
+		start: range.anchor,
+		end: range.focus
+	} : {
+		start: range.focus,
+		end: range.anchor
+	};
+}
+export { blockLength, collapsedRange, comparePoints, findBlockIndex, isCollapsed, marksAfterCaret, marksBeforeCaret, marksForTypedText, orderedRange, wholeBlockRange };

package/dist/components/RichText/engine/renderDoc.d.ts

@@ -0,0 +1,41 @@
+import { type ReactNode } from 'react';
+import type { RichDoc } from './model.js';
+import type { RenderLink } from './renderLink.js';
+import type { RenderMention } from './renderMention.js';
+export interface RenderDocOptions {
+    /** Editable surface: add `data-block-id` anchors + render empty blocks with a `<br>`. */
+    editable?: boolean;
+    /**
+     * Replace how a link renders (e.g. a task/member chip). In the read-only viewer
+     * the returned node substitutes the `<a>` directly; on an editable surface a
+     * substituted node is wrapped in an atomic, non-editable `[data-rich-link]`
+     * widget so the caret steps over it as a single unit. Return the supplied
+     * default node to keep the standard `<a>`.
+     */
+    renderLink?: RenderLink;
+    /**
+     * Replace how a `mention` mark renders (e.g. an interactive member chip /
+     * popover trigger). In the read-only viewer the returned node substitutes the
+     * default mention span directly; on an editable surface a substituted node is
+     * wrapped in an atomic, non-editable `[data-rich-mention]` widget so the caret
+     * steps over it as a single unit. Return the supplied default node to keep the
+     * standard non-interactive mention span. Composes with `renderLink`.
+     */
+    renderMention?: RenderMention;
+}
+/**
+ * Render a `RichDoc` to React nodes.
+ *
+ * Blocks map to semantic elements (`<p>`, `<h1|h2|h3>`, `<blockquote>`,
+ * `<pre><code>`). Consecutive list-item blocks are grouped back into `<ul>`/`<ol>`
+ * trees, with nesting reconstructed from each item's `depth` (the flat model is
+ * lossy-free: depths are normalized gap-free first, so malformed depth jumps
+ * never drop items). Inline runs render as nested mark tags in a deterministic
+ * order (`link` outermost … `code` innermost). Block `id` is the React key. An
+ * empty document renders nothing. `code_block` content is treated as plain text.
+ *
+ * Pass `{ editable: true }` to add `data-block-id` anchors on every block element
+ * and render empty blocks with a `<br>` (required for contentEditable caret placement).
+ * Read-only output (default) is byte-identical to the pre-options behaviour.
+ */
+export declare function renderDoc(doc: RichDoc, options?: RenderDocOptions): ReactNode;

package/dist/components/RichText/engine/renderDoc.js

@@ -0,0 +1,257 @@
+'use client';
+import { runsLength, runsText } from "./inlines.js";
+import { safeHref } from "./safeHref.js";
+import { bgColorVar, textColorVar } from "./colorMarks.js";
+import { effectiveDepths, isListItem } from "./listDepths.js";
+import { MARK_ORDER, marksSignature } from "./marks.js";
+import { RichTextAttachment } from "../RichTextAttachment.js";
+import { Fragment } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/RichText/engine/renderDoc.tsx
+var blockCache = /* @__PURE__ */ new WeakMap();
+function cachedBlockEl(block, editable, renderLink, renderMention, build) {
+	const hit = blockCache.get(block);
+	if (hit && hit.editable === editable && hit.renderLink === renderLink && hit.renderMention === renderMention) return hit.el;
+	const el = build();
+	blockCache.set(block, {
+		editable,
+		renderLink,
+		renderMention,
+		el
+	});
+	return el;
+}
+function wrapMark(type, mark, child) {
+	switch (type) {
+		case "bold": return /* @__PURE__ */ jsx("strong", { children: child });
+		case "italic": return /* @__PURE__ */ jsx("em", { children: child });
+		case "underline": return /* @__PURE__ */ jsx("u", { children: child });
+		case "strike": return /* @__PURE__ */ jsx("s", { children: child });
+		case "code": return /* @__PURE__ */ jsx("code", { children: child });
+		case "textColor": {
+			const value = mark.type === "textColor" ? textColorVar(mark.color) : void 0;
+			return value ? /* @__PURE__ */ jsx("span", {
+				style: { color: value },
+				children: child
+			}) : child;
+		}
+		case "bgColor": {
+			const value = mark.type === "bgColor" ? bgColorVar(mark.color) : void 0;
+			return value ? /* @__PURE__ */ jsx("span", {
+				style: { backgroundColor: value },
+				children: child
+			}) : child;
+		}
+		case "link": {
+			const href = mark.type === "link" ? safeHref(mark.href) : void 0;
+			return /* @__PURE__ */ jsx("a", {
+				href,
+				rel: "noopener noreferrer",
+				children: child
+			});
+		}
+		case "mention": return /* @__PURE__ */ jsx("span", {
+			"data-mention": true,
+			"data-mention-id": mark.type === "mention" ? mark.id : void 0,
+			"data-mention-label": mark.type === "mention" ? mark.label : void 0,
+			children: child
+		});
+		default: return child;
+	}
+}
+function renderRun(run, key) {
+	const present = MARK_ORDER.filter((t) => run.marks.some((m) => m.type === t));
+	let node = run.text;
+	for (let i = present.length - 1; i >= 0; i -= 1) {
+		const type = present[i];
+		node = wrapMark(type, run.marks.find((m) => m.type === type), node);
+	}
+	return /* @__PURE__ */ jsx(Fragment, { children: node }, key);
+}
+function renderInlines(inlines, opts) {
+	const out = [];
+	let i = 0;
+	while (i < inlines.length) {
+		const run = inlines[i];
+		const mm = run.marks.find((m) => m.type === "mention");
+		const mention = mm && mm.type === "mention" ? {
+			id: mm.id,
+			label: mm.label
+		} : null;
+		if (opts.renderMention && mention) {
+			let j = i;
+			let text = "";
+			while (j < inlines.length) {
+				const m = inlines[j].marks.find((mk) => mk.type === "mention");
+				if (!m || m.type !== "mention" || m.id !== mention.id || m.label !== mention.label) break;
+				text += inlines[j].text;
+				j += 1;
+			}
+			const fallback = /* @__PURE__ */ jsx("span", {
+				"data-mention": true,
+				"data-mention-id": mention.id,
+				"data-mention-label": mention.label,
+				children: text
+			});
+			const custom = opts.renderMention(mention, fallback);
+			if (custom !== fallback) {
+				const mkey = `m${i}:${mention.id}:${mention.label}`;
+				out.push(opts.editable ? /* @__PURE__ */ jsx("span", {
+					"data-rich-mention": true,
+					"data-len": text.length,
+					contentEditable: false,
+					children: custom
+				}, mkey) : /* @__PURE__ */ jsx(Fragment, { children: custom }, mkey));
+				i = j;
+				continue;
+			}
+		}
+		const lm = run.marks.find((m) => m.type === "link");
+		const linkHref = lm && lm.type === "link" ? lm.href : null;
+		const safe = opts.renderLink && linkHref != null ? safeHref(linkHref) : void 0;
+		if (safe) {
+			let j = i;
+			let text = "";
+			while (j < inlines.length) {
+				const m = inlines[j].marks.find((mm) => mm.type === "link");
+				if (!m || m.type !== "link" || m.href !== linkHref) break;
+				text += inlines[j].text;
+				j += 1;
+			}
+			const fallback = /* @__PURE__ */ jsx("a", {
+				href: safe,
+				rel: "noopener noreferrer",
+				children: text
+			});
+			const custom = opts.renderLink({
+				href: safe,
+				text
+			}, fallback);
+			if (custom !== fallback) {
+				const lkey = `l${i}:${linkHref}`;
+				out.push(opts.editable ? /* @__PURE__ */ jsx("span", {
+					"data-rich-link": true,
+					"data-len": text.length,
+					contentEditable: false,
+					children: custom
+				}, lkey) : /* @__PURE__ */ jsx(Fragment, { children: custom }, lkey));
+				i = j;
+				continue;
+			}
+		}
+		out.push(renderRun(run, `${i}:${marksSignature(run.marks)}`));
+		i += 1;
+	}
+	return out;
+}
+function blockContent(block, opts) {
+	if (opts.editable && runsLength(block.inlines) === 0) return /* @__PURE__ */ jsx("br", {});
+	return renderInlines(block.inlines, opts);
+}
+function buildBlock(block, opts) {
+	const anchor = opts.editable ? { "data-block-id": block.id } : void 0;
+	switch (block.type) {
+		case "heading": {
+			const Tag = `h${block.level ?? 1}`;
+			return /* @__PURE__ */ jsx(Tag, {
+				...anchor,
+				children: blockContent(block, opts)
+			}, block.id);
+		}
+		case "blockquote": return /* @__PURE__ */ jsx("blockquote", {
+			...anchor,
+			children: blockContent(block, opts)
+		}, block.id);
+		case "code_block": return /* @__PURE__ */ jsx("pre", {
+			...anchor,
+			children: /* @__PURE__ */ jsx("code", { children: opts.editable && runsLength(block.inlines) === 0 ? /* @__PURE__ */ jsx("br", {}) : runsText(block.inlines) })
+		}, block.id);
+		case "attachment": return /* @__PURE__ */ jsx("figure", {
+			...anchor,
+			contentEditable: false,
+			"data-attachment": "",
+			"data-align": block.align || void 0,
+			children: /* @__PURE__ */ jsx(RichTextAttachment, {
+				block,
+				editable: opts.editable
+			})
+		}, block.id);
+		default: return /* @__PURE__ */ jsx("p", {
+			...anchor,
+			children: blockContent(block, opts)
+		}, block.id);
+	}
+}
+function renderBlock(block, opts) {
+	return cachedBlockEl(block, opts.editable, opts.renderLink, opts.renderMention, () => buildBlock(block, opts));
+}
+function collectList(blocks, start, eff, opts) {
+	const baseDepth = eff[start];
+	const tag = blocks[start].type === "ordered_item" ? "ol" : "ul";
+	const items = [];
+	let i = start;
+	while (i < blocks.length && isListItem(blocks[i])) {
+		const d = eff[i];
+		if (d < baseDepth) break;
+		if (d > baseDepth) {
+			const sub = collectList(blocks, i, eff, opts);
+			if (items.length > 0) items[items.length - 1].child = renderListTree(sub.tag, sub.items, opts);
+			i = sub.next;
+			continue;
+		}
+		items.push({
+			key: blocks[i].id,
+			blockId: blocks[i].id,
+			content: blockContent(blocks[i], opts),
+			child: null
+		});
+		i += 1;
+	}
+	return {
+		tag,
+		items,
+		next: i
+	};
+}
+function renderListTree(tag, items, opts) {
+	return /* @__PURE__ */ jsx(tag, { children: items.map((it) => /* @__PURE__ */ jsxs("li", {
+		...opts.editable ? { "data-block-id": it.blockId } : {},
+		children: [it.content, it.child]
+	}, it.key)) });
+}
+/**
+* Render a `RichDoc` to React nodes.
+*
+* Blocks map to semantic elements (`<p>`, `<h1|h2|h3>`, `<blockquote>`,
+* `<pre><code>`). Consecutive list-item blocks are grouped back into `<ul>`/`<ol>`
+* trees, with nesting reconstructed from each item's `depth` (the flat model is
+* lossy-free: depths are normalized gap-free first, so malformed depth jumps
+* never drop items). Inline runs render as nested mark tags in a deterministic
+* order (`link` outermost … `code` innermost). Block `id` is the React key. An
+* empty document renders nothing. `code_block` content is treated as plain text.
+*
+* Pass `{ editable: true }` to add `data-block-id` anchors on every block element
+* and render empty blocks with a `<br>` (required for contentEditable caret placement).
+* Read-only output (default) is byte-identical to the pre-options behaviour.
+*/
+function renderDoc(doc, options = {}) {
+	const opts = {
+		editable: options.editable ?? false,
+		renderLink: options.renderLink,
+		renderMention: options.renderMention
+	};
+	const eff = effectiveDepths(doc.blocks);
+	const out = [];
+	let i = 0;
+	while (i < doc.blocks.length) if (isListItem(doc.blocks[i])) {
+		const startId = doc.blocks[i].id;
+		const { tag, items, next } = collectList(doc.blocks, i, eff, opts);
+		out.push(/* @__PURE__ */ jsx(Fragment, { children: renderListTree(tag, items, opts) }, `list-${startId}`));
+		i = next;
+	} else {
+		out.push(renderBlock(doc.blocks[i], opts));
+		i += 1;
+	}
+	return out;
+}
+export { renderDoc };

package/dist/components/RichText/engine/renderLink.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+/** A link encountered while rendering, passed to `renderLink`. */
+export interface RichTextLink {
+    /** The sanitized URL. */
+    href: string;
+    /** The link's visible text in the document. */
+    text: string;
+}
+/**
+ * Replace how a link renders. Return your own node (e.g. a task/member chip) to
+ * substitute the link, or `defaultNode` for the standard `<a>`.
+ */
+export type RenderLink = (link: RichTextLink, defaultNode: ReactNode) => ReactNode;

package/dist/components/RichText/engine/renderMention.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+/** A mention encountered while rendering, passed to `renderMention`. */
+export interface RichTextMention {
+    /** The mention's stable id (from the `mention` mark). */
+    id: string;
+    /** The mention's display label (without the trigger). */
+    label: string;
+}
+/**
+ * Replace how a `mention` mark renders. Return your own node (e.g. an interactive
+ * member chip / popover trigger) to substitute the mention, or `defaultNode` for
+ * the standard non-interactive mention span. Mirrors {@link RenderLink}.
+ */
+export type RenderMention = (mention: RichTextMention, defaultNode: ReactNode) => ReactNode;

package/dist/components/RichText/engine/safeHref.d.ts

@@ -0,0 +1 @@
+export declare function safeHref(href: string): string | undefined;

package/dist/components/RichText/engine/safeHref.js

@@ -0,0 +1,9 @@
+// src/components/RichText/engine/safeHref.ts
+function safeHref(href) {
+	const trimmed = href.replace(/[\t\n\r]/g, "").replace(/^[\x00-\x20]+|[\x00-\x20]+$/g, "");
+	if (trimmed === "") return void 0;
+	if (trimmed.startsWith("//")) return void 0;
+	if (/^[a-z][a-z0-9+.-]*:/i.test(trimmed)) return /^(https?:|mailto:|tel:)/i.test(trimmed) ? trimmed : void 0;
+	return trimmed;
+}
+export { safeHref };

package/dist/components/RichText/engine/toHtml.d.ts

@@ -0,0 +1,15 @@
+import type { RichDoc } from './model.js';
+/**
+ * Serialize a `RichDoc` to a compact HTML string (the inverse of `fromHtml`).
+ * Text and attributes are escaped and hrefs run through `safeHref`, so the output
+ * is injection-safe. Lossless for the model — `fromHtml(toHtml(doc))` reproduces
+ * the document structurally.
+ *
+ * @remarks An unsafe href (rejected by `safeHref`) drops the `<a>` wrapper and
+ * emits the bare text — unlike `renderDoc`, which keeps a hrefless `<a>`. Both are
+ * safe and `fromHtml(toHtml(doc))` stays consistent (neither yields a link mark).
+ *
+ * @example
+ * const html = toHtml(doc); // '<h2>Title</h2><p>Hello <strong>world</strong></p>'
+ */
+export declare function toHtml(doc: RichDoc): string;

package/dist/components/RichText/engine/toHtml.js

@@ -0,0 +1,117 @@
+import { runsText } from "./inlines.js";
+import { escapeAttr, escapeHtml } from "./escape.js";
+import { safeHref } from "./safeHref.js";
+import { bgColorVar, textColorVar } from "./colorMarks.js";
+import { effectiveDepths, isListItem } from "./listDepths.js";
+import { attachmentIsImage } from "./attachment.js";
+import { MARK_ORDER } from "./marks.js";
+// src/components/RichText/engine/toHtml.ts
+/** Wrap an already-escaped HTML string in one mark's tag. */
+function wrapMark(type, mark, inner) {
+	switch (type) {
+		case "bold": return `<strong>${inner}</strong>`;
+		case "italic": return `<em>${inner}</em>`;
+		case "underline": return `<u>${inner}</u>`;
+		case "strike": return `<s>${inner}</s>`;
+		case "code": return `<code>${inner}</code>`;
+		case "textColor": {
+			const value = mark.type === "textColor" ? textColorVar(mark.color) : void 0;
+			return value ? `<span style="color:${value}">${inner}</span>` : inner;
+		}
+		case "bgColor": {
+			const value = mark.type === "bgColor" ? bgColorVar(mark.color) : void 0;
+			return value ? `<span style="background-color:${value}">${inner}</span>` : inner;
+		}
+		case "link": {
+			const safe = mark.type === "link" ? safeHref(mark.href) : void 0;
+			if (safe === void 0) return inner;
+			return `<a href="${escapeAttr(safe)}" rel="noopener noreferrer">${inner}</a>`;
+		}
+		case "mention":
+			if (mark.type !== "mention") return inner;
+			return `<span data-mention-id="${escapeAttr(mark.id)}" data-mention-label="${escapeAttr(mark.label)}">${inner}</span>`;
+		default: return inner;
+	}
+}
+/** Serialize one inline run: escaped text wrapped innermost-first. */
+function inlineRun(run) {
+	const present = MARK_ORDER.filter((t) => run.marks.some((m) => m.type === t));
+	let html = escapeHtml(run.text);
+	for (let i = present.length - 1; i >= 0; i -= 1) {
+		const type = present[i];
+		html = wrapMark(type, run.marks.find((m) => m.type === type), html);
+	}
+	return html;
+}
+var inlines = (block) => block.inlines.map(inlineRun).join("");
+/** Serialize a contiguous run of list items starting at `start` (its base depth). */
+function listHtml(blocks, start, eff) {
+	const base = eff[start];
+	const tag = blocks[start].type === "ordered_item" ? "ol" : "ul";
+	const items = [];
+	let i = start;
+	while (i < blocks.length && isListItem(blocks[i])) {
+		const d = eff[i];
+		if (d < base) break;
+		if (d > base) {
+			const [child, next] = listHtml(blocks, i, eff);
+			if (items.length > 0) items[items.length - 1] = items[items.length - 1].replace(/<\/li>$/, `${child}</li>`);
+			i = next;
+			continue;
+		}
+		items.push(`<li>${inlines(blocks[i])}</li>`);
+		i += 1;
+	}
+	return [`<${tag}>${items.join("")}</${tag}>`, i];
+}
+function blockHtml(block) {
+	switch (block.type) {
+		case "heading": {
+			const tag = `h${Math.min(3, Math.max(1, block.level ?? 1))}`;
+			return `<${tag}>${inlines(block)}</${tag}>`;
+		}
+		case "blockquote": return `<blockquote>${inlines(block)}</blockquote>`;
+		case "code_block": return `<pre><code>${escapeHtml(runsText(block.inlines))}</code></pre>`;
+		case "attachment": {
+			if (block.status && block.status !== "ready") return "";
+			const safe = safeHref(block.src ?? "");
+			if (safe === void 0) return "";
+			if (attachmentIsImage(block)) {
+				const alt = escapeAttr(block.alt ?? block.name ?? "");
+				const widthAttr = typeof block.width === "number" ? ` width="${block.width}"` : "";
+				const heightAttr = typeof block.height === "number" ? ` height="${block.height}"` : "";
+				return `<figure${block.align === "center" || block.align === "right" ? ` style="text-align:${block.align}"` : ""}><img src="${escapeAttr(safe)}" alt="${alt}"${widthAttr}${heightAttr}></figure>`;
+			}
+			return `<a href="${escapeAttr(safe)}" download>${escapeHtml(block.name ?? safe)}</a>`;
+		}
+		default: return `<p>${inlines(block)}</p>`;
+	}
+}
+/**
+* Serialize a `RichDoc` to a compact HTML string (the inverse of `fromHtml`).
+* Text and attributes are escaped and hrefs run through `safeHref`, so the output
+* is injection-safe. Lossless for the model — `fromHtml(toHtml(doc))` reproduces
+* the document structurally.
+*
+* @remarks An unsafe href (rejected by `safeHref`) drops the `<a>` wrapper and
+* emits the bare text — unlike `renderDoc`, which keeps a hrefless `<a>`. Both are
+* safe and `fromHtml(toHtml(doc))` stays consistent (neither yields a link mark).
+*
+* @example
+* const html = toHtml(doc); // '<h2>Title</h2><p>Hello <strong>world</strong></p>'
+*/
+function toHtml(doc) {
+	const eff = effectiveDepths(doc.blocks);
+	let out = "";
+	let i = 0;
+	while (i < doc.blocks.length) if (isListItem(doc.blocks[i])) {
+		const [html, next] = listHtml(doc.blocks, i, eff);
+		out += html;
+		i = next;
+	} else {
+		out += blockHtml(doc.blocks[i]);
+		i += 1;
+	}
+	return out;
+}
+export { toHtml };

package/dist/components/RichText/engine/toMarkdown.d.ts

@@ -0,0 +1,13 @@
+import type { RichDoc } from './model.js';
+/**
+ * Serialize a `RichDoc` to Markdown (CommonMark + GFM strikethrough), the inverse
+ * of `fromMarkdown`. Lossy: **underline and text/background color are dropped** (no
+ * Markdown syntax — use `toHtml` for full fidelity) and **mentions degrade to plain
+ * `@label` text** (the id is not representable in Markdown — `toHtml`/`fromHtml`
+ * preserve mentions); images/tables aren't modeled; MD-special escaping
+ * is best-effort.
+ *
+ * @example
+ * const md = toMarkdown(doc); // '# Title\n\n- one\n- two'
+ */
+export declare function toMarkdown(doc: RichDoc): string;