Momento/docs/story-nextgen-editor.md

Story: Éditeur Next-Gen — Poignée Gutter & Base de Données Inline

Epic: Éditeur de Notes et Saisie Intuitive (Next-Gen) Priority: High Status: ready-for-dev Depends on: US-LIVING-BLOCKS (UniqueID et transclusion), US-STRUCTURED-VIEWS (NotebookSchema et propriétés) Blocks: —

---

Context

L'éditeur de notes actuel de Momento est construit sur rich-text-editor.tsx avec Tiptap/ProseMirror. Bien qu'il supporte des fonctionnalités avancées (Blocs Vivants, Résonance Sémantique), l'interaction utilisateur de saisie reste celle d'un traitement de texte classique (document linéaire à curseur unique).

Pour offrir une expérience de saisie supérieure à celle de Notion (plus performante, plus fluide à l'écriture) tout en conservant les avantages de la manipulation de blocs, nous implémentons une approche hybride :

1. Gutter & Drag Handle Flottant : Au lieu d'avoir un composant React lourd pour chaque paragraphe (comme dans Notion), un unique bouton de poignée de glissement suit le curseur de la souris dans la marge de l'éditeur en ProseMirror pur, éliminant tout décalage à la saisie.
2. Transclusion au Collage : Faciliter la création de Blocs Vivants en interceptant les liens de blocs copiés et en proposant de les coller en tant que transclusion synchrone.
3. Bloc Database Inline : Porter le composant de base de données relationnelle du prototype ModernBlockNoteEditor.tsx pour permettre aux utilisateurs d'insérer des tableaux/fiches interactives avec Rollups dynamiques directement au sein de leurs notes.

---

User Stories

US-1: Poignée de Glissement Gutter Unique (Hover Drag Handle)

En tant que rédacteur, Je veux voir apparaître une poignée de glissement discrète dans la marge gauche du bloc que je survole avec ma souris, Afin de pouvoir réordonner mes blocs par glisser-déposer de manière fluide.

Critères d'Acceptation :

• Étant donné que j'ai une note ouverte dans l'éditeur de Momento
• Quand je survole une ligne de texte (paragraphe, titre, liste, citation, etc.) avec mon curseur de souris
• Alors une poignée de glissement (::drag-handle flottante) apparaît dans le gutter gauche à la hauteur exacte du bloc survolé
• Et le bouton suit mes déplacements de souris d'un bloc à l'autre sans latence et sans dupliquer les nœuds DOM (une seule poignée réutilisée)
• Quand je clique-glisse sur cette poignée
• Alors le bloc ProseMirror entier sous-jacent est sélectionné visuellement et je peux le déplacer vers le haut ou vers le bas, avec un indicateur visuel de la ligne d'insertion
• Et la poignée est masquée sur les terminaux mobiles / écrans tactiles pour éviter d'entraver l'ergonomie.

---

US-2: Menu Action Rapide de Bloc

En tant que créateur de contenu, Je veux pouvoir cliquer sur la poignée de bloc pour ouvrir un menu contextuel d'actions rapides, Afin de manipuler la structure de mes documents sans avoir à utiliser les sélections de texte complexes ou des raccourcis clavier obscurs.

Critères d'Acceptation :

• Étant donné que la poignée de bloc est visible à côté d'un bloc
• Quand je clique sur cette poignée
• Alors un menu contextuel (dropdown à base de glassmorphism fluide) apparaît
• Et il propose les options suivantes :
  • Supprimer -> Efface le bloc ProseMirror ciblé
  • Dupliquer -> Duplique le bloc ProseMirror immédiatement en dessous
  • Transformer en -> Sous-menu pour convertir en : Titre 1, Titre 2, Titre 3, Liste à puces, Liste numérotée, Liste de tâches, Citation, Bloc de code, ou Base de données
  • Copier la référence -> Génère/copie le lien unique du bloc (utilisant son UniqueID Tiptap) dans le presse-papier.

---

US-3: Transclusion intelligente au Collage (Smart Paste)

En tant que chercheur, Je veux pouvoir coller un lien de bloc copié et le transformer instantanément en bloc connecté synchrone, Afin de lier et synchroniser des informations à travers différentes notes sans effort manuel.

Critères d'Acceptation :

• Étant donné que j'ai copié la référence d'un bloc (contenant l'ID de la note source et le blockId unique du paragraphe)
• Quand je colle (Ctrl+V ou Cmd+V) ce lien dans un paragraphe vide d'une autre note
• Alors un petit menu interactif en ligne s'affiche : "Coller en tant que Bloc Connecté (Live)" ou "Coller en tant que texte / lien simple"
• Quand je sélectionne "Bloc Connecté",
• Alors le bloc ProseMirror est remplacé par un nœud de type liveBlock (provenant de notre LiveBlockExtension) synchronisant le contenu en temps réel.

---

US-4: Vue Structurée de Carnet Inline (Redesign — voir docs/story-nextgen-editor-us4-redesign.md)

⚠️ DEPRECATED — La spec précédente (bloc "Auteurs & Œuvres") est rejetée par le fondateur. Le code legacy (tiptap-database-block-extension.tsx, database-block-editor.tsx, database-block-types.ts) doit être supprimé. La nouvelle spec complète (problème, options produit, Given/When/Then, modèle de données, migration, i18n, QA RTL) est dans docs/story-nextgen-editor-us4-redesign.md.

En tant que rédacteur dans un carnet structuré, Je veux insérer une vue en lecture de mon tableau de notes directement dans le corps de ma note, Afin de voir mes données structurées en contexte, sans quitter l'éditeur.

Critères d'Acceptation (résumé) :

• Étant donné que ma note est dans un carnet structuré, quand je tape /vue, alors un bloc structuredViewBlock s'insère avec les données réelles du carnet — aucune donnée de démo.
• Étant donné que le carnet n'a pas de schéma, alors le bloc affiche un callout contextuel vers le wizard, pas une erreur.
• Étant donné qu'une note contient un ancien databaseBlock, alors il est retiré silencieusement sans crash.

(Voir docs/story-nextgen-editor-us4-redesign.md pour les critères complets, le modèle de données, et la checklist QA FR+fa RTL.)

---

Spécifications Techniques d'Implémentation

1. Structure du Nœud structuredViewBlock (TipTap) — US-4 Redesign

⚠️ DEPRECATED : L'ancienne section DatabaseBlock est remplacée. Voir docs/story-nextgen-editor-us4-redesign.md §7 pour le modèle complet.

Extension TipTap StructuredViewBlockExtension dans tiptap-structured-view-block-extension.tsx :

• Attributs : notebookId (string), displayMode ('table'|'gallery'), filterJson (string JSON {})
• ReactNodeViewRenderer → structured-view-block-embed.tsx
• Aucune donnée de démo — aucun payload JSON d'auteurs/livres dans les attrs.

2. Le Plugin Drag Handle & Gutter en ProseMirror (US-1, inchangé)

Développer un plugin custom dans /components/tiptap-drag-handle-plugin.ts :

• Attacher un écouteur mouseover et mousemove sur l'éditeur ProseMirror.
• Utiliser view.posAtCoords pour localiser le nœud survolé.
• Repositionner l'élément HTML de la poignée en modifiant ses styles CSS top et left.
• Gérer le glissement avec @tiptap/extension-drag-handle-react (spec officielle).

3. Fichiers à modifier / créer / supprimer :

• [NEW] memento-note/components/tiptap-drag-handle-plugin.ts — Plugin Gutter (US-1)
• [NEW] memento-note/components/tiptap-structured-view-block-extension.tsx — Nœud Vue Structurée (US-4 redesign)
• [NEW] memento-note/components/structured-view-block-embed.tsx — React NodeView avec SWR + états dégradés
• [DELETE] memento-note/components/tiptap-database-block-extension.tsx — Legacy rejeté
• [DELETE] memento-note/components/database-block-editor.tsx — Legacy rejeté
• [DELETE] memento-note/lib/editor/database-block-types.ts — Legacy rejeté
• [MODIFY] memento-note/components/note-content-area.tsx — Passer notebookId à l'éditeur
• [MODIFY] memento-note/components/rich-text-editor.tsx — Swap extension DB → Vue Structurée, mise à jour slash
• [MODIFY] memento-note/components/block-action-menu.tsx — Remplacer option "Database" par "Vue structurée"
• [MODIFY] memento-note/app/globals.css — Gutter, poignée, glassmorphic dropdowns

---

Plan de Vérification

Tests Manuels :

1. Vérification Gutter : Survoler des textes longs et vérifier que la poignée se positionne correctement à gauche. Glisser un paragraphe sur un autre et valider le réordonnancement.
2. Vérification Menu : Cliquer sur la poignée, dupliquer le bloc, supprimer le bloc, et le transformer en d'autres types.
3. Vérification Paste : Copier une référence de bloc, la coller, et vérifier que la transclusion est proposée et s'insère sous forme de LiveBlock.
4. Vérification Vue Structurée Inline (US-4 redesign) :
   • Taper /vue dans une note de carnet structuré → bloc avec données réelles (pas Jules Verne).
   • Taper /vue dans un carnet sans schéma → callout wizard, pas de crash.
   • Ouvrir une note avec ancien databaseBlock → note charge sans erreur.
   • Passer la langue en fa (persan) → libellés traduits, layout RTL correct.
   • Voir checklist complète dans docs/story-nextgen-editor-us4-redesign.md §11.