Skip to content

fix: update link menububble on editor updates #2872

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
max-nextcloud merged 2 commits into from
Sep 8, 2022
Merged

fix: update link menububble on editor updates #2872

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7bd2e54
fix: update link menububble on editor updates
max-nextcloud Sep 8, 2022
84beeb4
Compile assets
nextcloud-command Sep 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
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 <[email protected]>
  • Loading branch information
@max-nextcloud
max-nextcloud committed Sep 8, 2022
commit 7bd2e54e2b11803e7c2e46a1b82e1de8420fcaab
25 changes: 18 additions & 7 deletions src/components/MenuBubble.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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'
Expand Down Expand Up @@ -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')
Expand Down Expand Up @@ -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')
},
},
}
Expand Down