From cb1d2b3834c983710ecb8a638f44ed3e2a05656f Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 21 Oct 2023 19:18:28 +0200
Subject: [PATCH] fix(editor): always show placeholder when empty

---
 src/components/input/editor/TipTap.vue | 26 +++++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/components/input/editor/TipTap.vue b/src/components/input/editor/TipTap.vue
index 422e143d4..412cfbc8d 100644
--- a/src/components/input/editor/TipTap.vue
+++ b/src/components/input/editor/TipTap.vue
@@ -59,10 +59,13 @@
 				<icon :icon="['fa', 'fa-link']"/>
 			</BaseButton>
 		</BubbleMenu>
+		
 		<editor-content
 			class="tiptap__editor"
+			:class="{'tiptap__editor-is-empty': isEmpty}"
 			:editor="editor"
 		/>
+		
 		<input
 			type="file"
 			id="tiptap__image-upload"
@@ -102,7 +105,7 @@ const tiptapRegex = new RegExp(`${TIPTAP_TEXT_VALUE_PREFIX}`, 's')
 </script>
 
 <script setup lang="ts">
-import {ref, watch, onBeforeUnmount, nextTick, onMounted} from 'vue'
+import {ref, watch, onBeforeUnmount, nextTick, onMounted, computed} from 'vue'
 import {marked} from 'marked'
 import {refDebounced} from '@vueuse/core'
 
@@ -202,6 +205,8 @@ watch(
 	{immediate: true},
 )
 
+const isEmpty = computed(() => inputHTML.value === '')
+
 function onImageAdded() {
 	bubbleSave()
 	loadImages()
@@ -409,17 +414,24 @@ function handleImagePaste(event) {
 	
 	&:focus-within, &:focus {
 		box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
-		
+	}
+	
+	&:focus-within, &:focus, &.tiptap__editor-is-empty {
 		.tiptap p.is-empty::before {
-			content: attr(data-placeholder);
-			color: var(--grey-400);
-			pointer-events: none;
-			height: 0;
-			float: left;
+			display: block;
 		}
 	}
 }
 
+.tiptap p.is-empty::before {
+	display: none;
+	content: attr(data-placeholder);
+	color: var(--grey-400);
+	pointer-events: none;
+	height: 0;
+	float: left;
+}
+
 // Basic editor styles
 .ProseMirror {
 	padding: .5rem;