Merge pull request #2277 from nextcloud/backport/2262/stable23

[stable23]  fix: menu bubble size at the end of the line

src/components/EditorWrapper.vue

@@ -54,11 +54,11 @@
 					<slot name="header" />
 				</MenuBar>
 				<div v-if="!menubarLoaded" class="menubar placeholder" />
+				<MenuBubble v-if="!readOnly && isRichEditor"
+					:editor="tiptap"
+					:content-wrapper="contentWrapper"
+					:file-path="relativePath" />
 				<div ref="contentWrapper" class="content-wrapper">
-					<MenuBubble v-if="renderMenus"
-						:editor="tiptap"
-						:content-wrapper="contentWrapper"
-						:file-path="relativePath" />
 					<EditorContent v-show="contentLoaded"
 						class="editor__content"
 						:editor="tiptap" />
@@ -112,6 +112,11 @@ export default {
 		isMobile,
 		store,
 	],
+	provide() {
+		return {
+			editorInfo: this.editorInfo,
+		}
+	},
 	props: {
 		initialSession: {
 			type: Object,
@@ -176,6 +181,7 @@ export default {
 
 			saveStatusPolling: null,
 			contentWrapper: null,
+			editorInfo: { width: 640 },
 		}
 	},
 	computed: {
@@ -262,9 +268,11 @@ export default {
 		this.saveStatusPolling = setInterval(() => {
 			this.updateLastSavedStatus()
 		}, 2000)
+		window.addEventListener('resize', this.updateEditorWidth)
 	},
 	beforeDestroy() {
 		this.close()
+		window.removeEventListener('resize', this.updateEditorWidth)
 	},
 	methods: {
 		async close() {
@@ -530,6 +538,12 @@ export default {
 				}
 			}
 		},
+
+		updateEditorWidth() {
+			if (this.$el) {
+				this.editorInfo.width = this.$el.offsetWidth
+			}
+		},
 	},
 }
 </script>

src/components/MenuBubble.vue

@@ -25,9 +25,8 @@
 		class="menububble"
 		:editor="editor"
 		@hide="hideLinkMenu">
-		<div class="menububble"
-			:class="{ 'is-active': menu.isActive }"
-			:style="bubblePosition(menu)">
+		<MenuBubbleContainer :menu="menu"
+			:class="{ 'is-active': menu.isActive }">
 			<form v-if="linkMenuIsActive" class="menububble__form" @submit.prevent="setLinkUrl(commands.link, linkUrl)">
 				<input ref="linkInput"
 					v-model="linkUrl"
@@ -59,12 +58,13 @@
 					<span class="menububble__buttontext">{{ t('text', 'Link file') }}</span>
 				</button>
 			</template>
-		</div>
+		</MenuBubbleContainer>
 	</EditorMenuBubble>
 </template>
 
 <script>
 import { EditorMenuBubble } from 'tiptap'
+import MenuBubbleContainer from './MenuBubbleContainer'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 import { optimalPath } from './../helpers/files'
 import { loadState } from '@nextcloud/initial-state'
@@ -73,6 +73,7 @@ export default {
 	name: 'MenuBubble',
 	components: {
 		EditorMenuBubble,
+		MenuBubbleContainer,
 	},
 	directives: {
 		tooltip: Tooltip,
@@ -102,21 +103,7 @@ 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
@@ -165,14 +152,6 @@ export default {
 			command({ href: url })
 			this.hideLinkMenu()
 		},
-		bubblePosition(menu) {
-			const left = Math.max(this.minLeft, menu.left)
-			const offset = this.contentWrapper?.scrollTop || 0
-			return {
-				top: `${menu.top + offset + 5}px`,
-				left: `${left}px`,
-			}
-		},
 
 	},
 }
@@ -188,10 +167,8 @@ export default {
 		border-radius: var(--border-radius-large);
 		overflow: hidden;
 		padding: 0;
-		margin-left: 10px;
 		visibility: hidden;
 		opacity: 0;
-		transform: translateX(-50%);
 		transition: opacity 0.2s, visibility 0.2s;
 		height: 44px;
 

src/components/MenuBubbleContainer.vue

@@ -0,0 +1,90 @@
+<!--
+  - @copyright Copyright (c) 2022 Max <max@nextcloud.com>
+  -
+  - @author Max <max@nextcloud.com>
+  -
+  - @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/>.
+  -
+  -->
+
+<template>
+	<div :style="bubblePosition">
+		<slot />
+	</div>
+</template>
+
+<script>
+
+export default {
+	name: 'MenuBubbleContainer',
+
+	inject: ['editorInfo'],
+	props: {
+		menu: {
+			type: Object,
+			required: true,
+		},
+		isActive: {
+			type: Boolean,
+			required: false,
+			default: false,
+		},
+
+	},
+
+	data: () => {
+		return {
+			bubbleWidth: 325,
+		}
+	},
+
+	computed: {
+		editorWidth() {
+			return this.editorInfo.width
+		},
+		maxLeft() {
+			return this.editorWidth - this.bubbleWidth
+		},
+		bubblePosition() {
+			if (!this.menu.top) {
+				return { top: 'unset', left: 'unset' }
+			}
+			const offset = this.contentWrapper?.scrollTop || 0
+			const left = Math.min(this.maxLeft, this.menu.left - (this.bubbleWidth / 2))
+			return {
+				top: `${this.menu.top + offset + 5}px`,
+				left: `${left}px`,
+			}
+		},
+	},
+
+	// Meassure the bubble width once the editor is ready and visible.
+	// At this point the bubble will be hidden but with all content inside.
+	// It therefore has the width we want to use to calculate its position.
+	watch: {
+		'editorInfo.width': 'updateBubbleWidth',
+	},
+
+	methods: {
+		updateBubbleWidth() {
+			this.$nextTick(() => {
+				this.bubbleWidth = this.$el?.offsetWidth ?? 325
+			})
+		},
+	},
+
+}
+</script>

src/views/RichWorkspace.vue

@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<div v-if="enabled" id="rich-workspace" :class="{'icon-loading': !loaded || !ready, 'focus': focus, 'dark': darkTheme, 'creatable': canCreate}">
+	<div v-if="enabled" id="rich-workspace" :class="workspaceClasses">
 		<div v-if="showEmptyWorkspace" class="empty-workspace" @click="createNew">
 			<p class="placeholder">
 				{{ t('text', 'Add notes, lists or links …') }}
@@ -49,6 +49,7 @@
 import axios from '@nextcloud/axios'
 import { generateOcsUrl } from '@nextcloud/router'
 import { subscribe } from '@nextcloud/event-bus'
+import isMobile from './../mixins/isMobile'
 
 const IS_PUBLIC = !!(document.getElementById('isPublic'))
 const WORKSPACE_URL = generateOcsUrl('apps/text' + (IS_PUBLIC ? '/public' : '') + '/workspace', 2)
@@ -58,6 +59,7 @@ export default {
 	components: {
 		EditorWrapper: () => import(/* webpackChunkName: "editor" */'./../components/EditorWrapper'),
 	},
+	mixins: [isMobile],
 	props: {
 		path: {
 			type: String,
@@ -86,6 +88,15 @@ export default {
 		showEmptyWorkspace() {
 			return (!this.file || (this.autofocus && !this.ready)) && this.canCreate
 		},
+		workspaceClasses() {
+			return {
+				'icon-loading': !this.loaded || !this.ready,
+				'is-mobile': this.isMobile,
+				focus: this.focus,
+				dark: this.darkTheme,
+				creatable: this.canCreate,
+			}
+		},
 	},
 	watch: {
 		path() {
@@ -180,6 +191,9 @@ export default {
 		&.creatable {
 			min-height: 90px;
 		}
+		&.is-mobile {
+			padding: 0 5px;
+		}
 	}
 
 	/* For subfolders, where there are no Recommendations */