fix: 2020 let heading menu overflow workspace

cypress/integration/workspace.spec.js

@@ -0,0 +1,120 @@
+/**
+ * @copyright Copyright (c) 2021 Azul <[email protected]>
+ *
+ * @author Azul <[email protected]>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+
+import { randHash } from '../utils/'
+const randUser = randHash()
+
+describe('Workspace', function() {
+
+	before(function() {
+		cy.nextcloudCreateUser(randUser, 'password')
+	})
+
+	beforeEach(function() {
+		cy.login(randUser, 'password')
+		cy.visit('/apps/files')
+		// isolate tests - each happens in it's own folder
+		cy.createFolder(Cypress.currentTest.title)
+		cy.openFile(Cypress.currentTest.title)
+	})
+
+	it('adds a Readme.md', function() {
+		cy.get('#fileList').should('not.contain', 'Readme.md')
+		openWorkspace()
+			.type('Hello')
+			.should('contain', 'Hello')
+		cy.get('#fileList').should('contain', 'Readme.md')
+	})
+
+	it('formats text', function() {
+		openWorkspace()
+			.type('Format me')
+			.type('{selectall}')
+		;[['bold', 'strong'], ['italic', 'em'], ['strike', 's']]
+			.forEach(([button, tag]) => {
+				menuButton(button)
+					.click()
+					.should('have.class', 'is-active')
+				cy.get(`.ProseMirror ${tag}`).should('contain', 'Format me')
+				menuButton(button)
+					.click()
+					.should('not.have.class', 'is-active')
+			})
+	})
+
+	it('links via menububble', function() {
+		openWorkspace()
+			.type('Nextcloud')
+			.type('{selectall}')
+		menuBubbleButton('link').click()
+		cy.get('.menububble input').type('https://nextcloud.com{enter}')
+		cy.get('.ProseMirror a')
+			.should('contain', 'Nextcloud')
+			.should('be.visible')
+		cy.get('.ProseMirror a').invoke('attr', 'href')
+			.should('include', 'https://nextcloud.com')
+		cy.window().then((win) => {
+			cy.stub(win, 'open').as('windowOpen')
+		})
+		cy.get('.ProseMirror a').click()
+		cy.get('@windowOpen').should('be.calledWith', 'https://nextcloud.com/')
+		cy.get('.ProseMirror').type('{selectall}')
+		menuBubbleButton('link').click()
+		cy.get('.menububble input').type('/team{enter}')
+		cy.get('.ProseMirror a').click()
+		cy.get('@windowOpen').should('be.calledWith', 'https://nextcloud.com/team')
+	})
+
+	it('creates headings via submenu', function() {
+		openWorkspace()
+			.type('Heading')
+			.type('{selectall}')
+		;['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].forEach((heading) => {
+			menuButton('h1').click()
+			submenuButton(heading).click()
+			menuButton(heading).should('have.class', 'is-active')
+			cy.get(`.ProseMirror ${heading}`)
+				.should('contain', 'Heading')
+			menuButton(heading).click()
+			submenuButton(heading).click()
+			menuButton('h1').should('not.have.class', 'is-active')
+		})
+	})
+
+})
+
+const menuButton = (name) => {
+	return cy.get(`#editor button.icon-${name}`)
+}
+
+const submenuButton = (name) => {
+	return cy.get(`#editor button .icon-${name}`)
+}
+
+const menuBubbleButton = submenuButton
+
+const openWorkspace = () => {
+	cy.get('#rich-workspace').click()
+	cy.get('#editor .content-wrapper').click()
+	return cy.get('#rich-workspace .ProseMirror')
+}

cypress/runLocal.sh

@@ -16,13 +16,21 @@ then
 fi
 
 # start server if it's not running yet
-if $(npm bin)/wait-on -i 500 -t 1000 $CYPRESS_baseUrl
+if $(npm bin)/wait-on -i 500 -t 1000 $CYPRESS_baseUrl 2> /dev/null
 then
 	echo Server is up at $CYPRESS_baseUrl
 else
+	echo No server reached at $CYPRESS_baseUrl - starting containers.
 	docker-compose up -d
-	$(npm bin)/wait-on -i 500 -t 240000 $CYPRESS_baseUrl || ( docker-compose logs ; exit 1 )
-	docker-compose exec -T nextcloud bash /var/www/html/apps/text/cypress/server.sh
+	if $(npm bin)/wait-on -i 500 -t 240000 $CYPRESS_baseUrl 2> /dev/null
+	then
+		docker-compose exec -T nextcloud bash /var/www/html/apps/text/cypress/server.sh
+	else
+		echo Waiting for $CYPRESS_baseUrl timed out.
+		echo Container logs:
+		docker-compose logs
+		exit 1
+	fi
 fi
 
 (cd .. && $(npm bin)/cypress $@)

src/components/EditorWrapper.vue

@@ -22,7 +22,7 @@
 
 <template>
 	<div id="editor-container">
-		<div v-if="currentSession && active" class="document-status">
+		<div v-if="displayed" class="document-status">
 			<p v-if="idle" class="msg">
 				{{ t('text', 'Document idle for {timeout} minutes, click to continue editing', { timeout: IDLE_TIMEOUT }) }} <a class="button primary" @click="reconnect">{{ t('text', 'Reconnect') }}</a>
 			</p>
@@ -33,7 +33,7 @@
 				{{ t('text', 'File could not be loaded. Please check your internet connection.') }} <a class="button primary" @click="reconnect">{{ t('text', 'Reconnect') }}</a>
 			</p>
 		</div>
-		<div v-if="currentSession && active" id="editor-wrapper" :class="{'has-conflicts': hasSyncCollission, 'icon-loading': !initialLoading && !hasConnectionIssue, 'richEditor': isRichEditor, 'show-color-annotations': showAuthorAnnotations}">
+		<div v-if="displayed" id="editor-wrapper" :class="{'has-conflicts': hasSyncCollission, 'icon-loading': !initialLoading && !hasConnectionIssue, 'richEditor': isRichEditor, 'show-color-annotations': showAuthorAnnotations}">
 			<div id="editor">
 				<MenuBar v-if="!syncError && !readOnly"
 					ref="menubar"
@@ -45,7 +45,7 @@
 					:is-public="isPublic"
 					:autohide="autohide"
 					@show-help="showHelp">
-					<div v-if="currentSession && active" id="editor-session-list">
+					<div id="editor-session-list">
 						<div v-tooltip="lastSavedStatusTooltip" class="save-status" :class="lastSavedStatusClass">
 							{{ lastSavedStatus }}
 						</div>
@@ -55,9 +55,10 @@
 					</div>
 					<slot name="header" />
 				</MenuBar>
-				<div class="content-wrapper">
+				<div ref="contentWrapper" class="content-wrapper">
 					<MenuBubble v-if="!readOnly && isRichEditor"
 						:editor="tiptap"
+						:content-wrapper="contentWrapper"
 						:file-path="relativePath" />
 					<EditorContent v-show="initialLoading"
 						class="editor__content"
@@ -177,6 +178,7 @@ export default {
 
 			saveStatusPolling: null,
 			displayHelp: false,
+			contentWrapper: null,
 		}
 	},
 	computed: {
@@ -236,11 +238,19 @@ export default {
 				? this.relativePath.split('/').slice(0, -1).join('/')
 				: '/'
 		},
+		displayed() {
+			return this.currentSession && this.active
+		},
 	},
 	watch: {
 		lastSavedStatus() {
 			this.$refs.menubar && this.$refs.menubar.redrawMenuBar()
 		},
+		displayed() {
+			this.$nextTick(() => {
+				this.contentWrapper = this.$refs.contentWrapper
+			})
+		},
 	},
 	mounted() {
 		if (this.active && (this.hasDocumentParameters)) {

src/components/MenuBubble.vue

@@ -94,6 +94,12 @@ export default {
 			required: false,
 			default: null,
 		},
+		// used to calculate the position based on the scrollOffset
+		contentWrapper: {
+			type: Object,
+			required: false,
+			default: null,
+		},
 		filePath: {
 			type: String,
 			required: false,
@@ -107,6 +113,21 @@ export default {
 			isUsingDirectEditing: loadState('text', 'directEditingToken', null) !== null,
 		}
 	},
+	computed: {
+
+		// Minimum left value for the bubble so that it stays inside the editor.
+		// the width of the menububble changes depending on its state
+		// during the bubblePosition calculation it has not been rendered yet.
+		// so we have to hard code the minimum.
+		minLeft() {
+			if (this.linkMenuIsActive || !this.editor.isActive.link()) {
+				return 150
+			} else {
+				return 225
+			}
+		},
+
+	},
 	methods: {
 		showLinkMenu(attrs) {
 			this.linkUrl = attrs.href
@@ -159,15 +180,14 @@ export default {
 			command({ href: null })
 		},
 		bubblePosition(menu) {
-			// below the first line, above all others
-			const vertical = menu.top < 45
-				? { top: `${menu.top}px` }
-				: { bottom: `${menu.bottom}px` }
+			const left = Math.max(this.minLeft, menu.left)
+			const offset = this.contentWrapper?.scrollTop || 0
 			return {
-				...vertical,
-				left: `${menu.left}px`,
+				top: `${menu.top + offset + 5}px`,
+				left: `${left}px`,
 			}
 		},
+
 	},
 }
 </script>
@@ -231,7 +251,7 @@ export default {
 			font: inherit;
 			border: none;
 			background: transparent;
-			min-width: 150px;
+			min-width: 250px;
 		}
 	}
 </style>

src/views/RichWorkspace.vue

@@ -213,12 +213,14 @@ export default {
 	}
 
 	#rich-workspace::v-deep #editor {
-		overflow: scroll !important;
-		max-height: calc(40vh - 40px);
+		overflow: visible !important;
 	}
 
 	#rich-workspace::v-deep .content-wrapper {
+		overflow: scroll !important;
+		max-height: calc(40vh - 50px);
 		padding-left: 10px;
+		padding-bottom: 60px; /* ensure menububble fits below */
 	}
 
 	#rich-workspace::v-deep #editor-wrapper .ProseMirror {