emdash 0.22.0 → 0.23.0

package/src/astro/integration/vite-config.ts

@@ -307,6 +307,10 @@ export function createVirtualModulesPlugin(options: VitePluginOptions): Plugin {
  * On Cloudflare, the adapter handles its own externalization — setting
  * ssr.external there conflicts with @cloudflare/vite-plugin's validation.
  */
+// Matches the admin stylesheet import with or without a trailing query (e.g.
+// `?url`), so both forms resolve to dist rather than the source alias.
+const ADMIN_STYLES_ALIAS = /^@emdash-cms\/admin\/styles\.css/;
+
 const NODE_NATIVE_EXTERNALS = [
 	"better-sqlite3",
 	"bindings",
@@ -353,8 +357,12 @@ export function createViteConfig(
 			// The styles.css alias must come before the package alias, otherwise
 			// Vite's prefix matching on "@emdash-cms/admin" would resolve
 			// "@emdash-cms/admin/styles.css" through the source directory.
+			// Regex (not string) so the `?url` variant — admin.astro imports the
+			// stylesheet as `?url` to keep it out of the page CSS graph — also
+			// resolves to dist; a string `find` only matches on a `/` or end
+			// boundary, so `styles.css?url` would slip through to the source alias.
 			alias: [
-				{ find: "@emdash-cms/admin/styles.css", replacement: resolve(adminDistPath, "styles.css") },
+				{ find: ADMIN_STYLES_ALIAS, replacement: resolve(adminDistPath, "styles.css") },
 				{ find: "@emdash-cms/admin", replacement: useSource ? adminSourcePath : adminDistPath },
 				// `use-sync-external-store/shim` is a React <18 polyfill that ships
 				// only as CJS. It's pulled in transitively by `@tiptap/react`. With

package/src/astro/middleware/request-context.ts

@@ -30,10 +30,15 @@ async function injectToolbar(response: Response, toolbarHtml: string): Promise<R
 	if (!html.includes("</body>")) return new Response(html, response);
 
 	const injected = html.replace("</body>", `${toolbarHtml}</body>`);
-	return new Response(injected, {
+	const result = new Response(injected, {
 		status: response.status,
 		headers: response.headers,
 	});
+	// Toolbar-injected HTML is session-specific (its presence reveals an active
+	// editor session); it must never be stored in a shared CDN cache and served
+	// to anonymous visitors. Mirrors the preview branch's guard (#1398).
+	result.headers.set("Cache-Control", "private, no-store");
+	return result;
 }
 
 export const onRequest = defineMiddleware(async (context, next) => {

package/src/astro/middleware/scoped-db.ts

@@ -0,0 +1,131 @@
+/**
+ * Request-scoped database lifecycle helpers.
+ *
+ * Extracted from middleware.ts so they can be unit-tested without pulling in
+ * the virtual:emdash/* module graph. The middleware imports these to settle a
+ * request-scoped db adapter's lifecycle around the response.
+ */
+
+/**
+ * Astro attaches AstroCookies to outgoing responses via a well-known global
+ * symbol. Cloning a Response (`new Response(body, init)`) drops non-header
+ * metadata, so any helper that wraps the response must explicitly forward this
+ * symbol or `cookies.set()` calls will be silently dropped. `Symbol.for`
+ * returns the same registry symbol everywhere, so this matches the copy in
+ * middleware.ts.
+ */
+export const ASTRO_COOKIES_SYMBOL = Symbol.for("astro.cookies");
+
+/**
+ * Run a request-scoped db's `close()` once the response body has finished
+ * streaming. Astro streams HTML and components issue DB queries during that
+ * stream, so a connection-backed adapter (e.g. Postgres over Hyperdrive) must
+ * not be torn down until the body is flushed. Bodyless responses (redirects,
+ * 304s, errors) close immediately. A guard makes close idempotent and a stream
+ * `cancel` (client disconnect) still triggers it so connections never leak.
+ *
+ * No-op for adapters without a `close` (D1): the response passes through.
+ */
+export function wrapResponseForScopedClose(response: Response, close: () => void): Response {
+	let closed = false;
+	const runClose = () => {
+		if (closed) return;
+		closed = true;
+		try {
+			close();
+		} catch (error) {
+			console.error("[emdash] request-scoped db close failed:", error);
+		}
+	};
+
+	if (!response.body) {
+		runClose();
+		return response;
+	}
+
+	const transform = new TransformStream<Uint8Array, Uint8Array>({
+		flush: runClose,
+		cancel: runClose,
+	});
+	const wrapped = new Response(response.body.pipeThrough(transform), response);
+	const astroCookies = Reflect.get(response, ASTRO_COOKIES_SYMBOL);
+	if (astroCookies !== undefined) {
+		Reflect.set(wrapped, ASTRO_COOKIES_SYMBOL, astroCookies);
+	}
+	// Byte counts are preserved by the identity transform, but a stale
+	// Content-Length on a reconstructed streaming Response risks truncation.
+	wrapped.headers.delete("Content-Length");
+	return wrapped;
+}
+
+/**
+ * Run the request body under a request-scoped db, then settle its lifecycle:
+ * `commit()` runs before the response is returned (so per-request state like a
+ * D1 bookmark cookie is persisted in the headers, even if render throws), while
+ * `close()` (if any) is deferred to stream-end so a connection-backed adapter
+ * isn't torn down mid-render. On error the connection is closed immediately
+ * before rethrowing so it never leaks.
+ *
+ * On the error path both `commit()` and `close()` are defended: a throw from
+ * either is logged and swallowed so it can't replace the propagating render
+ * error (which is the one the caller needs to see). On the success path
+ * `commit()` is guarded too — if it throws, the connection is closed before the
+ * failure is surfaced, so it never leaks. For the current adapters `commit()`
+ * is a no-op (Hyperdrive) or a cookie write (D1, no `close`) and `close()` is
+ * fire-and-forget, so these guards only matter for a future connection-backed
+ * adapter with throwing teardown, but the helper is generic and must not leak
+ * or mask.
+ */
+export async function finishScoped(
+	scoped: { commit: () => void; close?: () => void },
+	run: () => Promise<Response>,
+): Promise<Response> {
+	let response: Response;
+	try {
+		response = await run();
+	} catch (error) {
+		// A render error is already propagating; neither commit nor close may
+		// mask it, and close must still run so the connection doesn't leak.
+		commitSafely(scoped.commit);
+		closeSafely(scoped.close);
+		throw error;
+	}
+	try {
+		scoped.commit();
+	} catch (error) {
+		// commit() failed on the success path: close the connection now (the
+		// response won't be wrapped, so stream-end close would never run) and
+		// surface the failure. close is swallowed so it can't mask the commit
+		// error that the caller needs to see.
+		closeSafely(scoped.close);
+		throw error;
+	}
+	return scoped.close ? wrapResponseForScopedClose(response, scoped.close) : response;
+}
+
+/**
+ * Run commit() swallowing any error. Used where an exception is already
+ * propagating (or about to be thrown) and a commit failure must neither mask it
+ * nor skip the subsequent close().
+ */
+function commitSafely(commit: () => void): void {
+	try {
+		commit();
+	} catch (error) {
+		console.error("[emdash] request-scoped db commit failed during error handling:", error);
+	}
+}
+
+/**
+ * Run close() swallowing any error. Used on the error/commit-failure paths
+ * where another exception is the one the caller must see; a throwing teardown
+ * must not replace it.
+ */
+function closeSafely(close: (() => void) | undefined): void {
+	if (!close) return;
+	try {
+		close();
+	} catch (error) {
+		console.error("[emdash] request-scoped db close failed during error handling:", error);
+	}
+}

package/src/astro/middleware/stream-end-metrics.ts

@@ -20,17 +20,13 @@
 
 import { flushRecorder, isInstrumentationEnabled } from "../../database/instrumentation.js";
 import { getRequestContext } from "../../request-context.js";
+// Reuse the single source of truth for Astro's well-known cookies symbol
+// rather than redefining `Symbol.for("astro.cookies")` here — it must stay in
+// lockstep with the copy the rest of the middleware forwards.
+import { ASTRO_COOKIES_SYMBOL } from "./scoped-db.js";
 
 export const STREAM_END_PREFIX = "[emdash-stream-end]";
 
-/**
- * Astro attaches AstroCookies to outgoing responses via a well-known global
- * symbol. Constructing a new Response drops non-header metadata, so the
- * symbol must be forwarded explicitly or `cookies.set()` calls are silently
- * dropped. Same pattern as finalizeResponse in ../middleware.ts.
- */
-const ASTRO_COOKIES_SYMBOL = Symbol.for("astro.cookies");
-
 /** Shape of the NDJSON snapshot emitted when the body finishes streaming. */
 export interface StreamEndSnapshot {
 	route?: string;

package/src/astro/middleware.ts

@@ -12,6 +12,7 @@ import type { Kysely } from "kysely";
 import virtualConfig from "virtual:emdash/config";
 // @ts-ignore - virtual module
 import {
+	createCoalescingDialect as virtualCreateCoalescingDialect,
 	createDialect as virtualCreateDialect,
 	createRequestScopedDb as virtualCreateRequestScopedDb,
 } from "virtual:emdash/dialect";
@@ -59,6 +60,7 @@ import type { PublishedRef } from "../scheduled-publish.js";
 import { isMissingTableError } from "../utils/db-errors.js";
 import { createInitLock, type InitLock, initWithLock } from "../utils/init-lock.js";
 import type { EmDashConfig } from "./integration/runtime.js";
+import { ASTRO_COOKIES_SYMBOL, finishScoped } from "./middleware/scoped-db.js";
 import { wrapBodyForStreamMetrics } from "./middleware/stream-end-metrics.js";
 import { prefetchLayoutData } from "./prefetch.js";
 import { createPublicPluginApiRouteHandler } from "./public-plugin-api-routes.js";
@@ -179,6 +181,10 @@ function buildDependencies(config: EmDashConfig): RuntimeDependencies {
 		config,
 		plugins: getPlugins(),
 		createDialect: virtualCreateDialect as (config: Record<string, unknown>) => unknown,
+		// Optional: only batching backends (D1, DO) export this; undefined otherwise.
+		createCoalescingDialect: virtualCreateCoalescingDialect as
+			| ((config: Record<string, unknown>) => unknown)
+			| undefined,
 		createStorage: virtualCreateStorage as ((config: Record<string, unknown>) => Storage) | null,
 		createScheduler: virtualCreateScheduler as CreateSchedulerFn | null,
 		sandboxEnabled: sandboxModule.sandboxEnabled as boolean,
@@ -270,16 +276,71 @@ export async function runScheduledTasks(
 	const config = getConfig();
 	if (!config) return { published: [] };
 	const runtime = await getRuntime(config);
-	return runtime.runScheduledTasks(options);
+
+	// Connection-backed adapters (e.g. Postgres over Hyperdrive) cannot reuse
+	// the per-isolate singleton from a Cron Trigger: its socket belongs to the
+	// request that opened it, and workerd rejects cross-event I/O. Open an
+	// event-scoped connection for the sweep and run the batch under it in ALS —
+	// the runtime's db getter, the cron executor, and plugin cron contexts all
+	// resolve the connection from ALS — then close it. Gated on the adapter
+	// being connection-backed (it exposes `close()`); stateless adapters (D1,
+	// Node SQLite) return null or a close-less scope and keep using the
+	// singleton, so their cron path is unchanged.
+	const scoped = createRequestScopedDb({
+		config: config.database?.config,
+		isAuthenticated: false,
+		// The sweep publishes and cleans up — a write workload — so a
+		// connection-backed adapter routes it to the primary.
+		isWrite: true,
+		cookies: NOOP_COOKIE_JAR,
+		url: CRON_EVENT_URL,
+	});
+	if (!scoped?.close) {
+		// Stateless adapter (or no per-request scoping): the singleton is safe
+		// outside a request. Any close-less scope created above is discarded.
+		return runtime.runScheduledTasks(options);
+	}
+
+	const parent = getRequestContext();
+	const ctx = parent
+		? { ...parent, db: scoped.db }
+		: { editMode: false, db: scoped.db, metrics: createRequestMetrics(performance.now()) };
+	try {
+		return await runWithContext(ctx, () => runtime.runScheduledTasks(options));
+	} finally {
+		// Guard both so a throw in teardown can't mask the sweep result or skip
+		// close() and leak the connection. Mirrors closeSafely() in scoped-db.ts.
+		try {
+			scoped.commit();
+		} catch (error) {
+			console.error("[scheduled] request-scoped db commit failed:", error);
+		}
+		try {
+			scoped.close();
+		} catch (error) {
+			console.error("[scheduled] request-scoped db close failed:", error);
+		}
+	}
 }
 
 /**
- * Astro attaches AstroCookies to outgoing responses via a well-known global
- * symbol. Cloning a Response (`new Response(body, init)`) drops non-header
- * metadata, so any middleware that wraps the response must explicitly forward
- * this symbol or `cookies.set()` calls will be silently dropped.
+ * A cookie jar that reads nothing and writes nothing, for request-scoped db
+ * adapters invoked outside an HTTP request (the Cron Trigger sweep). Connection
+ * adapters like Hyperdrive ignore cookies entirely; the D1 session adapter
+ * reads/writes a bookmark cookie, but cron never reaches that path (it has no
+ * `close()`), so the no-ops are never observed.
  */
-const ASTRO_COOKIES_SYMBOL = Symbol.for("astro.cookies");
+const NOOP_COOKIE_JAR = {
+	get: () => undefined,
+	set: () => {},
+};
+
+/**
+ * Synthetic URL for the cron sweep's request-scoped db opts. Only the D1
+ * session adapter inspects `url` (for cookie `secure`), and cron doesn't take
+ * that path, so the value is never used — it exists to satisfy the contract.
+ */
+const CRON_EVENT_URL = new URL("https://cron.emdash.internal/");
 
 /**
  * Baseline security headers applied to all responses.
@@ -356,12 +417,12 @@ const SITEMAP_COLLECTION_RE = /^\/sitemap-[a-z][a-z0-9_]*\.xml$/;
  */
 function createRequestScopedDb(
 	opts: RequestScopedDbOpts,
-): { db: Kysely<Database>; commit: () => void } | null {
+): { db: Kysely<Database>; commit: () => void; close?: () => void } | null {
 	if (typeof virtualCreateRequestScopedDb !== "function") return null;
 	// eslint-disable-next-line typescript/no-unsafe-type-assertion -- adapter returns Kysely<unknown>; cast to Database since core owns that type
 	const fn = virtualCreateRequestScopedDb as (
 		o: RequestScopedDbOpts,
-	) => { db: Kysely<Database>; commit: () => void } | null;
+	) => { db: Kysely<Database>; commit: () => void; close?: () => void } | null;
 	return fn(opts);
 }
 
@@ -546,15 +607,10 @@ export const onRequest = defineMiddleware(async (context, next) => {
 						.startsWith("text/html");
 					return runWithContext(ctx, async () => {
 						if (acceptsHtml) after(() => prefetchLayoutData());
-						// commit() in finally: the write reached the primary independently
-						// of render, so the bookmark cookie must be persisted even if
-						// render throws -- otherwise a write-then-failed-render leaves the
-						// next request able to read pre-write state off a lagging replica.
-						try {
-							return await runAnon();
-						} finally {
-							anonScoped.commit();
-						}
+						// commit() persists per-request state (e.g. the D1 bookmark cookie)
+						// before the response is returned, even if render throws; close()
+						// (connection teardown) is deferred to stream-end. See finishScoped.
+						return finishScoped(anonScoped, runAnon);
 					});
 				}
 				return runAnon();
@@ -658,7 +714,17 @@ export const onRequest = defineMiddleware(async (context, next) => {
 
 					// Direct access (for advanced use cases)
 					storage: runtime.storage,
-					db: runtime.db,
+					// Lazy getter, not an eager snapshot: `locals.emdash` is built
+					// before the per-request scoped db is installed in ALS, so reading
+					// `runtime.db` here would capture the per-isolate singleton. Routes
+					// access `emdash.db` later, during the request, when the scoped db
+					// is active. For a stateless binding (D1) the two are equivalent,
+					// but for a request-bound connection (pg/Hyperdrive) the singleton
+					// belongs to the cold-start request and reusing it from a warm
+					// request hangs on workerd's cross-request I/O guard.
+					get db() {
+						return runtime.db;
+					},
 					getPublicMediaUrl: createPublicMediaUrlResolver(runtime.storage),
 					hooks: runtime.hooks,
 					email: runtime.email,
@@ -722,16 +788,12 @@ export const onRequest = defineMiddleware(async (context, next) => {
 				const ctx = parent
 					? { ...parent, db: scoped.db }
 					: { editMode: false, db: scoped.db, metrics };
-				return runWithContext(ctx, async () => {
-					// commit() in finally: persist the bookmark cookie even if render
-					// throws -- the write already reached the primary, so a failed
-					// render must not strand the next request on a stale replica read.
-					try {
-						return await renderAndFinalize();
-					} finally {
-						scoped.commit();
-					}
-				});
+				return runWithContext(ctx, () =>
+					// commit() persists per-request state (e.g. the D1 bookmark cookie)
+					// before the response returns, even if render throws; close()
+					// (connection teardown) is deferred to stream-end. See finishScoped.
+					finishScoped(scoped, renderAndFinalize),
+				);
 			}
 
 			return renderAndFinalize();

package/src/astro/routes/admin.astro

@@ -5,7 +5,10 @@
  * This page serves the EmDash admin React SPA.
  * AdminWrapper imports plugin admin modules and passes them to AdminApp.
  */
-import "@emdash-cms/admin/styles.css";
+// `?url` keeps the admin stylesheet out of the page's CSS module graph so
+// Astro's dev SSR doesn't inject it into every public route's <head>. We emit
+// it as a route-scoped <link> below instead. See #1281.
+import adminStylesUrl from "@emdash-cms/admin/styles.css?url";
 // Use package-qualified import so Astro generates a proper module URL
 // (relative imports resolve to absolute paths which break client hydration)
 import AdminWrapper from "emdash/routes/PluginRegistry";
@@ -28,6 +31,7 @@ const pageTitle = adminConfig?.siteName ? `${adminConfig.siteName} Admin` : "EmD
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<link rel="stylesheet" href={adminStylesUrl} />
 		<Font cssVariable="--font-emdash" />
 		{adminConfig?.favicon ? (
 			<link rel="icon" href={adminConfig.favicon} />

package/src/astro/routes/api/schema/index.ts

@@ -15,7 +15,7 @@ import { hashString } from "emdash";
 import { requirePerm } from "#api/authorize.js";
 import { apiSuccess, handleError, requireDb } from "#api/error.js";
 import { SchemaRegistry } from "#schema/registry.js";
-import { generateTypeScript } from "#schema/zod-generator.js";
+import { generateTypeScript, uniqueInterfaceNames } from "#schema/zod-generator.js";
 
 export const prerender = false;
 
@@ -45,8 +45,14 @@ export const GET: APIRoute = async ({ request, locals }) => {
 		const format = url.searchParams.get("format");
 
 		if (format === "typescript") {
-			// Generate TypeScript definitions
-			const types = collectionsWithFields.map((c) => generateTypeScript(c)).join("\n\n");
+			// Generate TypeScript definitions. Singularizing slugs can collapse
+			// distinct collections onto the same interface name, so resolve names
+			// up front to keep every emitted interface unique (`book` + `books`
+			// would otherwise both emit `Book`).
+			const interfaceNames = uniqueInterfaceNames(collectionsWithFields);
+			const types = collectionsWithFields
+				.map((c) => generateTypeScript(c, interfaceNames.get(c.slug)))
+				.join("\n\n");
 
 			const header = `// Generated by EmDash CLI
 // Do not edit manually - run \`emdash types\` to regenerate

package/src/cli/commands/export-seed.ts

@@ -153,13 +153,16 @@ export async function exportSeed(db: Kysely<Database>, withContent?: string): Pr
 
 	// 7. Export content (if requested)
 	if (withContent !== undefined) {
-		const collections =
-			withContent === "" || withContent === "true"
-				? null // all collections
-				: withContent
-						.split(",")
-						.map((s) => s.trim())
-						.filter(Boolean);
+		// Treat "all" as a synonym for the bare flag and "true". The args help
+		// text documents `all` as a valid value, but without this the literal
+		// string is read as a collection name and matches no collection (#1329).
+		const includeAll = withContent === "" || withContent === "true" || withContent === "all";
+		const collections = includeAll
+			? null // all collections
+			: withContent
+					.split(",")
+					.map((s) => s.trim())
+					.filter(Boolean);
 
 		seed.content = await exportContent(
 			db,

package/src/components/Block.astro

@@ -0,0 +1,71 @@
+---
+/**
+ * EmDash custom block override for `astro-portabletext`.
+ *
+ * Renders the same HTML as the upstream Block component (h1..h6, blockquote,
+ * `<p>` for `normal`) and additionally surfaces `textAlign` from the rich-text
+ * editor as a WordPress-style `has-text-align-{value}` class on the rendered
+ * paragraph or heading.
+ *
+ * `left` is the editor default and intentionally does not produce a class —
+ * paragraphs/headings without explicit alignment render exactly as they did
+ * before this fix, so existing content is byte-for-byte unchanged.
+ *
+ * Related: https://github.com/emdash-cms/emdash/issues/1201
+ */
+import type { BlockProps } from "astro-portabletext/types";
+
+import { textAlignClassName } from "./portable-text-text-align.js";
+
+type TextAlignedNode = BlockProps["node"] & { textAlign?: string };
+type Props = Omit<BlockProps, "node"> & { node: TextAlignedNode };
+
+const props = Astro.props as Props;
+const { node, index: _index, isInline: _isInline, ...attrs } = props;
+
+const styleIs = (style: string) => style === node.style;
+
+// Allowlist-based; attacker-controlled PT data cannot inject arbitrary classes.
+// See `./portable-text-text-align.ts`.
+const alignClass = textAlignClassName(node.textAlign);
+---
+
+{
+	styleIs("h1") ? (
+		<h1 class={alignClass} {...attrs}>
+			<slot />
+		</h1>
+	) : styleIs("h2") ? (
+		<h2 class={alignClass} {...attrs}>
+			<slot />
+		</h2>
+	) : styleIs("h3") ? (
+		<h3 class={alignClass} {...attrs}>
+			<slot />
+		</h3>
+	) : styleIs("h4") ? (
+		<h4 class={alignClass} {...attrs}>
+			<slot />
+		</h4>
+	) : styleIs("h5") ? (
+		<h5 class={alignClass} {...attrs}>
+			<slot />
+		</h5>
+	) : styleIs("h6") ? (
+		<h6 class={alignClass} {...attrs}>
+			<slot />
+		</h6>
+	) : styleIs("blockquote") ? (
+		<blockquote class={alignClass} {...attrs}>
+			<slot />
+		</blockquote>
+	) : styleIs("normal") ? (
+		<p class={alignClass} {...attrs}>
+			<slot />
+		</p>
+	) : (
+		<p class={alignClass} {...attrs}>
+			<slot />
+		</p>
+	)
+}

package/src/components/EmDashMedia.astro

@@ -158,9 +158,8 @@ const finalAlt = alt ?? (embed?.type === "image" ? embed.alt : undefined) ?? med
 	</audio>
 )}
 
+{/* Custom component embeds (Mux player, etc.) require dynamic import. Placeholder until that lands. */}
 {embed?.type === "component" && (
-	<!-- Custom component embeds (Mux player, etc.) require dynamic import -->
-	<!-- For now, show a placeholder - full implementation TBD -->
 	<div class="emdash-media-component" data-package={embed.package} data-export={embed.export}>
 		<p>Custom media component: {embed.package}</p>
 	</div>

package/src/components/Image.astro

@@ -38,6 +38,8 @@ export interface Props {
 		displayWidth?: number;
 		/** Display height for this instance (overrides original) */
 		displayHeight?: number;
+		/** Alignment for this image instance (e.g. from a WordPress import) */
+		alignment?: "left" | "center" | "right" | "wide" | "full";
 	};
 }
 
@@ -63,7 +65,7 @@ if (!node?.asset) {
 	return null;
 }
 
-const { asset, alt = "", caption, width, height, displayWidth, displayHeight } = node;
+const { asset, alt = "", caption, width, height, displayWidth, displayHeight, alignment } = node;
 
 // Calculate aspect ratio from original dimensions
 const aspectRatio = width && height ? width / height : undefined;
@@ -168,7 +170,7 @@ const baseStyle = aspectRatio
 const imgStyle = placeholderStyle ? `${baseStyle} ${placeholderStyle}` : baseStyle;
 ---
 
-<figure class="emdash-image">
+<figure class:list={["emdash-image", alignment && `emdash-image--align-${alignment}`]}>
 	<img
 		src={src}
 		srcset={srcset}
@@ -197,4 +199,36 @@ const imgStyle = placeholderStyle ? `${baseStyle} ${placeholderStyle}` : baseSty
 		margin-top: 0.5rem;
 		text-align: center;
 	}
+	/* Alignment (WordPress-style). Floats wrap surrounding text; wide/full span the column. */
+	.emdash-image--align-left,
+	.emdash-image--align-right {
+		width: fit-content;
+		max-width: 50%;
+	}
+	.emdash-image--align-left {
+		float: left;
+		margin: 0 1.5rem 1rem 0;
+	}
+	.emdash-image--align-right {
+		float: right;
+		margin: 0 0 1rem 1.5rem;
+	}
+	.emdash-image--align-center {
+		width: fit-content;
+		margin-inline: auto;
+	}
+	.emdash-image--align-wide,
+	.emdash-image--align-full {
+		width: 100%;
+	}
+	/* On narrow screens, un-float left/right so the image is not cramped beside text. */
+	@media (max-width: 640px) {
+		.emdash-image--align-left,
+		.emdash-image--align-right {
+			float: none;
+			width: 100%;
+			max-width: 100%;
+			margin-inline: 0;
+		}
+	}
 </style>

package/src/components/InlinePortableTextEditor.tsx

@@ -51,6 +51,7 @@ interface PTTextBlock {
 	level?: number;
 	children: PTSpan[];
 	markDefs?: PTMarkDef[];
+	textAlign?: "left" | "center" | "right" | "justify";
 }
 
 type PTBlock = PTTextBlock | { _type: string; _key: string; [key: string]: unknown };
@@ -119,12 +120,15 @@ function convertPMNode(node: PMNode): PTBlock | PTBlock[] | null {
 		case "paragraph": {
 			const { children, markDefs } = convertInline(node.content || []);
 			if (children.length === 0) return null;
+			const ta = node.attrs?.textAlign;
+			const textAlign = ta === "center" || ta === "right" || ta === "justify" ? ta : undefined;
 			return {
 				_type: "block",
 				_key: k(),
 				style: "normal",
 				children,
 				markDefs: markDefs.length > 0 ? markDefs : undefined,
+				...(textAlign ? { textAlign } : {}),
 			};
 		}
 		case "heading": {
@@ -140,12 +144,15 @@ function convertPMNode(node: PMNode): PTBlock | PTBlock[] | null {
 				6: "h6",
 			};
 			const headingStyle = headingStyles[level] ?? "h1";
+			const ta = node.attrs?.textAlign;
+			const textAlign = ta === "center" || ta === "right" || ta === "justify" ? ta : undefined;
 			return {
 				_type: "block",
 				_key: k(),
 				style: headingStyle,
 				children,
 				markDefs: markDefs.length > 0 ? markDefs : undefined,
+				...(textAlign ? { textAlign } : {}),
 			};
 		}
 		case "bulletList":
@@ -361,7 +368,7 @@ function portableTextToPM(blocks: PTBlock[]): JSONContent {
 
 function convertPTBlock(block: PTBlock): JSONContent | null {
 	if (isPTTextBlock(block)) {
-		const { style = "normal", children, markDefs = [] } = block;
+		const { style = "normal", children, markDefs = [], textAlign } = block;
 		const pmContent = convertPTSpans(children, markDefs);
 
 		if (style === "blockquote") {
@@ -379,12 +386,13 @@ function convertPTBlock(block: PTBlock): JSONContent | null {
 			const level = parseInt(style.substring(1), 10);
 			return {
 				type: "heading",
-				attrs: { level },
+				attrs: { level, ...(textAlign ? { textAlign } : {}) },
 				content: pmContent.length > 0 ? pmContent : undefined,
 			};
 		}
 		return {
 			type: "paragraph",
+			attrs: textAlign ? { textAlign } : undefined,
 			content: pmContent.length > 0 ? pmContent : undefined,
 		};
 	}