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-image,
.tiptap .node-gallery, .tiptap .node-gallery,
.tiptap .node-audio, .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-bottom: 1rem;
margin-left: 2.25rem; margin-left: 2.25rem;
margin-right: 2.25rem; margin-right: 2.25rem;
@ -609,7 +616,14 @@ input[type='checkbox'] {
.tiptap .node-image, .tiptap .node-image,
.tiptap .node-gallery, .tiptap .node-gallery,
.tiptap .node-audio, .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-left: 2rem;
margin-right: 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"> <NodeViewWrapper class="edra-audio-placeholder-wrapper" contenteditable="false">
<!-- svelte-ignore a11y_click_events_have_key_events --> <!-- svelte-ignore a11y_click_events_have_key_events -->
<div class="edra-audio-placeholder-container"> <button
<button class="edra-audio-placeholder-content"
class="edra-audio-placeholder-content" onclick={handleClick}
onclick={handleClick} tabindex="0"
tabindex="0" aria-label="Insert An Audio"
aria-label="Insert An Audio" >
> <AudioLines class="edra-audio-placeholder-icon" />
<AudioLines class="edra-audio-placeholder-icon" /> <span class="edra-audio-placeholder-text">Insert An Audio</span>
<span class="edra-audio-placeholder-text">Insert An Audio</span> </button>
</button>
</div>
</NodeViewWrapper> </NodeViewWrapper>
<style lang="scss"> <style lang="scss">
@import '$styles/variables'; @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 { .edra-audio-placeholder-content {
width: 100%; width: 100%;
padding: $unit-3x; padding: $unit-3x;

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

@ -227,18 +227,6 @@
<style lang="scss"> <style lang="scss">
@import '$styles/variables'; @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 { .edra-media-placeholder-container {
display: flex; display: flex;
gap: $unit-2x; gap: $unit-2x;

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

@ -166,18 +166,6 @@
<style lang="scss"> <style lang="scss">
@import '$styles/variables'; @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 { .edra-gallery-placeholder-container {
display: flex; display: flex;
gap: $unit-2x; gap: $unit-2x;

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

@ -119,16 +119,6 @@
<style lang="scss"> <style lang="scss">
@import '$styles/variables'; @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 { .geolocation-placeholder {
background: $gray-95; 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}> <NodeViewWrapper class="edra-iframe-placeholder-wrapper" contenteditable={false} spellcheck={false}>
<!-- svelte-ignore a11y_click_events_have_key_events --> <!-- svelte-ignore a11y_click_events_have_key_events -->
<div class="edra-iframe-placeholder-container"> <button
<button class="edra-iframe-placeholder-content"
class="edra-iframe-placeholder-content" onclick={handleClick}
onclick={handleClick} tabindex="0"
tabindex="0" aria-label="Insert An IFrame"
aria-label="Insert An IFrame" >
> <CodeXML class="edra-iframe-placeholder-icon" />
<CodeXML class="edra-iframe-placeholder-icon" /> <span class="edra-iframe-placeholder-text">Insert An IFrame</span>
<span class="edra-iframe-placeholder-text">Insert An IFrame</span> </button>
</button>
</div>
</NodeViewWrapper> </NodeViewWrapper>
<style lang="scss"> <style lang="scss">
@import '$styles/variables'; @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 { .edra-iframe-placeholder-content {
width: 100%; width: 100%;
padding: $unit-3x; padding: $unit-3x;

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

@ -152,16 +152,6 @@
<style lang="scss"> <style lang="scss">
@import '$styles/variables'; @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 { .url-input-container {
display: flex; 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"> <NodeViewWrapper class="edra-video-placeholder-wrapper" contenteditable="false">
<!-- svelte-ignore a11y_click_events_have_key_events --> <!-- svelte-ignore a11y_click_events_have_key_events -->
<div class="edra-video-placeholder-container"> <button
<button class="edra-video-placeholder-content"
class="edra-video-placeholder-content" onclick={handleClick}
onclick={handleClick} tabindex="0"
tabindex="0" aria-label="Insert A Video"
aria-label="Insert A Video" >
> <Video class="edra-video-placeholder-icon" />
<Video class="edra-video-placeholder-icon" /> <span class="edra-video-placeholder-text">Insert A Video</span>
<span class="edra-video-placeholder-text">Insert A Video</span> </button>
</button>
</div>
</NodeViewWrapper> </NodeViewWrapper>
<style lang="scss"> <style lang="scss">
@import '$styles/variables'; @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 { .edra-video-placeholder-content {
width: 100%; width: 100%;
padding: $unit-3x; padding: $unit-3x;