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

fix: ensure editor placeholder respects block padding

Browse source 
- 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>
This commit is contained in:
Justin Edmund 2025-06-26 14:03:59 -04:00
parent c9aeda2fab
commit 281fe52ac5
1 changed files with 33 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -25,15 +25,37 @@
padding-left: 2rem; padding-left: 2rem;
padding-right: 2rem; padding-right: 2rem;
} }
.tiptap p.is-empty::before {
padding-left: 2rem;
margin-left: -2rem;
}
} }
/* For Placeholder */ /* For Placeholder */
.tiptap .is-empty::before { .tiptap p.is-empty::before {
pointer-events: none; pointer-events: none;
float: left; float: left;
height: 0; height: 0;
color: var(--border-color-hover); color: var(--border-color-hover);
content: attr(data-placeholder); 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 */ /* Heading Styles */
@ -77,6 +99,16 @@
padding-left: 2rem; padding-left: 2rem;
padding-right: 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 { .tiptap h1 {