switch to js visual editor

Author: codercatdev

apps/web/package.json

@@ -16,6 +16,7 @@
     "@sanity/client": "^7.17.0",
     "@sanity/image-url": "^2.0.3",
     "@sanity/preview-url-secret": "^4.0.3",
+    "@sanity/visual-editing": "^5.3.0",
     "@tailwindcss/vite": "^4.2.1",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",

apps/web/src/layouts/BaseLayout.astro

@@ -3,7 +3,6 @@ import "../styles/global.css";
 import ThemeScript from "../components/ThemeScript.astro";
 import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
-import { VisualEditing } from "@sanity/astro/visual-editing";
 import SocialMeta from "../components/SocialMeta.astro";
 
 interface Props {
@@ -63,6 +62,10 @@ const visualEditingEnabled =
 
     <Footer />
 
-    <VisualEditing enabled={visualEditingEnabled} />
+    {visualEditingEnabled && (
+      <script>
+        import("../scripts/visual-editing").then((m) => m.run());
+      </script>
+    )}
   </body>
 </html>

apps/web/src/scripts/visual-editing.ts

@@ -0,0 +1,38 @@
+/**
+ * Sanity Visual Editing (Plain JS).
+ * Loaded only when visual editing is enabled; integrates with History API for Presentation tool.
+ */
+import { enableVisualEditing } from "@sanity/visual-editing";
+
+export function run(): () => void {
+  return enableVisualEditing({
+    history: {
+      subscribe: (navigate) => {
+        const handler = (_event: PopStateEvent) => {
+          navigate({
+            type: "push",
+            url: `${location.pathname}${location.search}`,
+          });
+        };
+        window.addEventListener("popstate", handler);
+        return () => window.removeEventListener("popstate", handler);
+      },
+      update: (update) => {
+        switch (update.type) {
+          case "push":
+            window.history.pushState(null, "", update.url);
+            break;
+          case "pop":
+            window.history.back();
+            break;
+          case "replace":
+            window.history.replaceState(null, "", update.url);
+            break;
+          default:
+            throw new Error(`Unknown update type: ${(update as { type: string }).type}`);
+        }
+      },
+    },
+    zIndex: 1000,
+  });
+}