关于编辑器共享光标的问题

[Q9K]

不好意思又来提问了， 大家好， 我们现在已经实现了文本编辑器的协同编辑功能， 我们现在需要实现 canvas 的协同编辑功能， 我们视图通过 yjs 实现，但是苦于参考资料太少了， 能问一下大家还有其他的解决办法吗

[cutemurphy2888]

哈哈·

[huntagain2008]

小白我是根本不懂，但是我问了 poe.com 的 GPT-4：

[Yjs ↗]( https://github.com/yjs/yjs) 是一个开源的实时协作框架，它可以用于实现各种类型的协作工具，包括文本编辑器和 canvas 。Yjs 通过共享数据类型（ CRDTs ）和 peer-to-peer 网络协议来实现数据的实时同步，这使得在没有服务器的情况下也可以实现实时协作。

对于 canvas 的协同编辑，Yjs 提供了一个名为 [y-canvas ↗]( https://github.com/yjs/y-canvas) 的库来帮助开发者实现这个功能。y-canvas 为 canvas 元素提供了一种抽象的数据结构，使得任何对 canvas 的修改都可以通过 Yjs 的实时同步功能进行分享。

以下是一个简单的 y-canvas 使用示例：

```javascript
import { Y } from 'yjs'
import { WebsocketProvider } from 'y-websocket'
import { ySyncPlugin, yUndoPlugin, undo, redo } from 'y-prosemirror'
import { EditorState } from 'prosemirror-state'
import { ySyncPluginKey } from 'y-prosemirror'
import { yCanvas } from 'y-canvas'

const doc = new Y.Doc()
const provider = new WebsocketProvider('ws://localhost:1234', 'canvas-demo', doc)
doc.on('sync', () => {
const canvas = document.createElement('canvas')
canvas.width = 800
canvas.height = 600
document.body.appendChild(canvas)
const context = canvas.getContext('2d')
yCanvas(context, doc.getArray('canvas'))
})
```

在这个示例中，我们首先创建了一个新的 Yjs 文档，然后通过 WebsocketProvider 连接到一个 websocket 服务器。当文档与服务器同步时，我们创建一个新的 canvas 元素，并使用 yCanvas 将其与 Yjs 文档中的一个数组关联起来。这样，所有对 canvas 的修改都会自动同步到所有连接的客户端。

如果你想了解更多关于 Yjs 和 y-canvas 的信息，你可以查看他们的官方文档和 GitHub 仓库：

- [Yjs 官方文档 ↗]( https://docs.yjs.dev/)
- [Yjs GitHub 仓库 ↗]( https://github.com/yjs/yjs)
- [y-canvas GitHub 仓库 ↗]( https://github.com/yjs/y-canvas)

如果你发现 Yjs 不满足你的需求，你还可以考虑使用其他的实时协作库，如 [ShareDB ↗]( https://github.com/share/sharedb) 或 [Automerge ↗]( https://github.com/automerge/automerge)。这些库都提供了强大的实时协作功能，但可能需要更多的定制和集成工作。

[Q9K]

我也这样问过，这个 y-canvas 是他编的）