Files

matthieu 2eb7a5247a feat(input-rich-text) : ajout d'un éditeur de texte riche basé sur TipTap v3 (#37 )

## Résumé

Nouveau composant `MalioInputRichText` : éditeur WYSIWYG basé sur **TipTap v3** + **StarterKit** + **tiptap-markdown**, aligné sur le thème Malio (couleurs `m-*`, icônes `mdi:*`, états error / success / hint).

## Détails

- **Toolbar** : gras, italique, barré, H2, H3, liste à puces, liste numérotée, citation, code inline, bloc de code, lien (prompt URL), undo / redo
- **Sortie** : `markdown` (par défaut) ou `html` via la prop `outputFormat`
- **Modes** : `editable`, `disabled`, `readonly` ; mode lecture seule (`editable=false`) rend le contenu en `prose` sans toolbar
- **Accessibilité** : label `for/id`, `aria-invalid`, `aria-describedby`, `aria-pressed` sur les boutons toolbar
- **Style** : floating focus border `m-primary`, error `m-danger`, success `m-success`, toolbar `bg-m-bg`

## Dépendances ajoutées (purement additives, aucun bump existant)

- `@tiptap/vue-3` ^3.22.5
- `@tiptap/starter-kit` ^3.22.5
- `@tiptap/extension-placeholder` ^3.22.5
- `@tiptap/pm` ^3.22.5
- `tiptap-markdown` ^0.9.0

> Note : `@tiptap/extension-link` n'est pas installé séparément car StarterKit v3 l'inclut nativement (configuré via `StarterKit.configure({ link: { ... } })`).

## Test plan

- [x] `npm run test` — 315/315 (12 nouveaux tests sur InputRichText)
- [x] `npm run lint` — 0 erreur sur les fichiers ajoutés
- [x] `npm run story:build` — Histoire build OK (story `Input/RichText` listée)
- [x] `npm run dev` — playground `/composant/input/inputRichText` (vérification visuelle des 8 variantes : simple, hint, erreur, succès, readonly, disabled, lecture seule, sortie HTML)
- [x] `npm run story:dev` — story `Input/RichText` avec docs

## Fichiers

- `app/components/malio/input/InputRichText.vue` — composant
- `app/components/malio/input/InputRichText.test.ts` — tests
- `.playground/pages/composant/input/inputRichText.vue` — playground
- `app/story/input/inputRichText.story.vue` — story Histoire
- `histoire.config.ts` — alias ESM + `optimizeDeps` pour `tiptap-markdown` (sinon Histoire choisit la build UMD)
- `CHANGELOG.md`, `COMPONENTS.md` — documentation

Reviewed-on: #37
Co-authored-by: matthieu <matthieu@yuno.malio.fr>
Co-committed-by: matthieu <matthieu@yuno.malio.fr>

2026-05-04 13:12:38 +00:00

1.3 KiB

Raw Blame History

Changelog

Liste des évolutions de la librairie Malio layer UI

[0.0.0]

Parameters

Added

[#333] Création d'un composant text
[#337] Création d'un composant select
[#362] Création d'un composant checkbox
[#363] Création d'un composant amount
[#364] Création d'un composant button radio
[#365] Création d'un composant number
[#366] Création d'un composant select checkbox
[#407] Création d'un composant time
Création d'un composant textarea
[#MUI-8] Création d'un composant mot de passe
[#MUI-9] Création d'un composant upload
[#MUI-14] Création d'un composant bouton icône
[#MUI-11] Création d'un composant navigation par onglets
[#MUI-20] Création d'un composant sidebar
[#MUI-23] Revoir la config couleur tailwind
[#MUI-10] Création d'un composant bouton
[#MUI-2] Faire un MCP pour la librairie de composant
[#MUI-15] Création d'un composant drawer
[#MUI-22] Création d'un composant datatable
[#MUI-27] Création d'un composant sélection de site
Création d'un composant rich text (TipTap) avec sortie markdown / HTML

Changed

Fixed

Hauteur des boutons de pagination du datatable alignée sur le select (40px)
Distribution de tailwind.config.ts aux projets consommateurs avec paths content absolus

1.3 KiB Raw Blame History

Changelog

[0.0.0]

Parameters

Added

Changed

Fixed

1.3 KiB

Raw Blame History