:art: fix https://github.com/siyuan-note/siyuan/issues/9604

app/appearance/langs/en_US.json

@@ -1,4 +1,5 @@
 {
+  "snippetsTip": "The code snippet has been updated, do you want to save it?",
   "addBelowAbove": "Click to add below<br>⌥Click to add above",
   "imported": "Import completed",
   "mirrorTip": "Mirror database, all data updates will be synchronized to all other mirrors",

app/appearance/langs/es_ES.json

@@ -1,4 +1,5 @@
 {
+  "snippetsTip": "El fragmento de código ha sido actualizado, ¿quieres guardarlo?",
   "addBelowAbove": "Haga clic para agregar abajo<br>⌥Clic para agregar arriba",
   "imported": "Importación completada",
   "mirrorTip": "Base de datos espejo, todas las actualizaciones de datos se sincronizarán con todos los demás espejos",

app/appearance/langs/fr_FR.json

@@ -1,4 +1,5 @@
 {
+  "snippetsTip": "L'extrait de code a été mis à jour, voulez-vous le sauvegarder ?",
   "addBelowAbove": "Cliquez pour ajouter ci-dessous<br>⌥Cliquez pour ajouter ci-dessus",
   "imported": "Importation terminée",
   "mirrorTip": "Base de données miroir, toutes les mises à jour des données seront synchronisées avec tous les autres miroirs",

app/appearance/langs/zh_CHT.json

@@ -1,4 +1,5 @@
 {
+  "snippetsTip": "程式碼片段已更新，是否儲存？",
   "addBelowAbove": "Click 在下方新增<br>⌥Click 在上方新增",
   "imported": "導入完成",
   "mirrorTip": "鏡像資料庫，所有資料更新會同步到其他所有鏡像中",

app/appearance/langs/zh_CN.json

@@ -1,4 +1,5 @@
 {
+  "snippetsTip": "代码片段已更新，是否保存？",
   "addBelowAbove": "Click 在下方添加<br>⌥Click 在上方添加",
   "imported": "导入完成",
   "mirrorTip": "镜像数据库，所有数据更新会同步到其他所有镜像中",

app/src/config/util/snippets.ts

@@ -1,6 +1,8 @@
 import {fetchPost} from "../../util/fetch";
 import {hasClosestByClassName} from "../../protyle/util/hasClosest";
 import {Dialog} from "../../dialog";
+import {objEquals} from "../../util/functions";
+import {confirmDialog} from "../../dialog/confirmDialog";
 
 export const renderSnippet = () => {
     fetchPost("/api/snippet/getSnippet", {type: "all", enabled: 2}, (response) => {
@@ -73,7 +75,13 @@ export const openSnippets = () => {
 <div class="b3-dialog__action">
     <button class="b3-button b3-button--cancel">${window.siyuan.languages.cancel}</button><div class="fn__space"></div>
     <button class="b3-button b3-button--text">${window.siyuan.languages.confirm}</button>
-</div>`
+</div>`,
+            destroyCallback: (options) => {
+                if (options?.cancel === "true") {
+                    return;
+                }
+                setSnippet(dialog, response.data.snippets, removeIds, true);
+            }
         });
         response.data.snippets.forEach((item: ISnippet) => {
             const nameElement = (dialog.element.querySelector(`[data-id="${item.id}"] input`) as HTMLInputElement);
@@ -94,30 +102,11 @@ export const openSnippets = () => {
                 return;
             }
             if (target.classList.contains("b3-button--cancel")) {
-                dialog.destroy();
+                dialog.destroy({cancel: "true"});
                 return;
             }
             if (target.classList.contains("b3-button--text")) {
-                const snippets: ISnippet[] = [];
-                dialog.element.querySelectorAll("[data-id]").forEach((item) => {
-                    snippets.push({
-                        id: item.getAttribute("data-id"),
-                        name: item.querySelector("input").value,
-                        type: item.getAttribute("data-type"),
-                        content: item.querySelector("textarea").value,
-                        enabled: (item.querySelector(".b3-switch") as HTMLInputElement).checked
-                    });
-                });
-                fetchPost("/api/snippet/setSnippet", {snippets}, () => {
-                    removeIds.forEach(item => {
-                        const rmElement = document.querySelector(item);
-                        if (rmElement) {
-                            rmElement.remove();
-                        }
-                    });
-                    renderSnippet();
-                    dialog.destroy();
-                });
+                setSnippet(dialog, response.data.snippets, removeIds);
                 return;
             }
             const tabElement = hasClosestByClassName(target, "item");
@@ -161,3 +150,40 @@ const genSnippet = (options: ISnippet) => {
     <textarea class="fn__block b3-text-field" placeholder="${window.siyuan.languages.codeSnippet}" style="resize: vertical;font-family:var(--b3-font-family-code)" spellcheck="false"></textarea>
 </div><div class="fn__hr--b"></div>`;
 };
+
+const setSnippetPost = (dialog: Dialog, snippets: ISnippet[], removeIds: string[]) => {
+    fetchPost("/api/snippet/setSnippet", {snippets}, () => {
+        removeIds.forEach(item => {
+            const rmElement = document.querySelector(item);
+            if (rmElement) {
+                rmElement.remove();
+            }
+        });
+        renderSnippet();
+        dialog.destroy({cancel: "true"});
+    });
+}
+
+const setSnippet = (dialog: Dialog, oldSnippets: ISnippet[], removeIds: string[], confirm = false) => {
+    const snippets: ISnippet[] = [];
+    dialog.element.querySelectorAll("[data-id]").forEach((item) => {
+        snippets.push({
+            id: item.getAttribute("data-id"),
+            name: item.querySelector("input").value,
+            type: item.getAttribute("data-type"),
+            content: item.querySelector("textarea").value,
+            enabled: (item.querySelector(".b3-switch") as HTMLInputElement).checked
+        });
+    });
+    if (objEquals(oldSnippets, snippets)) {
+        dialog.destroy({cancel: "true"});
+    } else {
+        if (confirm) {
+            confirmDialog(window.siyuan.languages.save, window.siyuan.languages.snippetsTip, () => {
+                setSnippetPost(dialog, snippets, removeIds)
+            })
+        } else {
+            setSnippetPost(dialog, snippets, removeIds)
+        }
+    }
+}