feat: Remove copy & paste from context menu on desktop (#2872)

* Remove copy & paste from context menu on desktop

* fix build

* Make requested changes

* More changes

* make into function

* update changelog

* fix tests

Co-authored-by: dwelle <luzar.david@gmail.com>

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,11 +3626,14 @@ 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: [
+          _isMobile &&
             navigator.clipboard && {
               name: "paste",
               perform: (elements, appStates) => {
@@ -3640,7 +3644,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
               },
               contextItemLabel: "labels.paste",
             },
-          separator,
+          _isMobile && navigator.clipboard && separator,
           probablySupportsClipboardBlob &&
             elements.length > 0 &&
             actionCopyAsPng,
@@ -3669,8 +3673,9 @@ class App extends React.Component<ExcalidrawProps, AppState> {
 
     ContextMenu.push({
       options: [
-        actionCut,
+        _isMobile && actionCut,
-        navigator.clipboard && actionCopy,
+        _isMobile && navigator.clipboard && actionCopy,
+        _isMobile &&
           navigator.clipboard && {
             name: "paste",
             perform: (elements, appStates) => {
@@ -3681,7 +3686,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
             },
             contextItemLabel: "labels.paste",
           },
-        separator,
+        _isMobile && separator,
         probablySupportsClipboardBlob && actionCopyAsPng,
         probablySupportsClipboardWriteText && actionCopyAsSvg,
         separator,

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
+    query.current = getIsMobileMatcher();
-      ? window.matchMedia(variables.isMobileQuery)
-      : (({
-          matches: false,
-          addListener: () => {},
-          removeListener: () => {},
-        } as any) as MediaQueryList);
   }
   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);
 }

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

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",