From 76d31c84ad6ea8f27e724c56f2043ae448b7ac6d Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 21 Oct 2023 17:48:35 +0200
Subject: [PATCH] feat(editor): add tooltips for everything

---
 src/components/input/editor/EditorToolbar.vue | 116 +++++-------------
 src/components/input/editor/TipTap.vue        |  12 +-
 src/i18n/lang/en.json                         |   8 +-
 3 files changed, 45 insertions(+), 91 deletions(-)

diff --git a/src/components/input/editor/EditorToolbar.vue b/src/components/input/editor/EditorToolbar.vue
index 8a676c09bf..2d8fe6a8c9 100644
--- a/src/components/input/editor/EditorToolbar.vue
+++ b/src/components/input/editor/EditorToolbar.vue
@@ -5,7 +5,7 @@
 				class="editor-toolbar__button"
 				@click="editor.chain().focus().toggleHeading({ level: 1 }).run()"
 				:class="{ 'is-active': editor.isActive('heading', { level: 1 }) }"
-				title="h1"
+				v-tooltip="$t('input.editor.heading1')"
 			>
 				<span class="icon"> <icon :icon="['fa', 'fa-header']"/> </span>1
 			</BaseButton>
@@ -13,7 +13,7 @@
 				class="editor-toolbar__button"
 				@click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
 				:class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
-				title="h2"
+				v-tooltip="$t('input.editor.heading2')"
 			>
 				<span class="icon"> <icon :icon="['fa', 'fa-header']"/> </span>2
 			</BaseButton>
@@ -21,34 +21,10 @@
 				class="editor-toolbar__button"
 				@click="editor.chain().focus().toggleHeading({ level: 3 }).run()"
 				:class="{ 'is-active': editor.isActive('heading', { level: 3 }) }"
-				title="h3"
+				v-tooltip="$t('input.editor.heading3')"
 			>
 				<span class="icon"> <icon :icon="['fa', 'fa-header']"/> </span>3
 			</BaseButton>
-			<BaseButton
-				class="editor-toolbar__button"
-				@click="editor.chain().focus().toggleHeading({ level: 4 }).run()"
-				:class="{ 'is-active': editor.isActive('heading', { level: 4 }) }"
-				title="h4"
-			>
-				<span class="icon"> <icon :icon="['fa', 'fa-header']"/> </span>4
-			</BaseButton>
-			<BaseButton
-				class="editor-toolbar__button"
-				@click="editor.chain().focus().toggleHeading({ level: 5 }).run()"
-				:class="{ 'is-active': editor.isActive('heading', { level: 5 }) }"
-				title="h5"
-			>
-				<span class="icon"> <icon :icon="['fa', 'fa-header']"/> </span>5
-			</BaseButton>
-			<BaseButton
-				class="editor-toolbar__button"
-				@click="editor.chain().focus().toggleHeading({ level: 6 }).run()"
-				:class="{ 'is-active': editor.isActive('heading', { level: 6 }) }"
-				title="h6"
-			>
-				<span class="icon"> <icon :icon="['fa', 'fa-header']"/> </span>6
-			</BaseButton>
 		</div>
 
 		<div class="editor-toolbar__segment">
@@ -56,7 +32,7 @@
 				class="editor-toolbar__button"
 				@click="editor.chain().focus().toggleBold().run()"
 				:class="{ 'is-active': editor.isActive('bold') }"
-				title="bold"
+				v-tooltip="$t('input.editor.bold')"
 			>
 				<span class="icon">
 					<icon :icon="['fa', 'fa-bold']"/>
@@ -66,17 +42,27 @@
 				class="editor-toolbar__button"
 				@click="editor.chain().focus().toggleItalic().run()"
 				:class="{ 'is-active': editor.isActive('italic') }"
-				title="italic"
+				v-tooltip="$t('input.editor.italic')"
 			>
 				<span class="icon">
 					<icon :icon="['fa', 'fa-italic']"/>
 				</span>
 			</BaseButton>
+			<BaseButton
+				class="editor-toolbar__button"
+				@click="editor.chain().focus().toggleUnderline().run()"
+				:class="{ 'is-active': editor.isActive('underline') }"
+				v-tooltip="$t('input.editor.underline')"
+			>
+				<span class="icon">
+					<icon :icon="['fa', 'fa-underline']"/>
+				</span>
+			</BaseButton>
 			<BaseButton
 				class="editor-toolbar__button"
 				@click="editor.chain().focus().toggleStrike().run()"
 				:class="{ 'is-active': editor.isActive('strike') }"
-				title="strike"
+				v-tooltip="$t('input.editor.strikethrough')"
 			>
 				<span class="icon">
 					<icon :icon="['fa', 'fa-strikethrough']"/>
@@ -85,21 +71,11 @@
 		</div>
 
 		<div class="editor-toolbar__segment">
-			<BaseButton
-				class="editor-toolbar__button"
-				@click="editor.chain().focus().toggleCode().run()"
-				:class="{ 'is-active': editor.isActive('code') }"
-				title="code"
-			>
-				<span class="icon">
-					<icon :icon="['fa', 'fa-code']"/>
-				</span>
-			</BaseButton>
 			<BaseButton
 				class="editor-toolbar__button"
 				@click="editor.chain().focus().toggleCodeBlock().run()"
 				:class="{ 'is-active': editor.isActive('codeBlock') }"
-				title="code block"
+				v-tooltip="$t('input.editor.code')"
 			>
 				<span class="icon">
 					<icon :icon="['fa', 'fa-code']"/>
@@ -109,7 +85,7 @@
 				class="editor-toolbar__button"
 				@click="editor.chain().focus().toggleBlockquote().run()"
 				:class="{ 'is-active': editor.isActive('blockquote') }"
-				title="quote"
+				v-tooltip="$t('input.editor.quote')"
 			>
 				<span class="icon">
 					<icon :icon="['fa', 'fa-quote-right']"/>
@@ -122,7 +98,7 @@
 				class="editor-toolbar__button"
 				@click="editor.chain().focus().toggleBulletList().run()"
 				:class="{ 'is-active': editor.isActive('bulletList') }"
-				title="bullet list"
+				v-tooltip="$t('input.editor.bulletList')"
 			>
 				<span class="icon">
 					<icon :icon="['fa', 'fa-list-ol']"/>
@@ -132,7 +108,7 @@
 				class="editor-toolbar__button"
 				@click="editor.chain().focus().toggleOrderedList().run()"
 				:class="{ 'is-active': editor.isActive('orderedList') }"
-				title="ordered list"
+				v-tooltip="$t('input.editor.orderedList')"
 			>
 				<span class="icon">
 					<icon :icon="['fa', 'fa-list-ul']"/>
@@ -142,7 +118,7 @@
 				class="editor-toolbar__button"
 				@click="editor.chain().focus().toggleTaskList().run()"
 				:class="{ 'is-active': editor.isActive('taskList') }"
-				title="task list"
+				v-tooltip="$t('input.editor.taskList')"
 			>
 				<span class="icon">
 					<icon icon="fa-list-check"/>
@@ -151,54 +127,35 @@
 		</div>
 
 		<div class="editor-toolbar__segment">
-			<BaseButton class="editor-toolbar__button" @click="openImagePicker" title="Add image">
+			<BaseButton
+				class="editor-toolbar__button" 
+				@click="openImagePicker" 
+				v-tooltip="$t('input.editor.image')"
+			>
 				<span class="icon">
 					<icon icon="fa-image"/>
 				</span>
 			</BaseButton>
 		</div>
 
-		<div class="editor-toolbar__segment">
-			<BaseButton
-				class="editor-toolbar__button"
-				@click="editor.chain().focus().unsetAllMarks().run()"
-			>
-				<icon icon="xmark"/>
-			</BaseButton>
-			<BaseButton
-				class="editor-toolbar__button"
-				@click="editor.chain().focus().clearNodes().run()"
-			>
-				<icon icon="xmarks-lines"/>
-			</BaseButton>
-		</div>
-
 		<div class="editor-toolbar__segment">
 			<BaseButton
 				class="editor-toolbar__button"
 				@click="setLink"
 				:class="{ 'is-active': editor.isActive('link') }"
 				title="set link"
+				v-tooltip="$t('input.editor.link')"
 			>
 				<span class="icon">
 					<icon :icon="['fa', 'fa-link']"/>
 				</span>
 			</BaseButton>
-			<BaseButton
-				class="editor-toolbar__button"
-				@click="editor.chain().focus().unsetLink().run()"
-				:disabled="!editor.isActive('link')"
-				title="unset link"
-			>
-				<span class="icon">
-					<icon :icon="['fa', 'fa-unlink']"/>
-				</span>
-			</BaseButton>
 			<BaseButton
 				class="editor-toolbar__button"
 				@click="editor.chain().focus().setParagraph().run()"
 				:class="{ 'is-active': editor.isActive('paragraph') }"
 				title="paragraph"
+				v-tooltip="$t('input.editor.text')"
 			>
 				<span class="icon">
 					<icon :icon="['fa', 'fa-paragraph']"/>
@@ -208,17 +165,10 @@
 			<BaseButton
 				class="editor-toolbar__button"
 				@click="editor.chain().focus().setHorizontalRule().run()"
-			>
-				<span class="editor-toolbar__pseudo-icon">
-					-
-				</span>
-			</BaseButton>
-			<BaseButton
-				class="editor-toolbar__button"
-				@click="editor.chain().focus().setHardBreak().run()"
+				v-tooltip="$t('input.editor.horizontalRule')"
 			>
 				<span class="icon">
-					<icon :icon="['fa', 'fa-arrow-turn-down']"/>
+					<icon :icon="['fa', 'fa-ruler-horizontal']"/>
 				</span>
 			</BaseButton>
 		</div>
@@ -227,7 +177,7 @@
 			<BaseButton
 				class="editor-toolbar__button"
 				@click="editor.chain().focus().undo().run()"
-				title="undo"
+				v-tooltip="$t('input.editor.undo')"
 			>
 				<span class="icon">
 					<icon :icon="['fa', 'fa-undo']"/>
@@ -236,7 +186,7 @@
 			<BaseButton
 				class="editor-toolbar__button"
 				@click="editor.chain().focus().redo().run()"
-				title="redo"
+				v-tooltip="$t('input.editor.redo')"
 			>
 				<span class="icon">
 					<icon :icon="['fa', 'fa-redo']"/>
@@ -250,7 +200,7 @@
 				class="editor-toolbar__button"
 				@click="toggleTableMode"
 				:class="{ 'is-active': editor.isActive('table') }"
-				title="table"
+				v-tooltip="$t('input.editor.table.title')"
 			>
 				<span class="icon">
 					<icon :icon="['fa', 'fa-table']"/>
diff --git a/src/components/input/editor/TipTap.vue b/src/components/input/editor/TipTap.vue
index eb01a54b5d..6d39ca4f76 100644
--- a/src/components/input/editor/TipTap.vue
+++ b/src/components/input/editor/TipTap.vue
@@ -14,7 +14,7 @@
 				class="editor-bubble__button"
 				@click="editor.chain().focus().toggleBold().run()"
 				:class="{ 'is-active': editor.isActive('bold') }"
-				title="bold"
+				v-tooltip="$t('input.editor.bold')"
 			>
 				<icon :icon="['fa', 'fa-bold']"/>
 			</BaseButton>
@@ -22,7 +22,7 @@
 				class="editor-bubble__button"
 				@click="editor.chain().focus().toggleItalic().run()"
 				:class="{ 'is-active': editor.isActive('italic') }"
-				title="italic"
+				v-tooltip="$t('input.editor.italic')"
 			>
 				<icon :icon="['fa', 'fa-italic']"/>
 			</BaseButton>
@@ -30,7 +30,7 @@
 				class="editor-bubble__button"
 				@click="editor.chain().focus().toggleUnderline().run()"
 				:class="{ 'is-active': editor.isActive('underline') }"
-				title="italic"
+				v-tooltip="$t('input.editor.underline')"
 			>
 				<icon :icon="['fa', 'fa-underline']"/>
 			</BaseButton>
@@ -38,7 +38,7 @@
 				class="editor-bubble__button"
 				@click="editor.chain().focus().toggleStrike().run()"
 				:class="{ 'is-active': editor.isActive('strike') }"
-				title="strike"
+				v-tooltip="$t('input.editor.strikethrough')"
 			>
 				<icon :icon="['fa', 'fa-strikethrough']"/>
 			</BaseButton>
@@ -46,7 +46,7 @@
 				class="editor-bubble__button"
 				@click="editor.chain().focus().toggleCode().run()"
 				:class="{ 'is-active': editor.isActive('code') }"
-				title="code"
+				v-tooltip="$t('input.editor.code')"
 			>
 				<icon :icon="['fa', 'fa-code']"/>
 			</BaseButton>
@@ -54,7 +54,7 @@
 				class="editor-bubble__button"
 				@click="setLink"
 				:class="{ 'is-active': editor.isActive('link') }"
-				title="set link"
+				v-tooltip="$t('input.editor.link')"
 			>
 				<icon :icon="['fa', 'fa-link']"/>
 			</BaseButton>
diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json
index 5702085d1d..1b3e6192c9 100644
--- a/src/i18n/lang/en.json
+++ b/src/i18n/lang/en.json
@@ -524,14 +524,15 @@
       "bold": "Bold",
       "italic": "Italic",
       "strikethrough": "Strikethrough",
+      "underline": "Underline",
       "code": "Code",
       "codeTooltip": "Capture a code snippet.",
       "quote": "Quote",
       "quoteTooltip": "Capture a quote.",
       "bulletList": "Bullet list",
       "bulletListTooltip": "Create a simple bullet list.",
-      "unorderedList": "Unordered List",
-      "orderedList": "Ordered List",
+      "unorderedList": "Unordered list",
+      "orderedList": "Ordered list",
       "orderedListTooltip": "Create a list with numbering.",
       "cleanBlock": "Clean Block",
       "link": "Link",
@@ -546,7 +547,10 @@
       "textTooltip": "Just start typing with plain text.",
       "taskList": "Task list",
       "taskListTooltip": "Track tasks with a to-do list.",
+      "undo": "Undo",
+      "redo": "Redo",
       "table": {
+        "title": "Table",
         "insert": "Insert table",
         "addColumnBefore": "Add column before",
         "addColumnAfter": "Add column after",