feat: support visual editing

nuxt-modules · Feb 2, 2024 · f45d1fe · f45d1fe
1 parent 208655e
commit f45d1fe
Show file tree

Hide file tree

Showing 19 changed files with 894 additions and 93 deletions.
diff --git a/.nuxtrc b/.nuxtrc
@@ -0,0 +1,4 @@
+# sanity.apiVersion=2021-03-25
+# sanity.stega=true
+# sanity.visualEditing.token=token
+# sanity.visualEditing.studioUrl="http://localhost:3333"
diff --git a/index.d.ts b/index.d.ts
@@ -1,7 +1,60 @@
-import { SanityHelper } from './src/runtime/composables'
+import type { ClientPerspective, StegaConfig } from '@sanity/client'
+import type { SanityHelper } from '#sanity-composables'
+
+type nullish = null | undefined | void
 
 declare module '#app' {
   interface NuxtApp {
     _sanity?: Record<string, SanityHelper>
   }
 }
+
+declare module 'nuxt/schema' {
+  interface RuntimeConfig {
+    sanity: {
+      visualEditing:
+        | {
+            draftMode:
+              | false
+              | {
+                  enable: string
+                  disable: string
+                }
+            mode: 'global' | 'component'
+            studioUrl: string
+            draftModeId: string
+            token: string
+          }
+        | undefined
+    }
+  }
+
+  interface PublicRuntimeConfig {
+    sanity: {
+      additionalClients: Record<string, any>
+      apiVersion: string
+      dataset: string
+      disableSmartCdn: boolean
+      perspective: ClientPerspective
+      projectId: string
+      stega: StegaConfig
+      token: string
+      useCdn: boolean
+      visualEditing:
+        | {
+            draftMode:
+              | false
+              | {
+                  enable: string
+                  disable: string
+                }
+            mode: 'global' | 'component'
+            studioUrl: string
+          }
+        | nullish
+    }
+    withCredentials: boolean
+  }
+}
+
+export {}
diff --git a/package.json b/package.json
@@ -49,6 +49,9 @@
   "dependencies": {
     "@nuxt/kit": "^3.9.0",
     "@portabletext/types": "^2.0.8",
+    "@sanity/core-loader": "^1.3.10",
+    "@sanity/overlays": "^2.3.9",
+    "@sanity/preview-url-secret": "^1.4.1",
     "chalk": "^5.3.0",
     "defu": "^6.1.3",
     "knitwork": "^1.0.0",
@@ -61,7 +64,9 @@
     "@nuxt/module-builder": "0.5.5",
     "@nuxt/schema": "3.9.0",
     "@nuxt/test-utils": "3.9.0",
-    "@sanity/client": "6.11.2",
+    "@sanity/client": "6.12.3",
+    "@sanity/core-loader": "^1.3.3",
+    "@sanity/overlays": "^2.3.1",
     "@vitest/coverage-v8": "1.1.1",
     "@vue/test-utils": "2.4.3",
     "bumpp": "9.2.1",

diff --git a/playground/cms/sanity.config.ts b/playground/cms/sanity.config.ts
@@ -1,7 +1,9 @@
-import { createConfig } from 'sanity'
 import { deskTool } from 'sanity/desk'
+import { presentationTool } from 'sanity/presentation'
+import { createConfig } from 'sanity'
 import { visionTool } from '@sanity/vision'
 import { schemaTypes } from './schemas'
+import { debugSecrets } from '@sanity/preview-url-secret/sanity-plugin-debug-secrets'
 
 export default createConfig({
   name: 'default',
@@ -12,6 +14,16 @@ export default createConfig({
   plugins: [
     deskTool(),
     visionTool(),
+    presentationTool({
+      previewUrl: {
+        origin: 'http://localhost:3000',
+        draftMode: {
+          enable: '/draft/enable',
+          disable: '/draft/disable',
+        },
+      },
+    }),
+    debugSecrets(),
   ],
 
   schema: {

diff --git a/playground/nuxt.config.js b/playground/nuxt.config.js
@@ -9,8 +9,15 @@ export default defineNuxtConfig({
     globalHelper: true,
     projectId: 'j1o4tmjp',
     dataset: 'production',
+    apiVersion: '2021-03-25',
     additionalClients: {
       another: {},
     },
+    visualEditing: {
+      stega: true,
+      draftMode: true,
+      token: process.env.NUXT_SANITY_VISUAL_EDITING_TOKEN,
+      studioUrl: 'http://localhost:3333',
+    },
   },
 })
diff --git a/playground/pages/index.vue b/playground/pages/index.vue
@@ -1,27 +1,30 @@
 <template>
-  <div
-    class="bg-gray-300 grid grid-flow-col grid-rows-3 p-8 overflow-x-hidden min-h-screen"
-  >
-    <h2>Project ID: {{ $sanity.config.projectId }}</h2>
-    <NuxtLink
-      v-for="{ title, poster, slug } in movies"
-      :key="title"
-      :to="`/movie/${slug}`"
-      class="flex w-64 h-48 relative justify-start"
+  <div>
+    <div
+      class="bg-gray-300 grid grid-flow-col grid-rows-3 p-8 overflow-x-hidden min-h-screen"
     >
-      <div
-        class="py-2 px-4 left-0 bottom-0 mb-4 flex-grow absolute bg-gray-100 rounded shadow-md font-semibold text-gray-800"
+      <h2>Project ID: {{ $sanity.config.projectId }}</h2>
+      <NuxtLink
+        v-for="({ title, poster, slug }, i) in movies"
+        :key="title"
+        :to="`/movie/${slug}`"
+        class="flex w-64 h-48 relative justify-start"
       >
-        {{ title }}
-      </div>
+        <div
+          class="py-2 px-4 left-0 bottom-0 mb-4 flex-grow absolute bg-gray-100 rounded shadow-md font-semibold text-gray-800"
+          :data-sanity="encodeDataAttribute([i, 'title'])"
+        >
+          {{ title }}
+        </div>
 
-      <SanityImage
-        class="object-contain w-48"
-        :asset-id="poster"
-        w="128"
-        auto="format"
-      />
-    </NuxtLink>
+        <SanityImage
+          class="object-contain w-48"
+          :asset-id="poster"
+          w="128"
+          auto="format"
+        />
+      </NuxtLink>
+    </div>
   </div>
 </template>
 
@@ -38,7 +41,7 @@ interface QueryResult {
   slug: string
 }
 
-const sanity = useSanity()
-
-const { data: movies } = await useAsyncData<QueryResult[]>('movies', () => sanity.fetch(query))
+const { data: movies, encodeDataAttribute } = await useSanityQuery<
+  QueryResult[]
+>(query)
 </script>
diff --git a/playground/pages/movie/[slug].vue b/playground/pages/movie/[slug].vue
@@ -1,7 +1,9 @@
 <template>
   <div class="p-4">
     <template v-if="details">
-      <p><strong>Title</strong>: {{ details.title }}</p>
+      <p :data-sanity="encodeDataAttribute(['title'])">
+        <strong>Title</strong>: {{ details.title }}
+      </p>
       <p>
         <strong>Release date</strong>:
         {{
@@ -24,7 +26,9 @@
         project-id="j1o4tmjp"
         asset-id="image-e22a88d23751a84df81f03ef287ae85fc992fe12-780x1170-jpg"
       />
-      <SanityContent :blocks="details.overview" />
+      <div :data-sanity="encodeDataAttribute(['overview'])">
+        <SanityContent :blocks="details.overview" />
+      </div>
     </template>
     <template v-else>
       Loading ...
@@ -56,7 +60,8 @@ interface QueryResult {
 }
 
 const route = useRoute()
-const { data: details } = await useSanityQuery<QueryResult>(query, {
-  slug: route.params.slug,
-})
+const { data: details, encodeDataAttribute } =
+  await useSanityQuery<QueryResult>(query, {
+    slug: route.params.slug,
+  })
 </script>