emdash 0.36.0 → 0.38.0

package/src/components/InlinePortableTextEditor.tsx

@@ -18,6 +18,7 @@ import Placeholder from "@tiptap/extension-placeholder";
 import TextAlign from "@tiptap/extension-text-align";
 import Typography from "@tiptap/extension-typography";
 import Underline from "@tiptap/extension-underline";
+import { Plugin } from "@tiptap/pm/state";
 import { useEditor, EditorContent, type Editor } from "@tiptap/react";
 import { BubbleMenu } from "@tiptap/react/menus";
 import StarterKit from "@tiptap/starter-kit";
@@ -65,13 +66,19 @@ interface PTTextBlock {
 	textAlign?: "left" | "center" | "right" | "justify";
 }
 
-type PTBlock = PTTextBlock | { _type: string; _key: string; [key: string]: unknown };
+type PTTableBlock = { _type: "table"; [key: string]: unknown };
+type PTBlock = PTTextBlock | PTTableBlock | { _type: string; _key: string; [key: string]: unknown };
+const TABLE_BLOCK_PLACEHOLDER_HTML = /<[^>]+\bdata-emdash-table-block(?:\s|=|>)/i;
 
 /** Type guard for PTTextBlock */
 function isPTTextBlock(block: PTBlock): block is PTTextBlock {
 	return block._type === "block";
 }
 
+function isPTTableBlock(value: unknown): value is PTTableBlock {
+	return typeof value === "object" && value !== null && "_type" in value && value._type === "table";
+}
+
 /** Type guard for ProseMirror JSON document node */
 function isPMNode(value: unknown): value is PMNode {
 	return (
@@ -155,6 +162,10 @@ function attrNum(attrs: Record<string, unknown> | undefined, key: string): numbe
 	return typeof v === "number" ? v : undefined;
 }
 
+function canonicalMediaProviderId(provider: string | undefined): string | undefined {
+	return provider === "external-url" ? "external" : provider;
+}
+
 function pmToPortableText(doc: PMNode): PTBlock[] {
 	if (!doc || doc.type !== "doc" || !doc.content) return [];
 	const blocks: PTBlock[] = [];
@@ -280,6 +291,11 @@ function convertPMNode(node: PMNode, path: string): PTBlock | PTBlock[] | null {
 		}
 		case "horizontalRule":
 			return { _type: "break", _key: k(), style: "lineBreak" };
+		case "table": {
+			const rawTable = node.attrs?.rawTable;
+			if (isPTTableBlock(rawTable)) return rawTable;
+			return null;
+		}
 		case "pluginBlock": {
 			// Spread the captured data back out so the block round-trips losslessly.
 			// `data` holds every field except _type / _key / id (which live on
@@ -586,7 +602,7 @@ function convertPTBlock(block: PTBlock): PMNode | null {
 				title: ib.caption || "",
 				caption: ib.caption || "",
 				mediaId: asset?._ref,
-				provider: asset?.provider,
+				provider: canonicalMediaProviderId(asset?.provider),
 				width: ib.width,
 				height: ib.height,
 				blurhash,
@@ -596,14 +612,17 @@ function convertPTBlock(block: PTBlock): PMNode | null {
 			},
 		};
 	}
+	if (block._type === "table") {
+		return {
+			type: "table",
+			attrs: { rawTable: block },
+		};
+	}
 	// Unknown block types — treat as plugin blocks. Capture every field other
 	// than the well-known ones into `data` so the block round-trips losslessly,
 	// even if no plugin currently registers this type. Matches the admin
 	// editor's behaviour at PortableTextEditor.tsx:572-588.
-	const { _type, _key, id, url, ...rest } = block as { _type: string; _key: string } & Record<
-		string,
-		unknown
-	>;
+	const { _type, _key, id, url, ...rest } = block;
 	// Filter out _-prefixed keys to prevent accumulation across edit cycles.
 	const data = Object.fromEntries(Object.entries(rest).filter(([key]) => !key.startsWith("_")));
 	return {
@@ -1096,6 +1115,76 @@ const HtmlBlockNode = Node.create({
 	},
 });
 
+const TableBlockNode = Node.create<{ placeholder: string }>({
+	name: "table",
+	group: "block",
+	atom: true,
+	selectable: true,
+	draggable: true,
+
+	addOptions() {
+		return { placeholder: "Table (edit in admin)" };
+	},
+
+	addAttributes() {
+		return {
+			rawTable: { default: null, rendered: false, parseHTML: () => null },
+		};
+	},
+
+	parseHTML() {
+		return [{ tag: 'div[data-emdash-table-block="true"]' }];
+	},
+
+	addProseMirrorPlugins() {
+		return [
+			new Plugin({
+				props: {
+					handleDOMEvents: {
+						cut: (view, event) => {
+							let hasTable = false;
+							view.state.selection.content().content.descendants((node) => {
+								hasTable ||= node.type.name === "table";
+							});
+							if (!hasTable) return false;
+							event.preventDefault();
+							return true;
+						},
+					},
+					handlePaste: (_view, event, slice) => {
+						const html = event.clipboardData?.getData("text/html") ?? "";
+						if (!TABLE_BLOCK_PLACEHOLDER_HTML.test(html)) return false;
+
+						let hasTable = false;
+						let hasMissingPayload = false;
+						slice.content.descendants((node) => {
+							if (node.type.name !== "table") return;
+							hasTable = true;
+							if (!isPTTableBlock(node.attrs.rawTable)) hasMissingPayload = true;
+						});
+						if (hasTable && !hasMissingPayload) return false;
+
+						event.preventDefault();
+						return true;
+					},
+				},
+			}),
+		];
+	},
+
+	renderHTML({ HTMLAttributes }) {
+		return [
+			"div",
+			mergeAttributes(HTMLAttributes, {
+				"data-emdash-table-block": "true",
+				class: "emdash-plugin-block-placeholder",
+				contenteditable: "false",
+			}),
+			this.options.placeholder,
+		];
+	},
+});
+
 /**
  * Minimal `pluginBlock` TipTap node for the inline (visual-editing) editor.
  *
@@ -1996,6 +2085,7 @@ export interface InlinePortableTextEditorProps {
 	collection: string;
 	entryId: string;
 	field: string;
+	tablePlaceholder?: string;
 }
 
 export function InlinePortableTextEditor({
@@ -2003,8 +2093,13 @@ export function InlinePortableTextEditor({
 	collection,
 	entryId,
 	field,
+	tablePlaceholder = TableBlockNode.options.placeholder,
 }: InlinePortableTextEditorProps) {
 	const initialRef = React.useRef(value);
+	// The editor document last known to be stored: the one the loaded content
+	// produced, then the one each successful save sent. `save()` does nothing
+	// while the current document is structurally equal to it (`Node.eq`).
+	const savedDocRef = React.useRef<Editor["state"]["doc"] | null>(null);
 	const savingRef = React.useRef(false);
 	const editorRef = React.useRef<ReturnType<typeof useEditor>>(null);
 
@@ -2068,9 +2163,9 @@ export function InlinePortableTextEditor({
 			// one that can still land.
 			if (savingRef.current && !options?.keepalive) return;
 
-			const current = JSON.stringify(getBlocks());
-			const initial = JSON.stringify(initialRef.current);
-			if (current === initial) return;
+			const doc = editorRef.current?.state.doc;
+			if (!doc || !savedDocRef.current || doc.eq(savedDocRef.current)) return;
+			const blocks = getBlocks();
 
 			savingRef.current = true;
 			try {
@@ -2080,13 +2175,14 @@ export function InlinePortableTextEditor({
 						method: "PUT",
 						credentials: "same-origin",
 						headers: { "Content-Type": "application/json", "X-EmDash-Request": "1" },
-						body: JSON.stringify({ data: { [field]: getBlocks() } }),
+						body: JSON.stringify({ data: { [field]: blocks } }),
 						keepalive: options?.keepalive ?? false,
 					},
 				);
 
 				if (res.ok) {
-					initialRef.current = getBlocks();
+					initialRef.current = blocks;
+					savedDocRef.current = doc;
 					document.dispatchEvent(new CustomEvent("emdash:save", { detail: { state: "saved" } }));
 					document.dispatchEvent(
 						new CustomEvent("emdash:content-changed", {
@@ -2180,6 +2276,7 @@ export function InlinePortableTextEditor({
 			}),
 			Typography,
 			HtmlBlockNode,
+			TableBlockNode.configure({ placeholder: tablePlaceholder }),
 			PluginBlockNode,
 			slashCommandsExtension,
 		],
@@ -2197,9 +2294,10 @@ export function InlinePortableTextEditor({
 		},
 	});
 
-	// Store editor ref for getBlocks
+	// Store editor ref for getBlocks, and record the loaded document as saved.
 	React.useEffect(() => {
 		editorRef.current = editor;
+		if (editor && !savedDocRef.current) savedDocRef.current = editor.state.doc;
 	}, [editor]);
 
 	// Slash menu command handler
@@ -2225,6 +2323,7 @@ export function InlinePortableTextEditor({
 					src,
 					alt: item.alt || item.filename || "",
 					mediaId: item.id,
+					provider: canonicalMediaProviderId(item.provider) || "local",
 					width: item.width,
 					height: item.height,
 					blurhash: item.blurhash,
@@ -2566,3 +2665,4 @@ export function InlinePortableTextEditor({
 export { pmToPortableText as _pmToPortableText };
 export { portableTextToPM as _portableTextToPM };
 export { createUnsupportedFileHandlers as _createUnsupportedFileHandlers };
+export { TableBlockNode as _InlineTableBlockNode };

package/src/components/PortableText.astro

@@ -30,12 +30,15 @@ import { groupBlockquoteRuns } from "./portable-text-blockquote-group.js";
 
 export interface Props extends Omit<PortableTextProps, "value"> {
 	value: PortableTextProps["value"];
+	/** Initial label for read-only inline tables; defaults to English. */
+	tablePlaceholder?: string;
 }
 
 const {
 	value,
 	components: userComponents,
 	listNestingMode = "html",
+	tablePlaceholder,
 	...rest
 } = Astro.props;
 
@@ -68,6 +71,7 @@ if (!editMeta) {
 		collection={editMeta.collection}
 		entryId={editMeta.id}
 		field={editMeta.field}
+		tablePlaceholder={tablePlaceholder}
 	/>
 ) : (
 	<BasePortableText

package/src/components/Table.astro

@@ -1,83 +1,156 @@
 ---
-/**
- * Portable Text Table block component
- *
- * Renders tables from content imports. Cell content is rendered through the
- * standard Portable Text pipeline so all marks (bold, italic, links, etc.) are
- * handled by the registered mark components -- including `sanitizeHref` for links.
- */
+import {
+	TABLE_CELL_MIN_WIDTH,
+	createPortableTextTableCellMarkResolver,
+	getPortableTextTableColumnWidths,
+	normalizePortableTextTable,
+	type PortableTextTableBlock,
+	type PortableTextTableCell,
+} from "@emdash-cms/admin/portable-text-table";
 import { PortableText } from "astro-portabletext";
 import { emdashMarkComponents } from "./marks.js";
 
 export interface Props {
-	node: {
-		_type: "table";
-		_key: string;
-		rows: Array<{
-			_type: "tableRow";
-			_key: string;
-			cells: Array<{
-				_type: "tableCell";
-				_key: string;
-				content: Array<{
-					_type: "span";
-					_key: string;
-					text: string;
-					marks?: string[];
-				}>;
-				markDefs?: Array<{
-					_type: string;
-					_key: string;
-					[key: string]: unknown;
-				}>;
-				isHeader?: boolean;
-			}>;
-		}>;
-		hasHeaderRow?: boolean;
-	};
+	node: unknown;
 }
 
-const markComponents = { mark: emdashMarkComponents };
+interface PlacedCell {
+	cell: PortableTextTableCell;
+	column: number;
+}
 
+const markComponents = { mark: emdashMarkComponents };
 const { node } = Astro.props;
-const rows = node?.rows ?? [];
+let generatedKey = 0;
+const normalized = normalizePortableTextTable(node, {
+	path: "render:table",
+	createKey: () => `render-table-${generatedKey++}`,
+});
+const table = normalized.ok ? normalized.table : normalized.renderFallback;
+const resolveCellMarkDefs = table ? createPortableTextTableCellMarkResolver(table) : undefined;
+const rawRows = table ? undefined : getRawRows(normalized.raw);
+const placedRows = table ? placeCells(table) : [];
+const visualWidth = normalized.ok
+	? normalized.width
+	: table
+		? getVisualWidth(placedRows)
+		: getRawWidth(rawRows ?? []);
+const columnWidths = table ? getPortableTextTableColumnWidths(table) : undefined;
+const minimumWidth = columnWidths
+	? columnWidths.reduce((total, columnWidth) => total + columnWidth, 0)
+	: visualWidth * TABLE_CELL_MIN_WIDTH;
+const hasHeaderRow =
+	table?.hasHeaderRow === true &&
+	table.rows[0]?.cells.length > 0 &&
+	table.rows[0].cells.every((cell) => cell.isHeader === true && (cell.rowspan ?? 1) === 1);
+const headerRow = hasHeaderRow ? placedRows[0] : undefined;
+const bodyRows = hasHeaderRow ? placedRows.slice(1) : placedRows;
+
+function placeCells(value: PortableTextTableBlock): PlacedCell[][] {
+	const occupied = Array.from({ length: value.rows.length }, () => new Set<number>());
+	return value.rows.map((row, rowIndex) => {
+		let column = 0;
+		return row.cells.map((cell) => {
+			while (occupied[rowIndex]?.has(column)) column++;
+			const start = column;
+			const colspan = cell.colspan ?? 1;
+			const rowspan = cell.rowspan ?? 1;
+			for (let rowOffset = 0; rowOffset < rowspan; rowOffset++) {
+				for (let columnOffset = 0; columnOffset < colspan; columnOffset++) {
+					occupied[rowIndex + rowOffset]?.add(start + columnOffset);
+				}
+			}
+			column += colspan;
+			return { cell, column: start };
+		});
+	});
+}
 
-if (!rows.length) {
-	return null;
+function getVisualWidth(rows: PlacedCell[][]): number {
+	let result = 1;
+	for (const row of rows) {
+		for (const { cell, column } of row) {
+			result = Math.max(result, column + (cell.colspan ?? 1));
+		}
+	}
+	return result;
+}
+
+function getRawRows(value: unknown): unknown[] {
+	return isRecord(value) && Array.isArray(value.rows) ? value.rows : [];
 }
 
-/**
- * Wrap a table cell's inline content as a Portable Text block so it can be
- * rendered through the standard pipeline (marks, markDefs, etc.).
- */
-function cellToBlock(cell: Props["node"]["rows"][number]["cells"][number]) {
+function getRawCells(value: unknown): unknown[] {
+	return isRecord(value) && Array.isArray(value.cells) ? value.cells : [];
+}
+
+function getRawWidth(rows: unknown[]): number {
+	let rawWidth = 1;
+	for (const row of rows) rawWidth = Math.max(rawWidth, getRawCells(row).length);
+	return rawWidth;
+}
+
+function recoverRawCellText(value: unknown, depth = 0): string {
+	if (depth > 32) return "";
+	if (typeof value === "string") return value;
+	if (Array.isArray(value)) {
+		return value.map((entry) => recoverRawCellText(entry, depth + 1)).join("");
+	}
+	if (!isRecord(value)) return "";
+	if (typeof value.text === "string") return value.text;
+	if (typeof value.content === "string") return value.content;
+	const nested = Array.isArray(value.content)
+		? value.content
+		: Array.isArray(value.children)
+			? value.children
+			: [];
+	return recoverRawCellText(nested, depth + 1);
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+	return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+function cellToBlock(cell: PortableTextTableCell) {
 	return [
 		{
 			_type: "block" as const,
 			_key: cell._key,
+			style: "normal",
 			children: cell.content,
-			markDefs: cell.markDefs ?? [],
+			markDefs: resolveCellMarkDefs?.(cell) ?? [],
 		},
 	];
 }
 
-const hasHeader = node?.hasHeaderRow;
-const headerRow = hasHeader ? rows[0] : null;
-const bodyRows = hasHeader ? rows.slice(1) : rows;
+function cellAttributes(cell: PortableTextTableCell, scope?: "col" | "row") {
+	return {
+		scope,
+		colspan: (cell.colspan ?? 1) > 1 ? cell.colspan : undefined,
+		rowspan: (cell.rowspan ?? 1) > 1 ? cell.rowspan : undefined,
+		style: cell.textAlign ? `text-align: ${cell.textAlign};` : undefined,
+	};
+}
 ---
 
 <div class="emdash-table-wrapper">
-	<table class="emdash-table">
+	<table class="emdash-table" style={`min-width: ${minimumWidth}px;`}>
+		{table ? (
+			<>
+		{
+			columnWidths && (
+				<colgroup>
+					{columnWidths.map((columnWidth) => <col style={`width: ${columnWidth}px;`} />)}
+				</colgroup>
+			)
+		}
 		{
 			headerRow && (
 				<thead>
 					<tr>
-						{headerRow.cells.map((cell) => (
-							<th>
-								<PortableText
-									value={cellToBlock(cell)}
-									components={markComponents}
-								/>
+						{headerRow.map(({ cell }) => (
+							<th {...cellAttributes(cell, "col")}>
+								<PortableText value={cellToBlock(cell)} components={markComponents} />
 							</th>
 						))}
 					</tr>
@@ -88,14 +161,13 @@ const bodyRows = hasHeader ? rows.slice(1) : rows;
 			{
 				bodyRows.map((row) => (
 					<tr>
-						{row.cells.map((cell) => {
+						{row.map(({ cell, column }) => {
 							const CellTag = cell.isHeader ? "th" : "td";
+							const scope =
+								cell.isHeader && column === 0 && (cell.rowspan ?? 1) === 1 ? "row" : undefined;
 							return (
-								<CellTag>
-									<PortableText
-										value={cellToBlock(cell)}
-										components={markComponents}
-									/>
+								<CellTag {...cellAttributes(cell, scope)}>
+									<PortableText value={cellToBlock(cell)} components={markComponents} />
 								</CellTag>
 							);
 						})}
@@ -103,26 +175,39 @@ const bodyRows = hasHeader ? rows.slice(1) : rows;
 				))
 			}
 		</tbody>
+			</>
+		) : (
+			<tbody>
+				{rawRows?.map((row) => (
+					<tr>
+						{getRawCells(row).map((cell) => <td>{recoverRawCellText(cell)}</td>)}
+					</tr>
+				))}
+			</tbody>
+		)}
 	</table>
 </div>
 
 <style>
 	.emdash-table-wrapper {
-		margin: 1.5rem 0;
+		max-inline-size: 100%;
+		margin-block: 1.5rem;
 		overflow-x: auto;
+		overscroll-behavior-inline: contain;
 	}
 	.emdash-table {
-		width: 100%;
+		inline-size: 100%;
 		border-collapse: collapse;
 		font-size: 0.9rem;
 	}
 	.emdash-table th,
 	.emdash-table td {
+		position: relative;
 		border: 1px solid var(--color-border, #ddd);
 		padding: 0.75rem;
-		text-align: left;
+		text-align: start;
+		vertical-align: top;
 	}
-	/* Remove default block margins inside cells */
 	.emdash-table th :global(p),
 	.emdash-table td :global(p) {
 		margin: 0;

package/src/components/widgets/Archives.astro

@@ -1,5 +1,6 @@
 ---
 import { getEmDashCollection } from "../../query.js";
+import { groupEntriesByPublishedAt } from "../../widgets/archives.js";
 
 interface Props {
 	type?: "monthly" | "yearly";
@@ -8,47 +9,11 @@ interface Props {
 
 const { type = "monthly", limit = 12 } = Astro.props;
 
-// Get all posts to build archives
 const { entries: posts } = await getEmDashCollection("posts", {
 	orderBy: { published_at: "desc" },
 });
 
-// Group posts by date
-const archives = new Map<string, { label: string; count: number; url: string }>();
-
-for (const post of posts) {
-	const publishedAt = post.data.publishedAt;
-	if (typeof publishedAt !== "string") continue;
-
-	const date = new Date(publishedAt);
-	let key: string;
-	let label: string;
-	let url: string;
-
-	if (type === "yearly") {
-		const year = date.getFullYear();
-		key = `${year}`;
-		label = `${year}`;
-		url = `/archives/${year}`;
-	} else {
-		const year = date.getFullYear();
-		const month = date.getMonth() + 1;
-		key = `${year}-${month.toString().padStart(2, "0")}`;
-		label = date.toLocaleDateString("en-US", {
-			year: "numeric",
-			month: "long",
-		});
-		url = `/archives/${year}/${month.toString().padStart(2, "0")}`;
-	}
-
-	if (!archives.has(key)) {
-		archives.set(key, { label, count: 0, url });
-	}
-	archives.get(key)!.count++;
-}
-
-// Convert to array and limit
-const archiveList = [...archives.values()].slice(0, limit);
+const archiveList = groupEntriesByPublishedAt(posts, { type, limit });
 ---
 
 <ul class="widget-archives">

package/src/config/errors.ts

@@ -0,0 +1,13 @@
+export type EmDashConfigurationErrorCode = "BINDING_NOT_FOUND" | "CONFIGURATION_ERROR";
+
+/** A configuration failure whose message is safe to return from the API. */
+export class EmDashConfigurationError extends Error {
+	constructor(
+		message: string,
+		public readonly code: EmDashConfigurationErrorCode,
+		public override cause?: unknown,
+	) {
+		super(message);
+		this.name = "EmDashConfigurationError";
+	}
+}

package/src/content/converters/index.ts

@@ -6,4 +6,6 @@
 
 export { prosemirrorToPortableText } from "./prosemirror-to-portable-text.js";
 export { portableTextToProsemirror } from "./portable-text-to-prosemirror.js";
+export type { PortableTextToProsemirrorOptions } from "./portable-text-to-prosemirror.js";
+export { portableTextIdentityExtensions } from "./portable-text-identity.js";
 export * from "./types.js";

package/src/content/converters/mark-safety.ts

@@ -22,6 +22,7 @@ const SUPPORTED_PROSEMIRROR_MARKS = new Set([
 	"superscript",
 	"code",
 	"link",
+	"emdashPortableTextSpan",
 ]);
 
 type UnknownRecord = Record<string, unknown>;