块编辑器开发文档

@wordpress/sync

💡 云策文档标注

概述

@wordpress/sync 是一个用于 WordPress 编辑器中实时协作的同步层包,基于 Yjs CRDT 实现,支持多用户无冲突并发编辑共享数据。

关键要点

  • 该包提供实时协作的同步功能,核心基于 Yjs CRDT 文档。
  • Awareness 协议不应视为公共 API,核心实体类型的 awareness 由 core-data 包实现,自定义实体可能需要自定义 awareness。
  • Yjs 不应视为公共 API,但第三方插件需从 @wordpress/sync 导入 Y 实例以避免 Yjs 冲突问题。
  • YJS_VERSION 导出捆绑的 Yjs 主版本号,供第三方代码确保兼容性。
  • 安装方式:npm install @wordpress/sync --save。
  • 贡献信息:该包是 Gutenberg 项目的一部分,采用 monorepo 结构,更多详情请参考项目贡献指南。

代码示例

import { Y } from '@wordpress/sync';

注意事项

  • 使用 Webpack 配置时,需将 @wordpress/sync 和 yjs 解析为全局变量 wp.sync 和 wp.sync.Y,以避免 Yjs 实例冲突。
  • 架构细节请参考 CODE.md 文件。

📄 原文内容

Sync entity data between peers for real-time collaboration using CRDT documents.

This package provides the syncing layer for real-time collaboration in the WordPress editor. It is built on Yjs, a CRDT implementation that enables multiple users to edit shared data concurrently without conflicts.

See CODE.md for architecture details.

Installation

Install the module

npm install @wordpress/sync --save

API

Awareness

The Awareness protocol should not be considered a public API. It is a third-party library that will experience breaking changes in the future.

In general, awareness for core entity types is implemented by the core-data package and third-party Yjs providers should not provide their own awareness implementation. However, it may be desirable for custom entities to have a custom awareness implementation.

privateApis

Private @wordpress/sync APIs.

Y

Yjs should not be considered a public API. It is a third-party library that will experience breaking changes in the future. However, in order to allow third-party plugins to provide their own Yjs providers / sync transport, they must import and consume our instance of Yjs due to this bug / feature:

https://github.com/yjs/yjs/issues/438

In other words, external code must be able to import Yjs from the @wordpress/sync package in their code, e.g.:

import { Y } from '@wordpress/sync';

Additionally, this import must resolve to wp.sync via DependencyExtractionWebpackPlugin. If you are using an older version of @wordpress/scripts that does not treat @wordpress/sync as an unbundled package, then you can use Webpack externals to manually resolve the package to the global wp.sync variable:

externals: {
  ...existingConfig.externals,
  // Resolve @wordpress/sync to the global `wp.sync` provided by WordPress.
  '@wordpress/sync': 'wp.sync',

  // Resolve Yjs to the global `wp.sync.Y` provided by the sync package.
  // Since dependencies import 'yjs' directly, we need to avoid importing
  // and packaging two different Yjs instances, which would result in this
  // conflict:
  //
  // https://github.com/yjs/yjs/issues/438
  yjs: 'wp.sync.Y',
},

YJS_VERSION

The major version of Yjs that is bundled and exported by this package. This can be used by third-party code to ensure that they are targeting a compatible version of Yjs.

Contributing to this package

This is an individual package that’s part of the Gutenberg project. The project is organized as a monorepo. It’s made up of multiple self-contained software packages, each with a specific purpose. The packages in this monorepo are published to npm and used by WordPress as well as other software projects.

To find out more about contributing to this package or Gutenberg as a whole, please read the project’s main contributor guide.