Merge pull request #146 from mostafaznv/dev

fix: display alert both before reloading and when pressing the browser back button #144
mostafaznv · Oct 9, 2024 · 37ed51d · 37ed51d
2 parents a7542e0 + 6852465
commit 37ed51d
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 19 deletions.
diff --git a/dist/js/field.js b/dist/js/field.js
diff --git a/docs/advanced-usage/ckeditor-field-options/alert-before-unsaved-changes.md b/docs/advanced-usage/ckeditor-field-options/alert-before-unsaved-changes.md
@@ -28,7 +28,7 @@ class Article extends Resource
 ```
 
 {% hint style="info" %}
-This feature has been available since <mark style="color:red;">v7.6.0</mark>
+This feature has been available since <mark style="color:red;">v7.7.0</mark>
 {% endhint %}
 
 

diff --git a/...advanced-usage/configuration/toolbars/toolbar-1/alert-before-unsaved-changes.md b/...advanced-usage/configuration/toolbars/toolbar-1/alert-before-unsaved-changes.md
@@ -13,7 +13,7 @@ if you’d rather disable this behavior, simply set <mark style="color:red;">`to
 
 
 {% hint style="info" %}
-This feature has been available since <mark style="color:red;">v7.6.0</mark>
+This feature has been available since <mark style="color:red;">v7.7.0</mark>
 {% endhint %}
 
 

diff --git a/resources/js/fields/editor-field.vue b/resources/js/fields/editor-field.vue
@@ -30,12 +30,12 @@ import CkEditor from '../ckeditor/ckeditor'
 import SnippetBrowser from "../components/snippet-browser/SnippetBrowser.vue"
 import MediaBrowser from '../components/media-browser/MediaBrowser.vue'
 import HasUUID from "../components/mixins/hasUUID"
-import {DependentFormField, HandlesValidationErrors} from 'laravel-nova'
+import {DependentFormField, HandlesValidationErrors, PreventsFormAbandonment} from 'laravel-nova'
 import debounce from 'lodash/debounce'
 import RegexParser from 'regex-parser'
 
 export default {
-    mixins: [DependentFormField, HandlesValidationErrors, HasUUID],
+    mixins: [DependentFormField, HandlesValidationErrors, PreventsFormAbandonment, HasUUID],
     props: ['resourceName', 'resourceId', 'field', 'toolbar', 'formUniqueId'],
     components: {SnippetBrowser, MediaBrowser},
     data() {
@@ -117,6 +117,10 @@ export default {
 
                     model.document.on('change:data', () => {
                         this.fieldHasChanged = true
+
+                        if (this.currentField.alertBeforeUnsavedChanges) {
+                            this.preventLeavingForm()
+                        }
                     })
 
                     editor.editing.view.change((writer) => {
@@ -289,8 +293,6 @@ export default {
 
         fill(formData) {
             if (this.currentlyIsVisible) {
-                this.fieldHasChanged = false
-
                 formData.append(this.currentField.attribute, this.value || '')
             }
         },
@@ -331,16 +333,6 @@ export default {
                 resizeObserver.observe(innerEditor[0])
             }
         },
-
-        alertOnUnchangedSaves() {
-            if (this.currentField.alertBeforeUnsavedChanges) {
-                window.addEventListener('beforeunload', (event) => {
-                    if (this.fieldHasChanged) {
-                        event.preventDefault()
-                    }
-                })
-            }
-        }
     },
     created() {
         this.$options[this.editorUUID] = this.uuid()
@@ -353,8 +345,6 @@ export default {
         }
 
         this.mounted = true
-
-        this.alertOnUnchangedSaves()
     },
     beforeUnmount() {
         this.destroyCkEditor()