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

components/publish/PublishEditorTools.vue

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

components/publish/PublishWidget.vue

@@ -268,18 +268,7 @@ defineExpose({
           </button>
         </CommonTooltip>
 
-        <template v-if="editor">
+        <PublishEditorTools v-if="editor" :editor="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>
 
         <div flex-auto />
 

locales/en.json

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

locales/es.json

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