From daa0109f7feda90f465a0a4f4591a2f109276e53 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Fri, 20 Mar 2026 18:00:47 +0200
Subject: [PATCH] fix(lexical): placeholder display issue

---
 .../type_widgets/text/lexical/index.css       | 16 +++++++++++++
 .../type_widgets/text/lexical/index.tsx       | 24 ++++++++++++-------
 2 files changed, 31 insertions(+), 9 deletions(-)
 create mode 100644 apps/client/src/widgets/type_widgets/text/lexical/index.css

diff --git a/apps/client/src/widgets/type_widgets/text/lexical/index.css b/apps/client/src/widgets/type_widgets/text/lexical/index.css
new file mode 100644
index 0000000000..c0944c704a
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/text/lexical/index.css
@@ -0,0 +1,16 @@
+.note-detail-editable-text .lexical-wrapper {
+    color: var(--main-text-color);
+    font-family: var(--main-font-family);
+    font-size: var(--main-font-size);
+    line-height: 1.5;
+    word-break: break-word;
+    position: relative;
+
+    .lexical-placeholder {
+        opacity: 0.5;
+        position: absolute;
+        top: 0;
+        left: 0;
+        pointer-events: none;
+    }
+}
diff --git a/apps/client/src/widgets/type_widgets/text/lexical/index.tsx b/apps/client/src/widgets/type_widgets/text/lexical/index.tsx
index d9a7b8a009..36eb79dc44 100644
--- a/apps/client/src/widgets/type_widgets/text/lexical/index.tsx
+++ b/apps/client/src/widgets/type_widgets/text/lexical/index.tsx
@@ -1,3 +1,5 @@
+import "./index.css";
+
 import {AutoFocusPlugin} from '@lexical/react/LexicalAutoFocusPlugin';
 import {LexicalComposer} from '@lexical/react/LexicalComposer';
 import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
@@ -30,17 +32,21 @@ export default function LexicalText(props: TypeWidgetProps) {
         onError,
     };
 
+    const placeholder = (
+        <div className="lexical-placeholder">
+            Enter some text...
+        </div>
+    );
+
     return (
         <LexicalComposer initialConfig={initialConfig}>
-            <RichTextPlugin
-                contentEditable={
-                    <ContentEditable
-                        aria-placeholder={'Enter some text...'}
-                        placeholder={<div>Enter some text...</div>}
-                    />
-                }
-                ErrorBoundary={LexicalErrorBoundary}
-            />
+            <div className="lexical-wrapper">
+                <RichTextPlugin
+                    contentEditable={<ContentEditable /> as never}
+                    placeholder={placeholder as never}
+                    ErrorBoundary={LexicalErrorBoundary}
+                />
+            </div>
             <HistoryPlugin />
             <AutoFocusPlugin />
             <CustomEditorPersistencePlugin {...props} />