134 lines
9.6 KiB
Markdown
134 lines
9.6 KiB
Markdown
# 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: Vue Structurée de Carnet Inline *(Redesign — voir [`docs/story-nextgen-editor-us4-redesign.md`](./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`](./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`](./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.
|