fix(site,sanity): add history adapter to enableVisualEditing for Presentation iframe navigation

Author: codercatdev

apps/sanity/sanity.config.ts

@@ -89,13 +89,24 @@ const localPreviewOrigin = "http://localhost:4321";
 
 // ── Shared helpers ───────────────────────────────────────────────────
 function resolveHref(type: string, slug?: string): string | undefined {
+	if (!slug) {
+		return undefined;
+	}
 	switch (type) {
 		case "post":
-			return slug ? `/post/${slug}` : undefined;
+			return `/post/${slug}`;
 		case "podcast":
-			return slug ? `/podcast/${slug}` : undefined;
+			return `/podcast/${slug}`;
+		case "course":
+			return `/course/${slug}`;
+		case "author":
+			return `/author/${slug}`;
+		case "guest":
+			return `/guest/${slug}`;
+		case "sponsor":
+			return `/sponsor/${slug}`;
 		case "page":
-			return slug ? `/${slug}` : undefined;
+			return `/${slug}`;
 		default:
 			return undefined;
 	}
@@ -106,6 +117,21 @@ const homeLocation = {
 	href: "/",
 } satisfies DocumentLocation;
 
+const blogLocation = {
+	title: "Blog",
+	href: "/blog",
+} satisfies DocumentLocation;
+
+const podcastsLocation = {
+	title: "Podcasts",
+	href: "/podcasts",
+} satisfies DocumentLocation;
+
+const coursesLocation = {
+	title: "Courses",
+	href: "/courses",
+} satisfies DocumentLocation;
+
 // ── Shared schema types ──────────────────────────────────────────────
 const schemaTypes = [
 	// Portable text block types (table)
@@ -148,6 +174,26 @@ function buildPlugins(previewUrl: string): PluginOptions[] {
 									route: "/podcast/:slug",
 									filter: `_type == "podcast" && slug.current == $slug`,
 								},
+								{
+									route: "/course/:slug",
+									filter: `_type == "course" && slug.current == $slug`,
+								},
+								{
+									route: "/author/:slug",
+									filter: `_type == "author" && slug.current == $slug`,
+								},
+								{
+									route: "/guest/:slug",
+									filter: `_type == "guest" && slug.current == $slug`,
+								},
+								{
+									route: "/sponsor/:slug",
+									filter: `_type == "sponsor" && slug.current == $slug`,
+								},
+								{
+									route: "/:slug",
+									filter: `_type == "page" && slug.current == $slug`,
+								},
 							]),
 							locations: {
 								settings: defineLocations({
@@ -160,32 +206,145 @@ function buildPlugins(previewUrl: string): PluginOptions[] {
 										title: "title",
 										slug: "slug.current",
 									},
-									resolve: (doc) => ({
-										locations: [
-											{
-												title: doc?.title || "Untitled",
-												// biome-ignore lint/style/noNonNullAssertion: resolveHref returns string for known types
-												href: resolveHref("post", doc?.slug)!,
-											},
-											homeLocation,
-										],
-									}),
+									resolve: (doc) => {
+										const href = resolveHref("post", doc?.slug);
+										return {
+											locations: [
+												...(href
+													? [
+															{
+																title: doc?.title || "Untitled",
+																href,
+															},
+														]
+													: []),
+												blogLocation,
+												homeLocation,
+											],
+										};
+									},
 								}),
 								podcast: defineLocations({
 									select: {
 										title: "title",
 										slug: "slug.current",
 									},
-									resolve: (doc) => ({
-										locations: [
-											{
-												title: doc?.title || "Untitled",
-												// biome-ignore lint/style/noNonNullAssertion: resolveHref returns string for known types
-												href: resolveHref("podcast", doc?.slug)!,
-											},
-											homeLocation,
-										],
-									}),
+									resolve: (doc) => {
+										const href = resolveHref("podcast", doc?.slug);
+										return {
+											locations: [
+												...(href
+													? [
+															{
+																title: doc?.title || "Untitled",
+																href,
+															},
+														]
+													: []),
+												podcastsLocation,
+												homeLocation,
+											],
+										};
+									},
+								}),
+								course: defineLocations({
+									select: {
+										title: "title",
+										slug: "slug.current",
+									},
+									resolve: (doc) => {
+										const href = resolveHref("course", doc?.slug);
+										return {
+											locations: [
+												...(href
+													? [
+															{
+																title: doc?.title || "Untitled",
+																href,
+															},
+														]
+													: []),
+												coursesLocation,
+												homeLocation,
+											],
+										};
+									},
+								}),
+								page: defineLocations({
+									select: {
+										title: "title",
+										slug: "slug.current",
+									},
+									resolve: (doc) => {
+										const href = resolveHref("page", doc?.slug);
+										return {
+											locations: href
+												? [
+														{
+															title: doc?.title || "Untitled",
+															href,
+														},
+													]
+												: [],
+										};
+									},
+								}),
+								author: defineLocations({
+									select: {
+										title: "title",
+										slug: "slug.current",
+									},
+									resolve: (doc) => {
+										const href = resolveHref("author", doc?.slug);
+										return {
+											locations: href
+												? [
+														{
+															title: doc?.title || "Untitled",
+															href,
+														},
+													]
+												: [],
+										};
+									},
+								}),
+								guest: defineLocations({
+									select: {
+										title: "title",
+										slug: "slug.current",
+									},
+									resolve: (doc) => {
+										const href = resolveHref("guest", doc?.slug);
+										return {
+											locations: href
+												? [
+														{
+															title: doc?.title || "Untitled",
+															href,
+														},
+													]
+												: [],
+										};
+									},
+								}),
+								sponsor: defineLocations({
+									select: {
+										title: "title",
+										slug: "slug.current",
+									},
+									resolve: (doc) => {
+										const href = resolveHref("sponsor", doc?.slug);
+										return {
+											locations: href
+												? [
+														{
+															title: doc?.title || "Untitled",
+															href,
+														},
+													]
+												: [],
+										};
+									},
 								}),
 							},
 						},

apps/site/src/layouts/BaseLayout.astro

@@ -320,13 +320,63 @@ const graph = buildGraph([
 		</div>
 		{preview && <DraftModeToggle />}
 		<script>
+			import "@sanity/visual-editing-standalone/styles.css";
 			import { enableVisualEditing } from "@sanity/visual-editing-standalone";
 
 			if (
 				window.self !== window.top ||
 				document.querySelector("[data-sanity-preview]")
 			) {
 				enableVisualEditing({
+					history: {
+						subscribe: (navigate) => {
+							const onPopState = () => {
+								navigate({ type: "pop", url: window.location.href });
+							};
+							window.addEventListener("popstate", onPopState);
+							return () => window.removeEventListener("popstate", onPopState);
+						},
+						update: (update) => {
+							if (update.type === "push" || update.type === "replace") {
+								const nextUrl = new URL(update.url, window.location.origin);
+								const currentPerspective = new URLSearchParams(
+									window.location.search,
+								).get("sanity-preview-perspective");
+								if (
+									currentPerspective &&
+									!nextUrl.searchParams.has("sanity-preview-perspective")
+								) {
+									nextUrl.searchParams.set(
+										"sanity-preview-perspective",
+										currentPerspective,
+									);
+								}
+								if (update.type === "replace") {
+									window.location.replace(nextUrl.toString());
+								} else {
+									window.location.assign(nextUrl.toString());
+								}
+							} else if (update.type === "pop") {
+								window.history.back();
+							}
+						},
+					},
+					onPerspectiveChange: (perspective) => {
+						const serialized = Array.isArray(perspective)
+							? perspective.join(",")
+							: String(perspective);
+						const nextUrl = new URL(window.location.href);
+						if (
+							nextUrl.searchParams.get("sanity-preview-perspective") !==
+							serialized
+						) {
+							nextUrl.searchParams.set(
+								"sanity-preview-perspective",
+								serialized,
+							);
+							window.location.replace(nextUrl.toString());
+						}
+					},
 					refresh: (payload) => {
 						if (payload.source === "mutation" || payload.source === "manual") {
 							window.location.reload();

apps/site/tests/tier1-features.test.mjs

@@ -1006,6 +1006,29 @@ describe("Tier 1 - Feature Coverage", () => {
 			});
 			assert.equal(resDisablePostJson.headers.get("Location"), "/");
 		});
+
+		it("6.9 BaseLayout configures @sanity/visual-editing-standalone with history adapter and onPerspectiveChange", () => {
+			const baseLayoutSrc = fs.readFileSync(
+				path.resolve(SRC_DIR, "layouts/BaseLayout.astro"),
+				"utf-8",
+			);
+			assert.ok(
+				baseLayoutSrc.includes("@sanity/visual-editing-standalone/styles.css"),
+				"BaseLayout must import visual editing styles",
+			);
+			assert.ok(
+				baseLayoutSrc.includes("history:"),
+				"enableVisualEditing must configure history adapter for Presentation iframe navigation",
+			);
+			assert.ok(
+				baseLayoutSrc.includes("window.location.replace(nextUrl.toString())"),
+				"history.update must perform full MPA navigation on replace updates from Sanity Presentation",
+			);
+			assert.ok(
+				baseLayoutSrc.includes("onPerspectiveChange:"),
+				"enableVisualEditing must handle perspective changes from Sanity Presentation",
+			);
+		});
 	});
 
 	// ── 7. Agent Readiness & Autonomous Discovery Endpoints ───────────────