# MalioInputRichText Éditeur de texte riche basé sur **TipTap v3** + **StarterKit** + **tiptap-markdown**. Sortie en **HTML** (par défaut) ou en **markdown**. 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: `'html'` - Description: Format émis dans `update:modelValue`. - `html` : utilise `editor.getHTML()`. - `markdown` : utilise `tiptap-markdown` (`getMarkdown()`). ### 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) - Couleur du texte (palette de 8 swatches + reset) - Surlignage (palette de 8 swatches + reset) - Annuler / Rétablir Les palettes couleur/surlignage s'ouvrent en popover sous leur bouton. Fermeture : clic sur un swatch, clic en dehors, ou touche **Échap**. > Les couleurs et surlignages ne sont **pas persistés en markdown** (spec Markdown ne couvre pas la couleur). Pour préserver les couleurs au save/reload, utiliser `output-format="html"`. ------------------------------------------------------------------------ ## 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`).