# 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](file:///home/devparsa/dev/Momento/memento-note/components/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](file:///home/devparsa/dev/Momento/architectural-grid1/src/components/ModernBlockNoteEditor.tsx#L1711) 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](file:///home/devparsa/dev/Momento/memento-note/components/tiptap-live-block-extension.tsx#L159)) synchronisant le contenu en temps réel. --- ### US-4: Bloc de Base de Données Relationnelle Inline **En tant que** chef de projet ou gestionnaire de données, **Je veux** pouvoir insérer une base de données relationnelle interactive directement au milieu de mon texte, basculer ses vues et suivre des rollups, **Afin de** structurer mes informations complexes sans quitter le flux de ma note (comme simulé dans le prototype). #### Critères d'Acceptation : * **Étant donné** que j'utilise l'éditeur de Momento * **Quand** je saisis `/database` ou sélectionne "Base de données" dans le menu d'insertion * **Alors** un bloc `databaseBlock` est inséré sous forme d'un React NodeView * **Et** il propose par défaut un modèle relationnel "Auteurs & Œuvres" (avec des données simulées ou liées au carnet actuel) * **Quand** je clique sur le sélecteur de vue en haut à droite du bloc * **Alors** je peux basculer entre la vue **Tableau** (grille avec colonnes de propriétés) et la vue **Fiches** (cartes illustrées de couvertures, tags et auteurs) * **Et** la colonne **Rollup Count** de la vue Tableau recalcule dynamiquement le nombre de livres liés à chaque auteur au fur et à mesure que j'ajoute ou supprime des fiches * **Et** un formulaire d'insertion rapide en bas du bloc me permet d'ajouter des livres ou des auteurs à ce modèle relationnel local. --- ## Spécifications Techniques d'Implémentation ### 1. Structure du Nœud de Base de Données Tiptap (`DatabaseBlock`) Créer une extension Tiptap personnalisée `DatabaseBlockExtension` dans `/components/tiptap-database-block-extension.tsx` qui : - Gère un groupe `block`, se comporte comme un atome (non modifiable directement en texte brut). - Conserve les attributs : `dbId` (string), `dbView` ('table' | 'card'), `dbAuthors` (array) et `dbBooks` (array) représentant le schéma et les valeurs. - Utilise un `ReactNodeViewRenderer` pour monter notre composant d'édition de base de données relationnelle en React pur. ### 2. Le Plugin Drag Handle & Gutter en ProseMirror Développer un plugin custom dans `/components/tiptap-drag-handle-plugin.ts` : * Attacher un écouteur d'événements `mouseover` et `mousemove` sur l'éditeur ProseMirror. * Utiliser `view.posAtCoords` pour localiser le nœud ProseMirror survolé. * Récupérer son DOM parent et calculer sa hauteur et son décalage vertical. * Repositionner l'élément HTML de la poignée en modifiant ses styles CSS `top` et `left` (le bouton est monté au niveau de l'éditeur parent en absolute, évitant d'être injecté dans le texte éditable). * Gérer le glissement avec l'API HTML5 Drag and Drop couplée aux transactions de ProseMirror (`tr.replaceWith` ou `MoverBlock`). ### 3. Fichiers à modifier / créer : * `[NEW]` `memento-note/components/tiptap-drag-handle-plugin.ts` — Plugin de poignée Gutter * `[NEW]` `memento-note/components/tiptap-database-block-extension.tsx` — Nœud et composant DatabaseBlockEditor * `[MODIFY]` `memento-note/components/rich-text-editor.tsx` — Intégration du Drag Handle, de la DatabaseBlockExtension et de l'interception du presse-papier dans `editorProps.handlePaste` * `[MODIFY]` `memento-note/app/globals.css` — Ajout des classes CSS pour l'alignement précis du gutter, de la poignée, et du bloc de base de données (glassmorphic dropdowns et fiches). --- ## 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 Base de Données Inline :** Insérer le bloc base de données, ajouter un auteur, ajouter un livre avec cet auteur, vérifier le bon calcul du rollup, et basculer en vue Fiches pour vérifier l'affichage des couvertures.