feat(editor): implement next-gen editor with unique gutter drag handle, block actions menu, smart paste transclusion, and redesigned inline structured view block (US-NEXTGEN-EDITOR, US-4)

docs/story-nextgen-editor.md

@@ -68,44 +68,54 @@ Pour offrir une expérience de saisie supérieure à celle de Notion (plus perfo
 
 ---
 
-### 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).
+### US-4: Vue Structurée de Carnet Inline *(Redesign — voir [`docs/story-nextgen-editor-us4-redesign.md`](./story-nextgen-editor-us4-redesign.md))*
 
-#### 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.
+> ⚠️ **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 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.
+### 1. Structure du Nœud `structuredViewBlock` (TipTap) — *US-4 Redesign*
 
-### 2. Le Plugin Drag Handle & Gutter en ProseMirror
+> ⚠️ **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 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`).
+*   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 :
-*   `[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).
+### 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
 
 ---
 
@@ -115,4 +125,9 @@ Développer un plugin custom dans `/components/tiptap-drag-handle-plugin.ts` :
 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.
+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.