tiptap 合作中的意识

Tiptap 协作（由 Yjs 提供动力）中的意识功能帮助你在协作空间中实时共享用户的活动信息，比如用户在线状态、光标位置和自定义用户状态。

核心而言，意识利用冲突免费复制数据类型（CRDT）确保这些共享元信息在所有用户之间保持一致且即时更新，而无需保存这些状态的历史记录。

更多关于意识的信息，可以在 Yjs 关于意识的文档 中找到。

意识提供者事件的理解

意识更新会触发特定的 提供者事件 ，以便根据用户操作和在线状态开发交互功能：

• awarenessUpdate：表示用户活跃。这个事件会在没有实际状态变化时触发，作为“心跳”信号，告诉其他用户用户正在编辑文档。
• awarenessChange：当意识状态有任何增删改时，这个事件会通知你，包括本地更改和远程用户的影响。

这些事件是集成自定义意识功能的钩子。

集成基础意识

在设置好 协作环境 后，就可以开始集成由协作提供者原生支持的意识功能了。

首先，用相关的信息更新意识状态。这里我们以用户名、光标颜色和鼠标位置为例。

设置意识字段

为当前用户分配一个名称、颜色和鼠标位置。这只是一个示例，你可以根据你的应用需求使用任何数据。

// 为当前用户设置意识字段
provider.setAwarenessField("user", {
  // 分享任何你想共享的信息
  name: "Kevin James",
  color: "#ffcc00",
});

监听状态变化

设置事件监听器来跟踪所有连接用户意识状态的变化：

// 监听所有用户状态的更新
provider.on("awarenessChange", ({ states }) => {
  console.log(states);
});

现在，当你继续下一步时，可以在浏览器控制台查看这些更新。

跟踪鼠标移动

接下来，我们在应用程序中添加一个事件监听器来跟踪鼠标移动，并相应地更新意识信息。

document.addEventListener("mousemove", (event) => {
  // 分享任何你想分享的信息
  provider.setAwarenessField("user", {
    name: "Kevin James",
    color: "#ffcc00",
    mouseX: event.clientX,
    mouseY: event.clientY,
  });
});

检查浏览器控制台，观察用户移动鼠标时产生的事件流。

下一步

有了基础意识，可以考虑添加 协作光标扩展 来增强你的设置。这个扩展会为你的编辑器添加光标位置、文本选择以及所有参与者的个性化细节（如姓名和颜色）。