fix: Fix tab focus when other elements are displayed next to text tha…

…t are within a focus trap

Signed-off-by: Julius Härtl <jus@bitgrid.net>

src/components/Editor.vue

@@ -637,16 +637,10 @@ export default {
 
 		onFocus() {
 			this.emit('focus')
-
-			// Make sure that the focus trap doesn't catch tab keys while being in the contenteditable
-			window._nc_focus_trap?.[0]?.pause()
 		},
+
 		onBlur() {
 			this.emit('blur')
-
-			// Hand back focus to the previous trap
-			window._nc_focus_trap?.[0]?.unpause()
-			this.$el.focus()
 		},
 
 		onAddImageNode() {
@@ -744,6 +738,15 @@ export default {
 				this.$editor.commands.insertContent('\t')
 				this.$editor.commands.focus()
 				event.preventDefault()
+				event.stopPropagation()
+				return
+			}
+
+			if (event.key === 'Tab') {
+				const possibleEditorTabCommand = this.$editor.can().sinkListItem() || this.$editor.can().liftListItem() || this.$editor.can().goToNextCell() || this.$editor.can().goToPreviousCell()
+				if (possibleEditorTabCommand) {
+					event.stopPropagation()
+				}
 				return
 			}
 

src/components/Editor/ContentContainer.vue

@@ -30,8 +30,7 @@
 			<EditorOutline />
 		</div>
 		<slot />
-		<EditorContent tabindex="0"
-			role="document"
+		<EditorContent role="document"
 			class="editor__content text-editor__content"
 			:editor="$editor" />
 		<div class="text-editor__content-wrapper__right" />

src/css/prosemirror.scss

@@ -13,6 +13,10 @@ div.ProseMirror {
 	font-size: var(--default-font-size);
 	outline: none;
 
+	&.ProseMirror-focused {
+		outline: 2px solid var(--color-main-text) !important;
+	}
+
 	:target {
 		// Menubar height: 44px + 3px bottom + 3px top padding
 		scroll-margin-top: 50px;