Undo/redo form editor (#452)

* Undo/redo form editor

* Fix undo/redo

* Fix history with version check

* Increase default history size

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

client/components/open/editors/UndoRedo.vue

@@ -0,0 +1,32 @@
+<template>
+  <UButtonGroup
+    size="sm"
+    orientation="horizontal"
+  >
+    <UButton
+      :disabled="!canUndo"
+      color="white"
+      icon="i-material-symbols-undo"
+      class="disabled:text-gray-500"
+      @click="undo"
+    />
+    <UButton
+      :disabled="!canRedo"
+      icon="i-material-symbols-redo"
+      color="white"
+      class="disabled:text-gray-500"
+      @click="redo"
+    />
+  </UButtonGroup>
+</template>
+
+<script setup>
+const workingFormStore = useWorkingFormStore()
+
+const { undo, redo, clearHistory } = workingFormStore
+const { canUndo, canRedo } = storeToRefs(workingFormStore)
+
+onMounted(() => {
+  setTimeout(() => { clearHistory() }, 500)
+})
+</script>

client/components/open/forms/components/FormEditor.vue

@@ -28,6 +28,9 @@
         </svg>
         Go back
       </a>
+
+      <UndoRedo />
+
       <div class="hidden md:flex items-center ml-3">
         <h3 class="font-semibold text-lg max-w-[14rem] truncate text-gray-500">
           {{ form.title }}
@@ -118,6 +121,7 @@
 </template>
 
 <script>
+import UndoRedo from "../../editors/UndoRedo.vue"
 import FormEditorSidebar from "./form-components/FormEditorSidebar.vue"
 import FormErrorModal from "./form-components/FormErrorModal.vue"
 import FormInformation from "./form-components/FormInformation.vue"
@@ -136,6 +140,7 @@ import { captureException } from "@sentry/core"
 export default {
   name: "FormEditor",
   components: {
+    UndoRedo,
     FormEditorSidebar,
     FormEditorPreview,
     FormAboutSubmission,