Merge pull request #8616 from nextcloud/fix/folder_description_scroll

fix(folderDescription): fix max height in unfocused mode

Author: mejo-

playwright/e2e/folder-description/navigate.spec.ts

@@ -19,6 +19,40 @@ test('Shows Readme.md', async ({ open, editor }) => {
 	await expect(editor.getHeading({ name: 'Folder description' })).toBeVisible()
 })
 
+test.describe('Scroll reset on blur', () => {
+	test.use({
+		fileContent:
+			'# Title\n\n' + Array(30).fill('A paragraph of text.').join('\n\n'),
+	})
+
+	test('Scrolls back to top when focus is lost', async ({
+		open,
+		page,
+		editor,
+	}) => {
+		await open()
+		await editor.el.click()
+		const heading = editor.getHeading({ name: 'Title' })
+		await expect(page.locator('#rich-workspace')).toHaveClass(/focus/)
+		await expect(heading).toBeInViewport()
+
+		// Scroll down withhin the content wrapper
+		await page
+			.locator('#rich-workspace .editor__content-wrapper')
+			.evaluate((el) => {
+				el.scrollTop = 400
+			})
+		await expect(heading).not.toBeInViewport()
+
+		// Blur by clicking outside the workspace
+		await page
+			.getByRole('navigation', { name: 'Current directory path' })
+			.click()
+		await expect(page.locator('#rich-workspace')).not.toHaveClass(/focus/)
+		await expect(heading).toBeInViewport()
+	})
+})
+
 test('Hides in a different folder', async ({ editor, open, page, user }) => {
 	await createFolder({ name: 'Other folder', owner: user })
 	await open()

src/components/Editor.vue

@@ -758,8 +758,8 @@ export default defineComponent({
 			this.emit('focus')
 		},
 
-		onBlur() {
-			this.emit('blur')
+		onBlur({ event }) {
+			this.emit('blur', event)
 		},
 
 		onKeyboardSave() {

src/views/RichWorkspace.vue

@@ -25,7 +25,8 @@
 			active
 			rich-workspace
 			@ready="ready = true"
-			@focus="onFocus" />
+			@focus="onFocus"
+			@blur="onBlur" />
 	</div>
 </template>
 
@@ -112,8 +113,8 @@ export default {
 		focus(newValue) {
 			if (!newValue) {
 				document
-					.querySelector('#rich-workspace .text-editor__main')
-					.scrollTo(0, 0)
+					.querySelector('#rich-workspace .editor__content-wrapper')
+					?.scrollTo(0, 0)
 			}
 		},
 		shouldRender(value) {
@@ -150,6 +151,14 @@ export default {
 			this.hideMenu = false
 			this.unlistenKeydownEvents()
 		},
+		onBlur(event) {
+			// If focus moved to something inside the workspace (e.g. menubar), don't collapse
+			if (this.$el.contains(event?.relatedTarget)) {
+				return
+			}
+			this.focus = false
+			this.hideMenu = true
+		},
 		reset() {
 			this.file = null
 			this.focus = false
@@ -294,11 +303,15 @@ export default {
 
 #rich-workspace:deep(.editor__content-wrapper) {
 	overflow: scroll !important;
-	max-height: calc(40vh - 50px);
+	max-height: calc(30vh - 50px);
 	padding-left: 10px;
 	padding-bottom: 10px;
 }
 
+#rich-workspace.focus:deep(.editor__content-wrapper) {
+	max-height: calc(40vh - 50px);
+}
+
 #rich-workspace:deep(.text-editor__wrapper .ProseMirror) {
 	padding: 0px;
 	margin: 0;