From 478067483f49c8b2cb6ed2d52ad832fd79dd2701 Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Wed, 20 Apr 2022 18:21:21 +0100
Subject: [PATCH] Linked up confirmation prompt to editor switching

---
 resources/js/components/confirm-dialog.js     |  1 -
 resources/js/components/page-editor.js        | 22 +++++++++++++++++++
 resources/lang/en/entities.php                | 10 +++++++--
 .../views/common/confirm-dialog.blade.php     |  2 +-
 resources/views/home/default.blade.php        | 16 ++++++++++++++
 .../pages/parts/editor-toolbar.blade.php      |  6 ++---
 resources/views/pages/parts/form.blade.php    | 16 ++++++++++++++
 7 files changed, 66 insertions(+), 7 deletions(-)

diff --git a/resources/js/components/confirm-dialog.js b/resources/js/components/confirm-dialog.js
index c6c5d103a..858be1b85 100644
--- a/resources/js/components/confirm-dialog.js
+++ b/resources/js/components/confirm-dialog.js
@@ -42,7 +42,6 @@ class ConfirmDialog {
      */
     sendResult(result) {
         if (this.res) {
-            console.log('sending result', result);
             this.res(result)
             this.res = null;
         }
diff --git a/resources/js/components/page-editor.js b/resources/js/components/page-editor.js
index dae807122..ce123e987 100644
--- a/resources/js/components/page-editor.js
+++ b/resources/js/components/page-editor.js
@@ -24,6 +24,8 @@ class PageEditor {
         this.draftDisplayIcon = this.$refs.draftDisplayIcon;
         this.changelogInput = this.$refs.changelogInput;
         this.changelogDisplay = this.$refs.changelogDisplay;
+        this.changeEditorButtons = this.$manyRefs.changeEditor;
+        this.switchDialogContainer = this.$refs.switchDialog;
 
         // Translations
         this.draftText = this.$opts.draftText;
@@ -72,6 +74,9 @@ class PageEditor {
         // Draft Controls
         onSelect(this.saveDraftButton, this.saveDraft.bind(this));
         onSelect(this.discardDraftButton, this.discardDraft.bind(this));
+
+        // Change editor controls
+        onSelect(this.changeEditorButtons, this.changeEditor.bind(this));
     }
 
     setInitialFocus() {
@@ -113,17 +118,21 @@ class PageEditor {
             data.markdown = this.editorMarkdown;
         }
 
+        let didSave = false;
         try {
             const resp = await window.$http.put(`/ajax/page/${this.pageId}/save-draft`, data);
             if (!this.isNewDraft) {
                 this.toggleDiscardDraftVisibility(true);
             }
+
             this.draftNotifyChange(`${resp.data.message} ${Dates.utcTimeStampToLocalTime(resp.data.timestamp)}`);
             this.autoSave.last = Date.now();
             if (resp.data.warning && !this.shownWarningsCache.has(resp.data.warning)) {
                 window.$events.emit('warning', resp.data.warning);
                 this.shownWarningsCache.add(resp.data.warning);
             }
+
+            didSave = true;
         } catch (err) {
             // Save the editor content in LocalStorage as a last resort, just in case.
             try {
@@ -134,6 +143,7 @@ class PageEditor {
             window.$events.emit('error', this.autosaveFailText);
         }
 
+        return didSave;
     }
 
     draftNotifyChange(text) {
@@ -185,6 +195,18 @@ class PageEditor {
         this.discardDraftWrap.classList.toggle('hidden', !show);
     }
 
+    async changeEditor(event) {
+        event.preventDefault();
+
+        const link = event.target.closest('a').href;
+        const dialog = this.switchDialogContainer.components['confirm-dialog'];
+        const [saved, confirmed] = await Promise.all([this.saveDraft(), dialog.show()]);
+
+        if (saved && confirmed) {
+            window.location = link;
+        }
+    }
+
 }
 
 export default PageEditor;
\ No newline at end of file
diff --git a/resources/lang/en/entities.php b/resources/lang/en/entities.php
index 3921828d8..85a77e0cb 100644
--- a/resources/lang/en/entities.php
+++ b/resources/lang/en/entities.php
@@ -197,12 +197,18 @@ return [
     'pages_edit_delete_draft' => 'Delete Draft',
     'pages_edit_discard_draft' => 'Discard Draft',
     'pages_edit_switch_to_markdown' => 'Switch to Markdown Editor',
-    'pages_edit_switch_to_markdown_clean' => '(Clean Markdown Content)',
-    'pages_edit_switch_to_markdown_stable' => '(Stable Markdown Content)',
+    'pages_edit_switch_to_markdown_clean' => '(Clean Content)',
+    'pages_edit_switch_to_markdown_stable' => '(Stable Content)',
     'pages_edit_switch_to_wysiwyg' => 'Switch to WYSIWYG Editor',
     'pages_edit_set_changelog' => 'Set Changelog',
     'pages_edit_enter_changelog_desc' => 'Enter a brief description of the changes you\'ve made',
     'pages_edit_enter_changelog' => 'Enter Changelog',
+    'pages_editor_switch_title' => 'Switch Editor',
+    'pages_editor_switch_are_you_sure' => 'Are you sure you want to change the editor for this page?',
+    'pages_editor_switch_consider_following' => 'Consider the following when changing editors:',
+    'pages_editor_switch_consideration_a' => 'Once saved, the new editor option will be used by any future editors, including those that may not be able to change editor type themselves.',
+    'pages_editor_switch_consideration_b' => 'This can potentially lead to a loss of detail and syntax in certain circumstances.',
+    'pages_editor_switch_consideration_c' => 'Tag or changelog changes, made since last save, won\'t persist across this change.',
     'pages_save' => 'Save Page',
     'pages_title' => 'Page Title',
     'pages_name' => 'Page Name',
diff --git a/resources/views/common/confirm-dialog.blade.php b/resources/views/common/confirm-dialog.blade.php
index 107d04af1..28587d4e8 100644
--- a/resources/views/common/confirm-dialog.blade.php
+++ b/resources/views/common/confirm-dialog.blade.php
@@ -1,5 +1,5 @@
 <div components="popup confirm-dialog"
-     refs="confirm-dialog@popup"
+     refs="confirm-dialog@popup {{ $ref }}"
      class="popup-background">
     <div class="popup-body very-small" tabindex="-1">
 
diff --git a/resources/views/home/default.blade.php b/resources/views/home/default.blade.php
index f6a337e50..4e14b6744 100644
--- a/resources/views/home/default.blade.php
+++ b/resources/views/home/default.blade.php
@@ -17,6 +17,22 @@
         </div>
     </div>
 
+    @component('common.confirm-dialog', ['title' => 'Destroy Dogs'])
+        <p>Are you sure you want to do this thingy?</p>
+        <ul>
+            <li>This could be bad</li>
+            <li>This could be very bad</li>
+            <li>This might be very bad</li>
+        </ul>
+    @endcomponent
+
+    <script nonce="{{ $cspNonce }}">
+        setTimeout(async () => {
+            const result = await window.components["confirm-dialog"][0].show();
+            console.log({result});
+        }, 1000);
+    </script>
+
     <div class="container" id="home-default">
         <div class="grid third gap-xxl no-row-gap" >
             <div>
diff --git a/resources/views/pages/parts/editor-toolbar.blade.php b/resources/views/pages/parts/editor-toolbar.blade.php
index d7fb76c29..9bc79476e 100644
--- a/resources/views/pages/parts/editor-toolbar.blade.php
+++ b/resources/views/pages/parts/editor-toolbar.blade.php
@@ -36,7 +36,7 @@
                     @if(userCan('editor-change'))
                         <li>
                             @if($editor === 'wysiwyg')
-                                <a href="{{ $model->getUrl($isDraft ? '' : '/edit') }}?editor=markdown-clean" class="icon-item">
+                                <a href="{{ $model->getUrl($isDraft ? '' : '/edit') }}?editor=markdown-clean" refs="page-editor@changeEditor" class="icon-item">
                                     @icon('swap-horizontal')
                                     <div>
                                         {{ trans('entities.pages_edit_switch_to_markdown') }}
@@ -44,7 +44,7 @@
                                         <small>{{ trans('entities.pages_edit_switch_to_markdown_clean') }}</small>
                                     </div>
                                 </a>
-                                <a href="{{ $model->getUrl($isDraft ? '' : '/edit') }}?editor=markdown-stable" class="icon-item">
+                                <a href="{{ $model->getUrl($isDraft ? '' : '/edit') }}?editor=markdown-stable" refs="page-editor@changeEditor" class="icon-item">
                                     @icon('swap-horizontal')
                                     <div>
                                         {{ trans('entities.pages_edit_switch_to_markdown') }}
@@ -53,7 +53,7 @@
                                     </div>
                                 </a>
                             @else
-                                <a href="{{ $model->getUrl($isDraft ? '' : '/edit') }}?editor=wysiwyg" class="icon-item">
+                                <a href="{{ $model->getUrl($isDraft ? '' : '/edit') }}?editor=wysiwyg" refs="page-editor@changeEditor" class="icon-item">
                                     @icon('swap-horizontal')
                                     <div>{{ trans('entities.pages_edit_switch_to_wysiwyg') }}</div>
                                 </a>
diff --git a/resources/views/pages/parts/form.blade.php b/resources/views/pages/parts/form.blade.php
index 2c2ab9b92..cec11462d 100644
--- a/resources/views/pages/parts/form.blade.php
+++ b/resources/views/pages/parts/form.blade.php
@@ -40,8 +40,24 @@
 
     </div>
 
+    {{--Mobile Save Button--}}
     <button type="submit"
             id="save-button-mobile"
             title="{{ trans('entities.pages_save') }}"
             class="text-primary text-button hide-over-m page-save-mobile-button">@icon('save')</button>
+
+    {{--Editor Change Dialog--}}
+    @component('common.confirm-dialog', ['title' => trans('entities.pages_editor_switch_title'), 'ref' => 'page-editor@switchDialog'])
+        <p>
+            {{ trans('entities.pages_editor_switch_are_you_sure') }}
+            <br>
+            {{ trans('entities.pages_editor_switch_consider_following') }}
+        </p>
+
+        <ul>
+            <li>{{ trans('entities.pages_editor_switch_consideration_a') }}</li>
+            <li>{{ trans('entities.pages_editor_switch_consideration_b') }}</li>
+            <li>{{ trans('entities.pages_editor_switch_consideration_c') }}</li>
+        </ul>
+    @endcomponent
 </div>
\ No newline at end of file