Joururi/leim-tools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added tooltip on rich text

Browse Source
This commit is contained in:
Alexis
2025-08-09 18:55:55 +02:00
parent 396215bb91
commit cebcb50903
2 changed files with 198 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

253
app/components/global/input/Editor.vue
View File

@@ -33,96 +33,195 @@ function clearFormatting() {
<div class="flex gap-1.5"> <div class="flex gap-1.5">
<!-- Inline styles --> <!-- Inline styles -->
<div class="flex" v-if="!props.disableInlines"> <div class="flex" v-if="!props.disableInlines">
<UiButton <UiTooltipProvider :delay-duration="250">
@click.prevent="editor.chain().focus().toggleBold().run()" <UiTooltip>
:disabled="!editor.can().chain().focus().toggleBold().run()" <UiTooltipTrigger as-child>
:variant="editor.isActive('bold') ? 'default' : 'secondary'" <UiButton
class="size-7 rounded-e-none" @click.prevent="editor.chain().focus().toggleBold().run()"
size="icon" :disabled="!editor.can().chain().focus().toggleBold().run()"
> :variant="editor.isActive('bold') ? 'default' : 'secondary'"
<PhTextB weight="bold" /> class="size-7 rounded-e-none"
</UiButton> size="icon"
>
<PhTextB weight="bold" />
</UiButton>
</UiTooltipTrigger>
<UiTooltipContent>
<p>
{{ $t('editor.bold') }}
</p>
</UiTooltipContent>
</UiTooltip>
</UiTooltipProvider>
<UiButton <UiTooltipProvider :delay-duration="250">
@click.prevent="editor.chain().focus().toggleItalic().run()" <UiTooltip>
:disabled="!editor.can().chain().focus().toggleItalic().run()" <UiTooltipTrigger as-child>
:variant="editor.isActive('italic') ? 'default' : 'secondary'" <UiButton
class="size-7 rounded-none" @click.prevent="editor.chain().focus().toggleItalic().run()"
size="icon" :disabled="!editor.can().chain().focus().toggleItalic().run()"
> :variant="editor.isActive('italic') ? 'default' : 'secondary'"
<PhTextItalic weight="bold" /> class="size-7 rounded-none"
</UiButton> size="icon"
>
<PhTextItalic weight="bold" />
</UiButton>
</UiTooltipTrigger>
<UiTooltipContent>
<p>
{{ $t('editor.italic') }}
</p>
</UiTooltipContent>
</UiTooltip>
</UiTooltipProvider>
<UiButton <UiTooltipProvider :delay-duration="250">
@click.prevent="editor.chain().focus().toggleStrike().run()" <UiTooltip>
:disabled="!editor.can().chain().focus().toggleStrike().run()" <UiTooltipTrigger as-child>
:variant="editor.isActive('strike') ? 'default' : 'secondary'" <UiButton
class="size-7 rounded-s-none" @click.prevent="editor.chain().focus().toggleStrike().run()"
size="icon" :disabled="!editor.can().chain().focus().toggleStrike().run()"
> :variant="editor.isActive('strike') ? 'default' : 'secondary'"
<PhTextStrikethrough weight="bold" /> class="size-7 rounded-s-none"
</UiButton> size="icon"
>
<PhTextStrikethrough weight="bold" />
</UiButton>
</UiTooltipTrigger>
<UiTooltipContent>
<p>
{{ $t('editor.strike') }}
</p>
</UiTooltipContent>
</UiTooltip>
</UiTooltipProvider>
</div> </div>
<!-- Block styles --> <!-- Block styles -->
<div class="flex" v-if="!props.disableBlocks"> <div class="flex" v-if="!props.disableBlocks">
<UiButton <UiTooltipProvider :delay-duration="250">
@click.prevent="editor.chain().focus().toggleBulletList().run()" <UiTooltip>
:variant="editor.isActive('bulletList') ? 'default' : 'secondary'" <UiTooltipTrigger as-child>
class="size-7 rounded-e-none" <UiButton
size="icon" @click.prevent="editor.chain().focus().toggleBulletList().run()"
> :variant="editor.isActive('bulletList') ? 'default' : 'secondary'"
<PhListBullets weight="bold" /> class="size-7 rounded-e-none"
</UiButton> size="icon"
>
<PhListBullets weight="bold" />
</UiButton>
</UiTooltipTrigger>
<UiTooltipContent>
<p>
{{ $t('editor.ulist') }}
</p>
</UiTooltipContent>
</UiTooltip>
</UiTooltipProvider>
<UiButton <UiTooltipProvider :delay-duration="250">
@click.prevent="editor.chain().focus().toggleOrderedList().run()" <UiTooltip>
:variant="editor.isActive('orderedList') ? 'default' : 'secondary'" <UiTooltipTrigger as-child>
class="size-7 rounded-none" <UiButton
size="icon" @click.prevent="editor.chain().focus().toggleOrderedList().run()"
> :variant="editor.isActive('orderedList') ? 'default' : 'secondary'"
<PhListNumbers weight="bold" /> class="size-7 rounded-none"
</UiButton> size="icon"
>
<PhListNumbers weight="bold" />
</UiButton>
</UiTooltipTrigger>
<UiTooltipContent>
<p>
{{ $t('editor.olist') }}
</p>
</UiTooltipContent>
</UiTooltip>
</UiTooltipProvider>
<UiButton <UiTooltipProvider :delay-duration="250">
@click.prevent="editor.chain().focus().toggleBlockquote().run()" <UiTooltip>
:variant="editor.isActive('blockquote') ? 'default' : 'secondary'" <UiTooltipTrigger as-child>
class="size-7 rounded-s-none" <UiButton
size="icon" @click.prevent="editor.chain().focus().toggleBlockquote().run()"
> :variant="editor.isActive('blockquote') ? 'default' : 'secondary'"
<PhQuotes weight="fill" /> class="size-7 rounded-s-none"
</UiButton> size="icon"
>
<PhQuotes weight="fill" />
</UiButton>
</UiTooltipTrigger>
<UiTooltipContent>
<p>
{{ $t('editor.quote') }}
</p>
</UiTooltipContent>
</UiTooltip>
</UiTooltipProvider>
</div> </div>
<div class="flex"> <div class="flex">
<UiButton <UiTooltipProvider :delay-duration="250">
@click.prevent="clearFormatting" <UiTooltip>
variant="secondary" <UiTooltipTrigger as-child>
class="size-7 rounded-e-none" <UiButton
size="icon" @click.prevent="clearFormatting"
> variant="secondary"
<PhTextTSlash weight="bold" /> class="size-7 rounded-e-none"
</UiButton> size="icon"
>
<PhTextTSlash weight="bold" />
</UiButton>
</UiTooltipTrigger>
<UiTooltipContent>
<p>
{{ $t('editor.noFormat') }}
</p>
</UiTooltipContent>
</UiTooltip>
</UiTooltipProvider>
<UiButton <UiTooltipProvider :delay-duration="250">
@click.prevent="editor.chain().focus().undo().run()" <UiTooltip>
:disabled="!editor.can().chain().focus().undo().run()" <UiTooltipTrigger as-child>
variant="secondary" <UiButton
class="size-7 rounded-none" @click.prevent="editor.chain().focus().undo().run()"
size="icon" :disabled="!editor.can().chain().focus().undo().run()"
> variant="secondary"
<PhArrowUUpLeft weight="bold" /> class="size-7 rounded-none"
</UiButton> size="icon"
>
<PhArrowUUpLeft weight="bold" />
</UiButton>
</UiTooltipTrigger>
<UiTooltipContent>
<p>
{{ $t('editor.undo') }}
</p>
</UiTooltipContent>
</UiTooltip>
</UiTooltipProvider>
<UiButton <UiTooltipProvider :delay-duration="250">
@click.prevent="editor.chain().focus().redo().run()" <UiTooltip>
:disabled="!editor.can().chain().focus().redo().run()" <UiTooltipTrigger as-child>
variant="secondary" <UiButton
class="size-7 rounded-s-none" @click.prevent="editor.chain().focus().redo().run()"
size="icon" :disabled="!editor.can().chain().focus().redo().run()"
> variant="secondary"
<PhArrowUDownRight weight="bold" /> class="size-7 rounded-s-none"
</UiButton> size="icon"
>
<PhArrowUDownRight weight="bold" />
</UiButton>
</UiTooltipTrigger>
<UiTooltipContent>
<p>
{{ $t('editor.redo') }}
</p>
</UiTooltipContent>
</UiTooltip>
</UiTooltipProvider>
</div> </div>
</div> </div>

22
i18n/i18n.config.ts
View File

@@ -86,6 +86,17 @@ export default defineI18nConfig(() => ({
createdAt: "Created {createdAt}", createdAt: "Created {createdAt}",
updatedAt: "Last updated {updatedAt}", updatedAt: "Last updated {updatedAt}",
}, },
editor: {
bold: "Bold",
italic: "Italic",
strike: "Strikethrough",
ulist: "Bullet list",
olist: "Numbered list",
quote: "Quote",
noFormat: "Remove formatting",
undo: "Undo",
redo: "Redo"
},
entity: { entity: {
category: { category: {
nameSingular: "Category", nameSingular: "Category",
@@ -421,6 +432,17 @@ export default defineI18nConfig(() => ({
createdAt: "Créé le {createdAt}", createdAt: "Créé le {createdAt}",
updatedAt: "Dernière modification le {updatedAt}", updatedAt: "Dernière modification le {updatedAt}",
}, },
editor: {
bold: "Gras",
italic: "Italique",
strike: "Barré",
ulist: "Liste à puces",
olist: "Liste numerotée",
quote: "Citation",
noFormat: "Effacer le formattage",
undo: "Annuler",
redo: "Rétablir"
},
entity: { entity: {
category: { category: {
nameSingular: "Catégorie", nameSingular: "Catégorie",