# MalioInputRichText Éditeur de texte riche basé sur **TipTap v3** + **StarterKit** + **tiptap-markdown**. Sortie en **markdown** (par défaut) ou en **HTML**. Aligné sur le thème Malio (couleurs `m-*`, icônes `mdi:*`, états error / success / hint). ------------------------------------------------------------------------ ## Props détaillées ### id - Type: `string` - Description: Identifiant HTML. - Comportement: Généré automatiquement si non fourni (`malio-input-rich-text-…`). ### label - Type: `string` - Description: Label affiché au-dessus de l'éditeur. - Comportement: Change de couleur selon l'état (focus → `m-primary`, error → `m-danger`, success → `m-success`). ### modelValue - Type: `string | null | undefined` - Description: Contenu de l'éditeur (markdown ou HTML selon `outputFormat`). - Comportement: `v-model` ; sync bidirectionnelle. ### placeholder - Type: `string` - Défaut: `''` - Description: Texte affiché quand l'éditeur est vide. ### minHeight - Type: `string` - Défaut: `160px` - Description: Hauteur minimale de la zone d'édition (CSS valid value). ### editable - Type: `boolean` - Défaut: `true` - Description: `false` → mode affichage seul, **toolbar masquée**, contenu rendu en `prose`. ### disabled - Type: `boolean` - Défaut: `false` - Description: Désactive l'édition et la toolbar (opacité réduite). ### readonly - Type: `boolean` - Défaut: `false` - Description: Lecture seule (toolbar visible mais désactivée, pas de saisie). ### hint / error / success - Type: `string` - Description: Messages contextuels affichés sous l'éditeur. - Priorité: `error` > `success` > `hint`. ### outputFormat - Type: `'markdown' | 'html'` - Défaut: `'markdown'` - Description: Format émis dans `update:modelValue`. - `markdown` : utilise `tiptap-markdown` (`getMarkdown()`). - `html` : utilise `editor.getHTML()`. ### groupClass / labelClass / editorClass - Type: `string` - Description: Classes Tailwind additionnelles fusionnées via `twMerge` pour override. ------------------------------------------------------------------------ ## Toolbar Boutons (icônes `mdi:*`) : - Gras, Italique, Barré - Titre H2, Titre H3 - Liste à puces, Liste numérotée - Citation - Code inline, Bloc de code - Lien (prompt URL ; vide pour retirer) - Annuler / Rétablir ------------------------------------------------------------------------ ## Accessibilité - Le label est lié à la zone d'édition via `for` / `id`. - `aria-invalid="true"` sur la zone d'édition en cas d'erreur. - `aria-describedby` référence le message d'erreur / succès / hint. - Boutons toolbar : `aria-pressed` reflète l'état actif, `aria-label` pour l'usage screen-reader. ------------------------------------------------------------------------ ## Events ### update:modelValue - Émis à chaque modification du contenu. - Payload : `string` (markdown ou HTML selon `outputFormat`).