feat: warn loosing content before reload and switching syntax

Author: liborjelinek

app/components/Editor.vue

@@ -12,6 +12,7 @@
   </div>
 
   <textarea
+    ref="textarea"
     v-model="previewStore.files[props.filename]"
     class="textarea w-full min-h-full font-mono focus:outline-0 text-slate-700 dark:text-slate-300"
     placeholder="Every journey begins with a first step"
@@ -31,4 +32,23 @@ function loadSample() {
   previewStore.files[props.filename] =
     previewStore.syntax == Syntax.RST ? sampleRst : sampleMd;
 }
+
+// *** Warn dialog before reload ******************************************************
+
+onMounted(() => {
+  window.addEventListener("beforeunload", handleBeforeUnload);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("beforeunload", handleBeforeUnload);
+});
+
+const textarea = useTemplateRef("textarea");
+
+function handleBeforeUnload(e: BeforeUnloadEvent) {
+  if (textarea && textarea.value!.value.trim() !== "") {
+    // this will show generic browser dialog, it cannot be customized
+    e.preventDefault();
+  }
+}
 </script>

app/components/Topbar.vue

@@ -6,8 +6,9 @@
 
     <div class="tooltip tooltip-left" data-tip="Switch syntax">
       <select
-        v-model="previewStore.syntax"
+        :value="previewStore.syntax"
         class="select select-ghost text-base"
+        @change="onSyntaxChange"
       >
         <option :value="Syntax.RST" selected>reStructuredText</option>
         <option :value="Syntax.MD">Markdown</option>
@@ -54,4 +55,24 @@
 
 <script setup lang="ts">
 const previewStore = usePreviewStore();
+
+// *** Warn/prevent before syntax switching ********************************************
+
+let previousSyntax = previewStore.syntax;
+
+function onSyntaxChange(event: Event) {
+  const selectElement = event.target as HTMLSelectElement;
+  const confirmed = window.confirm(
+    "Switching a syntax will clear your content. Do you want to continue?"
+  );
+  if (confirmed) {
+    // Switch syntax
+    const newSyntax = Syntax[selectElement.value as keyof typeof Syntax];
+    previewStore.syntax = newSyntax;
+    previousSyntax = newSyntax;
+  } else {
+    // Prevent the change by resetting the value
+    selectElement.value = previousSyntax;
+  }
+}
 </script>