Налаштування Sanity Visual Editing / Presentation

Налаштування Sanity Visual Editing / Presentation

Visual Editing — режим редагування контенту прямо на сайті. Редактор бачить сайт в iframe, клікає на елемент, відкривається поле в Sanity Studio. Sanity Presentation Tool — офіційний плагін для цього. Працює через Content Source Maps — Sanity додає до кожного фрагмента тексту метаді про його джерело.

Установка

npm install @sanity/presentation  # у Sanity Studio
npm install @sanity/visual-editing  # у Next.js

Налаштування Studio

// sanity.config.ts
import { presentationTool } from '@sanity/presentation'

export default defineConfig({
  plugins: [
    structureTool(),
    presentationTool({
      previewUrl: {
        previewMode: {
          enable: '/api/draft-mode/enable',
          disable: '/api/draft-mode/disable',
        },
        origin: process.env.SANITY_STUDIO_PREVIEW_URL || 'http://localhost:3000',
      },
    }),
  ],
})

Next.js: Draft Mode та Visual Editing

// app/api/draft-mode/enable/route.ts
import { validatePreviewUrl } from '@sanity/preview-url-secret'
import { client } from '@/lib/sanity/client'
import { draftMode } from 'next/headers'

export async function GET(req: Request) {
  const { isValid, redirectTo = '/' } = await validatePreviewUrl(
    client.withConfig({ token: process.env.SANITY_API_TOKEN! }),
    req.url
  )

  if (!isValid) {
    return new Response('Invalid secret', { status: 401 })
  }

  draftMode().enable()
  redirect(redirectTo)
}

// components/VisualEditingProvider.tsx
'use client'
import { enableVisualEditing } from '@sanity/visual-editing/next-pages-router'
import { useEffect } from 'react'

export function VisualEditingProvider() {
  useEffect(() => {
    return enableVisualEditing()
  }, [])

  return null
}

Content Source Maps

Content Source Maps дозволяють Sanity пов'язати текст на сторінці з конкретним полем в Studio:

const client = createClient({
  projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID!,
  dataset: 'production',
  apiVersion: '2024-01-01',
  useCdn: false,
  stega: {
    enabled: true,  // увімкнути Content Source Maps
    studioUrl: process.env.NEXT_PUBLIC_SANITY_STUDIO_URL!,
  },
})

Терміни

Налаштування Visual Editing з Presentation Tool та Draft Mode — 1–2 дні.