[PRO]: hoverThread and leaveThread not working in Svelte or Vue

[a4vg]

Affected Packages

extension-comments

Version(s)

2.17.6

Description of the Bug

Using the functions from the documentation to handle hover events raises an error in Svelte:

const onHoverThread = (threadId) => {
  const { tr } = editor.state

  tr.setMeta('threadMouseOver', threadId)
  editor.view.dispatch(tr)
}

const onUnhoverThread = (threadId) => {
  const { tr } = editor.state

  tr.setMeta('threadMouseOut', threadId)
  editor.view.dispatch(tr)
}

TypeError: s.getMeta(...).forEach is not a function

The example provided in for Vue in the docs is also failing with the same error when hovering a thread.

I tried passing an array of ids instead of a single one. The error mentioned disappeared but now nothing happens.

Browser Used

Chrome

Code Example (Preferred)

https://tiptap.dev/docs/comments/getting-started/install#integrating-the-comments-extension

Expected Behavior

Get the thread content wrapped in a .tiptap-thread--hovered class in the editor.

Additional Context (Optional)

The example for React uses the utils functions from the Tiptap library hoverThread and hoverOffThread and it works. After inspecting this functions I found:

• It uses the same metadata as Vue and Svelte (threadMouseOver and threadMouseOut) but it passes an array of thread IDs, instead of a single id (as incorrectly shown in the docs).
• According to the Typescript declarations, the array of thread ids is number[]. The thread IDs should be of type string, they are uuids and that's the type in TCollabThread['id'].

Dependency Updates

• Yes, I've updated all my dependencies.

[a4vg]

Clicking on the thread content in the editor doesn't work either for Svelte or Vue.

From the example in the docs:

• React
  

• Vue