From 34dd64103cd49da6d3599245586f7723c72ef3e9 Mon Sep 17 00:00:00 2001
From: Jaggar <18173108+GigiaJ@users.noreply.github.com>
Date: Tue, 5 Aug 2025 13:04:21 +0000
Subject: [PATCH] Fix room input for virtual keyboard on webkit (#2346)

* Slate style has certain behavior elements that iOS expects

* Swap to using that implementation
---
 src/app/components/editor/Editor.css.ts | 18 ++++++++---------
 src/app/components/editor/Editor.tsx    | 27 ++++++++++---------------
 2 files changed, 20 insertions(+), 25 deletions(-)

diff --git a/src/app/components/editor/Editor.css.ts b/src/app/components/editor/Editor.css.ts
index 09a444ec..d128ed07 100644
--- a/src/app/components/editor/Editor.css.ts
+++ b/src/app/components/editor/Editor.css.ts
@@ -41,21 +41,21 @@ export const EditorTextarea = style([
   },
 ]);
 
-export const EditorPlaceholder = style([
+export const EditorPlaceholderContainer = style([
   DefaultReset,
   {
-    position: 'absolute',
-    zIndex: 1,
-    width: '100%',
     opacity: config.opacity.Placeholder,
     pointerEvents: 'none',
     userSelect: 'none',
+  },
+]);
 
-    selectors: {
-      '&:not(:first-child)': {
-        display: 'none',
-      },
-    },
+export const EditorPlaceholderTextVisual = style([
+  DefaultReset,
+  {
+    display: 'block',
+    paddingTop: toRem(13),
+    paddingLeft: toRem(1),
   },
 ]);
 
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}>