fix(ui): improve block editor placeholder visibility with fade transition
- remove unused `placeholder` prop from BlockEditor component - add `block-editor--sole-empty` class when editor has a single empty block - show placeholder via opacity transition instead of content injection - always render `attr(data-placeholder)` content, toggle visibility with opacity - add 150ms ease transition for smooth placeholder fade in/out - show placeholder when block is focused, hovered, or editor is sole-empty
This commit is contained in:
@@ -63,7 +63,6 @@ export default function BlockEditor({
|
|||||||
onChange,
|
onChange,
|
||||||
label,
|
label,
|
||||||
error,
|
error,
|
||||||
placeholder,
|
|
||||||
disabled = false,
|
disabled = false,
|
||||||
className = '',
|
className = '',
|
||||||
enabledBlocks,
|
enabledBlocks,
|
||||||
@@ -801,13 +800,9 @@ export default function BlockEditor({
|
|||||||
ref={containerRef}
|
ref={containerRef}
|
||||||
onKeyDown={handleGlobalKeyDown}
|
onKeyDown={handleGlobalKeyDown}
|
||||||
onMouseDownCapture={handleContainerMouseDown}
|
onMouseDownCapture={handleContainerMouseDown}
|
||||||
className={`block-editor border rounded-xl bg-white dark:bg-neutral-900/60 px-3 py-6 ${error ? 'border-red-500/50' : 'border-neutral-300 dark:border-neutral-700/50'} ${className}`}
|
className={`block-editor border rounded-xl bg-white dark:bg-neutral-900/60 px-3 py-6 ${error ? 'border-red-500/50' : 'border-neutral-300 dark:border-neutral-700/50'} ${blocks.length === 1 && inlineLength(blocks[0].content ?? []) === 0 ? 'block-editor--sole-empty' : ''} ${className}`}
|
||||||
>
|
>
|
||||||
<BlockEditorStyles />
|
<BlockEditorStyles />
|
||||||
{placeholder && blocks.length === 1 && inlineLength(blocks[0].content ?? []) === 0 && (
|
|
||||||
// Placeholder global injecté via data-placeholder du paragraphe initial
|
|
||||||
null
|
|
||||||
)}
|
|
||||||
{blocks.map((block, i) => (
|
{blocks.map((block, i) => (
|
||||||
<Block
|
<Block
|
||||||
key={block.id}
|
key={block.id}
|
||||||
@@ -872,13 +867,18 @@ function BlockEditorStyles() {
|
|||||||
return (
|
return (
|
||||||
<style>{`
|
<style>{`
|
||||||
.block-editor [contenteditable][data-placeholder]:empty::before {
|
.block-editor [contenteditable][data-placeholder]:empty::before {
|
||||||
content: '';
|
content: attr(data-placeholder);
|
||||||
|
opacity: 0;
|
||||||
color: rgb(163 163 163);
|
color: rgb(163 163 163);
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
transition-property: opacity;
|
||||||
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
transition-duration: 150ms;
|
||||||
}
|
}
|
||||||
.block-editor .group:hover [contenteditable][data-placeholder]:empty::before,
|
.block-editor .group:hover [contenteditable][data-placeholder]:empty::before,
|
||||||
.block-editor [contenteditable][data-placeholder]:empty:focus::before {
|
.block-editor [contenteditable][data-placeholder]:empty:focus::before,
|
||||||
content: attr(data-placeholder);
|
.block-editor--sole-empty [contenteditable][data-placeholder]:empty::before {
|
||||||
|
opacity: 1;
|
||||||
}
|
}
|
||||||
.dark .block-editor [contenteditable][data-placeholder]:empty::before {
|
.dark .block-editor [contenteditable][data-placeholder]:empty::before {
|
||||||
color: rgb(82 82 82);
|
color: rgb(82 82 82);
|
||||||
|
|||||||
Reference in New Issue
Block a user