feat: alert before unsaved changes #144

config/nova-ckeditor.php

@@ -114,6 +114,8 @@
 
             'force-paste-as-plain-text' => false,
 
+            'alert-before-unsaved-changes' => true,
+
             'ui-language' => [
                 'name'   => 'en',
 

docs/SUMMARY.md

@@ -28,6 +28,7 @@
   * [Limit On Index](advanced-usage/ckeditor-field-options/limit-on-index.md)
   * [Content Language](advanced-usage/ckeditor-field-options/content-language.md)
   * [Force Paste as Plain Text](advanced-usage/ckeditor-field-options/force-page-as-plain-text.md)
+  * [Alert Before Unsaved Changes](advanced-usage/ckeditor-field-options/alert-before-unsaved-changes.md)
   * [Text Part Language](advanced-usage/ckeditor-field-options/text-part-language.md)
   * [General HTML Support](advanced-usage/ckeditor-field-options/general-html-support.md)
   * [Group Items In Overflow Mode](advanced-usage/ckeditor-field-options/group-items-in-overflow-mode.md)
@@ -54,6 +55,7 @@
       * [Options](advanced-usage/configuration/toolbars/toolbar-1/options.md)
       * [Content Lang](advanced-usage/configuration/toolbars/toolbar-1/content-lang.md)
       * [Force Past as Plain Text](advanced-usage/configuration/toolbars/toolbar-1/force-page-as-plain-text.md)
+      * [Alert Before Unsaved Changes](advanced-usage/configuration/toolbars/toolbar-1/alert-before-unsaved-changes.md)
       * [UI Language](advanced-usage/configuration/toolbars/toolbar-1/ui-language/README.md)
         * [UI Language Name](advanced-usage/configuration/toolbars/toolbar-1/ui-language/ui-language-name.md)
         * [UI Language Script](advanced-usage/configuration/toolbars/toolbar-1/ui-language/ui-language-script.md)

docs/advanced-usage/ckeditor-field-options/alert-before-unsaved-changes.md

@@ -0,0 +1,35 @@
+---
+description: alertBeforeUnsavedChanges
+---
+
+# Alert Before Unsaved Changes
+
+<table><thead><tr><th>Argument</th><th width="141">Type</th><th width="149" data-type="checkbox">Required</th><th>Default</th></tr></thead><tbody><tr><td>status</td><td>bool</td><td>false</td><td>true</td></tr></tbody></table>
+
+This feature is enabled by default and triggers an alert if a user attempts to navigate away or refresh the page without saving CKEditor content, just like other form fields in Nova.
+
+
+
+
+
+```php
+use Mostafaznv\NovaCkEditor\CkEditor;
+
+class Article extends Resource
+{
+    public function fields(Request $request): array
+    {
+        return [
+            CkEditor::make(trans('Content'), 'content')
+                ->alertBeforeUnsavedChanges()
+        ];
+    }
+}
+```
+
+{% hint style="info" %}
+This feature has been available since <mark style="color:red;">v7.6.0</mark>
+{% endhint %}
+
+
+

docs/advanced-usage/configuration/toolbars/toolbar-1/alert-before-unsaved-changes.md

@@ -0,0 +1,20 @@
+---
+description: toolbars.toolbar-1.alert-before-unsaved-changes
+---
+
+# Alert Before Unsaved Changes
+
+<table><thead><tr><th width="390">Property Name</th><th width="152.33333333333331">Type</th><th>Default</th></tr></thead><tbody><tr><td>toolbars.toolbar-1.alert-before-unsaved-changes</td><td>bool</td><td>true</td></tr></tbody></table>
+
+This feature is enabled by default and triggers an alert if a user attempts to navigate away or refresh the page without saving CKEditor content, just like other form fields in Nova.
+
+if you’d rather disable this behavior, simply set <mark style="color:red;">`toolbars.toolbar-1.alert-before-unsaved-changes`</mark> to <mark style="color:red;">`false`</mark> in the configuration.
+
+
+
+{% hint style="info" %}
+This feature has been available since <mark style="color:red;">v7.6.0</mark>
+{% endhint %}
+
+
+

resources/js/fields/editor-field.vue

@@ -40,7 +40,8 @@ export default {
     components: {SnippetBrowser, MediaBrowser},
     data() {
         return {
-            mounted: false
+            mounted: false,
+            fieldHasChanged: false
         }
     },
     computed: {
@@ -114,6 +115,10 @@ export default {
                         priority: 'lowest'
                     })
 
+                    model.document.on('change:data', () => {
+                        this.fieldHasChanged = true
+                    })
+
                     editor.editing.view.change((writer) => {
                         // set the height of the editor when editing
                         if (this.currentField.height > 1) {
@@ -284,6 +289,8 @@ export default {
 
         fill(formData) {
             if (this.currentlyIsVisible) {
+                this.fieldHasChanged = false
+
                 formData.append(this.currentField.attribute, this.value || '')
             }
         },
@@ -323,6 +330,16 @@ export default {
             if (innerEditor?.length) {
                 resizeObserver.observe(innerEditor[0])
             }
+        },
+
+        alertOnUnchangedSaves() {
+            if (this.currentField.alertBeforeUnsavedChanges) {
+                window.addEventListener('beforeunload', (event) => {
+                    if (this.fieldHasChanged) {
+                        event.preventDefault()
+                    }
+                })
+            }
         }
     },
     created() {
@@ -336,6 +353,8 @@ export default {
         }
 
         this.mounted = true
+
+        this.alertOnUnchangedSaves()
     },
     beforeUnmount() {
         this.destroyCkEditor()

src/CkEditor.php

@@ -71,6 +71,13 @@ class CkEditor extends Field
      */
     public bool $forcePasteAsPlainText;
 
+    /**
+     * Alert Before Unsaved Changes
+     *
+     * @var bool
+     */
+    public bool $alertBeforeUnsavedChanges;
+
     /**
      * Text Part Language
      *
@@ -228,6 +235,19 @@ public function forcePasteAsPlainText(bool $status = true): self
         return $this;
     }
 
+    /**
+     * Set Alert Before Unsaved Changes
+     *
+     * @param bool $status
+     * @return $this
+     */
+    public function alertBeforeUnsavedChanges(bool $status = true): self
+    {
+        $this->alertBeforeUnsavedChanges = $status;
+
+        return $this;
+    }
+
     /**
      * Set Text Part Language
      *
@@ -340,25 +360,26 @@ public function snippets(array $snippets): self
     public function jsonSerialize(): array
     {
         return array_merge(parent::jsonSerialize(), [
-            'toolbarName'            => $this->toolbarName,
-            'snippetBrowser'         => $this->snippetBrowser,
-            'imageBrowser'           => $this->imageBrowser,
-            'videoBrowser'           => $this->videoBrowser,
-            'audioBrowser'           => $this->audioBrowser,
-            'fileBrowser'            => $this->fileBrowser,
-            'toolbar'                => $this->toolbar,
-            'toolbarOptions'         => $this->toolbarOptions,
-            'height'                 => $this->height,
-            'indexLimit'             => $this->indexLimit,
-            'contentLanguage'        => $this->contentLanguage,
-            'forcePasteAsPlainText'  => $this->forcePasteAsPlainText,
-            'textPartLanguage'       => $this->textPartLanguage,
-            'htmlSupport'            => $this->htmlSupport,
-            'uiLanguage'             => $this->uiLanguage,
-            'shouldNotGroupWhenFull' => $this->shouldNotGroupWhenFull,
-            'shouldShow'             => $this->shouldBeExpanded(),
-            'videoHasLaruploadTrait' => $this->videoHasLaruploadTrait(),
-            'imageHasLaruploadTrait' => $this->imageHasLaruploadTrait()
+            'toolbarName'               => $this->toolbarName,
+            'snippetBrowser'            => $this->snippetBrowser,
+            'imageBrowser'              => $this->imageBrowser,
+            'videoBrowser'              => $this->videoBrowser,
+            'audioBrowser'              => $this->audioBrowser,
+            'fileBrowser'               => $this->fileBrowser,
+            'toolbar'                   => $this->toolbar,
+            'toolbarOptions'            => $this->toolbarOptions,
+            'height'                    => $this->height,
+            'indexLimit'                => $this->indexLimit,
+            'contentLanguage'           => $this->contentLanguage,
+            'forcePasteAsPlainText'     => $this->forcePasteAsPlainText,
+            'alertBeforeUnsavedChanges' => $this->alertBeforeUnsavedChanges,
+            'textPartLanguage'          => $this->textPartLanguage,
+            'htmlSupport'               => $this->htmlSupport,
+            'uiLanguage'                => $this->uiLanguage,
+            'shouldNotGroupWhenFull'    => $this->shouldNotGroupWhenFull,
+            'shouldShow'                => $this->shouldBeExpanded(),
+            'videoHasLaruploadTrait'    => $this->videoHasLaruploadTrait(),
+            'imageHasLaruploadTrait'    => $this->imageHasLaruploadTrait()
         ]);
     }
 
@@ -443,6 +464,7 @@ private function prepareToolbar(string $toolbar, array $items = null): void
         $this->snippetBrowser = $this->prepareSnippets($toolbar['snippets']);
         $this->contentLanguage = $toolbar['content-lang'];
         $this->forcePasteAsPlainText = $toolbar['force-paste-as-plain-text'] ?? false;
+        $this->alertBeforeUnsavedChanges = $toolbar['alert-before-unsaved-changes'] ?? true;
         $this->textPartLanguage = $toolbar['text-part-language'] ?? $defaultTextPartLanguage;
         $this->htmlSupport = $toolbar['html-support'] ?? $defaultHtmlSupport;
         $this->uiLanguage = $toolbar['ui-language']['name'] ?? 'en';