在您的编辑器中样式化评论

要在您的 Tiptap 编辑器中样式化线程，我们使用包裹在线程周围的装饰类。由于线程可以包含块节点，我们有两种类型的装饰：一种是用于内联线程的，包裹在文本周围，另一种是用于块线程的，包裹在块节点周围。

默认情况下，以下 CSS 类用于线程：

.tiptap-thread {} // 适用于任何类型线程的线程类
.tiptap-thread--inline {} // 适用于内联线程的线程类
.tiptap-thread--block {} // 适用于块线程的线程类
.tiptap-thread--hovered {} // 适用于被悬停的线程的线程类
.tiptap-thread--selected {} // 适用于已选择线程的线程类
.tiptap-thread--resolved {} // 适用于已解决线程的线程类
.tiptap-thread--unresolved {} // 适用于未解决线程的线程类

这些类也可以通过将类传递给 CommentsKit 扩展来覆盖。

const editor = new Editor({
  ...
  extensions: [
    ...,
    CommentsKit.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',
      },
    }),
  ]
})

处理悬停事件

假设您有一个侧边栏，其中有一个线程列表，您想要在编辑器中突出显示当前在侧边栏中悬停的线程。您可以通过 meta threadMouseOver 或 threadMouseOut 向编辑器分派一个事务，以指示当前悬停的线程。

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')}>
  线程 123
</div>