ℹ️ Informations générales

• L'éditeur enrichi est ajouté dans les "critères" et "annoter l'audit" et repris dans le rapport en mode "read only"
• Pour "annoter l'audit" garder le composant d'ajout de fichier

🎯 MVP

Mise en forme du texte

• WYSIWYG
• Permettre les mises en formes du texte suivant :
  • Bold
  • Italic
  • Barré
  • Liste à puce
  • Liste numérotée
  • Titres (2 niveaux)
  • Citation de texte
  • Citation de code
  • Bloc de code
  • Lien
• Ajouter une barre d'action pour la mise en forme du texte
  • Pour les boutons de titres, utiliser des boutons avec un rendu et une sémantique adaptée pour avoir une hiérarchie des titres cohérente dans le rapport et l'audit
  • 3 états pour un bouton : “défaut” / “hover” (identique pour un hover sur l’état “défaut” et “cliqué”) / “cliqué”
  • Lorsque l’usager sélectionne une saisie mise en forme, les boutons correspondant à la mise en forme passent en état “cliqué”

Ajout d'image

• Image dans la zone de saisie
• Drag and drop d'image
  • D'une image en local (ex : enregistrée sur le bureau ou preview type mac). Image uploadé sur notre serveur.
  • D'une data image (ex : URL décrivant l'image). Image uploadé sur notre serveur.
  • ⚠ toujours uploader les images sur notre serveur pour garder une trace du site audité. Éviter les liens rompus.
• Coller d'image
  • D'une image en local (ex : enregistrée sur le bureau)
  • D'une data image (ex : URL décrivant l'image)
• Ajouter une alternative aux ajouts d'image par drag and drop et copier-coller : bouton "insérer une image" dans la barre d'action

Raccourcis clavier

• Prise en compte des raccourcis
• Vérifier que les raccourcis clavier sont "habituels"

Redimensionnement du champ

• Redimensionner automatiquement le champ de saisi en hauteur pour qu’il s’adapte à la longueur du contenu saisi

Message d'erreur (local et serveur)

• Afficher un message personnalisé pour chaque type d'erreurs en utilisant la modale native du navigateur
  • erreur poids
  • erreur format fichier
  • erreur format fichier + poids
  • erreur time out
  • Reprendre les formats et poids des critères et annotation d'audit

Migration

• Pour les audits "terminés" et "en cours", déplacer les images des critères dans le champ de saisie. Positionner ces images en bas du champ
• Réaliser une série de tests sur les audits "terminés" pour s'assurer qu'il n'y aura aucune perte de données

Upload serveur

• Upload au moment de l'import d'image dans l'éditeur
• Delete server au moment de la suppression de l'image dans l'éditeur

Autre

• Mettre le label de l'éditeur (accordéon) "Erreur et recommandation" au pluriel

UI

• Personnaliser l'éditeur pour coller aux champs/zones de texte du DSFR
• Laisser en blanc le fond de l'éditeur dans le rapport
• Mode sombre, vérifier que les couleurs sont OK

:dart V2

UI

• État des images : focus, hover etc...

Accessibilité et lisibilité

• Éditeur accessible à 100% : navigation, actions et couleurs
• Mode preview par défaut + mode MD en option

Ajout d'image

• De multiples images distantes par coller et drop.
• D'images distantes par coller et drop de contenu HTML (parseHTML de tag <img>).
• Permettre d’ajouter un fond sombre pour les images blanches sur fond transparent (ou alors le faire automatiquement ?)

Redimensionnement du champ

• Laisser la possibilité à l’usager de redimensionner le champ manuellement grâce à une poignée située en bas à droite du champ. Si le champ est plus petit que la longueur de la saisie, ajouter un scroll dans le champ

Message d'erreur (local et serveur)

• Utiliser une modale "DSFR"

❓ Questions

• Nécessaire de toujours avoir accès à la barre d'actions ? (Si le champ à une hauteur importante)
• Nécessaire de limiter en hauteur le champ de saisie dans "annoter l'audit" pour toujours garder visible le composant "ajout de fichier" ?
• Permettre tous les formats d'images dans un critère ? Ex : pour drag and drop une icône qui pose un problème sur le site audité
• Pouvoir ajouter une alternative aux images
• Permettre le redimensionnement des images dans le champ de saisie