matthieu
2eb7a5247a
## 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>
54 lines
1.3 KiB
JSON
54 lines
1.3 KiB
JSON
{
|
|
"name": "@malio/layer-ui",
|
|
"type": "module",
|
|
"version": "0.0.1",
|
|
"main": "./nuxt.config.ts",
|
|
"files": [
|
|
"app/**",
|
|
"nuxt.config.ts",
|
|
"tailwind.config.ts",
|
|
"README.md",
|
|
"COMPONENTS.md"
|
|
],
|
|
"scripts": {
|
|
"dev": "nuxi dev .playground",
|
|
"dev:prepare": "nuxt prepare .playground",
|
|
"build": "nuxt build .playground",
|
|
"generate": "nuxt generate .playground",
|
|
"preview": "nuxt preview .playground",
|
|
"lint": "eslint .",
|
|
"test": "vitest run",
|
|
"story:dev": "histoire dev",
|
|
"story:build": "histoire build",
|
|
"story:preview": "histoire preview"
|
|
},
|
|
"peerDependencies": {
|
|
"nuxt": "^4.0.0"
|
|
},
|
|
"devDependencies": {
|
|
"@histoire/plugin-vue": "^1.0.0-beta.1",
|
|
"@nuxt/eslint": "latest",
|
|
"@types/node": "^24.10.13",
|
|
"@vitejs/plugin-vue": "^6.0.4",
|
|
"@vue/test-utils": "^2.4.6",
|
|
"eslint": "^10.0.0",
|
|
"histoire": "^1.0.0-beta.1",
|
|
"jsdom": "^27.0.1",
|
|
"nuxt": "^4.3.1",
|
|
"typescript": "^5.9.3",
|
|
"vitest": "^3.2.4",
|
|
"vue": "latest"
|
|
},
|
|
"dependencies": {
|
|
"@nuxt/icon": "^2.2.1",
|
|
"@nuxtjs/tailwindcss": "^6.14.0",
|
|
"@tiptap/extension-placeholder": "^3.22.5",
|
|
"@tiptap/pm": "^3.22.5",
|
|
"@tiptap/starter-kit": "^3.22.5",
|
|
"@tiptap/vue-3": "^3.22.5",
|
|
"maska": "^3.2.0",
|
|
"tailwind-merge": "^3.3.1",
|
|
"tiptap-markdown": "^0.9.0"
|
|
}
|
|
}
|