Mirrors/elk
1
0
Fork 1
mirror of https://github.com/elk-zone/elk.git synced 2024-07-05 14:06:48 +01:00
Code Issues Wiki Activity

feat: add bold and italic buttons to editor (#1469)

Browse source
This commit is contained in:
victordelva 2023-02-05 17:11:09 +01:00 committed by GitHub
parent 7380e243c4
commit b7a3e93097
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 61 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
components/publish/PublishEditorTools.vue Normal file
View file

@ -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>

13
components/publish/PublishWidget.vue
View file

@ -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 />

5
locales/en.json
View file

@ -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",

5
locales/es.json
View file

@ -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",