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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user