diff --git a/src/components/App.tsx b/src/components/App.tsx index 33949c41..c8e321be 100644 --- a/src/components/App.tsx +++ b/src/components/App.tsx @@ -174,6 +174,7 @@ import { viewportCoordsToSceneCoords, withBatchedUpdates, } from "../utils"; +import { isMobile } from "../is-mobile"; import ContextMenu from "./ContextMenu"; import LayerUI from "./LayerUI"; import { Stats } from "./Stats"; @@ -3625,22 +3626,25 @@ class App extends React.Component<ExcalidrawProps, AppState> { const separator = "separator"; + const _isMobile = isMobile(); + const elements = this.scene.getElements(); const element = this.getElementAtPosition(x, y); if (!element) { ContextMenu.push({ options: [ - navigator.clipboard && { - name: "paste", - perform: (elements, appStates) => { - this.pasteFromClipboard(null); - return { - commitToHistory: false, - }; + _isMobile && + navigator.clipboard && { + name: "paste", + perform: (elements, appStates) => { + this.pasteFromClipboard(null); + return { + commitToHistory: false, + }; + }, + contextItemLabel: "labels.paste", }, - contextItemLabel: "labels.paste", - }, - separator, + _isMobile && navigator.clipboard && separator, probablySupportsClipboardBlob && elements.length > 0 && actionCopyAsPng, @@ -3669,19 +3673,20 @@ class App extends React.Component<ExcalidrawProps, AppState> { ContextMenu.push({ options: [ - actionCut, - navigator.clipboard && actionCopy, - navigator.clipboard && { - name: "paste", - perform: (elements, appStates) => { - this.pasteFromClipboard(null); - return { - commitToHistory: false, - }; + _isMobile && actionCut, + _isMobile && navigator.clipboard && actionCopy, + _isMobile && + navigator.clipboard && { + name: "paste", + perform: (elements, appStates) => { + this.pasteFromClipboard(null); + return { + commitToHistory: false, + }; + }, + contextItemLabel: "labels.paste", }, - contextItemLabel: "labels.paste", - }, - separator, + _isMobile && separator, probablySupportsClipboardBlob && actionCopyAsPng, probablySupportsClipboardWriteText && actionCopyAsSvg, separator, diff --git a/src/is-mobile.tsx b/src/is-mobile.tsx index 4e34f710..466fcd0d 100644 --- a/src/is-mobile.tsx +++ b/src/is-mobile.tsx @@ -3,6 +3,16 @@ import variables from "./css/variables.module.scss"; const context = React.createContext(false); +const getIsMobileMatcher = () => { + return window.matchMedia + ? window.matchMedia(variables.isMobileQuery) + : (({ + matches: false, + addListener: () => {}, + removeListener: () => {}, + } as any) as MediaQueryList); +}; + export const IsMobileProvider = ({ children, }: { @@ -10,13 +20,7 @@ export const IsMobileProvider = ({ }) => { const query = useRef<MediaQueryList>(); if (!query.current) { - query.current = window.matchMedia - ? window.matchMedia(variables.isMobileQuery) - : (({ - matches: false, - addListener: () => {}, - removeListener: () => {}, - } as any) as MediaQueryList); + query.current = getIsMobileMatcher(); } const [isMobile, setMobile] = useState(query.current.matches); @@ -29,6 +33,8 @@ export const IsMobileProvider = ({ return <context.Provider value={isMobile}>{children}</context.Provider>; }; +export const isMobile = () => getIsMobileMatcher().matches; + export default function useIsMobile() { return useContext(context); } diff --git a/src/packages/excalidraw/CHANGELOG.md b/src/packages/excalidraw/CHANGELOG.md index 73bb6655..c5b20007 100644 --- a/src/packages/excalidraw/CHANGELOG.md +++ b/src/packages/excalidraw/CHANGELOG.md @@ -22,6 +22,7 @@ Please add the latest change on the top under the correct section. ### Features +- Remove `copy`, `cut`, and `paste` actions from contextmenu [#2872](https://github.com/excalidraw/excalidraw/pull/2872) - Support `Ctrl-Y` shortcut to redo on Windows [#2831](https://github.com/excalidraw/excalidraw/pull/2831). ### Fixes diff --git a/src/tests/regressionTests.test.tsx b/src/tests/regressionTests.test.tsx index 2c73cef0..9cb8b383 100644 --- a/src/tests/regressionTests.test.tsx +++ b/src/tests/regressionTests.test.tsx @@ -648,7 +648,6 @@ describe("regression tests", () => { const contextMenu = document.querySelector(".context-menu"); const contextMenuOptions = document.querySelectorAll(".context-menu li"); const expectedShortcutNames: ShortcutName[] = [ - "cut", "copyStyles", "pasteStyles", "deleteSelectedElements", @@ -693,7 +692,6 @@ describe("regression tests", () => { const contextMenu = document.querySelector(".context-menu"); const contextMenuOptions = document.querySelectorAll(".context-menu li"); const expectedShortcutNames: ShortcutName[] = [ - "cut", "copyStyles", "pasteStyles", "deleteSelectedElements", @@ -743,7 +741,6 @@ describe("regression tests", () => { const contextMenu = document.querySelector(".context-menu"); const contextMenuOptions = document.querySelectorAll(".context-menu li"); const expectedShortcutNames: ShortcutName[] = [ - "cut", "copyStyles", "pasteStyles", "deleteSelectedElements",