From a956b076a48c31c145b559bbae24ddab3650f873 Mon Sep 17 00:00:00 2001
From: Azul <azul@riseup.net>
Date: Tue, 4 Jan 2022 17:23:47 +0100
Subject: fix: 2020 let heading menu overflow workspace

* roll back parts of #1903 that broke it again.
* Calculate top of menububble based on scrollHeight of content-wrapper.
* Always display menububble below selected line.
  This will make it less likely to conflict with the menubar
  or mobile copy and paste toolbars.
* Add cypress tests for the workspace.

Signed-off-by: Azul <azul@riseup.net>
---
 src/components/EditorWrapper.vue |  2 +-
 src/components/MenuBubble.vue    | 28 +++++++++++++++++++++-------
 src/views/RichWorkspace.vue      |  6 ++++--
 3 files changed, 26 insertions(+), 10 deletions(-)

(limited to 'src')

diff --git a/src/components/EditorWrapper.vue b/src/components/EditorWrapper.vue
index 31db2d7c2..950bfd3bc 100644
--- a/src/components/EditorWrapper.vue
+++ b/src/components/EditorWrapper.vue
@@ -52,7 +52,7 @@
 					</div>
 					<slot name="header" />
 				</MenuBar>
-				<div class="content-wrapper">
+				<div ref="wrapper" class="content-wrapper">
 					<MenuBubble v-if="!readOnly && isRichEditor"
 						:editor="tiptap"
 						:file-path="relativePath" />
diff --git a/src/components/MenuBubble.vue b/src/components/MenuBubble.vue
index e187cc1e2..b17f0c9b9 100644
--- a/src/components/MenuBubble.vue
+++ b/src/components/MenuBubble.vue
@@ -96,6 +96,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
@@ -145,15 +160,14 @@ export default {
 			this.hideLinkMenu()
 		},
 		bubblePosition(menu) {
-			// below the first line, above all others
-			const vertical = menu.top < 45
-				? { top: `${menu.top}px` }
-				: { bottom: `${menu.bottom}px` }
+			const wrapper = this.$parent.$refs.wrapper
+			const left = Math.max(this.minLeft, menu.left)
 			return {
-				...vertical,
-				left: `${menu.left}px`,
+				top: `${menu.top + wrapper.scrollTop + 5}px`,
+				left: `${left}px`,
 			}
 		},
+
 	},
 }
 </script>
@@ -217,7 +231,7 @@ export default {
 			font: inherit;
 			border: none;
 			background: transparent;
-			min-width: 150px;
+			min-width: 250px;
 		}
 	}
 </style>
diff --git a/src/views/RichWorkspace.vue b/src/views/RichWorkspace.vue
index 370699731..cd85a9bf1 100644
--- a/src/views/RichWorkspace.vue
+++ b/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 {
-- 
cgit v1.2.3