feat: confirm before deleting a referenced resource

Author: lyonbot

web/src/components/MemoEditor/ResourceListView.tsx

@@ -2,19 +2,29 @@ import { DndContext, closestCenter, MouseSensor, TouchSensor, useSensor, useSens
 import { arrayMove, SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import { XIcon } from "lucide-react";
 import { Resource } from "@/types/proto/api/v1/resource_service";
+import { useTranslate } from "@/utils/i18n";
 import ResourceIcon from "../ResourceIcon";
 import SortableItem from "./SortableItem";
 
 interface Props {
   resourceList: Resource[];
   setResourceList: (resourceList: Resource[]) => void;
+  checkIfSafeToDeleteResource?: (resource: Resource) => boolean;
 }
 
 const ResourceListView = (props: Props) => {
-  const { resourceList, setResourceList } = props;
+  const { resourceList, setResourceList, checkIfSafeToDeleteResource } = props;
   const sensors = useSensors(useSensor(MouseSensor), useSensor(TouchSensor));
+  const t = useTranslate();
 
   const handleDeleteResource = async (name: string) => {
+    if (
+      typeof checkIfSafeToDeleteResource === "function" &&
+      !checkIfSafeToDeleteResource(resourceList.find((resource) => resource.name === name)!)
+    ) {
+      const confirmationText = t("resource.delete-confirm-referenced");
+      if (!window.confirm(confirmationText)) return;
+    }
     setResourceList(resourceList.filter((resource) => resource.name !== name));
   };
 

web/src/components/MemoEditor/index.tsx

@@ -20,6 +20,7 @@ import { Resource } from "@/types/proto/api/v1/resource_service";
 import { UserSetting } from "@/types/proto/api/v1/user_service";
 import { useTranslate } from "@/utils/i18n";
 import { convertVisibilityFromString, convertVisibilityToString } from "@/utils/memo";
+import { getResourceUrl } from "@/utils/resource";
 import VisibilityIcon from "../VisibilityIcon";
 import AddMemoRelationPopover from "./ActionButton/AddMemoRelationPopover";
 import LocationSelector from "./ActionButton/LocationSelector";
@@ -187,6 +188,14 @@ const MemoEditor = observer((props: Props) => {
     }));
   };
 
+  const checkIfSafeToDeleteResource = (resource: Resource): boolean => {
+    const content = editorRef.current?.getContent();
+    const marker = `(${getResourceUrl(resource)})`;
+    if (content && content.includes(marker)) return false; // referenced!
+
+    return true;
+  };
+
   const handleSetRelationList = (relationList: MemoRelation[]) => {
     setState((prevState) => ({
       ...prevState,
@@ -513,7 +522,11 @@ const MemoEditor = observer((props: Props) => {
           />
         )}
         <Editor ref={editorRef} {...editorConfig} />
-        <ResourceListView resourceList={state.resourceList} setResourceList={handleSetResourceList} />
+        <ResourceListView
+          resourceList={state.resourceList}
+          setResourceList={handleSetResourceList}
+          checkIfSafeToDeleteResource={checkIfSafeToDeleteResource}
+        />
         <RelationListView relationList={referenceRelations} setRelationList={handleSetRelationList} />
         <div className="relative w-full flex flex-row justify-between items-center pt-2" onFocus={(e) => e.stopPropagation()}>
           <div className="flex flex-row justify-start items-center opacity-80 dark:opacity-60 space-x-2">

web/src/locales/en.json

@@ -213,6 +213,7 @@
       "title": "Create Resource",
       "upload-method": "Upload method"
     },
+    "delete-confirm-referenced": "Resource is referenced in memo content, delete anyway?",
     "delete-resource": "Delete Resource",
     "delete-selected-resources": "Delete Selected Resources",
     "fetching-data": "Fetching data…",

web/src/locales/zh-Hans.json

@@ -205,6 +205,7 @@
       "title": "创建资源",
       "upload-method": "上传方式"
     },
+    "delete-confirm-referenced": "资源在正文已中被引用，确定要删除吗？",
     "delete-resource": "删除资源",
     "delete-selected-resources": "删除选中资源",
     "fetching-data": "正在获取数据…",