Styling Threads

To style threads in your Tiptap editor, we use decoration classes that are wrapped around the threads. Since threads can also include block nodes, we have two different types of decorations. One for inline threads that are wrapped around the text and one for block threads that are wrapped around the block node.

By default the following css classes are used for the threads:

.tiptap-thread {} // the thread class for any type of thread
.tiptap-thread--inline {} // the thread class for inline threads
.tiptap-thread--block {} // the thread class for block threads
.tiptap-thread--hovered {} // the thread class for hovered threads
.tiptap-thread--selected {} // the thread class for selected threads
.tiptap-thread--resolved {} // the thread class for resolved threads
.tiptap-thread--unresolved {} // the thread class for unresolved threads

Those classes can also be overwritten by passing through the classes to the ThreadsKit extension.

const editor = new Editor({
  ...
  extensions: [
    ...,
    ThreadsKit.configure({
      classes: {
        thread: 'my-thread',
        threadInline: 'my-thread-inline',
        threadBlock: 'my-thread-block',
        threadHovered: 'my-thread-hovered',
        threadSelected: 'my-thread-selected',
        threadResolved: 'my-thread-resolved',
        threadUnresolved: 'my-thread-unresolved',
      },
    }),
  ]
})

#Handling hover events

Lets say you have a sidebar with a list of threads and you want to highlight the thread currently hovered in your sidebar inside the editor, you can simply dispatch a transaction to the editor with the meta threadMouseOver or threadMouseOut to give the editor the information which thread is currently hovered.

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

<div onMouseEnter={() => onHoverThread('123')} onMouseLeave={() => onUnhoverThread('123')}>
  Thread 123
</div>