Merge pull request #8638 from nextcloud/focus-trap-ckeditor-signature

fix: make nested toolbar working for signature editor

src/components/AccountSettings.vue

@@ -26,6 +26,7 @@
 	<AppSettingsDialog id="app-settings-dialog"
 		:open="open"
 		:show-navigation="true"
+		:additional-trap-elements="trapElements"
 		@update:open="updateOpen">
 		<AppSettingsSection
 			id="account-settings"
@@ -41,7 +42,7 @@
 			<p class="settings-hint">
 				{{ t('mail', 'A signature is added to the text of new messages and replies.') }}
 			</p>
-			<SignatureSettings :account="account" />
+			<SignatureSettings :account="account" @show-toolbar="handleShowToolbar" />
 		</AppSettingsSection>
 		<AppSettingsSection id="writing-mode" :title="t('mail', 'Writing mode')">
 			<p class="settings-hint">
@@ -146,6 +147,11 @@ export default {
 			default: false,
 		},
 	},
+	data() {
+		return {
+			trapElements: [],
+		}
+	},
 	computed: {
 		menu() {
 			return this.buildMenu()
@@ -171,6 +177,9 @@ export default {
 		updateOpen() {
 			this.$emit('update:open')
 		},
+		handleShowToolbar(element) {
+			this.trapElements.push(element)
+		},
 	},
 }
 </script>

src/components/SignatureSettings.vue

@@ -44,7 +44,8 @@
 			v-model="signature"
 			:html="true"
 			:placeholder="t('mail', 'Signature …')"
-			:bus="bus" />
+			:bus="bus"
+			@show-toolbar="handleShowToolbar" />
 		<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.') }}
 		</p>
@@ -180,6 +181,9 @@ export default {
 					throw error
 				})
 		},
+		handleShowToolbar(event) {
+			this.$emit('show-toolbar', event)
+		},
 	},
 }
 </script>