From c7b96f2e16a997da373eb4a2c9b11606d1c99c60 Mon Sep 17 00:00:00 2001
From: Hyko <punk.flag8609@fastmail.com>
Date: Sat, 25 Apr 2026 19:09:41 -0400
Subject: [PATCH] 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
---
 .../BlockEditor/BlockEditor.client.js          | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

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}`}
       >
         <BlockEditorStyles />
-        {placeholder && blocks.length === 1 && inlineLength(blocks[0].content ?? []) === 0 && (
-          // Placeholder global injecté via data-placeholder du paragraphe initial
-          null
-        )}
         {blocks.map((block, i) => (
           <Block
             key={block.id}
@@ -872,13 +867,18 @@ function BlockEditorStyles() {
   return (
     <style>{`
       .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);