From c72c557b01bceec4362f1ed1d2831eece221756d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Julius=20H=C3=A4rtl?= <jus@bitgrid.net>
Date: Tue, 29 Aug 2023 19:15:51 +0200
Subject: [PATCH] fix: Avoid focus trap causing troubles with tab indent of
 lists
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Julius Härtl <jus@bitgrid.net>
---
 cypress/e2e/viewer.spec.js | 29 +++++++++++++++++++++++++++++
 src/components/Editor.vue  |  7 +++++++
 2 files changed, 36 insertions(+)

diff --git a/cypress/e2e/viewer.spec.js b/cypress/e2e/viewer.spec.js
index fb30560ac23..40d26687914 100644
--- a/cypress/e2e/viewer.spec.js
+++ b/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')
+	})
 })
diff --git a/src/components/Editor.vue b/src/components/Editor.vue
index 041107c7bb2..2fd06c7743f 100644
--- a/src/components/Editor.vue
+++ b/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() {