@prismicio/svelte 3.0.0-pr.71.61897e8 → 3.0.0-pr.71.dde7d8b

package/dist/kit/PrismicPreview.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import { beforeNavigate, goto, refreshAll } from "$app/navigation"
+	import { resolve } from "$app/paths"
+	import { page } from "$app/state"
 	import { getToolbarSrc } from "@prismicio/client"
 	import { onMount } from "svelte"
 
@@ -19,13 +21,26 @@
 		 * Only set this value if the route parameter's name differs from the parameter's value.
 		 */
 		routePrefixName?: string
+
+		/**
+		 * The path of your preview route, without `paths.base`. The Prismic Toolbar uses it to create
+		 * share links.
+		 *
+		 * @defaultValue `"/api/preview"`
+		 */
+		previewURL?: string
 	}
 
-	const { repositoryName, routePrefix = "preview", routePrefixName = routePrefix }: Props = $props()
+	const {
+		repositoryName,
+		routePrefix = "preview",
+		routePrefixName = routePrefix,
+		previewURL = "/api/preview",
+	}: Props = $props()
 
-	// `v=5` opts into the toolbar's modern flow.
-	// TODO: Remove `&v=5` once `getToolbarSrc()` from `@prismicio/client` adds it.
-	const toolbarSrc = $derived(`${getToolbarSrc(repositoryName)}&v=5`)
+	const toolbarSrc = $derived(getToolbarSrc(repositoryName, { version: 5 }))
+	// `resolve()` can return a path relative to the current page, which changes on navigation.
+	const previewPath = $derived(new URL(resolve(previewURL, {}), page.url).pathname)
 
 	/** Set to `true` when the next `beforeNavigate()` call should not prefix the route. */
 	let endingPreview = $state(false)
@@ -91,5 +106,5 @@
 </script>
 
 <svelte:head>
-	<script defer src={toolbarSrc}></script>
+	<script defer src={toolbarSrc} data-preview-url={previewPath}></script>
 </svelte:head>

package/dist/kit/PrismicPreview.svelte.d.ts

@@ -12,6 +12,13 @@ type Props = {
      * Only set this value if the route parameter's name differs from the parameter's value.
      */
     routePrefixName?: string;
+    /**
+     * The path of your preview route, without `paths.base`. The Prismic Toolbar uses it to create
+     * share links.
+     *
+     * @defaultValue `"/api/preview"`
+     */
+    previewURL?: string;
 };
 declare const PrismicPreview: import("svelte").Component<Props, {}, "">;
 type PrismicPreview = ReturnType<typeof PrismicPreview>;

package/dist/kit/redirectToPreviewURL.js

@@ -1,4 +1,6 @@
+import { resolve } from "$app/paths";
 import * as prismic from "@prismicio/client";
+import { getSafePath } from "../lib/getSafePath";
 /**
  * Redirects a visitor to the URL of a previewed Prismic document from within a SvelteKit `+server`
  * file.
@@ -21,11 +23,14 @@ export const redirectToPreviewURL = async (config) => {
     const previewToken = new URL(config.request.url).searchParams.get("token") ?? undefined;
     const documentID = new URL(config.request.url).searchParams.get("documentId") ?? undefined;
     const routePrefix = config.routePrefix ?? "preview";
-    const previewURL = await config.client.resolvePreviewURL({
-        previewToken,
-        documentID,
-        defaultURL: config.defaultURL || "/",
-    });
+    const location = getSharedPath(config.request.url, routePrefix) ??
+        "/" +
+            routePrefix +
+            (await config.client.resolvePreviewURL({
+                previewToken,
+                documentID,
+                defaultURL: config.defaultURL || "/",
+            }));
     // Prevent a flash of non-preview content by setting the preview token
     // on the initial page load.
     if (previewToken) {
@@ -37,7 +42,7 @@ export const redirectToPreviewURL = async (config) => {
     // The toolbar's `v=5` flow follows the preview session with this cookie.
     const session = new URL(config.request.url).searchParams.get("session");
     if (session) {
-        config.cookies.set("io.prismic.previewSession", session, {
+        config.cookies.set(prismic.cookie.previewSession, session, {
             path: "/",
             httpOnly: false,
         });
@@ -45,7 +50,22 @@ export const redirectToPreviewURL = async (config) => {
     return new Response(undefined, {
         status: 307,
         headers: {
-            Location: "/" + routePrefix + previewURL,
+            Location: location,
         },
     });
 };
+/**
+ * Returns the `path` param of toolbar share links inside the preview route prefix, or `undefined`
+ * if it is missing or not a path on this website.
+ */
+const getSharedPath = (requestURL, routePrefix) => {
+    const path = getSafePath(new URL(requestURL).searchParams.get("path"));
+    // `path` comes from the browser, so it already includes `paths.base`. `resolve()` returns `base`
+    // either absolute or relative to the request.
+    const base = new URL(resolve("/", {}), requestURL).pathname.slice(0, -1);
+    if (!path?.startsWith(`${base}/`)) {
+        return;
+    }
+    const pathname = path.slice(base.length);
+    return pathname.split(/[/?#]/)[1] === routePrefix ? path : `${base}/${routePrefix}${pathname}`;
+};

package/dist/lib/getSafePath.d.ts

@@ -0,0 +1,2 @@
+/** Returns `path` if it stays on the current origin, like `/blog?page=2#top`. */
+export declare function getSafePath(path: string | null | undefined): string | undefined;

package/dist/lib/getSafePath.js

@@ -0,0 +1,11 @@
+/** Returns `path` if it stays on the current origin, like `/blog?page=2#top`. */
+export function getSafePath(path) {
+    if (!path?.startsWith("/") || path.startsWith("//") || path.startsWith("/\\")) {
+        return;
+    }
+    const origin = "https://placeholder.invalid";
+    const url = new URL(path, origin);
+    if (url.origin === origin) {
+        return url.href.slice(origin.length);
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@prismicio/svelte",
-	"version": "3.0.0-pr.71.61897e8",
+	"version": "3.0.0-pr.71.dde7d8b",
 	"description": "Svelte components to present Prismic content.",
 	"keywords": [
 		"prismic",
@@ -62,7 +62,7 @@
 		"esm-env": "^1.2.2"
 	},
 	"devDependencies": {
-		"@prismicio/client": "^7.22.3",
+		"@prismicio/client": "7.22.3-pr.477.9eb2102",
 		"@prismicio/mock": "^0.7.2",
 		"@sveltejs/kit": "^3.0.1",
 		"@sveltejs/package": "^3.0.1",
@@ -72,15 +72,15 @@
 		"@vitest/coverage-v8": "^5.0.5",
 		"globals": "^17.13.0",
 		"happy-dom": "^21.0.3",
-		"oxfmt": "^0.73.0",
-		"oxlint": "^1.88.0",
+		"oxfmt": "^0.74.0",
+		"oxlint": "^1.89.0",
 		"standard-version": "^9.5.0",
 		"svelte": "^5.57.2",
 		"typescript": "^6.0.3",
 		"vitest": "^5.0.5"
 	},
 	"peerDependencies": {
-		"@prismicio/client": ">=7",
+		"@prismicio/client": "^7.23.0",
 		"@sveltejs/kit": "^3.0.0",
 		"svelte": "^5.16.0"
 	},
@@ -89,6 +89,9 @@
 			"optional": true
 		}
 	},
+	"overrides": {
+		"@prismicio/client": "$@prismicio/client"
+	},
 	"engines": {
 		"node": ">=22"
 	}

package/src/kit/PrismicPreview.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import { beforeNavigate, goto, refreshAll } from "$app/navigation"
+	import { resolve } from "$app/paths"
+	import { page } from "$app/state"
 	import { getToolbarSrc } from "@prismicio/client"
 	import { onMount } from "svelte"
 
@@ -19,13 +21,26 @@
 		 * Only set this value if the route parameter's name differs from the parameter's value.
 		 */
 		routePrefixName?: string
+
+		/**
+		 * The path of your preview route, without `paths.base`. The Prismic Toolbar uses it to create
+		 * share links.
+		 *
+		 * @defaultValue `"/api/preview"`
+		 */
+		previewURL?: string
 	}
 
-	const { repositoryName, routePrefix = "preview", routePrefixName = routePrefix }: Props = $props()
+	const {
+		repositoryName,
+		routePrefix = "preview",
+		routePrefixName = routePrefix,
+		previewURL = "/api/preview",
+	}: Props = $props()
 
-	// `v=5` opts into the toolbar's modern flow.
-	// TODO: Remove `&v=5` once `getToolbarSrc()` from `@prismicio/client` adds it.
-	const toolbarSrc = $derived(`${getToolbarSrc(repositoryName)}&v=5`)
+	const toolbarSrc = $derived(getToolbarSrc(repositoryName, { version: 5 }))
+	// `resolve()` can return a path relative to the current page, which changes on navigation.
+	const previewPath = $derived(new URL(resolve(previewURL, {}), page.url).pathname)
 
 	/** Set to `true` when the next `beforeNavigate()` call should not prefix the route. */
 	let endingPreview = $state(false)
@@ -91,5 +106,5 @@
 </script>
 
 <svelte:head>
-	<script defer src={toolbarSrc}></script>
+	<script defer src={toolbarSrc} data-preview-url={previewPath}></script>
 </svelte:head>

package/src/kit/redirectToPreviewURL.ts

@@ -1,6 +1,9 @@
+import { resolve } from "$app/paths"
 import * as prismic from "@prismicio/client"
 import type { Cookies } from "@sveltejs/kit"
 
+import { getSafePath } from "../lib/getSafePath"
+
 export type RedirectToPreviewURLConfig = {
 	/** The Prismic client configured for the preview session's repository. */
 	// `Pick` is used to use the smallest possible subset of
@@ -54,11 +57,15 @@ export const redirectToPreviewURL = async (
 	const documentID = new URL(config.request.url).searchParams.get("documentId") ?? undefined
 	const routePrefix = config.routePrefix ?? "preview"
 
-	const previewURL = await config.client.resolvePreviewURL({
-		previewToken,
-		documentID,
-		defaultURL: config.defaultURL || "/",
-	})
+	const location =
+		getSharedPath(config.request.url, routePrefix) ??
+		"/" +
+			routePrefix +
+			(await config.client.resolvePreviewURL({
+				previewToken,
+				documentID,
+				defaultURL: config.defaultURL || "/",
+			}))
 
 	// Prevent a flash of non-preview content by setting the preview token
 	// on the initial page load.
@@ -72,7 +79,7 @@ export const redirectToPreviewURL = async (
 	// The toolbar's `v=5` flow follows the preview session with this cookie.
 	const session = new URL(config.request.url).searchParams.get("session")
 	if (session) {
-		config.cookies.set("io.prismic.previewSession", session, {
+		config.cookies.set(prismic.cookie.previewSession, session, {
 			path: "/",
 			httpOnly: false,
 		})
@@ -81,7 +88,25 @@ export const redirectToPreviewURL = async (
 	return new Response(undefined, {
 		status: 307,
 		headers: {
-			Location: "/" + routePrefix + previewURL,
+			Location: location,
 		},
 	})
 }
+
+/**
+ * Returns the `path` param of toolbar share links inside the preview route prefix, or `undefined`
+ * if it is missing or not a path on this website.
+ */
+const getSharedPath = (requestURL: string, routePrefix: string): string | undefined => {
+	const path = getSafePath(new URL(requestURL).searchParams.get("path"))
+	// `path` comes from the browser, so it already includes `paths.base`. `resolve()` returns `base`
+	// either absolute or relative to the request.
+	const base = new URL(resolve("/", {}), requestURL).pathname.slice(0, -1)
+	if (!path?.startsWith(`${base}/`)) {
+		return
+	}
+
+	const pathname = path.slice(base.length)
+
+	return pathname.split(/[/?#]/)[1] === routePrefix ? path : `${base}/${routePrefix}${pathname}`
+}

package/src/lib/getSafePath.ts

@@ -0,0 +1,12 @@
+/** Returns `path` if it stays on the current origin, like `/blog?page=2#top`. */
+export function getSafePath(path: string | null | undefined): string | undefined {
+	if (!path?.startsWith("/") || path.startsWith("//") || path.startsWith("/\\")) {
+		return
+	}
+
+	const origin = "https://placeholder.invalid"
+	const url = new URL(path, origin)
+	if (url.origin === origin) {
+		return url.href.slice(origin.length)
+	}
+}