diff --git a/src/shared/components/BlockEditor/BlockEditor.client.js b/src/shared/components/BlockEditor/BlockEditor.client.js index b18b3e8..c233d30 100644 --- a/src/shared/components/BlockEditor/BlockEditor.client.js +++ b/src/shared/components/BlockEditor/BlockEditor.client.js @@ -63,7 +63,6 @@ export default function BlockEditor({ onChange, label, error, - placeholder, disabled = false, className = '', enabledBlocks, @@ -801,13 +800,9 @@ export default function BlockEditor({ ref={containerRef} onKeyDown={handleGlobalKeyDown} 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}`} > - {placeholder && blocks.length === 1 && inlineLength(blocks[0].content ?? []) === 0 && ( - // Placeholder global injecté via data-placeholder du paragraphe initial - null - )} {blocks.map((block, i) => ( {` .block-editor [contenteditable][data-placeholder]:empty::before { - content: ''; + content: attr(data-placeholder); + opacity: 0; color: rgb(163 163 163); 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 [contenteditable][data-placeholder]:empty:focus::before { - content: attr(data-placeholder); + .block-editor [contenteditable][data-placeholder]:empty:focus::before, + .block-editor--sole-empty [contenteditable][data-placeholder]:empty::before { + opacity: 1; } .dark .block-editor [contenteditable][data-placeholder]:empty::before { color: rgb(82 82 82);