blocksuite

其他资源 2025-08-04

blocksuite


概述

真正认真对待编辑的人应该自己制作自己的框架。

blocksuite是用于构建编辑和协作应用程序的工具包。它独立实施了一系列内容编辑基础架构,UI组件和编辑器。

您可以将blocksuite作为UI组件库,用于构建各种编辑器,基于最小化的香草框架作为其运行时。使用blocksuite ,您可以:

  • 重复使用多个第一方blocksuite编辑:
    • 页面编辑器:全面的基于块的文档编辑器,提供广泛的自定义和灵活性。
    • EdgelessEditor :具有选择加入画布渲染支持的图形编辑器,但也与页面编辑器共享相同的丰富文本功能。
  • 使用丰富的blocksuite组件和示例来自定义,扩展和增强这些编辑器。所有的blocksuite组件(包括编辑器)都是本机Web组件,使其成为框架 - 敏捷的框架,并且易于与流行框架互动。
  • 或者,根据基础香草框架从头开始构建新的编辑。

blocksuite目前处于早期阶段,其组件和扩展功能仍在改进。希望您可以继续关注,尝试或分享您的反馈!

动机

blocksuite起源于仿射知识库,其设计目标包括:

  • 支持多模式可编辑内容:将知识视为真理的单一来源时,构建其各种视图模式(例如,文本,幻灯片,思维地图,表格)仍然需要多个不兼容的框架。理想情况下,无论内容的呈现如何变化,都应该有一个一致的框架来帮助。
  • 组织和可视化复杂的知识:现有的编辑通常专注于编辑单个文档,但通常在处理涉及相互交织参考的复杂结构方面缺乏。这需要框架在多个文档中本地管理状态。
  • 合作准备:实时协作通常被视为可选插件,但实际上,我们可以在本地使用基础CRDT技术来用于编辑状态管理,这有助于构建更清晰,更可靠的数据流。

在Aggine的发展过程中,很明显, blocksuite不仅仅是成为内部编辑者,还发展成为一种多功能框架。这就是为什么我们选择独立开源和维护blocksuite的原因。

特征

使用blocksuite编辑器,您可以选择性地重复使用Aggine中的所有编辑功能:

在引擎盖下,香草blocksuite框架支持:

  • 定义自定义块和内联嵌入。
  • 根据文档的文档流机制,增量更新,实时协作甚至分散数据同步。
  • 基于命令机制编写类型安全复杂编辑逻辑,类似于设计用于文档编辑的React挂钩。
  • 基于Block快照和变压器的各种第三方格式(例如Markdown和HTML)的文档持久性和兼容性。
  • 跨多个文档进行调整,并在多个编辑器中重复使用一个文档。

要试用blocksuite ,请参阅快速启动示例,然后以 @ blocksuite /Presets中的预设编辑器开始。

建筑学

blocksuite和仿射之间的关系与摩纳哥编辑器和VScode之间的关系相似,但是有一个主要区别:基于仿射代码库会自动生成blocksuite ,而是通过不同的技术堆栈独立维护,而Affine用途则使用了React React,而blocksuite使用Web组件。

这种差异导致blocksuite基于以组分为中心的哲学设定明确的界限,以确保:

  • 仿射和其他项目都应平均重复使用并blocksuite通过组件,而没有任何特权。
  • 无论您是使用React还是其他框架,都可以轻松地重复使用blocksuite组件。

为此, blocksuite项目围绕围绕分为两组的密钥软件包结构:无头框架和预构建的编辑组件。

框架
@ blocksuite /Store 用于建模协作文档状态的数据层。它是在CRDT库YJS上原产地建造的,它具有内置的实时协作和时间旅行功能,为所有blocksuite文档提供动力。
@ blocksuite /inline 最小丰富的文本组件,用于内联编辑。 blocksuite允许将不同的块节点中的丰富文本内容插入不同的内联编辑器中,从而使复杂的内容可以方便地组合。这大大降低了实施传统的丰富文本编辑功能所需的复杂性。
@ blocksuite /block-std 用于建模可编辑块的框架 - 敏捷库。它的功能涵盖了块字段,事件,选择,剪贴板支持等的结构。
成分
@ blocksuite /Blocks 用于编写预设编辑器的默认块实现,包括属于每个块的小部件。
@ blocksuite /预设 插件的可编辑组件,包括编辑器(PageEditor / EdgelessEditor)和名为Fragments (Copilotpanel,doctitle ...)的辅助UI组件。

资源

  • ?资源
    • 金丝雀游乐场
    • 例子
    • Stackblitz中的blocksuite
    • 测试实时协作
    • blocksuite生态系统CI
    • 基于VUE的Blocksvite编辑器
  • 文档
  • ?很好的第一个问题
  • ?️Github讨论
  • 不和谐频道
  • 发行

建筑

有关如何从源头构建和测试blocksuite的说明,请参见building.md。

贡献

blocksuite接受GitHub上的拉请求。在开始贡献之前,请确保您已阅读并接受了我们的贡献许可协议。要指示您的协议,只需编辑此文件并提交拉动请求即可。

执照

MPL 2.0

下载源码

通过命令行克隆项目:

git clone https://github.com/toeverything/blocksuite.git