CollaborationCaret 扩展
此扩展添加了有关所有连接用户的信息（如他们的名字和指定的颜色）、他们当前的光标位置和他们的文本选择（如果有的话）。
它需要一个协作编辑器，因此请确保查看 Tiptap 协作文档，以获取完全托管或本地部署的协作服务器解决方案。
公开演示
此编辑器的内容与其他用户共享。
在多个浏览器窗口中打开此页面进行测试。
安装
npm install @tiptap/extension-collaboration-caret此扩展需要 Collaboration 扩展。
设置
provider
一个 Y.js 网络提供者，例如一个 Tiptap 协作 实例。
默认值: null
user
当前用户的属性，假设有名字和颜色，但可以用于任何属性。这些值与所有其他连接的客户端进行同步。
默认值: { user: null, color: null }
render
光标的渲染函数，查看 扩展源代码 以获取示例。
selectionRender
选择的渲染函数，查看 扩展源代码 以获取示例。
Styling
此扩展不包括默认样式。如果没有以下 CSS，光标将渲染为未设置样式的内联元素。
将以下样式添加到你的项目中：
/* 给远程用户显示光标 */
.tiptap .collaboration-carets__caret {
border-left: 1px solid #0d0d0d;
border-right: 1px solid #0d0d0d;
margin-left: -1px;
margin-right: -1px;
pointer-events: none;
position: relative;
word-break: normal;
}
/* 在光标上方显示用户名 */
.tiptap .collaboration-carets__label {
border-radius: 3px 3px 3px 0;
color: #0d0d0d;
font-size: 12px;
font-style: normal;
font-weight: 600;
left: -1px;
line-height: normal;
padding: 0.1rem 0.3rem;
position: absolute;
top: -1.4em;
user-select: none;
white-space: nowrap;
}命令
updateUser()
传递一个包含当前用户更新属性的对象。它期望有一个 name 和一个 color，但你也可以添加其他字段。
editor.commands.updateUser({
name: 'John Doe',
color: '#000000',
avatar: 'https://unavatar.io/github/ueberdosis',
})源代码
packages/extension-collaboration-caret/