fix: update link menububble on editor updates

Ensure the menububble always shows the correct entries.

The menububble shows different buttons if the selected text is a link.
However its content often became out of sync with the editor:
* when new text was selected the bubble was still cached
* when the selection stayed active but was expanded / shrinked
  the menu bubble also stayed the same
* when someone else editing the same page changed the current selection into a link

Recompute the menububbles `active` data on every editor change.

The code used for this is mostly taken from the menu bars mechanism
for the same purpose.
See updateState in src/components/Menu/BaseActionEntry.js.

Signed-off-by: Max <max@nextcloud.com>

1 files changed, 18 insertions, 7 deletions

diff --git a/src/components/MenuBubble.vue b/src/components/MenuBubble.vue
index 47bdad1a1..7a9e31578 100644
--- a/src/components/MenuBubble.vue
+++ b/src/components/MenuBubble.vue
@@ -44,25 +44,25 @@
 		<template v-else>
 			<button class="menububble__button"
 				data-text-bubble-action="add-link"
-				:class="{ 'is-active': isActive('link') }"
+				:class="{ 'is-active': isActive }"
 				@click="showLinkMenu()">
 				<LinkIcon />
 				<span class="menububble__buttontext">
-					{{ isActive('link') ? t('text', 'Update Link') : t('text', 'Add Link') }}
+					{{ isActive ? t('text', 'Update Link') : t('text', 'Add Link') }}
 				</span>
 			</button>
 			<button v-if="!isUsingDirectEditing"
 				data-text-bubble-action="add-file"
 				class="menububble__button"
-				:class="{ 'is-active': isActive('link') }"
+				:class="{ 'is-active': isActive }"
 				@click="selectFile()">
 				<Document />
 				<span class="menububble__buttontext">{{ t('text', 'Link file') }}</span>
 			</button>
-			<button v-if="isActive('link')"
+			<button v-if="isActive"
 				class="menububble__button"
 				data-text-bubble-action="remove-link"
-				:class="{ 'is-active': isActive('link') }"
+				:class="{ 'is-active': isActive }"
 				@click="removeLinkUrl()">
 				<Delete />
 				<span class="menububble__buttontext">
@@ -74,6 +74,7 @@
 </template>
 
 <script>
+import debounce from 'debounce'
 import { BubbleMenu } from '@tiptap/vue-2'
 import { getMarkAttributes } from '@tiptap/core'
 import { getCurrentUser } from '@nextcloud/auth'
@@ -113,11 +114,21 @@ export default {
 	},
 	data: () => {
 		return {
+			isActive: false,
 			linkUrl: null,
 			linkMenuIsActive: false,
 			isUsingDirectEditing: loadState('text', 'directEditingToken', null) !== null,
 		}
 	},
+	mounted() {
+		this.$_updateIsActive = debounce(this.updateIsActive.bind(this), 50)
+		this.$editor.on('update', this.$_updateIsActive)
+		this.$editor.on('selectionUpdate', this.$_updateIsActive)
+	},
+	beforeDestroy() {
+		this.$editor.off('update', this.$_updateIsActive)
+		this.$editor.off('selectionUpdate', this.$_updateIsActive)
+	},
 	methods: {
 		showLinkMenu() {
 			const attrs = getMarkAttributes(this.$editor.state, 'link')
@@ -171,8 +182,8 @@ export default {
 		removeLinkUrl() {
 			this.$editor.chain().unsetLink().focus().run()
 		},
-		isActive(selector, args = {}) {
-			return this.$editor.isActive(selector, args)
+		updateIsActive() {
+			this.isActive = this.$editor.isActive('link')
 		},
 	},
 }