diff --git a/packages/translation/src/lang/en.json b/packages/translation/src/lang/en.json index 8b5e89369..7c31ce087 100644 --- a/packages/translation/src/lang/en.json +++ b/packages/translation/src/lang/en.json @@ -1543,7 +1543,15 @@ "width": "Width", "height": "Height" }, - "placeholder": "Start writing your notes" + "placeholder": "Start writing your notes", + "dismiss": { + "title": "Dismiss changes?", + "message": "You have unsaved changes in your notebook. Are you sure you want to discard them?", + "action": { + "discard": "Discard changes", + "keepEditing": "Keep editing" + } + } }, "iframe": { "name": "iFrame", diff --git a/packages/widgets/src/notebook/notebook.tsx b/packages/widgets/src/notebook/notebook.tsx index 28a8d27eb..af8062945 100644 --- a/packages/widgets/src/notebook/notebook.tsx +++ b/packages/widgets/src/notebook/notebook.tsx @@ -72,6 +72,7 @@ import "./notebook.css"; import { useSession } from "@homarr/auth/client"; import { constructBoardPermissions } from "@homarr/auth/shared"; import { useRequiredBoard } from "@homarr/boards/context"; +import { useConfirmModal } from "@homarr/modals"; const iconProps = { size: 30, @@ -240,9 +241,20 @@ export function Notebook({ options, setOptions, isEditMode, boardId, itemId }: W return false; }, [editor]); + const { openConfirmModal } = useConfirmModal(); const handleEditCancel = useCallback(() => { - setIsEditing(handleEditCancelCallback); - }, [setIsEditing, handleEditCancelCallback]); + openConfirmModal({ + title: t("widget.notebook.dismiss.title"), + children: t("widget.notebook.dismiss.message"), + labels: { + confirm: t("widget.notebook.dismiss.action.discard"), + cancel: t("widget.notebook.dismiss.action.keepEditing"), + }, + onConfirm: () => { + setIsEditing(handleEditCancelCallback); + }, + }); + }, [setIsEditing, handleEditCancelCallback, openConfirmModal, t]); const handleEditToggle = useCallback(() => { setIsEditing(handleEditToggleCallback);