From 737a34b950afb05121b13fbafef23209d28daa0c Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Thu, 26 Jun 2025 15:56:49 -0400
Subject: [PATCH] fix: correct placeholder spacing in Edra editor

- Add placeholder node styles to editor.css matching other media nodes
- Remove incorrect margins from individual placeholder components
- Placeholders now properly aligned with 2.25rem horizontal spacing
- Consistent with h1, h2, p text elements and YouTube embeds
---
 src/lib/components/edra/editor.css            | 18 ++++++++--
 .../components/AudioPlaceholder.svelte        | 35 +++++--------------
 .../EnhancedImagePlaceholder.svelte           | 12 -------
 .../components/GalleryPlaceholder.svelte      | 12 -------
 .../components/GeolocationPlaceholder.svelte  | 10 ------
 .../components/IFramePlaceholder.svelte       | 35 +++++--------------
 .../components/UrlEmbedPlaceholder.svelte     | 10 ------
 .../components/VideoPlaceholder.svelte        | 35 +++++--------------
 8 files changed, 43 insertions(+), 124 deletions(-)

diff --git a/src/lib/components/edra/editor.css b/src/lib/components/edra/editor.css
index 80ae43c..5c2b9b3 100644
--- a/src/lib/components/edra/editor.css
+++ b/src/lib/components/edra/editor.css
@@ -580,7 +580,14 @@ input[type='checkbox'] {
 .tiptap .node-image,
 .tiptap .node-gallery,
 .tiptap .node-audio,
-.tiptap .node-geolocation {
+.tiptap .node-geolocation,
+.tiptap .node-audio-placeholder,
+.tiptap .node-gallery-placeholder,
+.tiptap .node-iframe-placeholder,
+.tiptap .node-video-placeholder,
+.tiptap .node-geolocation-placeholder,
+.tiptap .node-image-placeholder,
+.tiptap .node-urlEmbedPlaceholder {
 	margin-bottom: 1rem;
 	margin-left: 2.25rem;
 	margin-right: 2.25rem;
@@ -609,7 +616,14 @@ input[type='checkbox'] {
 	.tiptap .node-image,
 	.tiptap .node-gallery,
 	.tiptap .node-audio,
-	.tiptap .node-geolocation {
+	.tiptap .node-geolocation,
+	.tiptap .node-audio-placeholder,
+	.tiptap .node-gallery-placeholder,
+	.tiptap .node-iframe-placeholder,
+	.tiptap .node-video-placeholder,
+	.tiptap .node-geolocation-placeholder,
+	.tiptap .node-image-placeholder,
+	.tiptap .node-urlEmbedPlaceholder {
 		margin-left: 2rem;
 		margin-right: 2rem;
 	}
diff --git a/src/lib/components/edra/headless/components/AudioPlaceholder.svelte b/src/lib/components/edra/headless/components/AudioPlaceholder.svelte
index 7e6f91d..15f5c31 100644
--- a/src/lib/components/edra/headless/components/AudioPlaceholder.svelte
+++ b/src/lib/components/edra/headless/components/AudioPlaceholder.svelte
@@ -17,37 +17,20 @@
 
 <NodeViewWrapper class="edra-audio-placeholder-wrapper" contenteditable="false">
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
-	<div class="edra-audio-placeholder-container">
-		<button
-			class="edra-audio-placeholder-content"
-			onclick={handleClick}
-			tabindex="0"
-			aria-label="Insert An Audio"
-		>
-			<AudioLines class="edra-audio-placeholder-icon" />
-			<span class="edra-audio-placeholder-text">Insert An Audio</span>
-		</button>
-	</div>
+	<button
+		class="edra-audio-placeholder-content"
+		onclick={handleClick}
+		tabindex="0"
+		aria-label="Insert An Audio"
+	>
+		<AudioLines class="edra-audio-placeholder-icon" />
+		<span class="edra-audio-placeholder-text">Insert An Audio</span>
+	</button>
 </NodeViewWrapper>
 
 <style lang="scss">
 	@import '$styles/variables';
 
-	.edra-audio-placeholder-wrapper {
-		width: 100%;
-		margin-bottom: 1rem;
-	}
-
-	.edra-audio-placeholder-container {
-		margin-left: 2.25rem;
-		margin-right: 2.25rem;
-
-		@media (max-width: 768px) {
-			margin-left: 2rem;
-			margin-right: 2rem;
-		}
-	}
-
 	.edra-audio-placeholder-content {
 		width: 100%;
 		padding: $unit-3x;
diff --git a/src/lib/components/edra/headless/components/EnhancedImagePlaceholder.svelte b/src/lib/components/edra/headless/components/EnhancedImagePlaceholder.svelte
index 7e3bb22..e12ec9a 100644
--- a/src/lib/components/edra/headless/components/EnhancedImagePlaceholder.svelte
+++ b/src/lib/components/edra/headless/components/EnhancedImagePlaceholder.svelte
@@ -227,18 +227,6 @@
 <style lang="scss">
 	@import '$styles/variables';
 
-	.edra-media-placeholder-wrapper {
-		width: 100%;
-		margin-bottom: 1rem;
-		margin-left: 2.25rem;
-		margin-right: 2.25rem;
-
-		@media (max-width: 768px) {
-			margin-left: 2rem;
-			margin-right: 2rem;
-		}
-	}
-
 	.edra-media-placeholder-container {
 		display: flex;
 		gap: $unit-2x;
diff --git a/src/lib/components/edra/headless/components/GalleryPlaceholder.svelte b/src/lib/components/edra/headless/components/GalleryPlaceholder.svelte
index 12f280a..00b8f69 100644
--- a/src/lib/components/edra/headless/components/GalleryPlaceholder.svelte
+++ b/src/lib/components/edra/headless/components/GalleryPlaceholder.svelte
@@ -166,18 +166,6 @@
 <style lang="scss">
 	@import '$styles/variables';
 
-	.edra-gallery-placeholder-wrapper {
-		width: 100%;
-		margin-bottom: 1rem;
-		margin-left: 2.25rem;
-		margin-right: 2.25rem;
-
-		@media (max-width: 768px) {
-			margin-left: 2rem;
-			margin-right: 2rem;
-		}
-	}
-
 	.edra-gallery-placeholder-container {
 		display: flex;
 		gap: $unit-2x;
diff --git a/src/lib/components/edra/headless/components/GeolocationPlaceholder.svelte b/src/lib/components/edra/headless/components/GeolocationPlaceholder.svelte
index 8193c31..1341795 100644
--- a/src/lib/components/edra/headless/components/GeolocationPlaceholder.svelte
+++ b/src/lib/components/edra/headless/components/GeolocationPlaceholder.svelte
@@ -119,16 +119,6 @@
 <style lang="scss">
 	@import '$styles/variables';
 
-	:global(.node-geolocationPlaceholder) {
-		margin-bottom: 1rem;
-		margin-left: 2.25rem;
-		margin-right: 2.25rem;
-
-		@media (max-width: 768px) {
-			margin-left: 2rem;
-			margin-right: 2rem;
-		}
-	}
 
 	.geolocation-placeholder {
 		background: $gray-95;
diff --git a/src/lib/components/edra/headless/components/IFramePlaceholder.svelte b/src/lib/components/edra/headless/components/IFramePlaceholder.svelte
index 1b92770..a27310e 100644
--- a/src/lib/components/edra/headless/components/IFramePlaceholder.svelte
+++ b/src/lib/components/edra/headless/components/IFramePlaceholder.svelte
@@ -17,37 +17,20 @@
 
 <NodeViewWrapper class="edra-iframe-placeholder-wrapper" contenteditable={false} spellcheck={false}>
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
-	<div class="edra-iframe-placeholder-container">
-		<button
-			class="edra-iframe-placeholder-content"
-			onclick={handleClick}
-			tabindex="0"
-			aria-label="Insert An IFrame"
-		>
-			<CodeXML class="edra-iframe-placeholder-icon" />
-			<span class="edra-iframe-placeholder-text">Insert An IFrame</span>
-		</button>
-	</div>
+	<button
+		class="edra-iframe-placeholder-content"
+		onclick={handleClick}
+		tabindex="0"
+		aria-label="Insert An IFrame"
+	>
+		<CodeXML class="edra-iframe-placeholder-icon" />
+		<span class="edra-iframe-placeholder-text">Insert An IFrame</span>
+	</button>
 </NodeViewWrapper>
 
 <style lang="scss">
 	@import '$styles/variables';
 
-	.edra-iframe-placeholder-wrapper {
-		width: 100%;
-		margin-bottom: 1rem;
-	}
-
-	.edra-iframe-placeholder-container {
-		margin-left: 2.25rem;
-		margin-right: 2.25rem;
-
-		@media (max-width: 768px) {
-			margin-left: 2rem;
-			margin-right: 2rem;
-		}
-	}
-
 	.edra-iframe-placeholder-content {
 		width: 100%;
 		padding: $unit-3x;
diff --git a/src/lib/components/edra/headless/components/UrlEmbedPlaceholder.svelte b/src/lib/components/edra/headless/components/UrlEmbedPlaceholder.svelte
index 0074631..2fe1062 100644
--- a/src/lib/components/edra/headless/components/UrlEmbedPlaceholder.svelte
+++ b/src/lib/components/edra/headless/components/UrlEmbedPlaceholder.svelte
@@ -152,16 +152,6 @@
 <style lang="scss">
 	@import '$styles/variables';
 
-	.edra-url-embed-placeholder-wrapper {
-		margin-bottom: 1rem;
-		margin-left: 2.25rem;
-		margin-right: 2.25rem;
-
-		@media (max-width: 768px) {
-			margin-left: 2rem;
-			margin-right: 2rem;
-		}
-	}
 
 	.url-input-container {
 		display: flex;
diff --git a/src/lib/components/edra/headless/components/VideoPlaceholder.svelte b/src/lib/components/edra/headless/components/VideoPlaceholder.svelte
index 4b89600..a12fb84 100644
--- a/src/lib/components/edra/headless/components/VideoPlaceholder.svelte
+++ b/src/lib/components/edra/headless/components/VideoPlaceholder.svelte
@@ -17,37 +17,20 @@
 
 <NodeViewWrapper class="edra-video-placeholder-wrapper" contenteditable="false">
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
-	<div class="edra-video-placeholder-container">
-		<button
-			class="edra-video-placeholder-content"
-			onclick={handleClick}
-			tabindex="0"
-			aria-label="Insert A Video"
-		>
-			<Video class="edra-video-placeholder-icon" />
-			<span class="edra-video-placeholder-text">Insert A Video</span>
-		</button>
-	</div>
+	<button
+		class="edra-video-placeholder-content"
+		onclick={handleClick}
+		tabindex="0"
+		aria-label="Insert A Video"
+	>
+		<Video class="edra-video-placeholder-icon" />
+		<span class="edra-video-placeholder-text">Insert A Video</span>
+	</button>
 </NodeViewWrapper>
 
 <style lang="scss">
 	@import '$styles/variables';
 
-	.edra-video-placeholder-wrapper {
-		width: 100%;
-		margin-bottom: 1rem;
-	}
-
-	.edra-video-placeholder-container {
-		margin-left: 2.25rem;
-		margin-right: 2.25rem;
-
-		@media (max-width: 768px) {
-			margin-left: 2rem;
-			margin-right: 2rem;
-		}
-	}
-
 	.edra-video-placeholder-content {
 		width: 100%;
 		padding: $unit-3x;