sepehr/Momento
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
9da92b8eddc081882cff3f34cfdd28ba789bc7ed
Momento/docs/story-nextgen-editor.md
Antigravity f46654f574 feat: editor improvements and architectural grid prototype 
Multiple feature additions and improvements across the application:

- NextGen Editor: drag handles, smart paste, block actions
- Structured views: Kanban and table layouts for notes
- Architectural Grid: new brainstorming/agent interface prototype
- Flashcards: SM-2 revision algorithm with AI generation
- MCP server: robustness improvements
- Graph/PDF chat: fix click propagation and copy behavior
- Various UI/UX enhancements and bug fixes

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-27 19:45:15 +00:00

9.0 KiB
Raw Blame History

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: 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.
Reference in New Issue View Git Blame Copy Permalink