fix: combined delete into a single flow

Author: hrhv

packages/imagekit-editor-dev/package.json

@@ -1,6 +1,6 @@
 {
   "name": "imagekit-editor-dev",
-  "version": "2.2.0-stage-30-04-2026.11",
+  "version": "2.2.0-stage-30-04-2026.12",
   "description": "AI Image Editor powered by ImageKit",
   "scripts": {
     "prepack": "yarn build",

packages/imagekit-editor-dev/src/components/header/SettingsModal.test.tsx

@@ -3,6 +3,7 @@ import { act, fireEvent, render, screen, waitFor } from "@testing-library/react"
 import { beforeEach, describe, expect, it, vi } from "vitest"
 import { TemplateStorageContextProvider } from "../../context/TemplateStorageContext"
 import type { TemplateRecord } from "../../storage"
+import type { TemplateStorageProvider } from "../../storage/types"
 import { useEditorStore } from "../../store"
 import { SettingsModal } from "./SettingsModal"
 
@@ -31,36 +32,30 @@ function renderModal(opts: {
   data?: TemplateRecord
   onClose?: () => void
   onSaved?: (r: TemplateRecord) => void
-  onDeleted?: () => void
-  deleteTemplate?: ((id: string) => Promise<void>) | undefined
-  // biome-ignore lint/suspicious/noExplicitAny: test stub
-  saveTemplate?: (r: any) => Promise<TemplateRecord>
+  onDeleteRequested?: ((id: string) => Promise<void>) | undefined
+  saveTemplate?: (r: unknown) => Promise<TemplateRecord>
 }) {
   const data = opts.data ?? makeTemplate()
 
-  const provider = {
+  const provider: TemplateStorageProvider = {
     getProviderName: () => "test",
     getCurrentUserSession: () => ({ id: "u1" }),
     listTemplates: async () => [],
     getTemplate: async () => data,
-    // biome-ignore lint/suspicious/noExplicitAny: test stub
     saveTemplate:
-      opts.saveTemplate ?? (async (_r: any) => makeTemplate({ id: "saved" })),
+      opts.saveTemplate ??
+      (async (_r: unknown) => makeTemplate({ id: "saved" })),
     setTemplatePinned: vi.fn(),
-    ...(opts.deleteTemplate !== undefined
-      ? { deleteTemplate: opts.deleteTemplate }
-      : {}),
   }
 
   return render(
     <ChakraProvider>
-      {/* biome-ignore lint/suspicious/noExplicitAny: test stub */}
-      <TemplateStorageContextProvider provider={provider as any}>
+      <TemplateStorageContextProvider provider={provider}>
         <SettingsModal
           data={data}
           onClose={opts.onClose ?? vi.fn()}
           onSaved={opts.onSaved}
-          onDeleted={opts.onDeleted}
+          onDeleteRequested={opts.onDeleteRequested}
         />
       </TemplateStorageContextProvider>
     </ChakraProvider>,
@@ -77,22 +72,22 @@ describe("SettingsModal", () => {
   })
 
   describe("delete confirmation flow", () => {
-    it("does NOT call deleteTemplate immediately when Delete is clicked", async () => {
-      const deleteTemplate = vi.fn(async () => {})
-      renderModal({ deleteTemplate })
+    it("does NOT call onDeleteRequested immediately when Delete is clicked", async () => {
+      const onDeleteRequested = vi.fn(async () => {})
+      renderModal({ onDeleteRequested })
 
       expect(await screen.findByText("Template Settings")).toBeTruthy()
 
       act(() => {
         fireEvent.click(screen.getByText("Delete"))
       })
 
-      // deleteTemplate must NOT have been called yet
-      expect(deleteTemplate).not.toHaveBeenCalled()
+      // onDeleteRequested must NOT have been called yet
+      expect(onDeleteRequested).not.toHaveBeenCalled()
     })
 
     it("shows the confirmation panel after clicking Delete", async () => {
-      renderModal({ deleteTemplate: vi.fn(async () => {}) })
+      renderModal({ onDeleteRequested: vi.fn(async () => {}) })
 
       expect(await screen.findByText("Template Settings")).toBeTruthy()
 
@@ -106,9 +101,9 @@ describe("SettingsModal", () => {
       expect(screen.getByText("Yes, delete")).toBeTruthy()
     })
 
-    it("does NOT call deleteTemplate when confirmation is dismissed with Cancel", async () => {
-      const deleteTemplate = vi.fn(async () => {})
-      renderModal({ deleteTemplate })
+    it("does NOT call onDeleteRequested when confirmation is dismissed with Cancel", async () => {
+      const onDeleteRequested = vi.fn(async () => {})
+      renderModal({ onDeleteRequested })
 
       expect(await screen.findByText("Template Settings")).toBeTruthy()
 
@@ -126,16 +121,15 @@ describe("SettingsModal", () => {
 
       // Panel should be gone
       expect(screen.queryByText("Delete template?")).toBeNull()
-      // deleteTemplate still must not have been called
-      expect(deleteTemplate).not.toHaveBeenCalled()
+      // onDeleteRequested still must not have been called
+      expect(onDeleteRequested).not.toHaveBeenCalled()
     })
 
-    it("calls deleteTemplate only after clicking Yes, delete", async () => {
-      const deleteTemplate = vi.fn(async () => {})
-      const onDeleted = vi.fn()
+    it("calls onDeleteRequested only after clicking Yes, delete", async () => {
+      const onDeleteRequested = vi.fn(async () => {})
       const onClose = vi.fn()
 
-      renderModal({ deleteTemplate, onDeleted, onClose })
+      renderModal({ onDeleteRequested, onClose })
 
       expect(await screen.findByText("Template Settings")).toBeTruthy()
 
@@ -152,16 +146,15 @@ describe("SettingsModal", () => {
       })
 
       await waitFor(() => {
-        expect(deleteTemplate).toHaveBeenCalledTimes(1)
-        expect(deleteTemplate).toHaveBeenCalledWith("t-1")
+        expect(onDeleteRequested).toHaveBeenCalledTimes(1)
+        expect(onDeleteRequested).toHaveBeenCalledWith("t-1")
       })
 
-      expect(onDeleted).toHaveBeenCalledTimes(1)
       expect(onClose).toHaveBeenCalled()
     })
 
     it("Delete button is disabled while confirmation panel is open", async () => {
-      renderModal({ deleteTemplate: vi.fn(async () => {}) })
+      renderModal({ onDeleteRequested: vi.fn(async () => {}) })
 
       expect(await screen.findByText("Template Settings")).toBeTruthy()
 

packages/imagekit-editor-dev/src/components/header/SettingsModal.tsx

@@ -31,8 +31,14 @@ export interface SettingsModalProps {
   onClose(): void
   /** Called with the updated record after a successful save. */
   onSaved?(updated: TemplateRecord): void
-  /** Called after the template is successfully deleted. */
-  onDeleted?(): void
+  /**
+   * Called after the user confirms deletion.
+   *
+   * `SettingsModal` does not delete templates itself. Callers must provide a
+   * single delete implementation that can also handle required side-effects
+   * (list refresh, editor reset, etc.).
+   */
+  onDeleteRequested?(id: string): Promise<void> | void
 }
 
 // ---------------------------------------------------------------------------
@@ -53,7 +59,7 @@ export function SettingsModal({
   data,
   onClose,
   onSaved,
-  onDeleted,
+  onDeleteRequested,
 }: SettingsModalProps) {
   const provider = useTemplateStorage()
   const permissions = useTemplatePermissions(data)
@@ -124,13 +130,12 @@ export function SettingsModal({
   // Delete
   // -------------------------------------------------------------------------
   const handleDeleteConfirmed = async () => {
-    if (!provider || !provider.deleteTemplate) return
+    if (!onDeleteRequested) return
 
     setIsDeleting(true)
     setShowDeleteConfirm(false)
     try {
-      await provider.deleteTemplate(data.id)
-      onDeleted?.()
+      await onDeleteRequested(data.id)
       onClose()
     } catch (err) {
       if (
@@ -410,8 +415,8 @@ export function SettingsModal({
           borderTopWidth="1px"
           borderColor="editorGray.300"
         >
-          {/* Delete button — only shown when deleteTemplate is supported */}
-          {provider?.deleteTemplate ? (
+          {/* Delete button — only shown when deletion is supported */}
+          {onDeleteRequested ? (
             <FlexAny>
               <Box
                 as="button"
@@ -432,10 +437,8 @@ export function SettingsModal({
                 fontWeight="medium"
                 onClick={() => {
                   if (!permissions.delete) return
-
-                  return isDeleting || isSaving || showDeleteConfirm
-                    ? undefined
-                    : () => setShowDeleteConfirm(true)
+                  if (isDeleting || isSaving || showDeleteConfirm) return
+                  setShowDeleteConfirm(true)
                 }}
                 aria-disabled={isDeleting || isSaving || showDeleteConfirm}
                 disabled={!permissions.delete}

packages/imagekit-editor-dev/src/components/header/index.tsx

@@ -280,7 +280,9 @@ export const Header = ({
               templateIsPrivate: updated.isPrivate,
             })
           }}
-          onDeleted={() => {
+          onDeleteRequested={async (id) => {
+            if (!provider?.deleteTemplate) return
+            await provider.deleteTemplate(id)
             useEditorStore.getState().resetToNewTemplate()
           }}
         />

packages/imagekit-editor-dev/src/components/templates/TemplatesLibraryView.tsx

@@ -213,7 +213,7 @@ export function TemplatesLibraryView({ onClose }: Props) {
     }
   }
 
-  const handleDeleteTemplate = useCallback(
+  const deleteTemplateAndCleanup = useCallback(
     async (record: TemplateRecord) => {
       if (!provider) return
       if (!provider.deleteTemplate) return
@@ -621,7 +621,7 @@ export function TemplatesLibraryView({ onClose }: Props) {
                           }
                           onTogglePin={handleTogglePin}
                           isPinning={pinningId === record.id}
-                          onDelete={handleDeleteTemplate}
+                          onDelete={deleteTemplateAndCleanup}
                           onSettings={handleOpenSettings}
                           isCurrent={isCurrent}
                           isActive={isActive}
@@ -649,10 +649,8 @@ export function TemplatesLibraryView({ onClose }: Props) {
               prev.map((t) => (t.id === updated.id ? updated : t)),
             )
           }}
-          onDeleted={() => {
-            setTemplates((prev) =>
-              prev.filter((t) => t.id !== settingsRecord.id),
-            )
+          onDeleteRequested={async () => {
+            await deleteTemplateAndCleanup(settingsRecord)
           }}
         />
       )}

packages/imagekit-editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imagekit/editor",
-  "version": "2.2.0-stage-30-04-2026.11",
+  "version": "2.2.0-stage-30-04-2026.12",
   "description": "Image Editor powered by ImageKit",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",