fix: Avoid focus trap causing troubles with tab indent of lists

Signed-off-by: Julius Härtl <[email protected]>

cypress/e2e/viewer.spec.js

@@ -94,4 +94,33 @@ describe('Open test.md in viewer', function() {
 		cy.get('#viewer .modal-header button.header-close').click()
 		cy.get('#viewer').should('not.exist')
 	})
+
+	it('Can use tab keys for list in the viewer', function() {
+		// This used to break with the focus trap that the viewer modal has
+		cy.openFile('empty.md')
+
+		cy.getContent()
+			.type('- test{enter}')
+
+		// Cypress does not have native tab key support, though this seems to work
+		// for triggering the key handler of tiptap
+		// https://github.com/cypress-io/cypress/issues/311
+		cy.getContent()
+			.trigger('keydown', { keyCode: 9 })
+		cy.getContent()
+			.trigger('keyup', { keyCode: 9 })
+		cy.getContent()
+			.type('Nested list')
+
+		cy.getContent().find('ul li').should('contain', 'test')
+		cy.getContent().find('ul li ul li').should('contain', 'Nested list')
+
+		cy.getContent()
+			.trigger('keydown', { keyCode: 9, shiftKey: true })
+		cy.getContent()
+			.trigger('keyup', { keyCode: 9, shiftKey: true })
+
+		cy.getContent().find('ul li').eq(0).should('contain', 'test')
+		cy.getContent().find('ul li').eq(1).should('contain', 'Nested list')
+	})
 })

src/components/Editor.vue

@@ -629,9 +629,16 @@ 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() {