Merge pull request #2872 from nextcloud/fix/2869-link-detection

fix: update link menububble on editor updates
nextcloud · Sep 8, 2022 · 5353e5d · 5353e5d
2 parents 5db0151 + 84beeb4
commit 5353e5d
Show file tree

Hide file tree

Showing 13 changed files with 36 additions and 25 deletions.
diff --git a/js/editor-rich.js b/js/editor-rich.js
diff --git a/js/editor-rich.js.map b/js/editor-rich.js.map
diff --git a/js/editor.js b/js/editor.js
diff --git a/js/editor.js.map b/js/editor.js.map
diff --git a/js/text-files.js b/js/text-files.js
diff --git a/js/text-files.js.map b/js/text-files.js.map
diff --git a/js/text-public.js b/js/text-public.js
diff --git a/js/text-public.js.map b/js/text-public.js.map
diff --git a/js/text-text.js b/js/text-text.js
diff --git a/js/text-text.js.map b/js/text-text.js.map
diff --git a/js/text-viewer.js b/js/text-viewer.js
diff --git a/js/text-viewer.js.map b/js/text-viewer.js.map
diff --git 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')
 		},
 	},
 }