diff --git a/changelog/unreleased/enhancement-autosave-text-editor-changes b/changelog/unreleased/enhancement-autosave-text-editor-changes new file mode 100644 index 00000000000..7e1d0cd0afa --- /dev/null +++ b/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 diff --git a/docs/getting-started.md b/docs/getting-started.md index 2389952febd..f726074b578 100644 --- a/docs/getting-started.md +++ b/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 diff --git a/packages/web-app-text-editor/src/App.vue b/packages/web-app-text-editor/src/App.vue index 3caf76a999a..c4650e0b4f7 100644 --- a/packages/web-app-text-editor/src/App.vue +++ b/packages/web-app-text-editor/src/App.vue @@ -102,6 +102,7 @@ export default defineComponent({ const resource: Ref = 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 () {