jedmund/jedmund-svelte
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: correct placeholder spacing in Edra editor

Browse source 
- 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
This commit is contained in:
Justin Edmund 2025-06-26 15:56:49 -04:00
parent 48cc27770f
commit 737a34b950
8 changed files with 43 additions and 124 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/lib/components/edra/editor.css
View file

@ -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;
}

35
src/lib/components/edra/headless/components/AudioPlaceholder.svelte
View file

@ -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;

12
src/lib/components/edra/headless/components/EnhancedImagePlaceholder.svelte
View file

@ -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;

12
src/lib/components/edra/headless/components/GalleryPlaceholder.svelte
View file

@ -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;

10
src/lib/components/edra/headless/components/GeolocationPlaceholder.svelte
View file

@ -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;

35
src/lib/components/edra/headless/components/IFramePlaceholder.svelte
View file

@ -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;

10
src/lib/components/edra/headless/components/UrlEmbedPlaceholder.svelte
View file

@ -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;

35
src/lib/components/edra/headless/components/VideoPlaceholder.svelte
View file

@ -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;