Configurable text editor autosave

changelog/unreleased/enhancement-autosave-text-editor-changes

@@ -0,0 +1,5 @@
+Enhancement: Autosave content changes in text editor
+
+We have added the configurable functionality to autosave content changes in text editor.
+
+https://github.com/owncloud/web/pull/8455

docs/getting-started.md

@@ -65,6 +65,8 @@ hovers the row with his mouse. Defaults to `false`.
 - `option.routing` This accepts an object with the following fields to customize the routing behaviour:
   - `options.routing.idBased` Enable or disable fileIds being added to the URL. Defaults to `true` because otherwise e.g. spaces with name clashes can't be resolved correctly. Only disable this if you can guarantee server side that spaces of the same namespace can't have name clashes.   
 - `options.upload.xhr.timeout` Specifies the timeout for XHR uploads in milliseconds.
+- `options.editor.autosaveEnabled` Specifies if the autosave for the text editor is enabled.
+- `options.editor.autosaveInterval` Specifies the time interval for the file editor autosave in milliseconds.
 
 ### Sentry
 

packages/web-app-text-editor/src/App.vue

@@ -102,6 +102,7 @@ export default defineComponent({
     const resource: Ref<Resource> = ref()
     const store = useStore()
     const { $gettext, interpolate: $gettextInterpolate } = useGettext()
+    let autosaveInterval = ref(null)
 
     const errorPopup = (error) => {
       store.dispatch('showMessage', {
@@ -111,6 +112,12 @@ export default defineComponent({
       })
     }
 
+    const autosavePopup = () => {
+      store.dispatch('showMessage', {
+        title: $gettext('File autosaved')
+      })
+    }
+
     const loadFileTask = useTask(function* () {
       resource.value = yield getFileInfo(currentFileContext, {
         davProperties: [DavProperty.FileId, DavProperty.Permissions, DavProperty.Name]
@@ -194,7 +201,7 @@ export default defineComponent({
     })
 
     const isLoading = computed(() => {
-      return loadFileTask.isRunning || saveFileTask.isRunning
+      return loadFileTask.isRunning
     })
 
     const showPreview = computed(() => {
@@ -215,11 +222,22 @@ export default defineComponent({
       document.addEventListener('keydown', handleSKey, false)
       // Ensure reload is not possible if there are changes
       window.addEventListener('beforeunload', handleUnload)
+
+      // Autosave
+      const editorOptions = store.getters.configuration?.options?.editor
+      if (editorOptions?.autosaveEnabled && editorOptions?.autosaveInterval) {
+        autosaveInterval.value = setInterval(() => {
+          if (isDirty.value) {
+            save().then((r) => autosavePopup())
+          }
+        }, editorOptions?.autosaveInterval)
+      }
     })
 
     onBeforeUnmount(() => {
       window.removeEventListener('beforeunload', handleUnload)
       document.removeEventListener('keydown', handleSKey, false)
+      clearInterval(autosaveInterval)
     })
 
     const save = async function () {