yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Add additional check for mobile device to bottom toolbar

Browse Source 
closes #5703
This commit is contained in:
Tom Moor
2023-08-18 18:51:39 +02:00
parent d820b2a617
commit 1ec87da8a9
1 changed files with 3 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/editor/components/FloatingToolbar.tsx
View File

@@ -9,6 +9,7 @@ import { Portal } from "~/components/Portal";
import useComponentSize from "~/hooks/useComponentSize"; import useComponentSize from "~/hooks/useComponentSize";
import useEventListener from "~/hooks/useEventListener"; import useEventListener from "~/hooks/useEventListener";
import useMediaQuery from "~/hooks/useMediaQuery"; import useMediaQuery from "~/hooks/useMediaQuery";
import useMobile from "~/hooks/useMobile";
import useViewportHeight from "~/hooks/useViewportHeight"; import useViewportHeight from "~/hooks/useViewportHeight";
import Logger from "~/utils/Logger"; import Logger from "~/utils/Logger";
import { useEditor } from "./EditorContext"; import { useEditor } from "./EditorContext";
@@ -40,6 +41,7 @@ function usePosition({
const { selection } = view.state; const { selection } = view.state;
const { width: menuWidth, height: menuHeight } = useComponentSize(menuRef); const { width: menuWidth, height: menuHeight } = useComponentSize(menuRef);
const viewportHeight = useViewportHeight(); const viewportHeight = useViewportHeight();
const isMobile = useMobile();
const isTouchDevice = useMediaQuery("(hover: none) and (pointer: coarse)"); const isTouchDevice = useMediaQuery("(hover: none) and (pointer: coarse)");
if (!active || !menuWidth || !menuHeight || !menuRef.current) { if (!active || !menuWidth || !menuHeight || !menuRef.current) {
@@ -48,7 +50,7 @@ function usePosition({
// If we're on a mobile device then stick the floating toolbar to the bottom // If we're on a mobile device then stick the floating toolbar to the bottom
// of the screen above the virtual keyboard. // of the screen above the virtual keyboard.
if (isTouchDevice && viewportHeight) { if (isTouchDevice && isMobile && viewportHeight) {
return { return {
left: 0, left: 0,
right: 0, right: 0,