Drag handle menu always stays hidden

[mejo-]

Describe the bug

In Text main branch the drag handler is no longer visible. On stable32 it works as expected. I wonder whether it's related to the Tiptap3 migration.

The component is loaded and onNodChange() is triggered, but the component element (.floating-buttons) always stays hidden. Looking at its ancestors, it doesn't seem to be mounted to the document either.

This recent upstream Github issue might be related (they use the vue3 plugin though): ueberdosis/tiptap#7282

Server details:

• Nextcloud version: 33 (development branch)

[mejo-]

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.

[mejo-]

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).

[mejo-]

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>

[mejo-]

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

[mejo-]

Yay, fixed by #8093.