emdash 1.0.1 → 1.1.0

package/src/astro/routes/api/auth/oauth/[provider].ts

@@ -8,14 +8,18 @@ import type { APIRoute } from "astro";
 
 export const prerender = false;
 
-import { createAuthorizationUrl, type OAuthConsumerConfig } from "@emdash-cms/auth";
+import {
+	createAuthorizationUrl,
+	isValidMicrosoftTenant,
+	type OAuthConsumerConfig,
+} from "@emdash-cms/auth";
 
 import { getPublicOrigin } from "#api/public-url.js";
 import { createOAuthStateStore } from "#auth/oauth-state-store.js";
 
-type ProviderName = "github" | "google";
+type ProviderName = "github" | "google" | "microsoft";
 
-const VALID_PROVIDERS = new Set<string>(["github", "google"]);
+const VALID_PROVIDERS = new Set<string>(["github", "google", "microsoft"]);
 
 /** Invite tokens are base64url; clamp shape and length before persisting to state. */
 const INVITE_TOKEN_REGEX = /^[A-Za-z0-9_-]{1,256}$/;
@@ -67,6 +71,31 @@ function getOAuthConfig(env: Record<string, unknown>): OAuthConsumerConfig["prov
 		};
 	}
 
+	// Microsoft
+	const microsoftClientId = envString(
+		env,
+		"EMDASH_OAUTH_MICROSOFT_CLIENT_ID",
+		"MICROSOFT_CLIENT_ID",
+	);
+	const microsoftClientSecret = envString(
+		env,
+		"EMDASH_OAUTH_MICROSOFT_CLIENT_SECRET",
+		"MICROSOFT_CLIENT_SECRET",
+	);
+	const microsoftTenant = envString(env, "EMDASH_OAUTH_MICROSOFT_TENANT_ID", "MICROSOFT_TENANT_ID");
+	if (
+		microsoftClientId &&
+		microsoftClientSecret &&
+		microsoftTenant &&
+		isValidMicrosoftTenant(microsoftTenant)
+	) {
+		providers.microsoft = {
+			clientId: microsoftClientId,
+			clientSecret: microsoftClientSecret,
+			tenant: microsoftTenant,
+		};
+	}
+
 	return providers;
 }
 
@@ -110,8 +139,12 @@ export const GET: APIRoute = async ({ params, request, locals, redirect }) => {
 		const providers = getOAuthConfig(env);
 
 		if (!providers[provider]) {
+			const tenantHint =
+				provider === "microsoft"
+					? " Microsoft also needs EMDASH_OAUTH_MICROSOFT_TENANT_ID or MICROSOFT_TENANT_ID: a directory (tenant) ID, or common, organizations or consumers."
+					: "";
 			return redirect(
-				`${errorRedirectBase}?error=provider_not_configured&message=${encodeURIComponent(`OAuth provider ${provider} is not configured. Set either EMDASH_OAUTH_${provider.toUpperCase()}_CLIENT_ID and EMDASH_OAUTH_${provider.toUpperCase()}_CLIENT_SECRET, or ${provider.toUpperCase()}_CLIENT_ID and ${provider.toUpperCase()}_CLIENT_SECRET.`)}`,
+				`${errorRedirectBase}?error=provider_not_configured&message=${encodeURIComponent(`OAuth provider ${provider} is not configured. Set either EMDASH_OAUTH_${provider.toUpperCase()}_CLIENT_ID and EMDASH_OAUTH_${provider.toUpperCase()}_CLIENT_SECRET, or ${provider.toUpperCase()}_CLIENT_ID and ${provider.toUpperCase()}_CLIENT_SECRET.${tenantHint}`)}`,
 			);
 		}
 

package/src/astro/routes/api/calendar.ts

@@ -0,0 +1,35 @@
+/**
+ * Calendar endpoint
+ *
+ * GET /_emdash/api/calendar - Published and scheduled entries in a time range
+ */
+
+import type { APIRoute } from "astro";
+
+import { requirePerm } from "#api/authorize.js";
+import { apiError, handleError, unwrapResult } from "#api/error.js";
+import { handleCalendarEntries } from "#api/handlers/calendar.js";
+import { isParseError, parseQuery } from "#api/parse.js";
+import { calendarQuery } from "#api/schemas.js";
+
+export const prerender = false;
+
+export const GET: APIRoute = async ({ url, locals }) => {
+	const { emdash, user } = locals;
+
+	const denied = requirePerm(user, "content:read_drafts");
+	if (denied) return denied;
+
+	if (!emdash?.db) {
+		return apiError("NOT_CONFIGURED", "EmDash is not initialized", 500);
+	}
+
+	const query = parseQuery(url, calendarQuery);
+	if (isParseError(query)) return query;
+
+	try {
+		return unwrapResult(await handleCalendarEntries(emdash.db, query));
+	} catch (error) {
+		return handleError(error, "Failed to load calendar", "CALENDAR_ERROR");
+	}
+};

package/src/astro/routes/api/media/upload-url.ts

@@ -18,7 +18,7 @@ import { GLOBAL_UPLOAD_ALLOWLIST, resolveFieldAllowlist } from "#api/handlers/me
 import { isParseError, parseBody } from "#api/parse.js";
 import { DEFAULT_MAX_UPLOAD_SIZE, mediaUploadUrlBody } from "#api/schemas.js";
 import { MediaRepository } from "#db/repositories/media.js";
-import { matchesMimeAllowlist, normalizeMime } from "#media/mime.js";
+import { matchesMimeAllowlist, normalizeMime, resolveUploadMimeType } from "#media/mime.js";
 
 export const prerender = false;
 
@@ -75,7 +75,11 @@ export const POST: APIRoute = async ({ request, locals }) => {
 		}
 		const body = await parseBody(request, mediaUploadUrlBody(maxSize));
 		if (isParseError(body)) return body;
-		const normalizedContentType = normalizeMime(body.contentType);
+
+		// Clients that don't recognise an extension may send an empty or generic
+		// content type; fall back to the filename extension before allowlisting.
+		const mimeType = resolveUploadMimeType(body.filename, body.contentType);
+		const normalizedContentType = normalizeMime(mimeType);
 
 		// Validate content type (field-aware widening)
 		const fieldAllowlist = body.fieldId
@@ -83,7 +87,7 @@ export const POST: APIRoute = async ({ request, locals }) => {
 			: null;
 		const allowlist = fieldAllowlist ?? [...GLOBAL_UPLOAD_ALLOWLIST];
 
-		if (!matchesMimeAllowlist(body.contentType, allowlist)) {
+		if (!matchesMimeAllowlist(mimeType, allowlist)) {
 			return apiError("INVALID_TYPE", "File type not allowed", 400);
 		}
 
@@ -115,7 +119,7 @@ export const POST: APIRoute = async ({ request, locals }) => {
 		try {
 			signedUrl = await emdash.storage.getSignedUploadUrl({
 				key: storageKey,
-				contentType: body.contentType,
+				contentType: mimeType,
 				size: body.size,
 				expiresIn: 3600,
 			});

package/src/astro/routes/api/media.ts

@@ -25,7 +25,7 @@ import {
 } from "#api/schemas.js";
 import { MediaRepository } from "#db/repositories/media.js";
 import { enrichImageMetadata } from "#media/enrich.js";
-import { matchesMimeAllowlist, normalizeMime } from "#media/mime.js";
+import { matchesMimeAllowlist, resolveUploadMimeType } from "#media/mime.js";
 import { computeContentHash } from "#utils/hash.js";
 
 import type { MediaItem } from "../../types.js";
@@ -187,7 +187,11 @@ export const POST: APIRoute = async ({ request, locals }) => {
 		const fieldAllowlist = fieldId ? await resolveFieldAllowlist(emdash.db, fieldId) : null;
 		const allowlist = fieldAllowlist ?? [...GLOBAL_UPLOAD_ALLOWLIST];
 
-		if (!matchesMimeAllowlist(file.type, allowlist)) {
+		// Browsers that don't know a format (e.g. `.jxl`) may send an empty or
+		// generic type; fall back to the extension map so allowed uploads aren't
+		// rejected just because the client can't identify them.
+		const mimeType = resolveUploadMimeType(file.name, file.type);
+		if (!mimeType || !matchesMimeAllowlist(mimeType, allowlist)) {
 			return apiError("INVALID_TYPE", "File type not allowed", 400);
 		}
 
@@ -226,7 +230,7 @@ export const POST: APIRoute = async ({ request, locals }) => {
 		await emdash.storage.upload({
 			key: storageKey,
 			body: buffer,
-			contentType: file.type,
+			contentType: mimeType,
 		});
 
 		// Get image dimensions from form data (sent by client)
@@ -242,7 +246,7 @@ export const POST: APIRoute = async ({ request, locals }) => {
 		// (avoids OOM on large originals on memory-constrained runtimes).
 		const thumbnailEntry = formData.get("thumbnail");
 		const thumbnail = thumbnailEntry instanceof File ? thumbnailEntry : null;
-		const enriched = await enrichImageMetadata(buffer, file.type, {
+		const enriched = await enrichImageMetadata(buffer, mimeType, {
 			knownDimensions: width != null && height != null ? { width, height } : undefined,
 			placeholder: thumbnail
 				? { bytes: new Uint8Array(await thumbnail.arrayBuffer()), contentType: thumbnail.type }
@@ -252,7 +256,7 @@ export const POST: APIRoute = async ({ request, locals }) => {
 		// Create media record
 		const result = await emdash.handleMediaCreate({
 			filename,
-			mimeType: normalizeMime(file.type),
+			mimeType,
 			size: file.size,
 			// Client dimensions win over server header dimensions: the browser's
 			// naturalWidth/Height apply EXIF orientation, while image-size reports

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

@@ -54,8 +54,20 @@ export const POST: APIRoute = async ({ request, url, locals }) => {
 		const configuredSiteUrl = getConfiguredOrigin(emdash.config);
 		const loopbackHost =
 			url.hostname === "localhost" || url.hostname === "127.0.0.1" || url.hostname === "[::1]";
-		const siteUrl =
-			configuredSiteUrl ?? (import.meta.env.DEV && loopbackHost ? url.origin : undefined);
+		// On Cloudflare's network a Worker only receives requests for hostnames bound
+		// to it, each with an edge TLS certificate. `astro dev` runs in workerd
+		// without that guarantee, so development keeps the loopback-only rule.
+		const onCloudflareWorkers =
+			typeof navigator !== "undefined" &&
+			typeof navigator.userAgent === "string" &&
+			navigator.userAgent.includes("Cloudflare-Workers");
+		let requestOrigin: string | undefined;
+		if (import.meta.env.DEV) {
+			if (loopbackHost) requestOrigin = url.origin;
+		} else if (onCloudflareWorkers) {
+			requestOrigin = `https://${url.hostname}`;
+		}
+		const siteUrl = configuredSiteUrl ?? requestOrigin;
 		if (!siteUrl) {
 			return apiError(
 				"SITE_URL_REQUIRED",

package/src/auth/providers/microsoft-admin.tsx

@@ -0,0 +1,31 @@
+/**
+ * Microsoft OAuth Admin Components
+ *
+ * LoginButton for the login page, rendered via the auth provider virtual module.
+ */
+
+import { LinkButton } from "@cloudflare/kumo";
+import * as React from "react";
+
+function MicrosoftIcon({ className }: { className?: string }) {
+	return (
+		<svg className={className} viewBox="0 0 24 24">
+			<path fill="#F25022" d="M1 1h10.5v10.5H1z" />
+			<path fill="#7FBA00" d="M12.5 1H23v10.5H12.5z" />
+			<path fill="#00A4EF" d="M1 12.5h10.5V23H1z" />
+			<path fill="#FFB900" d="M12.5 12.5H23V23H12.5z" />
+		</svg>
+	);
+}
+
+export function LoginButton({ inviteToken }: { inviteToken?: string } = {}) {
+	const href = inviteToken
+		? `/_emdash/api/auth/oauth/microsoft?invite=${encodeURIComponent(inviteToken)}`
+		: "/_emdash/api/auth/oauth/microsoft";
+	return (
+		<LinkButton href={href} variant="outline" className="w-full justify-center">
+			<MicrosoftIcon className="h-5 w-5" />
+			<span>Microsoft</span>
+		</LinkButton>
+	);
+}

package/src/auth/providers/microsoft.ts

@@ -0,0 +1,47 @@
+/**
+ * Microsoft OAuth Auth Provider
+ *
+ * Returns an AuthProviderDescriptor for Microsoft Entra ID login.
+ * Credentials are read from environment variables at runtime.
+ *
+ * @example
+ * ```ts
+ * import { microsoft } from "emdash/auth/providers/microsoft";
+ *
+ * emdash({
+ *   authProviders: [microsoft()],
+ * })
+ * ```
+ */
+
+import type { AuthProviderDescriptor } from "../types.js";
+
+export interface MicrosoftProviderOptions {
+	/**
+	 * Whether sign-in email addresses count as verified, which EmDash requires
+	 * before it links an existing user, accepts an invite, or allows
+	 * self-signup. By default, only accounts that sign in through a configured
+	 * directory (tenant) ID count as verified, and only for an address in the
+	 * domain of their sign-in name or confirmed by the `xms_edov` claim;
+	 * accounts homed in another directory or identity provider, such as
+	 * guests, and sign-ins through `common`, `organizations` or `consumers`
+	 * do not.
+	 */
+	emailVerified?: boolean;
+}
+
+/**
+ * Configure Microsoft Entra ID as an auth provider.
+ *
+ * Requires `EMDASH_OAUTH_MICROSOFT_CLIENT_ID`, `EMDASH_OAUTH_MICROSOFT_CLIENT_SECRET`
+ * and `EMDASH_OAUTH_MICROSOFT_TENANT_ID` (or `MICROSOFT_CLIENT_ID` /
+ * `MICROSOFT_CLIENT_SECRET` / `MICROSOFT_TENANT_ID`) environment variables.
+ */
+export function microsoft(options: MicrosoftProviderOptions = {}): AuthProviderDescriptor {
+	return {
+		id: "microsoft",
+		label: "Microsoft",
+		config: options,
+		adminEntry: "emdash/auth/providers/microsoft-admin",
+	};
+}

package/src/comments/turnstile.ts

@@ -16,9 +16,14 @@ const SITEVERIFY_URL = "https://challenges.cloudflare.com/turnstile/v0/siteverif
 /**
  * Resolve the configured Turnstile secret key, or `""` when Turnstile
  * enforcement is not configured.
+ *
+ * Reads `process.env` only: Vite replaces `import.meta.env` at build time,
+ * which would bake a build-machine secret into the bundle and hide a secret
+ * set on the deployment platform.
  */
 export function getTurnstileSecretKey(): string {
-	return import.meta.env.EMDASH_TURNSTILE_SECRET_KEY || import.meta.env.TURNSTILE_SECRET_KEY || "";
+	const env = typeof process !== "undefined" && process.env ? process.env : {};
+	return env.EMDASH_TURNSTILE_SECRET_KEY || env.TURNSTILE_SECRET_KEY || "";
 }
 
 /**

package/src/components/HtmlBlock.astro

@@ -2,29 +2,40 @@
 /**
  * Portable Text HTML block component
  *
- * Renders raw HTML blocks that couldn't be converted to Portable Text.
- * Sanitizes HTML to prevent XSS attacks.
+ * Renders isolated blocks in a sandboxed frame with their CSS and JavaScript.
+ * Renders other blocks as inline HTML, sanitized to prevent XSS attacks.
  */
+import { htmlBlockFields } from "@emdash-cms/admin/html-block";
+
 import { sanitizeContent } from "../utils/sanitize.js";
+import HtmlBlockFrame from "./HtmlBlockFrame.astro";
 
 export interface Props {
 	node: {
 		_type: "htmlBlock";
 		_key: string;
 		html: string;
+		css?: string;
+		js?: string;
+		isolated?: boolean;
 	};
 }
 
 const { node } = Astro.props;
+const { html, css = "", js = "", isolated } = htmlBlockFields(node ?? {});
 
-if (!node?.html) {
+if (isolated ? !html.trim() && !css.trim() && !js.trim() : !html) {
 	return null;
 }
-
-const sanitized = sanitizeContent(node.html);
 ---
 
-<div class="emdash-html-block" set:html={sanitized} />
+{
+	isolated ? (
+		<HtmlBlockFrame html={html} css={css} js={js} />
+	) : (
+		<div class="emdash-html-block" set:html={sanitizeContent(html)} />
+	)
+}
 
 <style>
 	.emdash-html-block {

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/InlinePortableTextEditor.tsx

@@ -9,6 +9,7 @@
  * 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";
@@ -263,14 +264,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");
@@ -569,10 +568,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") {
@@ -1056,7 +1054,7 @@ const slashCommands: SlashCommandItem[] = [
 				.chain()
 				.focus()
 				.deleteRange(range)
-				.insertContent({ type: "htmlBlock", attrs: { html: "" } })
+				.insertContent({ type: "htmlBlock", attrs: { html: "", isolated: true } })
 				.run();
 		},
 	},
@@ -1118,6 +1116,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 },
 		};
 	},