From 281fe52ac5bb7a92a37a3f74a5ee10e1e77f31cf Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 26 Jun 2025 14:03:59 -0400
Subject: [PATCH] fix: ensure editor placeholder respects block padding
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add padding-left and negative margin-left to placeholder pseudo-elements
- Separate styles for paragraphs and headings to target specific elements
- Include responsive styles for mobile viewports
- Fixes issue where placeholder text wasn't aligned with actual content

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/lib/components/edra/editor.css | 34 +++++++++++++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/edra/editor.css b/src/lib/components/edra/editor.css
index e0fb323..76925c6 100644
--- a/src/lib/components/edra/editor.css
+++ b/src/lib/components/edra/editor.css
@@ -25,15 +25,37 @@
 		padding-left: 2rem;
 		padding-right: 2rem;
 	}
+	
+	.tiptap p.is-empty::before {
+		padding-left: 2rem;
+		margin-left: -2rem;
+	}
 }
 
 /* For Placeholder */
-.tiptap .is-empty::before {
+.tiptap p.is-empty::before {
 	pointer-events: none;
 	float: left;
 	height: 0;
 	color: var(--border-color-hover);
 	content: attr(data-placeholder);
+	padding-left: 2.25rem;
+	margin-left: -2.25rem;
+}
+
+.tiptap h1.is-empty::before,
+.tiptap h2.is-empty::before,
+.tiptap h3.is-empty::before,
+.tiptap h4.is-empty::before,
+.tiptap h5.is-empty::before,
+.tiptap h6.is-empty::before {
+	pointer-events: none;
+	float: left;
+	height: 0;
+	color: var(--border-color-hover);
+	content: attr(data-placeholder);
+	padding-left: 2.25rem;
+	margin-left: -2.25rem;
 }
 
 /* Heading Styles */
@@ -77,6 +99,16 @@
 		padding-left: 2rem;
 		padding-right: 2rem;
 	}
+	
+	.tiptap h1.is-empty::before,
+	.tiptap h2.is-empty::before,
+	.tiptap h3.is-empty::before,
+	.tiptap h4.is-empty::before,
+	.tiptap h5.is-empty::before,
+	.tiptap h6.is-empty::before {
+		padding-left: 2rem;
+		margin-left: -2rem;
+	}
 }
 
 .tiptap h1 {