feat(ui): add block transform submenu with hover panel and drag fix

- add `BlockMenuTransformItem` component with hover-triggered submenu panel
- import `ArrowRight01Icon` and `TextIcon` icons for transform UI
- track drag state via `justDraggedRef` to prevent menu opening after drag
- expose `close` from `<Menu>` render prop to allow manual close on transform select
- wire transform options from block registry into the new submenu item
This commit is contained in:
2026-04-25 20:35:51 -04:00
parent 8b3baa39f8
commit bde634d169
2 changed files with 93 additions and 31 deletions
+8 -7
View File
@@ -163,18 +163,19 @@ Le drag-and-drop utilise l'API HTML5 native, pas de dépendance externe.
Un clic sur la poignée `DragDropVerticalIcon` ouvre un menu déroulant
(`@headlessui/react`) contenant :
- **Transformer en** — section listant les types de blocs texte disponibles
(paragraphe, titres 1 à 6, listes, citation, code). Cliquer sur un type
remplace le bloc courant en conservant son contenu inline. La section est
masquée pour les blocs non-texte (image, séparateur). Le filtrage respecte
la prop `enabledBlocks`.
- **Transformer ** — sous-menu qui s'ouvre au survol, listant les types de
blocs texte disponibles (paragraphe, titres 1 à 6, listes, citation, code).
Cliquer sur un type remplace le bloc courant en conservant son contenu
inline et ferme le menu. L'item est masqué pour les blocs non-texte (image,
séparateur). Le filtrage respecte la prop `enabledBlocks`.
- **Dupliquer** — insère une copie du bloc juste en dessous (nouvel `id`).
- **Supprimer** — retire le bloc (équivalent à `Backspace` au début d'un bloc
vide), avec focus replacé sur le bloc précédent.
Le drag (`mousedown` + déplacement) et le clic (ouverture du menu) cohabitent
sur le même bouton : si le pointeur bouge entre `mousedown` et `mouseup`, le
navigateur n'émet pas de `click` et le menu reste fermé.
sur le même bouton : si un `dragstart` réel se produit, un drapeau interne
(`justDraggedRef`) supprime l'ouverture du menu lors du `click` qui suit.
Sinon (clic sans déplacement), le menu s'ouvre normalement.
## Étendre — enregistrer un bloc custom