feat: add bold and italic buttons to editor (#1469)
parent
7380e243c4
commit
b7a3e93097
|
@ -0,0 +1,52 @@
|
|||
<script setup lang="ts">
|
||||
import type { Editor } from '@tiptap/core'
|
||||
const { editor } = defineProps<{
|
||||
editor: Editor
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CommonTooltip placement="top" :content="$t('tooltip.open_editor_tools')">
|
||||
<VDropdown v-if="editor" placement="top">
|
||||
<button
|
||||
btn-action-icon
|
||||
>
|
||||
<div i-ri:font-size-2 />
|
||||
</button>
|
||||
<template #popper>
|
||||
<div flex gap-1>
|
||||
<CommonTooltip placement="top" :content="$t('tooltip.toggle_code_block')">
|
||||
<button
|
||||
btn-action-icon
|
||||
:aria-label="$t('tooltip.toggle_code_block')"
|
||||
:class="editor.isActive('codeBlock') ? 'text-primary' : ''"
|
||||
@click="editor?.chain().focus().toggleCodeBlock().run()"
|
||||
>
|
||||
<div i-ri:code-s-slash-line />
|
||||
</button>
|
||||
</CommonTooltip>
|
||||
<CommonTooltip placement="top" :content="$t('tooltip.toggle_bold')">
|
||||
<button
|
||||
btn-action-icon
|
||||
:aria-label="$t('tooltip.toggle_bold')"
|
||||
:class="editor.isActive('bold') ? 'text-primary' : ''"
|
||||
@click="editor?.chain().focus().toggleBold().run()"
|
||||
>
|
||||
<div i-ri:bold />
|
||||
</button>
|
||||
</CommonTooltip>
|
||||
<CommonTooltip placement="top" :content="$t('tooltip.toggle_italic')">
|
||||
<button
|
||||
btn-action-icon
|
||||
:aria-label="$t('tooltip.toggle_italic')"
|
||||
:class="editor.isActive('italic') ? 'text-primary' : ''"
|
||||
@click="editor?.chain().focus().toggleItalic().run()"
|
||||
>
|
||||
<div i-ri:italic />
|
||||
</button>
|
||||
</CommonTooltip>
|
||||
</div>
|
||||
</template>
|
||||
</VDropdown>
|
||||
</CommonTooltip>
|
||||
</template>
|
|
@ -268,18 +268,7 @@ defineExpose({
|
|||
</button>
|
||||
</CommonTooltip>
|
||||
|
||||
<template v-if="editor">
|
||||
<CommonTooltip placement="top" :content="$t('tooltip.toggle_code_block')">
|
||||
<button
|
||||
btn-action-icon
|
||||
:aria-label="$t('tooltip.toggle_code_block')"
|
||||
:class="editor.isActive('codeBlock') ? 'text-primary' : ''"
|
||||
@click="editor?.chain().focus().toggleCodeBlock().run()"
|
||||
>
|
||||
<div i-ri:code-s-slash-line />
|
||||
</button>
|
||||
</CommonTooltip>
|
||||
</template>
|
||||
<PublishEditorTools v-if="editor" :editor="editor" />
|
||||
|
||||
<div flex-auto />
|
||||
|
||||
|
|
|
@ -557,8 +557,11 @@
|
|||
"explore_links_intro": "These news stories are being talked about by people on this and other servers of the decentralized network right now.",
|
||||
"explore_posts_intro": "These posts from this and other servers in the decentralized network are gaining traction on this server right now.",
|
||||
"explore_tags_intro": "These hashtags are gaining traction among people on this and other servers of the decentralized network right now.",
|
||||
"open_editor_tools": "Editor tools",
|
||||
"publish_failed": "Close failed messages at the top of editor to republish posts",
|
||||
"toggle_code_block": "Toggle code block"
|
||||
"toggle_bold": "Toggle bold",
|
||||
"toggle_code_block": "Toggle code block",
|
||||
"toggle_italic": "Toggle italic"
|
||||
},
|
||||
"user": {
|
||||
"add_existing": "Add an existing account",
|
||||
|
|
|
@ -550,8 +550,11 @@
|
|||
"explore_links_intro": "Estas noticias están siendo comentadas ahora mismo por los usuarios de este y otros servidores de la red descentralizada.",
|
||||
"explore_posts_intro": "Estos mensajes de este y otros servidores de la red descentralizada están siendo tendencia ahora mismo en este servidor.",
|
||||
"explore_tags_intro": "Estas etiquetas están siendo tendencia ahora mismo entre los usuarios de este y otros servidores de la red descentralizada.",
|
||||
"open_editor_tools": "Herramientas de edición",
|
||||
"publish_failed": "Cierra los mensajes fallidos en la parte superior del editor para volver a publicar",
|
||||
"toggle_code_block": "Cambiar a bloque de código"
|
||||
"toggle_bold": "Cambiar a negrita",
|
||||
"toggle_code_block": "Cambiar a bloque de código",
|
||||
"toggle_italic": "Cambiar a cursiva"
|
||||
},
|
||||
"user": {
|
||||
"add_existing": "Agregar una cuenta existente",
|
||||
|
|
Loading…
Reference in New Issue