emdash 1.0.1 → 1.2.0

package/src/components/HtmlBlockFrame.astro

@@ -0,0 +1,63 @@
+---
+/**
+ * Sandboxed frame for an isolated HTML block. Its height follows the content.
+ */
+import { HTML_BLOCK_FRAME_SANDBOX, buildHtmlBlockFrame } from "@emdash-cms/admin/html-block";
+
+export interface Props {
+	html: string;
+	css: string;
+	js: string;
+}
+
+const MARKUP_RE = /[&"<>]/g;
+const ENTITIES: Record<string, string> = { "&": "&amp;", '"': "&quot;", "<": "&lt;", ">": "&gt;" };
+
+// Astro leaves `<` and `>` unescaped in attributes. Middleware that finds
+// `</body>` by searching the page's text could then match one inside `srcdoc`
+// and break the tag, dropping its sandbox.
+const srcdoc = buildHtmlBlockFrame(Astro.props).replace(MARKUP_RE, (char) => ENTITIES[char] ?? char);
+const frame = `<iframe class="emdash-html-block" data-emdash-html-block srcdoc="${srcdoc}" sandbox="${HTML_BLOCK_FRAME_SANDBOX}" title="Embedded HTML"></iframe>`;
+---
+
+<Fragment set:html={frame} />
+
+<script>
+	import {
+		HTML_BLOCK_FRAME_MAX_HEIGHT,
+		HTML_BLOCK_FRAME_MESSAGE,
+	} from "@emdash-cms/admin/html-block";
+
+	const frames = () =>
+		document.querySelectorAll<HTMLIFrameElement>("iframe[data-emdash-html-block]");
+
+	window.addEventListener("message", (event) => {
+		const data: unknown = event.data;
+		if (typeof data !== "object" || data === null) return;
+		if (!("type" in data) || data.type !== HTML_BLOCK_FRAME_MESSAGE) return;
+		if (!("height" in data) || typeof data.height !== "number" || !Number.isFinite(data.height)) {
+			return;
+		}
+		const height = Math.min(Math.max(data.height, 0), HTML_BLOCK_FRAME_MAX_HEIGHT);
+		for (const frame of frames()) {
+			if (frame.contentWindow === event.source) {
+				frame.style.height = `${height}px`;
+				return;
+			}
+		}
+	});
+
+	// Frames can load before this module runs, so ask each one for its height.
+	for (const frame of frames()) {
+		frame.contentWindow?.postMessage({ type: HTML_BLOCK_FRAME_MESSAGE }, "*");
+	}
+</script>
+
+<style is:global>
+	iframe[data-emdash-html-block] {
+		display: block;
+		width: 100%;
+		border: 0;
+		margin: 1.5rem 0;
+	}
+</style>

package/src/components/Iframe.astro

@@ -0,0 +1,141 @@
+---
+/**
+ * Portable Text iframe block component
+ *
+ * Renders a page from another site in a responsive, sandboxed, lazy-loading
+ * iframe. Sources that aren't https render nothing.
+ */
+export interface Props {
+	node: {
+		_type: "iframe";
+		_key: string;
+		src: string;
+		title?: string;
+		width?: number;
+		height?: number;
+		allow?: string;
+		allowFullscreen?: boolean;
+	};
+}
+
+const SANDBOX = [
+	"allow-scripts",
+	"allow-same-origin",
+	"allow-forms",
+	"allow-popups",
+	"allow-popups-to-escape-sandbox",
+	"allow-presentation",
+];
+
+// Permissions that video and map players need. Others, such as camera or
+// payment, aren't granted to embedded pages.
+const ALLOWED_FEATURES = new Set([
+	"accelerometer",
+	"autoplay",
+	"clipboard-write",
+	"encrypted-media",
+	"fullscreen",
+	"gyroscope",
+	"picture-in-picture",
+	"web-share",
+]);
+
+const isString = (value: unknown) => typeof value === "string";
+const dimension = (value: unknown) =>
+	typeof value === "number" && Number.isInteger(value) && value >= 1 && value <= 10_000
+		? value
+		: undefined;
+
+// An `iframe` block with other fields, or with values of other types, belongs
+// to a plugin.
+const FIELDS = new Map<string, (value: unknown) => boolean>([
+	["_type", () => true],
+	["_key", () => true],
+	["src", isString],
+	["title", isString],
+	["width", (value) => dimension(value) !== undefined],
+	["height", (value) => dimension(value) !== undefined],
+	["allow", isString],
+	["allowFullscreen", (value) => typeof value === "boolean"],
+]);
+
+const WHITESPACE_RE = /\s+/;
+const MARKUP_RE = /[&"<>]/g;
+const ENTITIES: Record<string, string> = { "&": "&amp;", '"': "&quot;", "<": "&lt;", ">": "&gt;" };
+
+function httpsUrl(value: unknown): URL | undefined {
+	try {
+		const url = new URL(typeof value === "string" ? value : "");
+		return url.protocol === "https:" ? url : undefined;
+	} catch {
+		return undefined;
+	}
+}
+
+const { node } = Astro.props;
+const src =
+	node &&
+	Object.entries(node).every(
+		([key, value]) => value === undefined || (FIELDS.get(key)?.(value) ?? false),
+	)
+		? httpsUrl(node.src)
+		: undefined;
+if (!src) {
+	return null;
+}
+
+const width = dimension(node.width);
+const height = dimension(node.height);
+const size =
+	width && height ? `aspect-ratio: ${width} / ${height}` : height ? `height: ${height}px` : undefined;
+
+// A page on the site's own origin with both scripts and same-origin access
+// could remove its own sandbox.
+const ownHosts = new Set([Astro.url.host, Astro.site?.host]);
+const sandbox = SANDBOX.filter(
+	(token) => token !== "allow-same-origin" || !ownHosts.has(src.host),
+).join(" ");
+
+// Granted to the embedded page's own origin. A directive whose allowlist is
+// `'none'` grants nothing, so it's dropped.
+const allow = (typeof node.allow === "string" ? node.allow : "")
+	.split(";")
+	.map((directive) => directive.trim().split(WHITESPACE_RE))
+	.filter(([feature = "", ...origins]) => ALLOWED_FEATURES.has(feature) && !origins.includes("'none'"))
+	.map(([feature]) => feature)
+	.join("; ");
+
+// Astro leaves `<` and `>` unescaped in attributes. Middleware that finds
+// `</body>` by searching the page's text could then match one in an author's
+// title and break the tag, dropping its sandbox.
+const escape = (value: string) => value.replace(MARKUP_RE, (char) => ENTITIES[char] ?? char);
+// Overrides a stricter site policy on purpose: YouTube and Vimeo players refuse
+// to play without a referrer. Only the site's origin is sent.
+const attributes = [
+	`src="${escape(src.href)}"`,
+	`title="${escape(node.title || "Embedded content")}"`,
+	'loading="lazy"',
+	'referrerpolicy="strict-origin-when-cross-origin"',
+	`sandbox="${sandbox}"`,
+	allow && `allow="${allow}"`,
+	node.allowFullscreen === true && "allowfullscreen",
+].filter(Boolean);
+const frame = `<iframe ${attributes.join(" ")}></iframe>`;
+---
+
+<div class="emdash-iframe" style={size}><Fragment set:html={frame} /></div>
+
+<style>
+	.emdash-iframe {
+		aspect-ratio: 16 / 9;
+		margin: 1.5rem 0;
+		width: 100%;
+	}
+
+	.emdash-iframe :global(iframe) {
+		display: block;
+		width: 100%;
+		height: 100%;
+		border: 0;
+	}
+</style>

package/src/components/Image.astro

@@ -9,7 +9,7 @@ import { Image as AstroImage } from "astro:assets";
 import type { ImageEmbed } from "../media/types.js";
 import { getMediaProvider } from "../media/provider-loader.js";
 import { buildRenderMediaUrl } from "../media/url.js";
-import { toAbsoluteMediaUrl, RESPONSIVE_BREAKPOINTS } from "../media/responsive.js";
+import { toAbsoluteMediaUrl, responsiveWidths } from "../media/responsive.js";
 import { getPublicOrigin } from "../api/public-url.js";
 import { sanitizeHref } from "../utils/url.js";
 import { normalizeImageLink } from "../content/converters/image-link.js";
@@ -63,8 +63,9 @@ function generateSrcset(
 	getSrc: NonNullable<ImageEmbed["getSrc"]>,
 	maxWidth: number,
 	aspectRatio?: number,
+	originalWidth?: number,
 ): string {
-	return RESPONSIVE_BREAKPOINTS.filter((w) => w <= maxWidth * 2)
+	return responsiveWidths(maxWidth, originalWidth)
 		.map((w) => {
 			const h = aspectRatio ? Math.round(w / aspectRatio) : undefined;
 			return `${getSrc({ width: w, height: h })} ${w}w`;
@@ -148,7 +149,7 @@ if (providerId && providerId !== "local") {
 				if (embed.getSrc) {
 					const maxWidth = renderWidth || 1200;
 					const ar = renderWidth && renderHeight ? renderWidth / renderHeight : aspectRatio;
-					srcset = generateSrcset(embed.getSrc, maxWidth, ar);
+					srcset = generateSrcset(embed.getSrc, maxWidth, ar, originalWidth);
 					sizes = renderWidth
 						? `(min-width: ${renderWidth}px) ${renderWidth}px, 100vw`
 						: "100vw";

package/src/components/InlinePortableTextEditor.tsx

@@ -9,12 +9,15 @@
  * Auto-saves on blur, dispatches custom events for toolbar integration.
  */
 
+import { htmlBlockFields } from "@emdash-cms/admin/html-block";
 import { autoUpdate, flip, offset, shift, useFloating } from "@floating-ui/react";
 import { Extension, Node, mergeAttributes, type JSONContent, type Range } from "@tiptap/core";
 import Focus from "@tiptap/extension-focus";
 import Image from "@tiptap/extension-image";
 import Link from "@tiptap/extension-link";
 import Placeholder from "@tiptap/extension-placeholder";
+import Subscript from "@tiptap/extension-subscript";
+import Superscript from "@tiptap/extension-superscript";
 import TextAlign from "@tiptap/extension-text-align";
 import Typography from "@tiptap/extension-typography";
 import Underline from "@tiptap/extension-underline";
@@ -27,6 +30,12 @@ import * as React from "react";
 import { createPortal } from "react-dom";
 
 import { resolveImageMedia } from "../content/converters/gallery.js";
+import { normalizeImageLink } from "../content/converters/image-link.js";
+import {
+	assertPortableTextMarksSupported,
+	assertProseMirrorMarksSupported,
+	UnsupportedPortableTextMarksError,
+} from "../content/converters/mark-safety.js";
 import {
 	deriveLegacyListId,
 	normalizeProseMirrorOrderedListJson,
@@ -34,6 +43,7 @@ import {
 	normalizeListStart,
 	readOrderedListMetadata,
 } from "../content/converters/numbered-list.js";
+import type { ProseMirrorDocument } from "../content/converters/types.js";
 import { computeThumbnailSize } from "../media/thumbnail.js";
 import { CodeMarkExtension } from "./code-mark.js";
 import { InlineCodeBlockExtension } from "./inline-code-block.js";
@@ -80,10 +90,15 @@ 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 {
+/** Type guard for a ProseMirror JSON document. */
+function isProseMirrorDocument(value: unknown): value is ProseMirrorDocument {
 	return (
-		typeof value === "object" && value !== null && "type" in value && typeof value.type === "string"
+		typeof value === "object" &&
+		value !== null &&
+		"type" in value &&
+		value.type === "doc" &&
+		"content" in value &&
+		Array.isArray(value.content)
 	);
 }
 
@@ -171,6 +186,18 @@ function attrDimension(
 	return value !== undefined && Number.isFinite(value) && value > 0 ? value : undefined;
 }
 
+type ImageAlignment = "left" | "center" | "right" | "wide" | "full";
+
+function imageAlignment(value: unknown): ImageAlignment | undefined {
+	return value === "left" ||
+		value === "center" ||
+		value === "right" ||
+		value === "wide" ||
+		value === "full"
+		? value
+		: undefined;
+}
+
 function canonicalMediaProviderId(provider: string | undefined): string | undefined {
 	return provider === "external-url" ? "external" : provider;
 }
@@ -263,14 +290,12 @@ function convertPMNode(node: PMNode, path: string): PTBlock | PTBlock[] | null {
 				language: attrStrOpt(node.attrs, "language"),
 			};
 		}
-		case "htmlBlock": {
-			const rawHtml = node.attrs?.html;
+		case "htmlBlock":
 			return {
 				_type: "htmlBlock",
 				_key: k(),
-				html: typeof rawHtml === "string" ? rawHtml : "",
+				...htmlBlockFields(node.attrs ?? {}),
 			};
-		}
 		case "image": {
 			const provider = attrStrOpt(node.attrs, "provider");
 			const blurhash = attrStrOpt(node.attrs, "blurhash");
@@ -301,6 +326,8 @@ function convertPMNode(node: PMNode, path: string): PTBlock | PTBlock[] | null {
 				...(dominantColor ? { dominantColor } : {}),
 				displayWidth: attrDimension(node.attrs, "displayWidth"),
 				displayHeight: attrDimension(node.attrs, "displayHeight"),
+				alignment: imageAlignment(node.attrs?.alignment),
+				link: normalizeImageLink(node.attrs?.link) ?? undefined,
 			};
 		}
 		case "horizontalRule":
@@ -449,6 +476,7 @@ function convertPMMark(
 
 function portableTextToPM(blocks: PTBlock[]): JSONContent {
 	if (!blocks || blocks.length === 0) return { type: "doc", content: [{ type: "paragraph" }] };
+	assertPortableTextMarksSupported(blocks);
 
 	const content: PMNode[] = [];
 	let i = 0;
@@ -569,10 +597,9 @@ function convertPTBlock(block: PTBlock): PMNode | null {
 		return { type: "horizontalRule" };
 	}
 	if (block._type === "htmlBlock") {
-		const hb = block as PTBlock & { html?: string };
 		return {
 			type: "htmlBlock",
-			attrs: { html: hb.html || "" },
+			attrs: { ...htmlBlockFields(block) },
 		};
 	}
 	if (block._type === "image") {
@@ -594,6 +621,9 @@ function convertPTBlock(block: PTBlock): PMNode | null {
 			dominantColor?: string;
 			displayWidth?: number;
 			displayHeight?: number;
+			alignment?: unknown;
+			/** `{ href, blank? }`, or a bare string on WordPress-imported content */
+			link?: unknown;
 		};
 		const meta = ib.asset?.meta;
 		const { asset, alt, width, height } = resolveImageMedia(ib);
@@ -625,6 +655,8 @@ function convertPTBlock(block: PTBlock): PMNode | null {
 				dominantColor,
 				displayWidth: ib.displayWidth,
 				displayHeight: ib.displayHeight,
+				alignment: imageAlignment(ib.alignment) ?? null,
+				link: normalizeImageLink(ib.link),
 			},
 		};
 	}
@@ -813,6 +845,12 @@ function convertPTMarks(marks: string[], markDefs: Map<string, PTMarkDef>): Mark
 			case "code":
 				pm.push({ type: "code" });
 				break;
+			case "superscript":
+				pm.push({ type: "superscript" });
+				break;
+			case "subscript":
+				pm.push({ type: "subscript" });
+				break;
 			default: {
 				const md = markDefs.get(mark);
 				if (md && md._type === "link") {
@@ -949,6 +987,23 @@ function InlineBubbleMenu({ editor }: { editor: Editor }) {
 						<span style={{ fontFamily: "monospace", fontSize: "13px" }}>&lt;/&gt;</span>
 					</button>
 					<span className="emdash-bubble-divider" />
+					<button
+						type="button"
+						className={`emdash-bubble-btn ${editor.isActive("superscript") ? "emdash-bubble-btn--active" : ""}`}
+						onClick={() => editor.chain().focus().toggleSuperscript().run()}
+						title="Superscript"
+					>
+						<span style={{ fontSize: "13px" }}>x²</span>
+					</button>
+					<button
+						type="button"
+						className={`emdash-bubble-btn ${editor.isActive("subscript") ? "emdash-bubble-btn--active" : ""}`}
+						onClick={() => editor.chain().focus().toggleSubscript().run()}
+						title="Subscript"
+					>
+						<span style={{ fontSize: "13px" }}>x₂</span>
+					</button>
+					<span className="emdash-bubble-divider" />
 					<button
 						type="button"
 						className={`emdash-bubble-btn ${editor.isActive("link") ? "emdash-bubble-btn--active" : ""}`}
@@ -1056,7 +1111,7 @@ const slashCommands: SlashCommandItem[] = [
 				.chain()
 				.focus()
 				.deleteRange(range)
-				.insertContent({ type: "htmlBlock", attrs: { html: "" } })
+				.insertContent({ type: "htmlBlock", attrs: { html: "", isolated: true } })
 				.run();
 		},
 	},
@@ -1118,6 +1173,9 @@ const HtmlBlockNode = Node.create({
 		const noDom = { rendered: false, parseHTML: () => null };
 		return {
 			html: { default: "", ...noDom },
+			css: { default: "", ...noDom },
+			js: { default: "", ...noDom },
+			isolated: { default: false, ...noDom },
 		};
 	},
 
@@ -2167,16 +2225,33 @@ export function InlinePortableTextEditor({
 		);
 	});
 
-	const initialContent = React.useMemo(
-		() => portableTextToPM(value || []),
-		[], // Only compute once on mount
-	);
+	const [loadState] = React.useState<{
+		content: JSONContent;
+		error: UnsupportedPortableTextMarksError | null;
+	}>(() => {
+		try {
+			return { content: portableTextToPM(value || []), error: null };
+		} catch (error) {
+			if (error instanceof UnsupportedPortableTextMarksError) {
+				return {
+					content: { type: "doc", content: [{ type: "paragraph" }] },
+					error,
+				};
+			}
+			throw error;
+		}
+	});
+
+	const initialContent = loadState.content;
+	const loadError = loadState.error;
+	const [saveError, setSaveError] = React.useState<string | null>(null);
 
 	const getBlocks = React.useCallback((): PTBlock[] => {
 		const editor = editorRef.current;
 		if (!editor) return initialRef.current;
 		const json: unknown = editor.getJSON();
-		if (!isPMNode(json)) return initialRef.current;
+		if (!isProseMirrorDocument(json)) return initialRef.current;
+		assertProseMirrorMarksSupported(json);
 		return pmToPortableText(json);
 	}, []);
 
@@ -2185,14 +2260,21 @@ export function InlinePortableTextEditor({
 			// A pagehide flush must not be skipped: an in-flight blur save is
 			// cancelled by the navigation, so the keepalive request is the only
 			// one that can still land.
+			if (loadError) return;
 			if (savingRef.current && !options?.keepalive) return;
 
 			const doc = editorRef.current?.state.doc;
 			if (!doc || !savedDocRef.current || doc.eq(savedDocRef.current)) return;
-			const blocks = getBlocks();
 
 			savingRef.current = true;
+			let settle = () => {};
+			const done = new Promise<void>((resolve) => {
+				settle = () => resolve();
+			});
+			// The visual-editing toolbar holds Publish until `done` settles.
+			document.dispatchEvent(new CustomEvent("emdash:save-pending", { detail: { done } }));
 			try {
+				const blocks = getBlocks();
 				const res = await fetch(
 					`/_emdash/api/content/${encodeURIComponent(collection)}/${encodeURIComponent(entryId)}`,
 					{
@@ -2205,6 +2287,7 @@ export function InlinePortableTextEditor({
 				);
 
 				if (res.ok) {
+					setSaveError(null);
 					initialRef.current = blocks;
 					savedDocRef.current = doc;
 					document.dispatchEvent(new CustomEvent("emdash:save", { detail: { state: "saved" } }));
@@ -2214,17 +2297,24 @@ export function InlinePortableTextEditor({
 						}),
 					);
 				} else {
+					setSaveError(`Save failed: ${res.status}`);
 					document.dispatchEvent(new CustomEvent("emdash:save", { detail: { state: "error" } }));
 					console.error("Save failed:", res.status);
 				}
 			} catch (err) {
+				setSaveError(
+					err instanceof UnsupportedPortableTextMarksError
+						? `Save failed: unsupported formatting (${err.marks.join(", ")}).`
+						: "Save failed. Please try again.",
+				);
 				document.dispatchEvent(new CustomEvent("emdash:save", { detail: { state: "error" } }));
 				console.error("Save failed:", err);
 			} finally {
 				savingRef.current = false;
+				settle();
 			}
 		},
-		[collection, entryId, field, getBlocks],
+		[collection, entryId, field, getBlocks, loadError],
 	);
 
 	// Flush unsaved edits when the page goes away (browser back/forward,
@@ -2279,10 +2369,14 @@ export function InlinePortableTextEditor({
 						caption: { default: null },
 						blurhash: { default: null },
 						dominantColor: { default: null },
+						alignment: { default: null, rendered: false },
+						link: { default: null, rendered: false },
 					};
 				},
 			}),
 			Underline,
+			Subscript,
+			Superscript,
 			Link.configure({
 				openOnClick: false,
 				HTMLAttributes: { class: "underline text-blue-600 dark:text-blue-400" },
@@ -2343,20 +2437,17 @@ export function InlinePortableTextEditor({
 			if (!editor) return;
 			const src =
 				item.url || item.previewUrl || `/_emdash/api/media/file/${item.storageKey || item.id}`;
-			editor
-				.chain()
-				.focus()
-				.setImage({
-					src,
-					alt: item.alt || item.filename || "",
-					mediaId: item.id,
-					provider: canonicalMediaProviderId(item.provider) || "local",
-					width: item.width,
-					height: item.height,
-					blurhash: item.blurhash,
-					dominantColor: item.dominantColor,
-				})
-				.run();
+			const attrs = {
+				src,
+				alt: item.alt || item.filename || "",
+				mediaId: item.id,
+				provider: canonicalMediaProviderId(item.provider) || "local",
+				width: item.width,
+				height: item.height,
+				blurhash: item.blurhash,
+				dominantColor: item.dominantColor,
+			};
+			editor.chain().focus().setImage(attrs).run();
 			setMediaPickerOpen(false);
 			void save();
 		},
@@ -2383,8 +2474,22 @@ export function InlinePortableTextEditor({
 
 	return (
 		<div onBlur={handleBlur}>
-			<InlineBubbleMenu editor={editor} />
-			<EditorContent editor={editor} />
+			{loadError ? (
+				<div className="emdash-inline-editor-error" role="alert" dir="auto">
+					This field can’t be edited here because it contains unsupported Portable Text marks:{" "}
+					{loadError.marks.join(", ")}.
+				</div>
+			) : (
+				<>
+					<InlineBubbleMenu editor={editor} />
+					<EditorContent editor={editor} />
+				</>
+			)}
+			{saveError ? (
+				<div className="emdash-inline-editor-error" role="alert" dir="auto">
+					{saveError}
+				</div>
+			) : null}
 			{unsupportedFileGuidance ? (
 				<div
 					key={unsupportedFileGuidance.version}
@@ -2660,6 +2765,19 @@ export function InlinePortableTextEditor({
 					line-height: 1.4;
 					text-align: start;
 				}
+				.emdash-inline-editor-error {
+					margin-block-start: 0.75rem;
+					padding-block: 0.625rem;
+					padding-inline: 0.875rem;
+					border: 1px solid #fecaca;
+					border-radius: 0.5rem;
+					background: #fef2f2;
+					color: #991b1b;
+					font-size: 0.875rem;
+					font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+					line-height: 1.4;
+					text-align: start;
+				}
 				.emdash-plugin-block-placeholder {
 					margin: 0.75rem 0;
 					padding: 0.625rem 0.875rem;
@@ -2677,6 +2795,11 @@ export function InlinePortableTextEditor({
 						background: #172554;
 						color: #dbeafe;
 					}
+					.emdash-inline-editor-error {
+						border-color: #991b1b;
+						background: #450a0a;
+						color: #fee2e2;
+					}
 					.emdash-plugin-block-placeholder {
 						border-color: #374151;
 						background: #111827;