diff --git a/packages/excalidraw/components/App.tsx b/packages/excalidraw/components/App.tsx index 3163f7ce..9ff15167 100644 --- a/packages/excalidraw/components/App.tsx +++ b/packages/excalidraw/components/App.tsx @@ -67,7 +67,6 @@ import { GRID_SIZE, IMAGE_MIME_TYPES, IMAGE_RENDER_TIMEOUT, - isAndroid, isBrave, LINE_CONFIRM_THRESHOLD, MAX_ALLOWED_FILE_BYTES, @@ -90,6 +89,7 @@ import { POINTER_EVENTS, TOOL_TYPE, EDITOR_LS_KEYS, + isIOS, } from "../constants"; import { ExportedElements, exportCanvas, loadFromBlob } from "../data"; import Library, { distributeLibraryItemsOnSquareGrid } from "../data/library"; @@ -2756,9 +2756,8 @@ class App extends React.Component { } private onTouchStart = (event: TouchEvent) => { - // fix for Apple Pencil Scribble - // On Android, preventing the event would disable contextMenu on tap-hold - if (!isAndroid) { + // fix for Apple Pencil Scribble (do not prevent for other devices) + if (isIOS) { event.preventDefault(); } @@ -2783,9 +2782,6 @@ class App extends React.Component { didTapTwice = false; clearTimeout(tappedTwiceTimer); } - if (isAndroid) { - event.preventDefault(); - } if (event.touches.length === 2) { this.setState({ diff --git a/packages/excalidraw/constants.ts b/packages/excalidraw/constants.ts index 5594f356..ff1fdabb 100644 --- a/packages/excalidraw/constants.ts +++ b/packages/excalidraw/constants.ts @@ -13,6 +13,10 @@ export const isFirefox = export const isChrome = navigator.userAgent.indexOf("Chrome") !== -1; export const isSafari = !isChrome && navigator.userAgent.indexOf("Safari") !== -1; +export const isIOS = + /iPad|iPhone/.test(navigator.platform) || + // iPadOS 13+ + (navigator.userAgent.includes("Mac") && "ontouchend" in document); // keeping function so it can be mocked in test export const isBrave = () => (navigator as any).brave?.isBrave?.name === "isBrave";