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

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>

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

@@ -0,0 +1,133 @@
+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="Annuler"]').exists()).toBe(true)
+    expect(wrapper.find('button[title="Rétablir"]').exists()).toBe(true)
+  })
+
+  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.')
+  })
+})