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

matthieu · 2026-05-04T13:11:40Z

matthieu commented

2026-05-04 13:11:40 +00:00

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

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

## 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

matthieu added 1 commit 2026-05-04 13:11:41 +00:00

feat(input-rich-text) : ajout d'un éditeur de texte riche basé sur TipTap v3 db9dd86b7d

Composant MalioInputRichText aligné sur le thème Malio :
- TipTap v3.22.5 + StarterKit + Placeholder + tiptap-markdown 0.9.0
- Toolbar : gras, italique, barré, H2/H3, listes, citation, code, lien, undo/redo
- États error / success / hint, props disabled / readonly / editable
- Sortie configurable markdown (défaut) ou HTML via outputFormat
- Couleurs m-primary / m-danger / m-success / m-muted, icônes mdi:*
- Tests (12), playground page, story Histoire, MAJ CHANGELOG + COMPONENTS

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

matthieu merged commit 2eb7a5247a into develop

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

matthieu deleted branch feat/input-rich-text

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

matthieu referenced this issue from a commit

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

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

matthieu referenced this pull request

2026-05-04 13:14:16 +00:00

release : rich text editor (TipTap) #38

matthieu referenced this pull request

2026-05-04 13:24:51 +00:00