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,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 && {
+          _isMobile &&
-            name: "paste",
+            navigator.clipboard && {
-            perform: (elements, appStates) => {
+              name: "paste",
-              this.pasteFromClipboard(null);
+              perform: (elements, appStates) => {
-              return {
+                this.pasteFromClipboard(null);
-                commitToHistory: false,
+                return {
-              };
+                  commitToHistory: false,
+                };
+              },
+              contextItemLabel: "labels.paste",
             },
-            contextItemLabel: "labels.paste",
+          _isMobile && navigator.clipboard && separator,
-          },
-          separator,
           probablySupportsClipboardBlob &&
             elements.length > 0 &&
             actionCopyAsPng,
@@ -3669,19 +3673,20 @@ class App extends React.Component<ExcalidrawProps, AppState> {
 
     ContextMenu.push({
       options: [
-        actionCut,
+        _isMobile && actionCut,
-        navigator.clipboard && actionCopy,
+        _isMobile && navigator.clipboard && actionCopy,
-        navigator.clipboard && {
+        _isMobile &&
-          name: "paste",
+          navigator.clipboard && {
-          perform: (elements, appStates) => {
+            name: "paste",
-            this.pasteFromClipboard(null);
+            perform: (elements, appStates) => {
-            return {
+              this.pasteFromClipboard(null);
-              commitToHistory: false,
+              return {
-            };
+                commitToHistory: false,
+              };
+            },
+            contextItemLabel: "labels.paste",
           },
-          contextItemLabel: "labels.paste",
+        _isMobile && separator,
-        },
-        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",