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

@@ -39,6 +39,7 @@ export default {
 	data() {
 		return {
 			imageEditor: null,
+			observer: null,
 		}
 	},
 
@@ -133,14 +134,31 @@ export default {
 		)
 		this.imageEditor.render()
 		window.addEventListener('keydown', this.handleKeydown, true)
-		window.addEventListener('DOMNodeInserted', this.handleSfxModal)
+
+		this.observer = new MutationObserver((mutations) => {
+			mutations.forEach((mutation) => {
+				if (mutation.type === 'childList') {
+					mutation.addedNodes.forEach((node) => {
+						if (node.classList.contains('FIE_root') || node.classList.contains('SfxModal-Wrapper')) {
+							emit('viewer:trapElements:changed', node)
+						}
+					})
+				}
+			})
+		})
+		// using body instead of the editor ref because save modal is not mounted in editor
+		this.observer.observe(document.body, {
+			childList: true,
+			subtree: true,
+		})
 
 	},
 
 	beforeDestroy() {
 		if (this.imageEditor) {
 			this.imageEditor.terminate()
 		}
+		this.observer.disconnect()
 		window.removeEventListener('keydown', this.handleKeydown, true)
 	},
 
@@ -235,11 +253,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('editor:file:created', putUrl)
+					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))
@@ -290,17 +313,6 @@ export default {
 			}
 		},
 
-		/**
-		 * Watch out for Modal inject in document root
-		 * That way we can adjust the focusTrap
-		 *
-		 * @param {Event} event Dom insertion event
-		 */
-		handleSfxModal(event) {
-			if (event.target?.classList && event.target.classList.contains('SfxModal-Wrapper')) {
-				emit('viewer:trapElements:changed', event.target)
-			}
-		},
 	},
 }
 </script>

src/services/FetchFile.ts

@@ -0,0 +1,16 @@
+import { getClient, getDefaultPropfind, getRootPath, resultToNode } from '@nextcloud/files/dav'
+import type { FileStat, ResponseDataDetailed } from 'webdav'
+import type { Node } from '@nextcloud/files'
+
+export default async (path: string): Promise<Node> => {
+	if (!path.startsWith('/')) {
+		path = `/${path}`
+	}
+	const client = getClient()
+	const propfindPayload = getDefaultPropfind()
+	const result = await client.stat(`${getRootPath()}${path}`, {
+		details: true,
+		data: propfindPayload,
+	}) as ResponseDataDetailed<FileStat>
+	return resultToNode(result.data)
+}

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,12 +188,13 @@ 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'
 import File from '../models/file.js'
 import getFileInfo from '../services/FileInfo.ts'
+import fetchNode from '../services/FetchFile.ts'
 import getFileList from '../services/FileList.ts'
 import Mime from '../mixins/Mime.js'
 import logger from '../services/logger.js'
@@ -545,6 +547,7 @@ export default defineComponent({
 		subscribe('files:node:updated', this.handleFileUpdated)
 		subscribe('viewer:trapElements:changed', this.handleTrapElementsChange)
 		subscribe('editor:toggle', this.toggleEditor)
+		subscribe('editor:file:created', this.handleNewFile)
 		window.addEventListener('keydown', this.keyboardDeleteFile)
 		window.addEventListener('keydown', this.keyboardDownloadFile)
 		window.addEventListener('keydown', this.keyboardEditFile)
@@ -659,6 +662,22 @@ export default defineComponent({
 				}
 			}
 		},
+		async handleNewFile(source) {
+			let path
+			try {
+				path = extractFilePathFromSource(source)
+				this.openFile(path)
+
+			} catch (e) {
+				logger.error('Could not extract file path from source', { source, e })
+			}
+			try {
+				const node = await fetchNode('/' + path)
+				emit('files:node:created', node)
+			} catch (e) {
+				logger.error('Could not fetch new file', { path, e })
+			}
+		},
 
 		/**
 		 * Open the view and display the clicked file from a known file info object