partially working

Author: alexanbj

apps/docs/app/lib/preview-middleware.ts

@@ -1,9 +1,9 @@
 import { createMiddleware } from '@tanstack/start';
 import { getCookie } from 'vinxi/http';
 
-export const previewMiddleware = createMiddleware().server(async ({ next }) => {
+export const previewMiddleware = createMiddleware().server(({ next }) => {
   const isPreview = getCookie('__sanity_preview') === 'true';
-  console.log({ isPreview });
+  console.log('middleware', { isPreview });
   return next({
     context: {
       previewMode: isPreview,

apps/docs/app/lib/visual-editing.ts

@@ -0,0 +1,57 @@
+import {
+  type HistoryAdapterNavigate,
+  enableVisualEditing,
+} from '@sanity/visual-editing';
+import { useNavigate, useRouter } from '@tanstack/react-router';
+import { useEffect, useState } from 'react';
+
+export function VisualEditing() {
+  const router = useRouter();
+  const [navigate, setNavigate] = useState<
+    HistoryAdapterNavigate | undefined
+  >();
+
+  useEffect(() => {
+    const disable = enableVisualEditing({
+      history: {
+        subscribe: (_navigate) => {
+          console.log('subscribe');
+          setNavigate(() => {
+            _navigate({ type: 'replace', url: router.state.location.href });
+            return _navigate;
+          });
+          return () => setNavigate(undefined);
+        },
+        update: (update) => {
+          console.log('update', update);
+          switch (update.type) {
+            case 'push':
+              router.history.push(update.url);
+              break;
+            case 'replace':
+              router.history.replace(update.url);
+              break;
+            case 'pop':
+              router.history.back();
+              break;
+          }
+        },
+      },
+    });
+
+    return disable;
+  }, [router]);
+
+  useEffect(() => {
+    if (navigate) {
+      const unsubscribe = router.subscribe('onResolved', (evt) => {
+        console.log(evt);
+        navigate({ type: 'push', url: evt.toLocation.href });
+      });
+
+      return unsubscribe;
+    }
+  }, [router, navigate]);
+
+  return null;
+}

apps/docs/app/lib/visual-editing.tsx

@@ -1,6 +1,8 @@
+import { previewMiddleware } from '@/lib/preview-middleware';
 import { sanityFetch } from '@/lib/sanity';
 import { VisualEditing } from '@/lib/visual-editing';
 import appCss from '@/styles/app.css?url';
+import { DisablePreviewMode } from '@/ui/disable-preview-mode';
 import { Footer } from '@/ui/footer';
 import { MainNav } from '@/ui/main-nav';
 import { GrunnmurenProvider } from '@obosbbl/grunnmuren-react';
@@ -12,13 +14,20 @@ import {
   createFileRoute,
   useRouter,
 } from '@tanstack/react-router';
+import { createServerFn } from '@tanstack/start';
 import { defineQuery } from 'groq';
 
 const COMPONENTS_NAVIGATION_QUERY = defineQuery(
   // make sure the slug is always a string so we don't have add fallback value in code just to make TypeScript happy
   `*[_type == "component"]{ _id, name, 'slug': coalesce(slug.current, '')} | order(name asc)`,
 );
 
+const checkIsPreview = createServerFn({ method: 'GET' })
+  .middleware([previewMiddleware])
+  .handler(({ context }) => {
+    return context.previewMode;
+  });
+
 // This is the shared layout for all the Grunnmuren docs pages that are "public", ie not the Sanity studio
 export const Route = createFileRoute('/_docs')({
   component: RootLayout,
@@ -30,11 +39,23 @@ export const Route = createFileRoute('/_docs')({
       },
     ],
   }),
-  loader: () => sanityFetch({ query: COMPONENTS_NAVIGATION_QUERY }),
+  beforeLoad: async () => {
+    const isPreview = await checkIsPreview();
+    return { isPreview };
+  },
+  loader: async ({ context }) => {
+    return {
+      componentsNavItems: (
+        await sanityFetch({ query: COMPONENTS_NAVIGATION_QUERY })
+      ).data,
+      isPreview: context.isPreview,
+    };
+  },
 });
 
 function RootLayout() {
   const router = useRouter();
+  const { isPreview } = Route.useLoaderData();
 
   return (
     <>
@@ -46,6 +67,12 @@ function RootLayout() {
         navigate={(to, options) => router.navigate({ to, ...options })}
         useHref={(to) => router.buildLocation({ to }).href}
       >
+        {isPreview && (
+          <>
+            <VisualEditing />
+            <DisablePreviewMode />
+          </>
+        )}
         <div className="grid min-h-screen lg:flex">
           <div className="flex grow flex-col px-6">
             <main className="grow">
@@ -57,7 +84,6 @@ function RootLayout() {
         </div>
       </GrunnmurenProvider>
       <ScrollRestoration />
-      <VisualEditing />
     </>
   );
 }

apps/docs/app/routes/_docs.tsx

@@ -13,7 +13,8 @@ const COMPONENT_QUERY = defineQuery(
 
 export const Route = createFileRoute('/_docs/komponenter/$slug')({
   component: Page,
-  loader: async ({ params }) => {
+  loader: async ({ params, context }) => {
+    console.log('context in component route', context);
     const res = await sanityFetch({
       data: {
         query: COMPONENT_QUERY,

apps/docs/app/routes/_docs/komponenter/$slug.tsx

@@ -0,0 +1,10 @@
+export function DisablePreviewMode() {
+  return (
+    <a
+      href="/api/preview-mode/disable"
+      className="block bg-blue py-2 text-center text-white"
+    >
+      Disable preview mode
+    </a>
+  );
+}

apps/docs/app/ui/disable-preview-mode.tsx

@@ -66,9 +66,9 @@ const mainNavItems = [
 
 export const MainNav = () => {
   const routeApi = getRouteApi('/_docs');
-  const { data } = routeApi.useLoaderData();
+  const { componentsNavItems } = routeApi.useLoaderData();
 
-  const componentsNavLinks = data.map((component) => ({
+  const componentsNavLinks = componentsNavItems.map((component) => ({
     to: `/komponenter/${component.slug}`,
     title: component.name as string,
   }));