fix(ui): add ckeditor body element to editor focus trap

Signed-off-by: Christoph Wurst <[email protected]>

Author: ChristophWurst

src/components/Composer.vue

@@ -1328,12 +1328,13 @@ export default {
 			this.saveDraftDebounced()
 		},
 
-		onEditorReady(editor) {
+		onEditorReady({ editor, additionalFocusTrap }) {
 			this.bodyVal = editor.getData()
 			this.insertSignature()
 			if (this.smartReply) {
 				this.bus.emit('append-to-body-at-cursor', this.smartReply)
 			}
+			this.$emit('editor-ready', { editor, additionalFocusTrap })
 		},
 
 		onEditorSubmit(editor) {

src/components/NewMessageModal.vue

@@ -105,6 +105,7 @@
 						@update:smime-encrypt="patchComposerData({ smimeSign: $event })"
 						@update:request-mdn="patchComposerData({ requestMdn: $event })"
 						@draft="onDraft"
+						@editor-ready="onEditorReady"
 						@discard-draft="discardDraft"
 						@upload-attachment="onAttachmentUploading"
 						@send="onSend"
@@ -168,6 +169,7 @@ export default {
 
 	data() {
 		return {
+			additionalTrapElements: [],
 			original: undefined,
 			draftsPromise: Promise.resolve(),
 			attachmentsPromise: Promise.resolve(),
@@ -379,6 +381,12 @@ export default {
 			return this.draftsPromise
 		},
 
+		onEditorReady({ additionalFocusTrap }) {
+			if (additionalFocusTrap && this.additionalTrapElements.indexOf() === -1) {
+				this.additionalTrapElements.push(additionalFocusTrap)
+			}
+		},
+
 		getDataForServer(data) {
 			const dataForServer = {
 				...data,

src/components/TextEditor.vue

@@ -463,7 +463,10 @@ export default {
 
 			this.bus.on('append-to-body-at-cursor', this.appendToBodyAtCursor)
 			this.bus.on('insert-text-block', this.insertTextBlock)
-			this.$emit('ready', editor)
+			this.$emit('ready', {
+				editor,
+				additionalFocusTrap: '.ck-body-wrapper', // For the link picker, which is appended to the HTML body
+			})
 		},
 
 		onEditorInput(text) {