Configurable autosave for text editor

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

@@ -1,5 +1,5 @@
 ---
-title: "Getting Started"
+title: 'Getting Started'
 date: 2018-05-02T00:00:00+00:00
 weight: 10
 geekdocRepo: https://github.com/owncloud/web
@@ -41,10 +41,11 @@ Please refer to the [build documentation for Web]({{< ref "./building.md" >}}).
 Depending on the backend you are using, there are sample config files provided in the [config folder](https://github.com/owncloud/web/tree/master/config) of the ownCloud Web git repository. See below for available backends. Also, find some of the configuration details below.
 
 #### Options
+
 - `options.homeFolder` You can specify a folder that is used when the user navigates `home`. Navigating home gets triggered by clicking on the `All files`
-menu item. The user will not be jailed in that directory. It simply serves as a default location. You can either provide a static location, or you can use
-variables of the user object to come up with a user specific home path. This uses twig template variable style and allows you to pick a value or a
-substring of a value of the authenticated user. Examples are `/Shares`, `/{{.Id}}` and `/{{substr 0 3 .Id}}/{{.Id}`.
+  menu item. The user will not be jailed in that directory. It simply serves as a default location. You can either provide a static location, or you can use
+  variables of the user object to come up with a user specific home path. This uses twig template variable style and allows you to pick a value or a
+  substring of a value of the authenticated user. Examples are `/Shares`, `/{{.Id}}` and `/{{substr 0 3 .Id}}/{{.Id}`.
 - `options.disablePreviews` Set this option to `true` to disable previews in all the different file listing views. The only list view that is not affected
   by this is the trash bin, as that doesn't allow showing previews at all.
 - `options.previewFileMimeTypes` Specifies which mimeTypes will be previewed in the ui. For example to only preview jpg and text files set this option to `["image/jpeg", "text/plain"]`.
@@ -61,10 +62,12 @@ substring of a value of the authenticated user. Examples are `/Shares`, `/{{.Id}
 - `options.runningOnEos` Set this option to `true` if running on an [EOS storage backend](https://eos-web.web.cern.ch/eos-web/) to enable its specific features. Defaults to `false`.
 - `options.cernFeatures` Enabling this will activate CERN-specific features. Defaults to `false`.
 - `options.hoverableQuickActions` Set this option to `true` to hide the quick actions (buttons appearing on file rows), and only show them when the user
-hovers the row with his mouse. Defaults to `false`.
+  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.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 () {