MALIO-DEV/malio-layer-ui
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(input-rich-text) : couleurs de texte et surlignage façon Jira

Browse Source 
Ajoute deux boutons à la toolbar avec popover en palette pour
appliquer une couleur de texte ou un surlignage sur la sélection.

- Extensions TipTap : @tiptap/extension-text-style,
  @tiptap/extension-color, @tiptap/extension-highlight (multicolor).
- Palette de 8 couleurs (texte) + 8 pastels (surlignage) + reset.
- Indicateur de couleur active sous l'icône.
- Fermeture du popover sur clic extérieur, Echap, ou clic dans
  l'éditeur.
- Inclut les améliorations rendu/markdown du commit précédent
  (default outputFormat html, normalizeEditorInput, styles deep
  pour h2/h3/p/ul/ol/blockquote).
- Tests : 4 nouveaux cas (15 au total).
- Story et COMPONENTS.md à jour.

Note : les couleurs ne sont pas sérialisables en markdown ; pour
les conserver au save/reload utiliser output-format=\"html\".

Co-Authored-By: RuFlo <ruv@ruv.net>
This commit is contained in:
THOLOT DECHENE Matthieu
2026-05-04 19:54:34 +02:00
parent a3421c02e9
commit ea92acff3a
6 changed files with 361 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
app/components/malio/input/InputRichText.test.ts
View File

@@ -61,10 +61,42 @@ describe('MalioInputRichText', () => {
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**'})

264
app/components/malio/input/InputRichText.vue
View File

@@ -46,6 +46,110 @@
<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"
@@ -97,11 +201,14 @@
</template>
<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, shallowRef, useId, watch } from 'vue'
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'
@@ -139,7 +246,7 @@ const props = withDefaults(
hint: '',
error: '',
success: '',
outputFormat: 'markdown',
outputFormat: 'html',
groupClass: '',
labelClass: '',
editorClass: '',
@@ -207,9 +314,18 @@ const mergedReadonlyClass = computed(() =>
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
@@ -222,6 +338,78 @@ const promptForLink = () => {
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 [
@@ -242,13 +430,34 @@ const toolbarButtons = computed(() => {
const getCurrentValue = (): string => {
if (!editor.value) return ''
if (props.outputFormat === 'html') return editor.value.getHTML()
const storage = editor.value.storage.markdown as { getMarkdown: () => string } | undefined
return storage ? storage.getMarkdown() : 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: props.modelValue ?? '',
content: normalizeEditorInput(props.modelValue),
editable: props.editable && !props.disabled && !props.readonly,
extensions: [
StarterKit.configure({
@@ -259,11 +468,14 @@ onMounted(() => {
HTMLAttributes: { rel: 'noopener noreferrer nofollow', target: '_blank' },
},
}),
TextStyle,
Color.configure({ types: ['textStyle'] }),
Highlight.configure({ multicolor: true }),
Placeholder.configure({
placeholder: props.placeholder,
}),
Markdown.configure({
html: false,
html: true,
tightLists: true,
bulletListMarker: '-',
linkify: true,
@@ -290,20 +502,22 @@ onMounted(() => {
})
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(incoming ?? '', { emitUpdate: false })
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;
@@ -323,4 +537,38 @@ watch(() => [props.editable, props.disabled, props.readonly], () => {
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>