Add Cut to menus (#2511)

Co-authored-by: Zen Tang <zen@wayve.ai>

src/components/App.tsx

@@ -873,8 +873,7 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     if (isWritableElement(event.target)) {
       return;
     }
-    this.copyAll();
+    this.cutAll();
-    this.actionManager.executeAction(actionDeleteSelected);
     event.preventDefault();
   });
 
@@ -886,6 +885,11 @@ class App extends React.Component<ExcalidrawProps, AppState> {
     event.preventDefault();
   });
 
+  private cutAll = () => {
+    this.copyAll();
+    this.actionManager.executeAction(actionDeleteSelected);
+  };
+
   private copyAll = () => {
     copyToClipboard(this.scene.getElements(), this.state);
   };
@@ -3621,6 +3625,10 @@ class App extends React.Component<ExcalidrawProps, AppState> {
 
     ContextMenu.push({
       options: [
+        {
+          label: t("labels.cut"),
+          action: this.cutAll,
+        },
         navigator.clipboard && {
           label: t("labels.copy"),
           action: this.copyAll,

src/components/ShortcutsDialog.tsx

@@ -240,6 +240,10 @@ export const ShortcutsDialog = ({ onClose }: { onClose?: () => void }) => {
                 ]}
                 isOr={true}
               />
+              <Shortcut
+                label={t("labels.cut")}
+                shortcuts={[getShortcutKey("CtrlOrCmd+X")]}
+              />
               <Shortcut
                 label={t("labels.copy")}
                 shortcuts={[getShortcutKey("CtrlOrCmd+C")]}

src/locales/en.json

@@ -4,6 +4,7 @@
     "selectAll": "Select all",
     "multiSelect": "Add element to selection",
     "moveCanvas": "Move canvas",
+    "cut": "Cut",
     "copy": "Copy",
     "copyAsPng": "Copy to clipboard as PNG",
     "copyAsSvg": "Copy to clipboard as SVG",

src/tests/regressionTests.test.tsx

@@ -657,6 +657,7 @@ describe("regression tests", () => {
     const contextMenu = document.querySelector(".context-menu");
     const options = contextMenu?.querySelectorAll(".context-menu-option");
     const expectedOptions = [
+      "Cut",
       "Copy styles",
       "Paste styles",
       "Delete",
@@ -669,7 +670,7 @@ describe("regression tests", () => {
     ];
 
     expect(contextMenu).not.toBeNull();
-    expect(contextMenu?.children.length).toBe(9);
+    expect(contextMenu?.children.length).toBe(10);
     options?.forEach((opt, i) => {
       expect(opt.textContent).toBe(expectedOptions[i]);
     });
@@ -699,6 +700,7 @@ describe("regression tests", () => {
     const contextMenu = document.querySelector(".context-menu");
     const options = contextMenu?.querySelectorAll(".context-menu-option");
     const expectedOptions = [
+      "Cut",
       "Copy styles",
       "Paste styles",
       "Delete",
@@ -712,7 +714,7 @@ describe("regression tests", () => {
     ];
 
     expect(contextMenu).not.toBeNull();
-    expect(contextMenu?.children.length).toBe(10);
+    expect(contextMenu?.children.length).toBe(11);
     options?.forEach((opt, i) => {
       expect(opt.textContent).toBe(expectedOptions[i]);
     });
@@ -746,6 +748,7 @@ describe("regression tests", () => {
     const contextMenu = document.querySelector(".context-menu");
     const options = contextMenu?.querySelectorAll(".context-menu-option");
     const expectedOptions = [
+      "Cut",
       "Copy styles",
       "Paste styles",
       "Delete",
@@ -759,7 +762,7 @@ describe("regression tests", () => {
     ];
 
     expect(contextMenu).not.toBeNull();
-    expect(contextMenu?.children.length).toBe(10);
+    expect(contextMenu?.children.length).toBe(11);
     options?.forEach((opt, i) => {
       expect(opt.textContent).toBe(expectedOptions[i]);
     });