Merge pull request #12810 from nextcloud/focus-trap-2

fix(ui): Handle focus trap through provide / inject

Author: kesselb

src/components/AccountSettings.vue

@@ -25,7 +25,7 @@
 			<p class="settings-hint">
 				{{ t('mail', 'A signature is added to the text of new messages and replies.') }}
 			</p>
-			<SignatureSettings :account="account" @show-toolbar="handleShowToolbar" />
+			<SignatureSettings :account="account" />
 		</AppSettingsSection>
 		<AppSettingsSection id="writing-mode" :name="t('mail', 'Writing mode')">
 			<p class="settings-hint">
@@ -179,6 +179,12 @@ export default {
 		NcCheckboxRadioSwitch,
 	},
 
+	provide() {
+		return {
+			addToFocusTrap: (trapElement) => this.trapElements.push(trapElement),
+		}
+	},
+
 	props: {
 		account: {
 			required: true,
@@ -234,10 +240,6 @@ export default {
 			this.$emit('update:open')
 		},
 
-		handleShowToolbar(element) {
-			this.trapElements.push(element)
-		},
-
 		async onToggleClassification(classificationEnabled) {
 			this.loadingClassificationToggle = true
 			await this.mainStore.patchAccount({ account: this.account, data: { classificationEnabled } })

src/components/AppSettingsMenu.vue

@@ -114,8 +114,7 @@
 						:label="t('mail', 'Text blocks')"
 						:description="t('mail', 'Reusable pieces of text that can be inserted in messages')">
 						<List
-							:text-blocks="getMyTextBlocks()"
-							@show-toolbar="handleShowToolbar" />
+							:text-blocks="getMyTextBlocks()" />
 						<NcButton variant="secondary" wide @click="() => textBlockDialogOpen = true">
 							<template #icon>
 								<IconAdd :size="20" />
@@ -126,8 +125,7 @@
 							<h6>{{ t('mail', 'Shared with me') }}</h6>
 							<List
 								:text-blocks="getSharedTextBlocks()"
-								:shared="true"
-								@show-toolbar="handleShowToolbar" />
+								:shared="true" />
 						</template>
 					</NcFormGroup>
 				</NcAppSettingsSection>
@@ -243,8 +241,7 @@
 						:is-bordered="true"
 						:html="true"
 						:placeholder="t('mail', 'Content of the text block')"
-						:bus="bus"
-						:show-toolbar="handleShowToolbar" />
+						:bus="bus" />
 					<div class="text-block-buttons">
 						<NcButton
 							variant="tertiary"
@@ -345,6 +342,12 @@ export default {
 		IconArrow,
 	},
 
+	provide() {
+		return {
+			addToFocusTrap: (trapElement) => this.trapElements.push(trapElement),
+		}
+	},
+
 	props: {
 		open: {
 			required: true,
@@ -744,10 +747,6 @@ export default {
 			document.body.append(iframe)
 		},
 
-		handleShowToolbar(element) {
-			this.trapElements.push(element)
-		},
-
 		newTextBlock() {
 			this.mainStore.createTextBlock({ ...this.localTextBlock })
 			this.textBlockDialogOpen = false

src/components/Composer.vue

@@ -260,8 +260,7 @@
 				@input="onEditorInput"
 				@ready="onEditorReady"
 				@mention="handleMention"
-				@submit="onEditorSubmit"
-				@show-toolbar="handleShow" />
+				@submit="onEditorSubmit" />
 			<MailvelopeEditor
 				v-else
 				ref="mailvelopeEditor"
@@ -711,6 +710,7 @@ export default {
 			type: Array,
 			required: true,
 		},
+
 	},
 
 	data() {
@@ -1141,10 +1141,6 @@ export default {
 			return false
 		},
 
-		handleShow(event) {
-			this.$emit('show-toolbar', event)
-		},
-
 		openPicker() {
 			this.isPickerOpen = true
 		},

src/components/NewMessageModal.vue

@@ -107,8 +107,7 @@
 						@draft="onDraft"
 						@discard-draft="discardDraft"
 						@upload-attachment="onAttachmentUploading"
-						@send="onSend"
-						@show-toolbar="handleShow" />
+						@send="onSend" />
 				</KeepAlive>
 			</div>
 
@@ -159,6 +158,12 @@ export default {
 		RecipientInfo,
 	},
 
+	provide() {
+		return {
+			addToFocusTrap: (trapElement) => this.additionalTrapElements.push(trapElement),
+		}
+	},
+
 	props: {
 		accounts: {
 			type: Array,
@@ -307,10 +312,6 @@ export default {
 			}
 		},
 
-		handleShow(element) {
-			this.additionalTrapElements.push(element)
-		},
-
 		/**
 		 * @param {object} data Message data
 		 * @param {object=} opts Options

src/components/SignatureSettings.vue

@@ -32,8 +32,7 @@
 				:html="true"
 				:placeholder="t('mail', 'Signature …')"
 				:bus="bus"
-				class="signature-editor-wrapper__editor"
-				@show-toolbar="handleShowToolbar" />
+				class="signature-editor-wrapper__editor" />
 		</div>
 		<p v-if="isLargeSignature" class="warning-large-signature">
 			{{ t('mail', 'Your signature is larger than 2 MB. This may affect the performance of your editor.') }}
@@ -189,24 +188,11 @@ export default {
 				})
 		},
 
-		handleShowToolbar(event) {
-			this.$emit('show-toolbar', event)
-		},
 	},
 }
 </script>
 
 <style lang="scss" scoped>
-.ck.ck-editor__editable_inline {
-  width: 100%;
-  max-width: 78vw;
-  height: 100%;
-  min-height: 100px;
-  border-radius: var(--border-radius) !important;
-  border: 1px solid var(--color-border) !important;
-  box-shadow: none !important;
-}
-
 /* Wrapper to visually delimit the signature editor area from surrounding settings */
 .signature-editor-wrapper {
 	margin-top: 8px;

src/components/TextEditor.vue

@@ -69,6 +69,10 @@ export default {
 		Ckeditor: CKEditor.component,
 	},
 
+	inject: {
+		addToFocusTrap: { default: () => {} },
+	},
+
 	props: {
 		value: {
 			type: String,
@@ -494,7 +498,7 @@ export default {
 			}
 
 			if (this.html) {
-				this.$emit('show-toolbar', editor.ui._focusableToolbarDefinitions[0].toolbarView.element)
+				this.addToFocusTrap('.ck-body-wrapper')
 			}
 
 			this.bus.on('append-to-body-at-cursor', this.appendToBodyAtCursor)