Drawio: Added unsaved restore prompt and logic

Author: ssddanbrown

lang/en/entities.php

@@ -239,6 +239,8 @@
     'pages_md_insert_drawing' => 'Insert Drawing',
     'pages_md_show_preview' => 'Show preview',
     'pages_md_sync_scroll' => 'Sync preview scroll',
+    'pages_drawing_unsaved' => 'Unsaved Drawing',
+    'pages_drawing_unsaved_confirm' => 'Unsaved drawing data was found from a previous failed drawing save attempt. Would you like to restore and continue editing this unsaved drawing?',
     'pages_not_in_chapter' => 'Page is not in a chapter',
     'pages_move' => 'Move Page',
     'pages_copy' => 'Copy Page',

resources/js/services/drawio.js

@@ -67,18 +67,43 @@ function drawReceive(event) {
     }
 }
 
+/**
+ * Attempt to prompt and restore unsaved drawing content if existing.
+ * @returns {Promise<void>}
+ */
+async function attemptRestoreIfExists() {
+    const backupVal = await store.get(saveBackupKey);
+    const dialogEl = document.getElementById('unsaved-drawing-dialog');
+
+    if (!dialogEl) {
+        console.error('Missing expected unsaved-drawing dialog');
+    }
+
+    if (backupVal) {
+        /** @var {ConfirmDialog} */
+        const dialog = window.$components.firstOnElement(dialogEl, 'confirm-dialog');
+        const restore = await dialog.show();
+        if (restore) {
+            onInit = async () => backupVal;
+        }
+    }
+}
+
 /**
  * Show the draw.io editor.
  * onSaveCallback must return a promise that resolves on successful save and errors on failure.
  * onInitCallback must return a promise with the xml to load for the editor.
+ * Will attempt to provide an option to restore unsaved changes if found to exist.
  * @param {String} drawioUrl
  * @param {Function<Promise<String>>} onInitCallback
  * @param {Function<Promise>} onSaveCallback - Is called with the drawing data on save.
  */
-export function show(drawioUrl, onInitCallback, onSaveCallback) {
+export async function show(drawioUrl, onInitCallback, onSaveCallback) {
     onInit = onInitCallback;
     onSave = onSaveCallback;
 
+    await attemptRestoreIfExists();
+
     iFrame = document.createElement('iframe');
     iFrame.setAttribute('frameborder', '0');
     window.addEventListener('message', drawReceive);

resources/views/common/confirm-dialog.blade.php

@@ -1,5 +1,6 @@
 <div components="popup confirm-dialog"
-     refs="confirm-dialog@popup {{ $ref }}"
+     @if($id ?? false) id="{{ $id }}" @endif
+     refs="confirm-dialog@popup {{ $ref ?? false }}"
      class="popup-background">
     <div class="popup-body very-small" tabindex="-1">
 

resources/views/pages/parts/form.blade.php

@@ -69,4 +69,11 @@ class="text-link text-button hide-over-m page-save-mobile-button">@icon('save')<
             {{ trans('entities.pages_edit_delete_draft_confirm') }}
         </p>
     @endcomponent
+
+    {{--Saved Drawing--}}
+    @component('common.confirm-dialog', ['title' => trans('entities.pages_drawing_unsaved'), 'id' => 'unsaved-drawing-dialog'])
+        <p>
+            {{ trans('entities.pages_drawing_unsaved_confirm') }}
+        </p>
+    @endcomponent
 </div>