Skip to content
amn Docs

Instructions de Test — Sanity Visual Editing (Presentation Tool + Click-to-edit)

Objectif

Section titled “Objectif”

Valider que la prévisualisation visuelle, l’overlay “click-to-edit”, et le rechargement en temps réel fonctionnent entre Sanity Studio et l’application Web Astro.

1. Prérequis et Lancement des Services

Section titled “1. Prérequis et Lancement des Services”

Dans deux terminaux séparés, lancez les services de développement avec l’outil task :

Terminal window
# Terminal 1 : Frontend Astro (port 4321)
task dev


# Terminal 2 : Sanity Studio (port 3333)
task dev:studio

2. Procédure de Test Manuel

Section titled “2. Procédure de Test Manuel”

Étape 1 : Accès au Presentation Tool

Section titled “Étape 1 : Accès au Presentation Tool”
  1. Ouvrez votre navigateur sur http://localhost:3333 (Studio Sanity).
  2. Dans la barre de navigation supérieure du Studio, cliquez sur l’onglet Presentation.

Étape 2 : Vérification du mode Draft & Overlays Click-to-edit

Section titled “Étape 2 : Vérification du mode Draft & Overlays Click-to-edit”
  1. Vérifiez que l’iframe charge l’application Astro (http://localhost:4321/api/draft-mode/enable?...).
  2. Observez l’interrupteur Edit en haut à gauche de la présentation : il doit s’activer (indicateur actif).
  3. Observez le panneau latéral droit “Documents on this page” :
    • Il doit lister la page d’accueil ou les documents associés à la route affichée (ex: document Page).
  4. Déplacez le curseur sur les titres ou textes de la page d’accueil dans l’iframe.
  5. Résultat attendu : Des cadres/surbrillances d’édition apparaissent au survol de la souris.

Étape 3 : Test du Click-to-edit

Section titled “Étape 3 : Test du Click-to-edit”
  1. Cliquez sur le titre principal (ex: “Documentation AMN”).
  2. Résultat attendu : Le panneau latéral ou l’éditeur Sanity s’ouvre automatiquement sur le champ exact du document Sanity correspondant.
  3. Modifiez la valeur d’un champ texte dans le Studio.
  4. Résultat attendu : Le contenu mis à jour se reflète instantanément dans la fenêtre d’aperçu de la Presentation Tool.

3. Validation de la Qualité et du Build

Section titled “3. Validation de la Qualité et du Build”

Exécutez la vérification complète des types et du linting avec task :

Terminal window
task check

Construisez le projet pour vérifier qu’aucune erreur de build ne survient :

Terminal window
task build:all

4. Troubleshooting Connu

Section titled “4. Troubleshooting Connu”

Bug : [vite]: Rolldown failed to resolve import "@sanity/preview-url-secret"

Section titled “Bug : [vite]: Rolldown failed to resolve import "@sanity/preview-url-secret"”

Symptôme : task build échoue avec :

[vite]: Rolldown failed to resolve import "@sanity/preview-url-secret" from "...enable.ts"

Cause : Le symlink pnpm pour @sanity/preview-url-secret dans apps/web/node_modules/@sanity/ est cassé. Il pointe vers @sanity+preview-url-secret@4.1.5/ (sans suffixe peer-dep) alors que le store pnpm contient @sanity+preview-url-secret@4.1.5_@sanity+client@8.6.1/.

Correction :

Terminal window
rm apps/web/node_modules/@sanity/preview-url-secret
ln -s ../../../../node_modules/.pnpm/@sanity+preview-url-secret@4.1.5_@sanity+client@8.6.1/node_modules/@sanity/preview-url-secret \
  apps/web/node_modules/@sanity/preview-url-secret

Le pnpm-lock.yaml a été corrigé (version 4.1.5(@sanity/client@8.6.1)) pour éviter ce bug sur un fresh install.

Bug : Invalid secret sur /api/draft-mode/enable

Section titled “Bug : Invalid secret sur /api/draft-mode/enable”

Symptôme : L’URL générée par le Studio retourne 401 Invalid secret.

Cause : @sanity/preview-url-secret valide un secret stocké dans Sanity (un document _type: 'sanity.previewUrlSecret'), pas dans les variables d’environnement. Ce secret est créé automatiquement par le Studio lors du premier accès au Presentation Tool.

Diagnostic : Vérifier que SANITY_API_READ_TOKEN est défini dans .env et que le token a les permissions de lecture (viewer minimum) sur le dataset.