diff --git a/README.md b/README.md
index 1e255ac1..dbb69472 100644
--- a/README.md
+++ b/README.md
@@ -497,6 +497,16 @@ If provided will be used in overriding the default translations arrived locally
By default once the user makes any change/edit on the image and hasn't saved the image yet and tried to leave the page before saving then a browser's confirmation would be shown asking him if he really wants to leave before saving, `true` means it won't be shown.
+#### `avoidChangesNotSavedAlertOnClose`
+
+Type: `boolean`
+
+Supported version: +v4.0.0
+
+Default: `false`
+
+By default once the user makes any change/edit on the image and hasn't saved the image yet and then clicks on the close button, a confirmation modal will be shown asking if they really want to close without saving. Setting this to `true` will skip showing the confirmation modal and close immediately.
+
#### `showBackButton`
Type: `boolean`
diff --git a/packages/react-filerobot-image-editor/src/components/Topbar/ConfirmationModal.jsx b/packages/react-filerobot-image-editor/src/components/Topbar/ConfirmationModal.jsx
index f3572e53..5af23c4d 100644
--- a/packages/react-filerobot-image-editor/src/components/Topbar/ConfirmationModal.jsx
+++ b/packages/react-filerobot-image-editor/src/components/Topbar/ConfirmationModal.jsx
@@ -17,7 +17,7 @@ const ConfirmationModal = ({ children, isReset }) => {
dispatch,
isResetted = true,
haveNotSavedChanges,
- config: { onClose },
+ config: { onClose, avoidChangesNotSavedAlertOnClose },
} = useStore();
const [isModalOpened, setIsModalOpened] = useState(false);
@@ -33,10 +33,6 @@ const ConfirmationModal = ({ children, isReset }) => {
setIsModalOpened(false);
};
- const openModal = () => {
- setIsModalOpened(true);
- };
-
const dispatchReset = useCallback(() => {
dispatch({ type: RESET, payload: { config } });
cancelModal();
@@ -49,6 +45,15 @@ const ConfirmationModal = ({ children, isReset }) => {
dispatchReset();
};
+ const openModal = () => {
+ // Don't open the modal if avoidChangesNotSavedAlertOnClose is true
+ if (avoidChangesNotSavedAlertOnClose) {
+ closeWithReason();
+ return;
+ }
+ setIsModalOpened(true);
+ };
+
return (
<>
{React.cloneElement(children, {
diff --git a/packages/react-filerobot-image-editor/src/context/defaultConfig.js b/packages/react-filerobot-image-editor/src/context/defaultConfig.js
index 5495dc98..62b48067 100644
--- a/packages/react-filerobot-image-editor/src/context/defaultConfig.js
+++ b/packages/react-filerobot-image-editor/src/context/defaultConfig.js
@@ -106,6 +106,7 @@ export default {
translations: null,
language: 'en',
avoidChangesNotSavedAlertOnLeave: false,
+ avoidChangesNotSavedAlertOnClose: false,
loadableDesignState: null,
moreSaveOptions: [],
savingPixelRatio: 4,
diff --git a/packages/react-filerobot-image-editor/src/index.d.ts b/packages/react-filerobot-image-editor/src/index.d.ts
index 3e48d062..c1f1c195 100644
--- a/packages/react-filerobot-image-editor/src/index.d.ts
+++ b/packages/react-filerobot-image-editor/src/index.d.ts
@@ -316,6 +316,7 @@ export interface FilerobotImageEditorConfig {
| 'ro'
| string;
avoidChangesNotSavedAlertOnLeave?: boolean;
+ avoidChangesNotSavedAlertOnClose?: boolean;
loadableDesignState?: imageDesignState;
showBackButton?: boolean;
savingPixelRatio: number;
diff --git a/public/demo-config.js b/public/demo-config.js
index 52cf0abe..a50fcfe1 100644
--- a/public/demo-config.js
+++ b/public/demo-config.js
@@ -344,6 +344,7 @@ const config = {
// translations: null,
// language: 'en', // available same as on backend ('en', 'fr', 'de', 'it', 'pt', 'es', 'nl', 'pl', 'ro')
// avoidChangesNotSavedAlertOnLeave: false, // true => user tries to close the tab and the it is not
+ // avoidChangesNotSavedAlertOnClose: false, // true => don't show confirmation modal when closing the editor
// loadableDesignState: null, // if provided, it will be used in loading the design state, [TODO: NEEDS TO BE IMPROVED]
// defaultSavedImageType: null, // 'png', 'jpeg' & 'webp' => 'png' must be provided you want the image to be transparent and use elliptical crop || null (defaualt) means use the same provided image extension (extracted from the image's src url), if it was unknwon PNG will be used
// defaultSavedImageQuality: 0.92, // Min: 0.1, Max: 1, (1% - 100%) applied for 'jpg', 'jpeg' & 'webp' only