Drag handle menu always stays hidden #8074

Activity

1. mejo-

   added this to the Nextcloud 33 milestone on Dec 16, 2025
2. mejo-

   added

   bugSomething isn't workingSomething isn't working

   regression

   on Dec 16, 2025
3. mejo- commented on Dec 16, 2025

   

   mejo-

   on Dec 16, 2025

   MemberAuthor

   More actions

   I further debugged this a bit and apparently showHandle() and hideHandle() from https://github.com/ueberdosis/tiptap/blob/9d7ea8d2f9099f4d3ffe5e093beeee72e7c8722e/packages/extension-drag-handle/src/drag-handle-plugin.ts#L90-L111 are called as expected. The visibility style property is also updated correctly. The problem rather seems to be that the whole <div> element containing the drag handle is not attached to the HTML document.
4. mejo- commented on Dec 16, 2025

   

   mejo-

   on Dec 16, 2025

   Last edited by mejo-

   MemberAuthor

   More actions

   https://github.com/ueberdosis/tiptap/blob/9d7ea8d2f9099f4d3ffe5e093beeee72e7c8722e/packages/extension-drag-handle/src/drag-handle-plugin.ts#L238 is the place where the wrapper element should get appended to the editor element parent. But for some reason, even though appendChild() is called according to the debugger, afterwards wrapper.parentElement is still a lonely div element that has no further parents.

   EDIT: appendChild() works as expected, but when it happens, the editor element itself is a child of a "lonely" div element that is not attached to the HTML document (yet).
5. mejo- commented on Dec 16, 2025

   

   mejo-

   on Dec 16, 2025

   MemberAuthor

   More actions

   Indeed seems to be a kind of race condition. The following patch fixes the problem by waiting for the editor component to be visible before mounting the floating button component:

   diff --git a/src/components/Editor/ContentContainer.vue b/src/components/Editor/ContentContainer.vue
   index 7ee6b8e97..cefc9b8e7 100644
   --- a/src/components/Editor/ContentContainer.vue
   +++ b/src/components/Editor/ContentContainer.vue
   @@ -49,16 +49,27 @@ export default {
                           useTableOfContents,
                   }
           },
   +       data() {
   +               return {
   +                       mounted: false,
   +               }
   +       },
           computed: {
                   showFloatingButtons() {
                           return (
   -                               !this.readOnly
   +                               this.mounted
   +                               && !this.readOnly
                                   && !this.isMobile
                                   && this.isRichEditor
                                   && !this.isRichWorkspace
                           )
                   },
           },
   +       mounted() {
   +               this.$nextTick(() => {
   +                       this.mounted = true
   +               })
   +       },
    }
    </script>
6. mejo- commented on Dec 18, 2025

   

   mejo-

   on Dec 18, 2025

   MemberAuthor

   More actions

   I opened ueberdosis/tiptap#7350 to fix the issue upstream.
7. mejo-

   added

   upstream: tiptap

   on Dec 18, 2025
8. mejo- commented on Dec 22, 2025

   

   mejo-

   on Dec 22, 2025

   MemberAuthor

   More actions

   Yay, fixed by #8093.
9. mejo-

   closed this as completedon Dec 22, 2025