add copy file name and path, and shell quoting options as well

frontend/app/view/directorypreview.tsx

@@ -23,6 +23,7 @@ import dayjs from "dayjs";
 import * as jotai from "jotai";
 import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { quote as shellQuote } from "shell-quote";
 
 import { OverlayScrollbars } from "overlayscrollbars";
 import "./directorypreview.less";
@@ -391,13 +392,26 @@ function TableBody({
         (e: any, path: string, mimetype: string) => {
             e.preventDefault();
             e.stopPropagation();
-            const menu = [
+            const fileName = path.split("/").pop();
+            const menu: ContextMenuItem[] = [
                 {
-                    label: "Delete File",
+                    label: "Copy File Name",
-                    click: async () => {
+                    click: () => navigator.clipboard.writeText(fileName),
-                        await services.FileService.DeleteFile(path).catch((e) => console.log(e));
+                },
-                        setRefreshVersion((current) => current + 1);
+                {
-                    },
+                    label: "Copy Full File Name",
+                    click: () => navigator.clipboard.writeText(path),
+                },
+                {
+                    label: "Copy File Name (Shell Quoted)",
+                    click: () => navigator.clipboard.writeText(shellQuote([fileName])),
+                },
+                {
+                    label: "Copy Full File Name (Shell Quoted)",
+                    click: () => navigator.clipboard.writeText(shellQuote([path])),
+                },
+                {
+                    type: "separator",
                 },
                 {
                     label: "Download File",
@@ -405,6 +419,9 @@ function TableBody({
                         getApi().downloadFile(path);
                     },
                 },
+                {
+                    type: "separator",
+                },
                 {
                     label: "Open Preview in New Block",
                     click: async () => {
@@ -431,6 +448,14 @@ function TableBody({
                     },
                 });
             }
+            menu.push({ type: "separator" });
+            menu.push({
+                label: "Delete File",
+                click: async () => {
+                    await services.FileService.DeleteFile(path).catch((e) => console.log(e));
+                    setRefreshVersion((current) => current + 1);
+                },
+            });
             ContextMenuModel.showContextMenu(menu, e);
         },
         [setRefreshVersion]

package.json

@@ -40,6 +40,7 @@
         "@types/node": "^20.14.12",
         "@types/papaparse": "^5",
         "@types/react": "^18.3.3",
+        "@types/shell-quote": "^1",
         "@types/sprintf-js": "^1",
         "@types/throttle-debounce": "^5",
         "@types/tinycolor2": "^1",
@@ -102,6 +103,7 @@
         "rehype-raw": "^7.0.0",
         "remark-gfm": "^4.0.0",
         "rxjs": "^7.8.1",
+        "shell-quote": "^1.8.1",
         "sprintf-js": "^1.1.3",
         "throttle-debounce": "^5.0.2",
         "tinycolor2": "^1.6.0",

yarn.lock

@@ -3907,6 +3907,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/shell-quote@npm:^1":
+  version: 1.7.5
+  resolution: "@types/shell-quote@npm:1.7.5"
+  checksum: 10c0/ddcf225e85e5520e3f44411d7d79eee0e56477fab705d0d93e293b61b9f8de2a57db6e859d492a24bc9e0d071c0490271efeae832756e2ac0d4d255922ac281d
+  languageName: node
+  linkType: hard
+
 "@types/sprintf-js@npm:^1":
   version: 1.1.4
   resolution: "@types/sprintf-js@npm:1.1.4"
@@ -11309,6 +11316,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"shell-quote@npm:^1.8.1":
+  version: 1.8.1
+  resolution: "shell-quote@npm:1.8.1"
+  checksum: 10c0/8cec6fd827bad74d0a49347057d40dfea1e01f12a6123bf82c4649f3ef152fc2bc6d6176e6376bffcd205d9d0ccb4f1f9acae889384d20baff92186f01ea455a
+  languageName: node
+  linkType: hard
+
 "side-channel@npm:^1.0.4":
   version: 1.0.6
   resolution: "side-channel@npm:1.0.6"
@@ -11808,6 +11822,7 @@ __metadata:
     "@types/node": "npm:^20.14.12"
     "@types/papaparse": "npm:^5"
     "@types/react": "npm:^18.3.3"
+    "@types/shell-quote": "npm:^1"
     "@types/sprintf-js": "npm:^1"
     "@types/throttle-debounce": "npm:^5"
     "@types/tinycolor2": "npm:^1"
@@ -11849,6 +11864,7 @@ __metadata:
     remark-gfm: "npm:^4.0.0"
     rollup-plugin-flow: "npm:^1.1.1"
     rxjs: "npm:^7.8.1"
+    shell-quote: "npm:^1.8.1"
     sprintf-js: "npm:^1.1.3"
     storybook: "npm:^8.2.6"
     throttle-debounce: "npm:^5.0.2"