From cb9dfceb7c36254c1a25e77202a735a815030b33 Mon Sep 17 00:00:00 2001
From: Gigiaj <gigiaboone@yahoo.com>
Date: Thu, 29 May 2025 09:32:54 -0500
Subject: [PATCH] Swap to using that implementation

---
 src/app/components/editor/Editor.tsx | 27 +++++++++++----------------
 1 file changed, 11 insertions(+), 16 deletions(-)

diff --git a/src/app/components/editor/Editor.tsx b/src/app/components/editor/Editor.tsx
index 044d0837..bd848dd5 100644
--- a/src/app/components/editor/Editor.tsx
+++ b/src/app/components/editor/Editor.tsx
@@ -106,22 +106,17 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
       [editor, onKeyDown]
     );
 
-    const renderPlaceholder = useCallback(({ attributes, children }: RenderPlaceholderProps) => {
-      // drop style attribute as we use our custom placeholder css.
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const { style, ...props } = attributes;
-      return (
-        <Text
-          as="span"
-          {...props}
-          className={css.EditorPlaceholder}
-          contentEditable={false}
-          truncate
-        >
-          {children}
-        </Text>
-      );
-    }, []);
+    const renderPlaceholder = useCallback(
+      ({ attributes, children }: RenderPlaceholderProps) => (
+        <span {...attributes} className={css.EditorPlaceholderContainer}>
+          {/* Inner component to style the actual text position and appearance */}
+          <Text as="span" className={css.EditorPlaceholderTextVisual} truncate>
+            {children}
+          </Text>
+        </span>
+      ),
+      []
+    );
 
     return (
       <div className={css.Editor} ref={ref}>