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

@@ -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: {
+export const EditorPlaceholderTextVisual = style([
-      '&:not(:first-child)': {
+  DefaultReset,
-        display: 'none',
+  {
-      },
+    display: 'block',
-    },
+    paddingTop: toRem(13),
+    paddingLeft: toRem(1),
   },
 ]);
 

src/app/components/editor/Editor.tsx

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