fix: Positioning of editing toolbar on mobile devices (#6279)

app/editor/components/FloatingToolbar.tsx

@@ -1,6 +1,7 @@
 import { NodeSelection } from "prosemirror-state";
 import { CellSelection, selectedRect } from "prosemirror-tables";
 import * as React from "react";
+import { Portal as ReactPortal } from "react-portal";
 import styled, { css } from "styled-components";
 import { isCode } from "@shared/editor/lib/isCode";
 import { findParentNode } from "@shared/editor/queries/findParentNode";
@@ -8,6 +9,8 @@ import { depths, s } from "@shared/styles";
 import { Portal } from "~/components/Portal";
 import useComponentSize from "~/hooks/useComponentSize";
 import useEventListener from "~/hooks/useEventListener";
+import useMobile from "~/hooks/useMobile";
+import useWindowSize from "~/hooks/useWindowSize";
 import Logger from "~/utils/Logger";
 import { useEditor } from "./EditorContext";
 
@@ -207,6 +210,32 @@ const FloatingToolbar = React.forwardRef(function FloatingToolbar_(
     }
   });
 
+  const isMobile = useMobile();
+  const { height } = useWindowSize();
+
+  if (!props.children) {
+    return null;
+  }
+
+  if (isMobile) {
+    if (props.active) {
+      const rect = document.body.getBoundingClientRect();
+      return (
+        <ReactPortal>
+          <MobileWrapper
+            style={{
+              bottom: `calc(100% - ${height - rect.y}px)`,
+            }}
+          >
+            {props.children}
+          </MobileWrapper>
+        </ReactPortal>
+      );
+    }
+
+    return null;
+  }
+
   return (
     <Portal>
       <Wrapper
@@ -253,6 +282,28 @@ const arrow = (props: WrapperProps) =>
       `
     : "";
 
+const MobileWrapper = styled.div`
+  position: absolute;
+  left: 0;
+  right: 0;
+
+  width: 100vw;
+  padding: 10px 6px;
+  background-color: ${s("menuBackground")};
+  border-top: 1px solid ${s("divider")};
+  box-sizing: border-box;
+  z-index: ${depths.editorToolbar};
+
+  &:after {
+    content: "";
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 100px;
+    background-color: ${s("menuBackground")};
+  }
+`;
+
 const Wrapper = styled.div<WrapperProps>`
   will-change: opacity, transform;
   padding: 6px;