From a7e4e3adf9efa238fae839acaef7798031d465a3 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 21 Oct 2023 19:02:55 +0200
Subject: [PATCH] feat(editor): add placeholder

---
 package.json                           |  5 +++--
 pnpm-lock.yaml                         | 17 ++++++++++++++--
 src/components/input/editor/TipTap.vue | 28 +++++++++++++-------------
 src/i18n/lang/en.json                  |  1 +
 4 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/package.json b/package.json
index 768bd87c6..2a36ec5d2 100644
--- a/package.json
+++ b/package.json
@@ -62,6 +62,7 @@
     "@tiptap/extension-highlight": "2.0.3",
     "@tiptap/extension-image": "2.0.3",
     "@tiptap/extension-link": "2.0.3",
+    "@tiptap/extension-placeholder": "2.1.12",
     "@tiptap/extension-table": "2.0.3",
     "@tiptap/extension-table-cell": "2.0.3",
     "@tiptap/extension-table-header": "2.0.3",
@@ -69,9 +70,9 @@
     "@tiptap/extension-task-item": "2.0.3",
     "@tiptap/extension-task-list": "2.0.3",
     "@tiptap/extension-typography": "2.0.3",
-    "@tiptap/extension-underline": "^2.1.12",
+    "@tiptap/extension-underline": "2.1.12",
     "@tiptap/starter-kit": "2.0.3",
-    "@tiptap/suggestion": "^2.1.12",
+    "@tiptap/suggestion": "2.1.12",
     "@tiptap/vue-3": "2.0.3",
     "@types/is-touch-device": "1.0.0",
     "@types/lodash.clonedeep": "4.5.7",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e9e54ae4d..63961a5fc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -61,6 +61,9 @@ dependencies:
   '@tiptap/extension-link':
     specifier: 2.0.3
     version: 2.0.3(@tiptap/core@2.1.12)(@tiptap/pm@2.1.12)
+  '@tiptap/extension-placeholder':
+    specifier: 2.1.12
+    version: 2.1.12(@tiptap/core@2.1.12)(@tiptap/pm@2.1.12)
   '@tiptap/extension-table':
     specifier: 2.0.3
     version: 2.0.3(@tiptap/core@2.1.12)(@tiptap/pm@2.1.12)
@@ -83,13 +86,13 @@ dependencies:
     specifier: 2.0.3
     version: 2.0.3(@tiptap/core@2.1.12)
   '@tiptap/extension-underline':
-    specifier: ^2.1.12
+    specifier: 2.1.12
     version: 2.1.12(@tiptap/core@2.1.12)
   '@tiptap/starter-kit':
     specifier: 2.0.3
     version: 2.0.3(@tiptap/pm@2.1.12)
   '@tiptap/suggestion':
-    specifier: ^2.1.12
+    specifier: 2.1.12
     version: 2.1.12(@tiptap/core@2.1.12)(@tiptap/pm@2.1.12)
   '@tiptap/vue-3':
     specifier: 2.0.3
@@ -4425,6 +4428,16 @@ packages:
       '@tiptap/core': 2.1.12(@tiptap/pm@2.1.12)
     dev: false
 
+  /@tiptap/extension-placeholder@2.1.12(@tiptap/core@2.1.12)(@tiptap/pm@2.1.12):
+    resolution: {integrity: sha512-K52o7B1zkP4vaVy3z4ZwHn+tQy6KlXtedj1skLg+796ImwH2GYS5z6MFOTfKzBO2hLncUzLco/s0C5PLCD6SDw==}
+    peerDependencies:
+      '@tiptap/core': ^2.0.0
+      '@tiptap/pm': ^2.0.0
+    dependencies:
+      '@tiptap/core': 2.1.12(@tiptap/pm@2.1.12)
+      '@tiptap/pm': 2.1.12
+    dev: false
+
   /@tiptap/extension-strike@2.1.12(@tiptap/core@2.1.12):
     resolution: {integrity: sha512-HlhrzIjYUT8oCH9nYzEL2QTTn8d1ECnVhKvzAe6x41xk31PjLMHTUy8aYjeQEkWZOWZ34tiTmslV1ce6R3Dt8g==}
     peerDependencies:
diff --git a/src/components/input/editor/TipTap.vue b/src/components/input/editor/TipTap.vue
index 2c861bf55..88f020df8 100644
--- a/src/components/input/editor/TipTap.vue
+++ b/src/components/input/editor/TipTap.vue
@@ -139,6 +139,7 @@ import AttachmentService from '@/services/attachment'
 import {useI18n} from 'vue-i18n'
 import BaseButton from '@/components/base/BaseButton.vue'
 import XButton from '@/components/input/button.vue'
+import {Placeholder} from '@tiptap/extension-placeholder'
 
 const {t} = useI18n()
 
@@ -256,6 +257,9 @@ const editor = useEditor({
 	content: inputHTML.value,
 	extensions: [
 		StarterKit,
+		Placeholder.configure({
+			placeholder: t('input.editor.placeholder'),
+		}),
 		Typography,
 		Underline,
 		Link.configure({
@@ -399,22 +403,18 @@ function handleImagePaste(event) {
 
 <style lang="scss">
 .tiptap__editor {
-	// box-sizing: border-box;
-	// height: auto;
-	min-height: 150px;
-	border: 1px solid #ddd;
-	border-bottom-left-radius: 4px;
-	border-bottom-right-radius: 4px;
-	//padding: 10px;
-	// font: inherit;
-	// z-index: 0;
-	// word-wrap: break-word;
-
-	border: 1px solid var(--grey-200) !important;
-	background: var(--white);
+	min-height: 10rem;
 }
 
-/* Basic editor styles */
+.tiptap p.is-empty::before {
+	content: attr(data-placeholder);
+	color: var(--grey-400);
+	pointer-events: none;
+	height: 0;
+	float: left;
+}
+
+// Basic editor styles
 .ProseMirror {
 	padding: .5rem;
 
diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json
index 1b3e6192c..91c4cf829 100644
--- a/src/i18n/lang/en.json
+++ b/src/i18n/lang/en.json
@@ -549,6 +549,7 @@
       "taskListTooltip": "Track tasks with a to-do list.",
       "undo": "Undo",
       "redo": "Redo",
+      "placeholder": "Type some text or hit '/' to see more options…",
       "table": {
         "title": "Table",
         "insert": "Insert table",