fix(select) : option vide rendue uniquement si emptyOptionLabel non vide

- Ajoute tailwind.config.ts aux files du package pour qu'il soit inclus dans le tarball npm
- Convertit les paths content en absolus (via fileURLToPath) pour que Tailwind scanne les composants du layer depuis node_modules côté consommateur
- Aligne la hauteur des boutons de pagination du DataTable (h-10) sur le Select
- Ajuste --m-radius à 6px

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

.playground/pages/composant/input/inputRichText.vue

@@ -1,91 +0,0 @@
-<template>
-  <div class="grid grid-cols-1 items-start gap-6 p-4 lg:grid-cols-2">
-    <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Simple</h2>
-      <MalioInputRichText
-        v-model="simpleValue"
-        label="Note"
-        placeholder="Écrire ici…"
-      />
-      <pre class="mt-3 overflow-auto rounded bg-m-bg p-2 text-xs">{{ simpleValue }}</pre>
-    </div>
-
-    <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Avec contenu initial + hint</h2>
-      <MalioInputRichText
-        v-model="hintValue"
-        label="Description"
-        hint="Tu peux mettre en forme avec la barre d'outils"
-      />
-    </div>
-
-    <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Erreur</h2>
-      <MalioInputRichText
-        v-model="errorValue"
-        label="Compte-rendu"
-        error="Le compte-rendu doit faire au moins 20 caractères"
-      />
-    </div>
-
-    <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Succès</h2>
-      <MalioInputRichText
-        v-model="successValue"
-        label="Compte-rendu"
-        success="Compte-rendu validé"
-      />
-    </div>
-
-    <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Readonly</h2>
-      <MalioInputRichText
-        v-model="readonlyValue"
-        label="Note (lecture seule)"
-        readonly
-      />
-    </div>
-
-    <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Disabled</h2>
-      <MalioInputRichText
-        v-model="disabledValue"
-        label="Note (désactivée)"
-        disabled
-      />
-    </div>
-
-    <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Affichage seul (editable=false)</h2>
-      <MalioInputRichText
-        :model-value="readonlyValue"
-        :editable="false"
-      />
-    </div>
-
-    <div class="rounded-lg border p-4">
-      <h2 class="mb-4 text-xl font-bold">Sortie HTML</h2>
-      <MalioInputRichText
-        v-model="htmlValue"
-        label="Article"
-        output-format="html"
-        min-height="200px"
-        placeholder="Tape ici, la sortie sera en HTML…"
-      />
-      <pre class="mt-3 overflow-auto rounded bg-m-bg p-2 text-xs">{{ htmlValue }}</pre>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import {ref} from 'vue'
-import MalioInputRichText from '../../../../app/components/malio/input/InputRichText.vue'
-
-const simpleValue = ref('')
-const hintValue = ref('## Titre\n\nUn paragraphe avec du **gras**, de l\'*italique* et un [lien](https://malio.fr).')
-const errorValue = ref('Trop court')
-const successValue = ref('Tout est bon de mon côté.')
-const readonlyValue = ref('## Compte-rendu\n\n- Point 1\n- Point 2\n\n> Citation importante')
-const disabledValue = ref('Contenu indisponible.')
-const htmlValue = ref('<p>Contenu <strong>riche</strong>.</p>')
-</script>

.releaserc.json

@@ -2,26 +2,8 @@
   "branches": ["main", "master"],
   "repositoryUrl": "https://gitea.malio.fr/MALIO-DEV/malio-layer-ui.git",
   "plugins": [
-    [
+    "@semantic-release/commit-analyzer",
-      "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
-      {
-        "preset": "angular",
-        "parserOpts": {
-          "headerPattern": "^(\\w+)(?:\\(([\\w$.\\-* ]+)\\))?\\s*:\\s+(.+)$",
-          "headerCorrespondence": ["type", "scope", "subject"]
-        }
-      }
-    ],
-    [
-      "@semantic-release/release-notes-generator",
-      {
-        "preset": "angular",
-        "parserOpts": {
-          "headerPattern": "^(\\w+)(?:\\(([\\w$.\\-* ]+)\\))?\\s*:\\s+(.+)$",
-          "headerCorrespondence": ["type", "scope", "subject"]
-        }
-      }
-    ],
     "@semantic-release/npm"
   ]
 }

CHANGELOG.md

@@ -26,7 +26,6 @@ Liste des évolutions de la librairie Malio layer UI
 * [#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
 

COMPONENTS.md

@@ -132,41 +132,6 @@ Zone de texte multiligne avec compteur et redimensionnement.
 
 ---
 
-## MalioInputRichText
-
-Éditeur de texte riche basé sur **TipTap v3** + **StarterKit** + **tiptap-markdown** + **TextStyle/Color/Highlight**. Toolbar avec gras, italique, barré, titres H2/H3, listes, citation, code, code-block, lien, **couleur du texte**, **surlignage**, undo/redo. Sortie en HTML (par défaut) ou markdown.
-
-> Couleurs et surlignages ne sont **pas persistés en markdown**. Pour les conserver au save/reload, utiliser `output-format="html"`.
-
-| Prop | Type | Défaut | Description |
-|------|------|--------|-------------|
-| `id` | `string` | auto | Identifiant HTML |
-| `label` | `string` | `''` | Label affiché au-dessus de l'éditeur |
-| `modelValue` | `string \| null` | `undefined` | Contenu (v-model) |
-| `placeholder` | `string` | `''` | Texte affiché quand vide |
-| `minHeight` | `string` | `'160px'` | Hauteur min de la zone d'édition |
-| `editable` | `boolean` | `true` | `false` → mode affichage seul (toolbar masquée) |
-| `disabled` | `boolean` | `false` | Désactive l'édition et la toolbar |
-| `readonly` | `boolean` | `false` | Lecture seule (toolbar visible mais désactivée) |
-| `hint` | `string` | `''` | Message d'aide |
-| `error` | `string` | `''` | Message d'erreur |
-| `success` | `string` | `''` | Message de succès |
-| `outputFormat` | `'markdown' \| 'html'` | `'html'` | Format émis dans `update:modelValue` |
-| `groupClass` | `string` | `''` | Classes CSS conteneur (twMerge) |
-| `labelClass` | `string` | `''` | Classes CSS label (twMerge) |
-| `editorClass` | `string` | `''` | Classes CSS wrapper éditeur (twMerge) |
-
-**Events :** `update:modelValue(value: string)`
-
-```vue
-<MalioInputRichText v-model="note" label="Note" placeholder="Écrire ici…" />
-<MalioInputRichText v-model="cr" label="Compte-rendu" error="Trop court" />
-<MalioInputRichText v-model="article" label="Article" min-height="240px" />
-<MalioInputRichText :model-value="content" :editable="false" />
-```
-
----
-
 ## MalioInputUpload
 
 Champ d'upload de fichier.

app/components/malio/input/InputRichText.test.ts

@@ -1,165 +0,0 @@
-import {afterEach, describe, expect, it} from 'vitest'
-import {flushPromises, mount} from '@vue/test-utils'
-import type {DefineComponent} from 'vue'
-import InputRichText from './InputRichText.vue'
-
-type InputRichTextProps = {
-  id?: string
-  label?: string
-  modelValue?: string | null
-  placeholder?: string
-  minHeight?: string
-  editable?: boolean
-  disabled?: boolean
-  readonly?: boolean
-  hint?: string
-  error?: string
-  success?: string
-  outputFormat?: 'markdown' | 'html'
-  groupClass?: string
-  labelClass?: string
-  editorClass?: string
-}
-
-const InputRichTextForTest = InputRichText as DefineComponent<InputRichTextProps>
-
-const mountComponent = async (props: InputRichTextProps = {}) => {
-  const wrapper = mount(InputRichTextForTest, {
-    props,
-    attachTo: document.body,
-  })
-  await flushPromises()
-  return wrapper
-}
-
-afterEach(() => {
-  document.body.replaceChildren()
-})
-
-describe('MalioInputRichText', () => {
-  it('renders the label and reuses a provided id', async () => {
-    const wrapper = await mountComponent({id: 'custom-rt-id', label: 'Description'})
-
-    const label = wrapper.get('label')
-    expect(label.text()).toBe('Description')
-    expect(label.attributes('for')).toBe('custom-rt-id')
-    expect(wrapper.get('#custom-rt-id').exists()).toBe(true)
-  })
-
-  it('generates an id when missing', async () => {
-    const wrapper = await mountComponent({label: 'Description'})
-
-    const labelFor = wrapper.get('label').attributes('for')
-    expect(labelFor?.startsWith('malio-input-rich-text-')).toBe(true)
-  })
-
-  it('renders the toolbar buttons in editable mode', async () => {
-    const wrapper = await mountComponent({modelValue: ''})
-
-    const buttons = wrapper.findAll('button[type="button"]')
-    expect(buttons.length).toBeGreaterThanOrEqual(13)
-    expect(wrapper.find('button[title="Gras"]').exists()).toBe(true)
-    expect(wrapper.find('button[title="Italique"]').exists()).toBe(true)
-    expect(wrapper.find('button[title="Lien"]').exists()).toBe(true)
-    expect(wrapper.find('button[title="Couleur du texte"]').exists()).toBe(true)
-    expect(wrapper.find('button[title="Surlignage"]').exists()).toBe(true)
-    expect(wrapper.find('button[title="Annuler"]').exists()).toBe(true)
-    expect(wrapper.find('button[title="Rétablir"]').exists()).toBe(true)
-  })
-
-  it('opens and closes the text color palette', async () => {
-    const wrapper = await mountComponent({modelValue: ''})
-
-    expect(wrapper.find('[aria-label="Palette couleur du texte"]').exists()).toBe(false)
-
-    await wrapper.get('button[title="Couleur du texte"]').trigger('click')
-    expect(wrapper.find('[aria-label="Palette couleur du texte"]').exists()).toBe(true)
-
-    await wrapper.get('button[title="Couleur du texte"]').trigger('click')
-    expect(wrapper.find('[aria-label="Palette couleur du texte"]').exists()).toBe(false)
-  })
-
-  it('opens the highlight palette and closes the color palette', async () => {
-    const wrapper = await mountComponent({modelValue: ''})
-
-    await wrapper.get('button[title="Couleur du texte"]').trigger('click')
-    expect(wrapper.find('[aria-label="Palette couleur du texte"]').exists()).toBe(true)
-
-    await wrapper.get('button[title="Surlignage"]').trigger('click')
-    expect(wrapper.find('[aria-label="Palette de surlignage"]').exists()).toBe(true)
-    expect(wrapper.find('[aria-label="Palette couleur du texte"]').exists()).toBe(false)
-  })
-
-  it('disables color and highlight buttons when readonly', async () => {
-    const wrapper = await mountComponent({readonly: true, modelValue: ''})
-
-    expect(wrapper.get('button[title="Couleur du texte"]').attributes('disabled')).toBeDefined()
-    expect(wrapper.get('button[title="Surlignage"]').attributes('disabled')).toBeDefined()
-  })
-
-  it('does not render the toolbar in readonly display mode (editable=false)', async () => {
-    const wrapper = await mountComponent({editable: false, modelValue: '**hi**'})
-
-    expect(wrapper.find('button[title="Gras"]').exists()).toBe(false)
-  })
-
-  it('disables toolbar buttons when disabled', async () => {
-    const wrapper = await mountComponent({disabled: true, modelValue: ''})
-
-    const boldBtn = wrapper.get('button[title="Gras"]')
-    expect(boldBtn.attributes('disabled')).toBeDefined()
-  })
-
-  it('disables toolbar buttons when readonly', async () => {
-    const wrapper = await mountComponent({readonly: true, modelValue: ''})
-
-    const boldBtn = wrapper.get('button[title="Gras"]')
-    expect(boldBtn.attributes('disabled')).toBeDefined()
-  })
-
-  it('shows hint message in muted color', async () => {
-    const wrapper = await mountComponent({hint: 'Helpful hint'})
-
-    expect(wrapper.get('p.text-m-muted').text()).toBe('Helpful hint')
-  })
-
-  it('shows error state on wrapper, label and message', async () => {
-    const wrapper = await mountComponent({label: 'Description', error: 'Editor error'})
-
-    expect(wrapper.get('label').classes()).toContain('text-m-danger')
-    expect(wrapper.get('p.text-m-danger').text()).toBe('Editor error')
-    expect(wrapper.get('.rich-text-wrapper').classes()).toContain('border-m-danger')
-  })
-
-  it('shows success state on wrapper, label and message', async () => {
-    const wrapper = await mountComponent({label: 'Description', success: 'Editor success'})
-
-    expect(wrapper.get('label').classes()).toContain('text-m-success')
-    expect(wrapper.get('p.text-m-success').text()).toBe('Editor success')
-    expect(wrapper.get('.rich-text-wrapper').classes()).toContain('border-m-success')
-  })
-
-  it('prioritizes error over success', async () => {
-    const wrapper = await mountComponent({error: 'Editor error', success: 'Editor success'})
-
-    expect(wrapper.get('.rich-text-wrapper').classes()).toContain('border-m-danger')
-    expect(wrapper.find('p.text-m-success').exists()).toBe(false)
-    expect(wrapper.get('p.text-m-danger').text()).toBe('Editor error')
-  })
-
-  it('sets aria-invalid and aria-describedby on the editor content when error', async () => {
-    const wrapper = await mountComponent({id: 'rt-aria', error: 'Boom'})
-
-    const editorContent = wrapper.find('[aria-invalid="true"]')
-    expect(editorContent.exists()).toBe(true)
-    expect(editorContent.attributes('aria-describedby')).toBe('rt-aria-describedby')
-  })
-
-  it('renders initial markdown content visually', async () => {
-    const wrapper = await mountComponent({modelValue: '## Mon titre\n\nUn paragraphe.'})
-
-    const html = wrapper.html()
-    expect(html).toContain('Mon titre')
-    expect(html).toContain('Un paragraphe.')
-  })
-})

app/components/malio/input/InputRichText.vue

@@ -1,574 +0,0 @@
-<template>
-  <div :class="mergedGroupClass">
-    <label
-      v-if="label"
-      :for="editorId"
-      :class="mergedLabelClass"
-    >
-      {{ label }}
-    </label>
-
-    <!-- Mode lecture seule (rendu uniquement) -->
-    <div
-      v-if="!editable"
-      :id="editorId"
-      :class="mergedReadonlyClass"
-    >
-      <EditorContent :editor="editor" />
-    </div>
-
-    <!-- Mode éditable -->
-    <div
-      v-else
-      :id="editorId"
-      :class="mergedEditorWrapperClass"
-      @click="focusEditor"
-    >
-      <div
-        class="flex flex-wrap items-center gap-0.5 border-b border-m-border bg-m-bg p-1"
-        @click.stop
-      >
-        <button
-          v-for="btn in toolbarButtons"
-          :key="btn.key"
-          type="button"
-          class="flex h-8 w-8 items-center justify-center rounded text-m-text transition-colors hover:bg-m-primary/10 disabled:cursor-not-allowed disabled:opacity-40"
-          :class="btn.isActive() ? 'bg-m-primary/15 text-m-primary' : ''"
-          :title="btn.title"
-          :disabled="disabled || readonly"
-          :aria-label="btn.title"
-          :aria-pressed="btn.isActive()"
-          @mousedown.prevent
-          @click="btn.action()"
-        >
-          <IconifyIcon :icon="btn.icon" :width="18" :height="18" />
-        </button>
-
-        <span class="mx-1 h-5 w-px bg-m-border" aria-hidden="true" />
-
-        <div class="relative">
-          <button
-            type="button"
-            class="flex h-8 w-8 flex-col items-center justify-center rounded text-m-text transition-colors hover:bg-m-primary/10 disabled:cursor-not-allowed disabled:opacity-40"
-            :class="colorPickerOpen ? 'bg-m-primary/15 text-m-primary' : ''"
-            title="Couleur du texte"
-            aria-label="Couleur du texte"
-            :aria-expanded="colorPickerOpen"
-            :disabled="disabled || readonly"
-            @mousedown.prevent
-            @click="toggleColorPicker"
-          >
-            <IconifyIcon icon="mdi:format-color-text" :width="18" :height="18" />
-            <span
-              class="-mt-0.5 block h-1 w-4 rounded-sm"
-              :style="{ backgroundColor: currentTextColor ?? 'transparent' }"
-              aria-hidden="true"
-            />
-          </button>
-          <div
-            v-if="colorPickerOpen"
-            class="absolute left-0 top-full z-10 mt-1 flex w-44 flex-col gap-2 rounded-md border border-m-border bg-white p-2 shadow-lg"
-            role="dialog"
-            aria-label="Palette couleur du texte"
-          >
-            <div class="grid grid-cols-4 gap-1">
-              <button
-                v-for="swatch in textColorSwatches"
-                :key="swatch.value"
-                type="button"
-                class="h-7 w-7 rounded border border-m-border transition-transform hover:scale-110"
-                :class="currentTextColor === swatch.value ? 'ring-2 ring-m-primary ring-offset-1' : ''"
-                :style="{ backgroundColor: swatch.value }"
-                :title="swatch.label"
-                :aria-label="swatch.label"
-                @mousedown.prevent
-                @click="applyTextColor(swatch.value)"
-              />
-            </div>
-            <button
-              type="button"
-              class="flex items-center justify-center gap-1 rounded border border-m-border px-2 py-1 text-xs text-m-text transition-colors hover:bg-m-bg"
-              @mousedown.prevent
-              @click="applyTextColor(null)"
-            >
-              <IconifyIcon icon="mdi:format-color-marker-cancel" :width="14" :height="14" />
-              Aucune couleur
-            </button>
-          </div>
-        </div>
-
-        <div class="relative">
-          <button
-            type="button"
-            class="flex h-8 w-8 flex-col items-center justify-center rounded text-m-text transition-colors hover:bg-m-primary/10 disabled:cursor-not-allowed disabled:opacity-40"
-            :class="highlightPickerOpen ? 'bg-m-primary/15 text-m-primary' : ''"
-            title="Surlignage"
-            aria-label="Surlignage"
-            :aria-expanded="highlightPickerOpen"
-            :disabled="disabled || readonly"
-            @mousedown.prevent
-            @click="toggleHighlightPicker"
-          >
-            <IconifyIcon icon="mdi:marker" :width="18" :height="18" />
-            <span
-              class="-mt-0.5 block h-1 w-4 rounded-sm"
-              :style="{ backgroundColor: currentHighlightColor ?? 'transparent' }"
-              aria-hidden="true"
-            />
-          </button>
-          <div
-            v-if="highlightPickerOpen"
-            class="absolute left-0 top-full z-10 mt-1 flex w-44 flex-col gap-2 rounded-md border border-m-border bg-white p-2 shadow-lg"
-            role="dialog"
-            aria-label="Palette de surlignage"
-          >
-            <div class="grid grid-cols-4 gap-1">
-              <button
-                v-for="swatch in highlightSwatches"
-                :key="swatch.value"
-                type="button"
-                class="h-7 w-7 rounded border border-m-border transition-transform hover:scale-110"
-                :class="currentHighlightColor === swatch.value ? 'ring-2 ring-m-primary ring-offset-1' : ''"
-                :style="{ backgroundColor: swatch.value }"
-                :title="swatch.label"
-                :aria-label="swatch.label"
-                @mousedown.prevent
-                @click="applyHighlight(swatch.value)"
-              />
-            </div>
-            <button
-              type="button"
-              class="flex items-center justify-center gap-1 rounded border border-m-border px-2 py-1 text-xs text-m-text transition-colors hover:bg-m-bg"
-              @mousedown.prevent
-              @click="applyHighlight(null)"
-            >
-              <IconifyIcon icon="mdi:format-color-marker-cancel" :width="14" :height="14" />
-              Aucun surlignage
-            </button>
-          </div>
-        </div>
-
-        <span class="mx-1 h-5 w-px bg-m-border" aria-hidden="true" />
-
-        <button
-          type="button"
-          class="flex h-8 w-8 items-center justify-center rounded text-m-text transition-colors hover:bg-m-primary/10 disabled:cursor-not-allowed disabled:opacity-40"
-          title="Annuler"
-          aria-label="Annuler"
-          :disabled="disabled || readonly || !editor?.can().undo()"
-          @mousedown.prevent
-          @click="editor?.chain().focus().undo().run()"
-        >
-          <IconifyIcon icon="mdi:undo" :width="18" :height="18" />
-        </button>
-        <button
-          type="button"
-          class="flex h-8 w-8 items-center justify-center rounded text-m-text transition-colors hover:bg-m-primary/10 disabled:cursor-not-allowed disabled:opacity-40"
-          title="Rétablir"
-          aria-label="Rétablir"
-          :disabled="disabled || readonly || !editor?.can().redo()"
-          @mousedown.prevent
-          @click="editor?.chain().focus().redo().run()"
-        >
-          <IconifyIcon icon="mdi:redo" :width="18" :height="18" />
-        </button>
-      </div>
-
-      <EditorContent
-        :editor="editor"
-        class="malio-rich-text flex flex-1 cursor-text"
-        :style="{ minHeight }"
-        :aria-invalid="hasError || undefined"
-        :aria-describedby="describedBy"
-      />
-    </div>
-
-    <p
-      v-if="hint || hasError || hasSuccess"
-      :id="`${editorId}-describedby`"
-      :class="[
-        hasError
-          ? 'text-m-danger'
-          : hasSuccess
-            ? 'text-m-success'
-            : 'text-m-muted',
-        'mt-1 text-xs ml-[2px]',
-      ]"
-    >
-      {{ error || success || hint }}
-    </p>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, onBeforeUnmount, onMounted, ref, shallowRef, useId, watch } from 'vue'
-import { Icon as IconifyIcon } from '@iconify/vue'
-import { Editor, EditorContent } from '@tiptap/vue-3'
-import StarterKit from '@tiptap/starter-kit'
-import Placeholder from '@tiptap/extension-placeholder'
-import { TextStyle } from '@tiptap/extension-text-style'
-import Color from '@tiptap/extension-color'
-import Highlight from '@tiptap/extension-highlight'
-import { Markdown } from 'tiptap-markdown'
-import { twMerge } from 'tailwind-merge'
-
-defineOptions({ name: 'MalioInputRichText', inheritAttrs: false })
-
-type OutputFormat = 'markdown' | 'html'
-
-const props = withDefaults(
-  defineProps<{
-    id?: string
-    label?: string
-    modelValue?: string | null | undefined
-    placeholder?: string
-    minHeight?: string
-    editable?: boolean
-    disabled?: boolean
-    readonly?: boolean
-    hint?: string
-    error?: string
-    success?: string
-    outputFormat?: OutputFormat
-    groupClass?: string
-    labelClass?: string
-    editorClass?: string
-  }>(),
-  {
-    id: '',
-    label: '',
-    modelValue: undefined,
-    placeholder: '',
-    minHeight: '160px',
-    editable: true,
-    disabled: false,
-    readonly: false,
-    hint: '',
-    error: '',
-    success: '',
-    outputFormat: 'html',
-    groupClass: '',
-    labelClass: '',
-    editorClass: '',
-  },
-)
-
-const emit = defineEmits<{
-  (event: 'update:modelValue', value: string): void
-}>()
-
-const generatedId = useId()
-const editor = shallowRef<Editor>()
-const isFocused = shallowRef(false)
-
-const editorId = computed(() => props.id?.toString() || `malio-input-rich-text-${generatedId}`)
-const hasError = computed(() => !!props.error)
-const hasSuccess = computed(() => !!props.success && !hasError.value)
-const isInteractionLocked = computed(() => props.disabled || props.readonly)
-
-const describedBy = computed(() =>
-  hasError.value || hasSuccess.value || props.hint ? `${editorId.value}-describedby` : undefined,
-)
-
-const mergedGroupClass = computed(() => twMerge('w-full', props.groupClass))
-
-const mergedLabelClass = computed(() =>
-  twMerge(
-    'mb-1 block text-sm font-medium',
-    hasError.value
-      ? 'text-m-danger'
-      : hasSuccess.value
-        ? 'text-m-success'
-        : isFocused.value
-          ? 'text-m-primary'
-          : 'text-m-text',
-    props.disabled ? 'text-black/60' : '',
-    props.labelClass,
-  ),
-)
-
-const mergedEditorWrapperClass = computed(() =>
-  twMerge(
-    'rich-text-wrapper flex flex-col overflow-hidden rounded-md border bg-white transition-colors',
-    hasError.value
-      ? 'border-m-danger focus-within:border-m-danger'
-      : hasSuccess.value
-        ? 'border-m-success focus-within:border-m-success'
-        : isFocused.value
-          ? 'border-m-primary'
-          : 'border-m-muted hover:border-m-text/60',
-    props.disabled ? 'cursor-not-allowed bg-m-bg/50 opacity-70' : '',
-    props.editorClass,
-  ),
-)
-
-const mergedReadonlyClass = computed(() =>
-  twMerge(
-    'malio-rich-text prose prose-sm max-w-none rounded-md border border-m-border bg-white p-3',
-    'prose-headings:font-semibold prose-a:text-m-primary',
-    'prose-code:rounded prose-code:bg-m-bg prose-code:px-1.5 prose-code:py-0.5 prose-code:before:content-none prose-code:after:content-none',
-    'prose-pre:bg-m-text prose-pre:text-white',
-    props.editorClass,
-  ),
-)
-
-const focusEditor = () => {
-  if (isInteractionLocked.value) return
-  closePickers()
-  editor.value?.commands.focus()
-}
-
-const htmlPattern = /<\/?[a-z][\s\S]*>/i
-
-const normalizeEditorInput = (value: string | null | undefined): string => {
-  const content = (value ?? '').replace(/\r\n?/g, '\n')
-  if (htmlPattern.test(content)) return content
-  return content.split('\n').join('\n\n').replace(/\n{3,}/g, '\n\n')
-}
-
-const promptForLink = () => {
-  if (!editor.value) return
-  const previous = editor.value.getAttributes('link').href as string | undefined
-  const url = window.prompt('URL du lien (vide pour retirer)', previous ?? '')
-  if (url === null) return
-  if (url === '') {
-    editor.value.chain().focus().extendMarkRange('link').unsetLink().run()
-    return
-  }
-  editor.value.chain().focus().extendMarkRange('link').setLink({ href: url }).run()
-}
-
-type ColorSwatch = { label: string; value: string }
-
-const textColorSwatches: ColorSwatch[] = [
-  { label: 'Rouge', value: '#bf2600' },
-  { label: 'Orange', value: '#ff8b00' },
-  { label: 'Jaune', value: '#ffc400' },
-  { label: 'Vert', value: '#00875a' },
-  { label: 'Turquoise', value: '#00a3bf' },
-  { label: 'Bleu', value: '#0747a6' },
-  { label: 'Violet', value: '#5243aa' },
-  { label: 'Gris', value: '#42526e' },
-]
-
-const highlightSwatches: ColorSwatch[] = [
-  { label: 'Rouge', value: '#fdd0c8' },
-  { label: 'Orange', value: '#ffe2c2' },
-  { label: 'Jaune', value: '#fff0b3' },
-  { label: 'Vert', value: '#c6edd0' },
-  { label: 'Turquoise', value: '#c1ecf0' },
-  { label: 'Bleu', value: '#cce0ff' },
-  { label: 'Violet', value: '#dfd8fa' },
-  { label: 'Gris', value: '#dfe1e6' },
-]
-
-const colorPickerOpen = ref(false)
-const highlightPickerOpen = ref(false)
-
-const closePickers = () => {
-  colorPickerOpen.value = false
-  highlightPickerOpen.value = false
-}
-
-const toggleColorPicker = () => {
-  highlightPickerOpen.value = false
-  colorPickerOpen.value = !colorPickerOpen.value
-}
-
-const toggleHighlightPicker = () => {
-  colorPickerOpen.value = false
-  highlightPickerOpen.value = !highlightPickerOpen.value
-}
-
-const applyTextColor = (value: string | null) => {
-  if (!editor.value) return
-  if (value === null) {
-    editor.value.chain().focus().unsetColor().run()
-  } else {
-    editor.value.chain().focus().setColor(value).run()
-  }
-  colorPickerOpen.value = false
-}
-
-const applyHighlight = (value: string | null) => {
-  if (!editor.value) return
-  if (value === null) {
-    editor.value.chain().focus().unsetHighlight().run()
-  } else {
-    editor.value.chain().focus().setHighlight({ color: value }).run()
-  }
-  highlightPickerOpen.value = false
-}
-
-const currentTextColor = computed(() => {
-  const attrs = editor.value?.getAttributes('textStyle') as { color?: string } | undefined
-  return attrs?.color ?? null
-})
-
-const currentHighlightColor = computed(() => {
-  const attrs = editor.value?.getAttributes('highlight') as { color?: string } | undefined
-  return attrs?.color ?? null
-})
-
-const toolbarButtons = computed(() => {
-  const e = editor.value
-  return [
-    { key: 'bold', icon: 'mdi:format-bold', title: 'Gras', isActive: () => !!e?.isActive('bold'), action: () => e?.chain().focus().toggleBold().run() },
-    { key: 'italic', icon: 'mdi:format-italic', title: 'Italique', isActive: () => !!e?.isActive('italic'), action: () => e?.chain().focus().toggleItalic().run() },
-    { key: 'strike', icon: 'mdi:format-strikethrough', title: 'Barré', isActive: () => !!e?.isActive('strike'), action: () => e?.chain().focus().toggleStrike().run() },
-    { key: 'h2', icon: 'mdi:format-header-2', title: 'Titre H2', isActive: () => !!e?.isActive('heading', { level: 2 }), action: () => e?.chain().focus().toggleHeading({ level: 2 }).run() },
-    { key: 'h3', icon: 'mdi:format-header-3', title: 'Titre H3', isActive: () => !!e?.isActive('heading', { level: 3 }), action: () => e?.chain().focus().toggleHeading({ level: 3 }).run() },
-    { key: 'bulletList', icon: 'mdi:format-list-bulleted', title: 'Liste à puces', isActive: () => !!e?.isActive('bulletList'), action: () => e?.chain().focus().toggleBulletList().run() },
-    { key: 'orderedList', icon: 'mdi:format-list-numbered', title: 'Liste numérotée', isActive: () => !!e?.isActive('orderedList'), action: () => e?.chain().focus().toggleOrderedList().run() },
-    { key: 'blockquote', icon: 'mdi:format-quote-close', title: 'Citation', isActive: () => !!e?.isActive('blockquote'), action: () => e?.chain().focus().toggleBlockquote().run() },
-    { key: 'code', icon: 'mdi:code-tags', title: 'Code inline', isActive: () => !!e?.isActive('code'), action: () => e?.chain().focus().toggleCode().run() },
-    { key: 'codeBlock', icon: 'mdi:code-braces-box', title: 'Bloc de code', isActive: () => !!e?.isActive('codeBlock'), action: () => e?.chain().focus().toggleCodeBlock().run() },
-    { key: 'link', icon: 'mdi:link-variant', title: 'Lien', isActive: () => !!e?.isActive('link'), action: promptForLink },
-  ]
-})
-
-const getCurrentValue = (): string => {
-  if (!editor.value) return ''
-  if (props.outputFormat === 'html') return editor.value.getHTML()
-  const storage = (editor.value.storage as unknown as Record<string, { getMarkdown?: () => string } | undefined>).markdown
-  return storage?.getMarkdown ? storage.getMarkdown() : editor.value.getHTML()
-}
-
-const handleDocumentMousedown = (event: MouseEvent) => {
-  if (!colorPickerOpen.value && !highlightPickerOpen.value) return
-  const target = event.target as Node | null
-  if (!target) return
-  const popovers = document.querySelectorAll(`#${editorId.value} [role="dialog"]`)
-  const triggers = document.querySelectorAll(`#${editorId.value} [aria-expanded]`)
-  for (const node of [...popovers, ...triggers]) {
-    if (node.contains(target)) return
-  }
-  closePickers()
-}
-
-const handleDocumentKeydown = (event: KeyboardEvent) => {
-  if (event.key === 'Escape' && (colorPickerOpen.value || highlightPickerOpen.value)) {
-    closePickers()
-  }
-}
-
-onMounted(() => {
-  document.addEventListener('mousedown', handleDocumentMousedown)
-  document.addEventListener('keydown', handleDocumentKeydown)
-
-  editor.value = new Editor({
-    content: normalizeEditorInput(props.modelValue),
-    editable: props.editable && !props.disabled && !props.readonly,
-    extensions: [
-      StarterKit.configure({
-        heading: { levels: [2, 3] },
-        link: {
-          openOnClick: false,
-          autolink: true,
-          HTMLAttributes: { rel: 'noopener noreferrer nofollow', target: '_blank' },
-        },
-      }),
-      TextStyle,
-      Color.configure({ types: ['textStyle'] }),
-      Highlight.configure({ multicolor: true }),
-      Placeholder.configure({
-        placeholder: props.placeholder,
-      }),
-      Markdown.configure({
-        html: true,
-        tightLists: true,
-        bulletListMarker: '-',
-        linkify: true,
-        breaks: false,
-        transformPastedText: true,
-        transformCopiedText: true,
-      }),
-    ],
-    editorProps: {
-      attributes: {
-        class: 'prose prose-sm max-w-none w-full p-3 focus:outline-none prose-headings:font-semibold prose-a:text-m-primary prose-code:rounded prose-code:bg-m-bg prose-code:px-1.5 prose-code:py-0.5 prose-code:before:content-none prose-code:after:content-none prose-pre:bg-m-text prose-pre:text-white',
-      },
-    },
-    onUpdate: () => {
-      emit('update:modelValue', getCurrentValue())
-    },
-    onFocus: () => {
-      isFocused.value = true
-    },
-    onBlur: () => {
-      isFocused.value = false
-    },
-  })
-})
-
-onBeforeUnmount(() => {
-  document.removeEventListener('mousedown', handleDocumentMousedown)
-  document.removeEventListener('keydown', handleDocumentKeydown)
-  editor.value?.destroy()
-})
-
-watch(() => props.modelValue, (incoming) => {
-  if (!editor.value) return
-  if ((incoming ?? '') === getCurrentValue()) return
-  editor.value.commands.setContent(normalizeEditorInput(incoming), { emitUpdate: false })
-})
-
-watch(() => [props.editable, props.disabled, props.readonly], () => {
-  editor.value?.setEditable(props.editable && !props.disabled && !props.readonly)
-})
-</script>
- 
-<style scoped>
-.malio-rich-text :deep(.ProseMirror) {
-  outline: none;
-  flex: 1 1 auto;
-  min-width: 0;
-}
-.malio-rich-text :deep(.ProseMirror > *:first-child) {
-  margin-top: 0;
-}
-.malio-rich-text :deep(.ProseMirror > *:last-child) {
-  margin-bottom: 0;
-}
-.malio-rich-text :deep(.ProseMirror p.is-editor-empty:first-child::before) {
-  content: attr(data-placeholder);
-  float: left;
-  color: rgb(var(--m-muted));
-  pointer-events: none;
-  height: 0;
-}
-.malio-rich-text :deep(h2) {
-  margin: 0.75rem 0 0.5rem;
-  font-size: 1.5rem;
-  line-height: 2rem;
-  font-weight: 700;
-  color: rgb(var(--m-text));
-}
-.malio-rich-text :deep(h3) {
-  margin: 0.65rem 0 0.4rem;
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-  font-weight: 700;
-  color: rgb(var(--m-text));
-}
-.malio-rich-text :deep(p) {
-  margin: 0.45rem 0;
-}
-.malio-rich-text :deep(ul),
-.malio-rich-text :deep(ol) {
-  margin: 0.5rem 0;
-  padding-left: 1.5rem;
-}
-.malio-rich-text :deep(ul) {
-  list-style: disc;
-}
-.malio-rich-text :deep(ol) {
-  list-style: decimal;
-}
-.malio-rich-text :deep(blockquote) {
-  margin: 0.75rem 0;
-  border-left: 3px solid rgb(var(--m-border));
-  padding-left: 0.75rem;
-  color: rgb(var(--m-muted));
-}
-</style>

app/story/input/inputRichText.story.vue

@@ -1,221 +0,0 @@
-<template>
-  <Story title="Input/RichText">
-    <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
-      <div class="rounded-lg border p-4">
-        <h2 class="mb-4 text-xl font-bold">Simple</h2>
-        <MalioInputRichText
-          v-model="simpleValue"
-          label="Note"
-          placeholder="Écrire ici…"
-        />
-      </div>
-
-      <div class="rounded-lg border p-4">
-        <h2 class="mb-4 text-xl font-bold">Avec contenu initial + hint</h2>
-        <MalioInputRichText
-          v-model="hintValue"
-          label="Description"
-          hint="Mise en forme via la barre d'outils"
-        />
-      </div>
-
-      <div class="rounded-lg border p-4">
-        <h2 class="mb-4 text-xl font-bold">Erreur</h2>
-        <MalioInputRichText
-          v-model="errorValue"
-          label="Compte-rendu"
-          error="Le compte-rendu doit faire au moins 20 caractères"
-        />
-      </div>
-
-      <div class="rounded-lg border p-4">
-        <h2 class="mb-4 text-xl font-bold">Succès</h2>
-        <MalioInputRichText
-          v-model="successValue"
-          label="Compte-rendu"
-          success="Compte-rendu validé"
-        />
-      </div>
-
-      <div class="rounded-lg border p-4">
-        <h2 class="mb-4 text-xl font-bold">Désactivé</h2>
-        <MalioInputRichText
-          v-model="disabledValue"
-          label="Note"
-          disabled
-        />
-      </div>
-
-      <div class="rounded-lg border p-4">
-        <h2 class="mb-4 text-xl font-bold">Readonly</h2>
-        <MalioInputRichText
-          v-model="readonlyValue"
-          label="Note"
-          readonly
-        />
-      </div>
-
-      <div class="rounded-lg border p-4 lg:col-span-2">
-        <h2 class="mb-4 text-xl font-bold">Affichage seul (editable=false)</h2>
-        <MalioInputRichText
-          :model-value="readonlyValue"
-          :editable="false"
-        />
-      </div>
-
-      <div class="rounded-lg border p-4 lg:col-span-2">
-        <h2 class="mb-4 text-xl font-bold">Sortie HTML</h2>
-        <MalioInputRichText
-          v-model="htmlValue"
-          label="Article"
-          output-format="html"
-          min-height="200px"
-        />
-      </div>
-
-      <div class="rounded-lg border p-4 lg:col-span-2">
-        <h2 class="mb-4 text-xl font-bold">Couleurs &amp; surlignage</h2>
-        <MalioInputRichText
-          v-model="colorValue"
-          label="Note colorée"
-          output-format="html"
-          min-height="180px"
-          hint="Tester les boutons couleur du texte et surlignage (palettes Jira-like)"
-        />
-      </div>
-    </div>
-  </Story>
-</template>
-
-<docs lang="md">
-# 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`).
-
-</docs>
-
-<script setup lang="ts">
-import {ref} from 'vue'
-import MalioInputRichText from '../../components/malio/input/InputRichText.vue'
-
-const simpleValue = ref('')
-const hintValue = ref('## Titre\n\nUn paragraphe avec du **gras**, de l\'*italique* et un [lien](https://malio.fr).')
-const errorValue = ref('Trop court')
-const successValue = ref('Tout est bon de mon côté.')
-const disabledValue = ref('Contenu indisponible.')
-const readonlyValue = ref('## Compte-rendu\n\n- Point 1\n- Point 2\n\n> Citation importante')
-const htmlValue = ref('<p>Contenu <strong>riche</strong>.</p>')
-const colorValue = ref('<p>Sélectionner du texte puis utiliser les boutons <span style="color: #bf2600">couleur</span> ou <mark data-color="#fff0b3" style="background-color: #fff0b3">surlignage</mark>.</p>')
-</script>

histoire.config.ts

@@ -12,7 +12,6 @@ export default defineConfig({
     resolve: {
       alias: {
         '@': path.resolve(__dirname, './'),
-        'tiptap-markdown': path.resolve(__dirname, 'node_modules/tiptap-markdown/dist/tiptap-markdown.es.js'),
       },
     },
     css: {
@@ -20,17 +19,6 @@ export default defineConfig({
         plugins: [tailwindcss(), autoprefixer()],
       },
     },
-    ssr: {
-      noExternal: ['tiptap-markdown', /^@tiptap\//],
-    },
-    optimizeDeps: {
-      include: [
-        'tiptap-markdown',
-        '@tiptap/vue-3',
-        '@tiptap/starter-kit',
-        '@tiptap/extension-placeholder',
-      ],
-    },
   },
   plugins: [HstVue()],
 })

package.json

@@ -42,15 +42,7 @@
   "dependencies": {
     "@nuxt/icon": "^2.2.1",
     "@nuxtjs/tailwindcss": "^6.14.0",
-    "@tiptap/extension-color": "^3.22.5",
-    "@tiptap/extension-highlight": "^3.22.5",
-    "@tiptap/extension-placeholder": "^3.22.5",
-    "@tiptap/extension-text-style": "^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",
+    "tailwind-merge": "^3.3.1"
-    "tiptap-markdown": "^0.9.0"
   }
 }