fix(lexical): placeholder display issue

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;
+    }
+}

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} />