refactor(block-editor): extract shared menu styles into dedicated module

- add `menuStyles.js` with reusable `BOX_CLASS`, `ITEM_CLASS`, `ITEM_DANGER_CLASS`, and `SEPARATOR_CLASS` constants
- replace inline tailwind strings in `Block.client.js` with imported style constants
- update `BlockEditor.client.js`, `LinkPopover.client.js`, and `Toolbar.client.js` to use shared menu styles
- update `README.md` to document the new `menuStyles.js` file
This commit is contained in:
2026-04-26 15:39:41 -04:00
parent 3e90ef8c5d
commit db468b56b5
6 changed files with 339 additions and 169 deletions
+29 -5
View File
@@ -123,16 +123,30 @@ Quand une sélection non-vide existe dans un bloc, un toolbar flottant
apparaît au-dessus. Il propose :
- **B I U S `</>`** — marks simples (toggle)
- **A** — couleur du texte (popover : palette par défaut + couleurs déjà
utilisées dans le document + bouton `+` pour une couleur libre via
`<input type="color">`)
- **◐** — surlignage (même structure de popover)
- **🔗** — lien (popover avec input URL ; ✕ pour retirer)
- **A** — couleur du texte (sous-menu drop-down : palette par défaut +
couleurs déjà utilisées dans le document + bouton `+` pour une couleur
libre via `<input type="color">`)
- **◐** — surlignage (même structure de sous-menu)
- **🔗** — lien (sous-menu drop-down avec input URL ; ✕ pour retirer)
- **T/** — effacer tout le formatage de la sélection (supprime toutes les marks)
L'état actif est calculé à partir des marks **communes à toute la plage**
(via `marksInRange`). Toggle off si toute la plage est déjà marquée.
La toolbar est rendue en `position: absolute` à l'intérieur du container
relatif de l'éditeur et **suit la sélection lors du scroll**. Les sous-menus
(couleur, surlignage, lien) s'ouvrent **au survol** avec une fenêtre de
fermeture de 120 ms — même idiome que le sous-menu *Transformer ▸* du menu
d'actions, mais en drop-down (vers le bas) plutôt qu'à droite. Une petite
flèche `▾` après le glyphe principal indique la présence du sous-menu.
## Popover de lien
Au simple clic dans un lien existant, un popover s'ouvre sous le `<a>` avec
l'URL et la case « Ouvrir dans un nouvel onglet ». Il est rendu en
`position: absolute` dans le container de l'éditeur et **suit le lien lors
du scroll**.
## Sélection multi-blocs
Deux façons d'entrer en mode sélection multi-blocs :
@@ -180,6 +194,16 @@ Sinon (clic sans déplacement), le menu s'ouvre normalement. Les dropdowns
sont des composants maison (pas de Headless UI ici) car `MenuButton` ouvrait
sur `pointerdown`, ce qui empêchait le clic-maintenu nécessaire au drag.
## Identité visuelle partagée
Les quatre dropdowns (menu d'insertion, menu d'actions du bloc, toolbar
de formatage, popover de lien) partagent les classes `BOX_CLASS`,
`ITEM_CLASS`, `ITEM_DANGER_CLASS`, `ICON_BTN_CLASS` et `SEPARATOR_CLASS`
exportées par [`inline/menuStyles.js`](./inline/menuStyles.js). Pas de
wrapper de composant — juste des constantes Tailwind, parce que les trois
formes (liste verticale, barre horizontale, formulaire) sont trop
différentes pour qu'une abstraction soit rentable.
## Étendre — enregistrer un bloc custom
```js