hand the content wrapper to the menububble explicitly

Signed-off-by: Azul <[email protected]>
Signed-off-by: Julien Veyssier <[email protected]>

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"
@@ -42,7 +42,7 @@
 					:is-rich-editor="isRichEditor"
 					:is-public="isPublic"
 					:autohide="autohide">
-					<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>
@@ -52,9 +52,10 @@
 					</div>
 					<slot name="header" />
 				</MenuBar>
-				<div ref="wrapper" 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"
@@ -152,7 +153,7 @@ export default {
 			IDLE_TIMEOUT,
 
 			tiptap: null,
-			/** @type SyncService */
+			/** @type {SyncService} */
 			syncService: null,
 
 			document: null,
@@ -171,6 +172,7 @@ export default {
 			forceRecreate: false,
 
 			saveStatusPolling: null,
+			contentWrapper: null,
 		}
 	},
 	computed: {
@@ -222,11 +224,19 @@ export default {
 		fileExtension() {
 			return this.relativePath ? this.relativePath.split('/').pop().split('.').pop() : 'txt'
 		},
+		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

@@ -83,6 +83,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,
@@ -160,10 +166,10 @@ export default {
 			this.hideLinkMenu()
 		},
 		bubblePosition(menu) {
-			const wrapper = this.$parent.$refs.wrapper
 			const left = Math.max(this.minLeft, menu.left)
+			const offset = this.contentWrapper?.scrollTop || 0
 			return {
-				top: `${menu.top + wrapper.scrollTop + 5}px`,
+				top: `${menu.top + offset + 5}px`,
 				left: `${left}px`,
 			}
 		},