Skip to content
AMN Docs

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

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

Documentation technique

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

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

É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-edit1/2

  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).

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

  1. Déplacez le curseur sur les titres ou textes de la page d’accueil dans l’iframe.
  2. Résultat attendu : Des cadres/surbrillances d’édition apparaissent au survol de la souris.

É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

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

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

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/.

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

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

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.

Switch to normal mode

Contents

Built with StarlightPowered by Cloudflare