Improve escape keypress handling

package.json

@@ -38,6 +38,7 @@
 	],
 	"dependencies": {
 		"@nextcloud/axios": "^2.0.0",
+		"@nextcloud/event-bus": "^3.0.2",
 		"@nextcloud/initial-state": "^2.0.0",
 		"@nextcloud/router": "^2.0.0",
 		"@nextcloud/vue": "^7.5.0",

src/referencePicker/ReferencePicker.vue

@@ -1,5 +1,8 @@
 <template>
-	<div class="reference-picker" :style="pickerWrapperStyle">
+	<div class="reference-picker"
+		:style="pickerWrapperStyle"
+		tabindex="-1"
+		@keydown.stop.prevent.esc="onEscapePressed">
 		<ProviderList v-if="mode === MODES.providerList"
 			ref="provider-list"
 			@select-provider="onProviderSelected"
@@ -108,17 +111,10 @@ export default {
 			}
 		}
 
-		document.addEventListener('keyup', this.onKeypress)
 	},
 	beforeDestroy() {
-		document.removeEventListener('keyup', this.onKeypress)
 	},
 	methods: {
-		onKeypress(e) {
-			if (e.key === 'Escape') {
-				this.onEscapePressed()
-			}
-		},
 		onEscapePressed() {
 			if (this.selectedProvider !== null) {
 				this.deselectProvider()
@@ -157,9 +153,9 @@ export default {
 		deselectProvider() {
 			this.selectedProvider = null
 			this.$emit('provider-selected', null)
-			this.$nextTick(() => {
+			setTimeout(() => {
 				this.$refs['provider-list']?.focus()
-			})
+			}, 300)
 		},
 	},
 }

src/referencePicker/ReferencePickerModal.vue

@@ -4,7 +4,8 @@
 		:can-close="false"
 		class="reference-picker-modal"
 		@close="onCancel">
-		<div class="reference-picker-modal--content">
+		<div ref="modal_content"
+			class="reference-picker-modal--content">
 			<NcButton v-if="showBackButton"
 				:aria-label="backButtonTitle"
 				:title="backButtonTitle"
@@ -42,6 +43,7 @@ import ArrowLeftIcon from 'vue-material-design-icons/ArrowLeft.vue'
 import CloseIcon from 'vue-material-design-icons/Close.vue'
 
 import { NcModal, NcButton } from '@nextcloud/vue'
+import { emit } from '@nextcloud/event-bus'
 
 import ReferencePicker from './ReferencePicker.vue'
 import { isCustomPickerElementRegistered } from './customPickerElements.js'
@@ -70,6 +72,13 @@ export default {
 			type: Boolean,
 			default: true,
 		},
+		/**
+		 * If true, add the modal content to the Viewer trap elements via the event-bus
+		 */
+		isInsideViewer: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	data() {
 		return {
@@ -78,7 +87,6 @@ export default {
 			backButtonTitle: 'Back to provider selection',
 			closeButtonTitle: 'Close',
 			closeButtonLabel: 'Close link picker',
-
 		}
 	},
 	computed: {
@@ -102,6 +110,12 @@ export default {
 				: 'Link picker'
 		},
 	},
+	mounted() {
+		if (this.isInsideViewer) {
+			const elem = this.$refs.modal_content
+			emit('viewer:trapElements:changed', elem)
+		}
+	},
 	methods: {
 		onCancel() {
 			this.show = false

src/referencePicker/referencePickerModal.js

@@ -6,9 +6,10 @@ import { getProvider } from './providerHelper.js'
  * Creates a reference picker modal and return a promise which provides the result
  *
  * @param {String} providerId Optional ID of initial selected provider
+ * @param {Boolean} isInsideViewer Should be true if this function is called while the Viewer is displayed
  * @returns {Promise<unknown>}
  */
-export async function getLinkWithPicker(providerId = null) {
+export async function getLinkWithPicker(providerId = null, isInsideViewer = undefined) {
 	return await new Promise((resolve, reject) => {
 		const modalId = 'referencePickerModal'
 		const modalElement = document.createElement('div')
@@ -23,6 +24,7 @@ export async function getLinkWithPicker(providerId = null) {
 		const view = new View({
 			propsData: {
 				initialProvider,
+				isInsideViewer,
 			},
 		}).$mount(modalElement)