fix: add route query for image editor

Signed-off-by: Hamza <[email protected]>

src/files_actions/viewerAction.ts

@@ -7,22 +7,32 @@ import type { Node, View } from '@nextcloud/files'
 import { DefaultType, FileAction, Permission, registerFileAction } from '@nextcloud/files'
 import { t } from '@nextcloud/l10n'
 import svgEye from '@mdi/svg/svg/eye.svg?raw'
+import { emit } from '@nextcloud/event-bus'
 
 /**
  * @param node The file to open
  * @param view any The files view
  * @param dir the directory path
  */
 function pushToHistory(node: Node, view: View, dir: string) {
+	const editing = window.OCP.Files.Router.query.editing === 'true' ? 'true' : 'false'
 	window.OCP.Files.Router.goToRoute(
 		null,
 		{ view: view.id, fileid: String(node.fileid) },
-		{ dir, openfile: 'true' },
+		{ dir, openfile: 'true', editing },
 		true,
 	)
 }
+/**
+ * @param editing True if the file is being edited
+ */
+export function toggleEditor(editing = false) {
+	const newQuery = { ...window.OCP.Files.Router.query, editing: editing ? 'true' : 'false' }
+	window.OCP.Files.Router.goToRoute(null, window.OCP.Files.Router.params, newQuery)
+}
 
 const onPopState = () => {
+	emit('editor:toggle', window.OCP.Files.Router.query?.editing === 'true')
 	if (window.OCP.Files.Router.query.openfile !== 'true') {
 		window.OCA.Viewer.close()
 		window.removeEventListener('popstate', onPopState)
@@ -40,6 +50,7 @@ async function execAction(node: Node, view: View, dir: string): Promise<boolean|
 		// This can sometime be called with the openfile set to true already. But we don't want to keep openfile when closing the viewer.
 		const newQuery = { ...window.OCP.Files.Router.query }
 		delete newQuery.openfile
+		delete newQuery.editing
 		window.OCP.Files.Router.goToRoute(null, window.OCP.Files.Router.params, newQuery)
 	}
 

src/views/Viewer.vue

@@ -202,6 +202,7 @@ import Download from 'vue-material-design-icons/Download.vue'
 import Fullscreen from 'vue-material-design-icons/Fullscreen.vue'
 import FullscreenExit from 'vue-material-design-icons/FullscreenExit.vue'
 import Pencil from 'vue-material-design-icons/Pencil.vue'
+import { toggleEditor } from '../files_actions/viewerAction.ts'
 
 // Dynamic loading
 const NcModal = () => import('@nextcloud/vue/dist/Components/NcModal.js')
@@ -543,6 +544,7 @@ export default defineComponent({
 		subscribe('files:sidebar:closed', this.handleAppSidebarClose)
 		subscribe('files:node:updated', this.handleFileUpdated)
 		subscribe('viewer:trapElements:changed', this.handleTrapElementsChange)
+		subscribe('editor:toggle', this.toggleEditor)
 		window.addEventListener('keydown', this.keyboardDeleteFile)
 		window.addEventListener('keydown', this.keyboardDownloadFile)
 		window.addEventListener('keydown', this.keyboardEditFile)
@@ -558,6 +560,7 @@ export default defineComponent({
 		unsubscribe('files:sidebar:opened', this.handleAppSidebarOpen)
 		unsubscribe('files:sidebar:closed', this.handleAppSidebarClose)
 		unsubscribe('viewer:trapElements:changed', this.handleTrapElementsChange)
+		unsubscribe('editor:toggle', this.toggleEditor)
 		window.removeEventListener('keydown', this.keyboardDeleteFile)
 		window.removeEventListener('keydown', this.keyboardDownloadFile)
 		window.removeEventListener('keydown', this.keyboardEditFile)
@@ -569,6 +572,11 @@ export default defineComponent({
 			return '' + file.fileid + file.source
 		},
 
+		toggleEditor(isOpen) {
+			toggleEditor(isOpen)
+			this.editing = isOpen
+		},
+
 		/**
 		 * If there is no download permission also hide the context menu.
 		 * @param {MouseEvent} event The mouse click event
@@ -638,6 +646,9 @@ export default defineComponent({
 				const fileInfo = await fileRequest(path)
 				console.debug('File info for ' + path + ' fetched', fileInfo)
 				await this.openFileInfo(fileInfo, overrideHandlerId)
+				if (window.OCP.Files.Router.query.editing === 'true' && this.canEdit) {
+					this.toggleEditor(true)
+				}
 			} catch (error) {
 				if (error?.response?.status === 404) {
 					logger.error('The file no longer exists, error: ', { error })
@@ -1123,7 +1134,7 @@ export default defineComponent({
 		},
 
 		onEdit() {
-			this.editing = true
+			this.toggleEditor(true)
 		},
 
 		handleTrapElementsChange(element) {