---
title: "Rich Editor - Slash Commands"
module: wiki
type: functional
status: active
updated: 2026-06-05
---

# Rich Editor - Slash Commands

> Documentation fonctionnelle du menu de commandes rapides (`/`) integre dans l'editeur rich text, inspire de Notion.

---

## Vue d'ensemble

L'editeur rich text (`RichEditor`) propose un menu de **commandes rapides** declenche par la touche `/`. En tapant `/` dans la zone d'edition, un menu flottant apparait sous le curseur et propose une liste d'actions a inserer, sans avoir a quitter le clavier ni chercher le bouton correspondant dans le ribbon.

Ce comportement reprend l'experience utilisateur des editeurs modernes (Notion, Slack, etc.).

---

## Acces

Aucun bouton dedie : la fonctionnalite est disponible en permanence dans la zone d'edition de tout `RichEditor`.

Le menu s'ouvre lorsque l'utilisateur tape `/` :

- en **debut de ligne**, ou
- **apres un espace**.

Taper `/` en plein milieu d'un mot (ex: `et/ou`) **n'ouvre pas** le menu, pour ne pas gener la saisie normale.

Lorsque l'editeur est **vide**, un indice discret « Tapez / pour inserer un element » s'affiche sous le placeholder pour faire connaitre la fonctionnalite.

---

## Commandes disponibles

| Commande | Icone | Action |
|----------|-------|--------|
| **Titre 1 / 2 / 3** | `fa-heading` | Applique un format de titre (H1/H2/H3) au bloc courant |
| **Liste a puces** | `fa-list-ul` | Demarre une liste non ordonnee |
| **Liste numerotee** | `fa-list-ol` | Demarre une liste ordonnee |
| **Citation** | `fa-quote-right` | Transforme le bloc en citation (blockquote) |
| **Bloc de code** | `fa-code` | Insere un bloc de code |
| **Separateur** | `fa-minus` | Insere une ligne horizontale |
| **Image** | `fa-image` | Ouvre la modale d'insertion d'image (URL ou upload) |
| **Lien** | `fa-link` | Ouvre la modale d'insertion de lien hypertexte |
| **Tableau** | `fa-table` | Insere directement un tableau 3×3 |
| **Video** | `fa-video` | Ouvre la modale d'integration de video |
| **Mention** | `fa-at` | Ouvre la modale de selection de variable / placeholder |

---

## Utilisation

### Filtrage par frappe

Apres `/`, le texte tape filtre la liste en temps reel. Le filtrage porte sur le **libelle** et sur des **mots-cles** :

| Saisie | Resultat |
|--------|----------|
| `/ima` | Image |
| `/lien` ou `/url` | Lien |
| `/tab` ou `/grille` | Tableau |
| `/mention` ou `/variable` | Mention |

La partie du libelle qui correspond a la recherche est **mise en evidence** (en gras violet), comme dans Notion / Slack.

Si aucune commande ne correspond, le menu affiche « Aucune commande ».

### Navigation

| Touche | Effet |
|--------|-------|
| `↓` / `↑` | Deplace la selection dans la liste |
| `Entree` | Valide la commande surlignee |
| `Echap` | Ferme le menu sans rien inserer |
| Souris | Survol pour surligner, clic pour valider |

### Comportement a la validation

Lorsqu'une commande est validee :

1. Le texte tape (`/` + la recherche, ex: `/ima`) est **automatiquement supprime** de l'editeur.
2. Le curseur est repositionne a l'endroit ou se trouvait le `/`.
3. L'action correspondante est declenchee (modale ouverte ou tableau insere).

### Fermeture

Le menu se ferme automatiquement quand :

- l'utilisateur appuie sur `Echap` ;
- l'utilisateur tape un **espace** (la commande `/` est consideree terminee) ;
- l'utilisateur clique **en dehors** du menu ;
- la recherche ne correspond plus a aucun contexte valide (ex: suppression du `/`).

---

## Limitations

- Le menu ne s'ouvre pas en mode **HTML source** ni en mode **Markdown**.
- Le menu ne s'ouvre pas a l'interieur d'un **bloc de code**.
- Les commandes proposees sont fixes (titres, listes, citation, code, separateur, image, lien, tableau, video, mention).