fix(image-editor): open newly created image when closing the image editor

Signed-off-by: Hamza <hamzamahjoubi221@gmail.com>

Author: hamza221

src/components/ImageEditor.vue

@@ -235,11 +235,16 @@ export default {
 			try {
 				const blob = await new Promise(resolve => imageCanvas.toBlob(resolve, mimeType, quality))
 				const response = await axios.put(putUrl, new File([blob], fullName))
-
 				logger.info('Edited image saved!', { response })
 				showSuccess(t('viewer', 'Image saved'))
 				if (putUrl !== this.src) {
-					emit('files:node:created', { fileid: parseInt(response?.headers?.['oc-fileid']?.split('oc')[0]) || null })
+					const fileId = parseInt(response?.headers?.['oc-fileid']?.split('oc')[0]) || null
+					emit('files:node:created', source)
+					if (fileId) {
+						const newParams = window.OCP.Files.Router.params
+						newParams.fileId = fileId
+						window.OCP.Files.Router.goToRoute(null, newParams, window.OCP.Files.Router.query)
+					}
 				} else {
 					this.$emit('updated')
 					const updatedFile = await rawStat(origin, decodeURI(pathname))
@@ -260,7 +265,9 @@ export default {
 			} catch (error) {
 				logger.error('Error saving image', { error })
 				showError(t('viewer', 'Error saving image'))
+				return
 			}
+			this.onClose()
 		},
 
 		// Key Handlers, override default Viewer arrow and escape key

src/utils/fileUtils.ts

@@ -7,6 +7,7 @@ import type { FileStat } from 'webdav'
 import { davRemoteURL, davRootPath } from '@nextcloud/files'
 import { getLanguage } from '@nextcloud/l10n'
 import { encodePath } from '@nextcloud/paths'
+import { getCurrentUser } from '@nextcloud/auth'
 import camelcase from 'camelcase'
 
 import { isNumber } from './numberUtil'
@@ -64,6 +65,24 @@ export function extractFilePaths(path: string): [string, string] {
 	return [dirPath, fileName]
 }
 
+/**
+ * Extract path from source
+ *
+ * @param source the full source URL
+ * @return path
+ */
+export function extractFilePathFromSource(source: string): string {
+	const uid = getCurrentUser()?.uid
+
+	if (uid) {
+		const path = source.split(`${uid}/`)[1]
+		if (path) {
+			return path
+		}
+	}
+	throw new Error(`Invalid source URL: ${source}. Unable to extract file paths.`)
+}
+
 /**
  * Sorting comparison function
  *
@@ -161,5 +180,6 @@ export function getDavPath({ filename, source = '' }: { filename: string, source
 	if (!filename.startsWith(davRootPath)) {
 		filename = `${davRootPath}${filename}`
 	}
+	console.warn('getDavPath is deprecated, use getRemoteURL instead')
 	return davRemoteURL + encodePath(filename)
 }

src/views/Viewer.vue

@@ -148,6 +148,7 @@
 					:is-sidebar-shown="isSidebarShown"
 					:loaded.sync="currentFile.loaded"
 					class="viewer__file viewer__file--active"
+					@update:editing="toggleEditor"
 					@error="currentFailed" />
 				<Error v-else
 					:name="currentFile.basename" />
@@ -187,7 +188,7 @@ import isFullscreen from '@nextcloud/vue/dist/Mixins/isFullscreen.js'
 import isMobile from '@nextcloud/vue/dist/Mixins/isMobile.js'
 
 import { canDownload } from '../utils/canDownload.ts'
-import { extractFilePaths, sortCompare } from '../utils/fileUtils.ts'
+import { extractFilePaths, sortCompare, extractFilePathFromSource } from '../utils/fileUtils.ts'
 import getSortingConfig from '../services/FileSortingConfig.ts'
 import cancelableRequest from '../utils/CancelableRequest.js'
 import Error from '../components/Error.vue'
@@ -545,6 +546,7 @@ export default defineComponent({
 		subscribe('files:node:updated', this.handleFileUpdated)
 		subscribe('viewer:trapElements:changed', this.handleTrapElementsChange)
 		subscribe('editor:toggle', this.toggleEditor)
+		subscribe('files:node:created', this.handleNewFile)
 		window.addEventListener('keydown', this.keyboardDeleteFile)
 		window.addEventListener('keydown', this.keyboardDownloadFile)
 		window.addEventListener('keydown', this.keyboardEditFile)
@@ -659,6 +661,16 @@ export default defineComponent({
 				}
 			}
 		},
+		handleNewFile(source) {
+			let path
+			try {
+				path = extractFilePathFromSource(source)
+			} catch (e) {
+				logger.error('Could not extract file path from source', { source, e })
+				return
+			}
+			this.openFile(path)
+		},
 
 		/**
 		 * Open the view and display the clicked file from a known file info object