slash-editor

什么是 slash-editor？

slash-editor 是一款面向 React 的 Notion 风格区块编辑器，结合了基于 Tiptap 和 ProseMirror 构建的无头编辑器内核、React 绑定，以及以源码形式安装的原生 shadcn UI。内核提供扩展、Schema、命令和序列化器，不依赖 React 或 CSS；React 软件包则提供 Hooks 和无头原语。这种分离让应用可以使用编辑器行为，同时自行控制界面和样式。

该编辑器支持以区块为核心的工作流，例如斜杠插入、悬停拖拽手柄、区块重排、嵌套、行内格式、任务项、标注、折叠开关、表格、分栏、媒体、提及、链接和评论。UI 组件通过 shadcn registry 分发，因此会复制到应用中，而不是作为受限的组件库使用。项目采用 MIT 许可，没有付费层级或托管依赖。

slash-editor 能做什么？

无头 Tiptap/ProseMirror 内核

`@slash-editor/core` 软件包包含不依赖 React 或 CSS 的扩展、Schema、命令和序列化器，使编辑器逻辑能够与呈现层保持分离。

以区块为核心的编辑交互

用户可以在空行上打开斜杠菜单，通过悬停手柄移动区块，对内容进行重排和嵌套，并使用面向键盘操作的命令处理常见区块类型。

源码自有的 shadcn UI

斜杠菜单、气泡工具栏、区块手柄、提及菜单、链接编辑器、评论面板、节点视图及其他组件会从 shadcn registry 以可编辑源码的形式安装。

丰富的区块和媒体 Schema

文档和演示中的 Schema 包括标题、列表、引用、代码、分隔线、任务、标注、折叠开关、表格、分栏、Mermaid 图表、嵌入内容，以及图片、文件和视频上传占位符。

协作与 AI 扩展点

自行托管的 Yjs 和 Hocuspocus 设置可以提供在线状态光标和评论线程存储；AI 斜杠操作则通过由应用实现的 `StreamAdapter` 进行流式传输。

使用场景

“自定义 React 编辑器”

产品团队可以在 React 应用中加入 Notion 风格的区块编辑，同时分别控制核心编辑模型和呈现界面。

“由源码控制的内容界面”

需要修改设计令牌、标记或组件行为的团队，可以将 registry UI 安装到自己的代码库中，并像维护其他应用源码一样进行维护。

“协作工作区”

应用可以将编辑器连接到自行托管的 Yjs 和 Hocuspocus 服务，以实现实时编辑、在线状态光标和评论线程存储。

“AI 辅助写作工作流”

应用可以通过为所用模型实现兼容的流适配器，在斜杠菜单中提供续写、摘要、头脑风暴以及拼写或语法检查操作。

常见问题

slash-editor 由哪些软件包组成？

文档所述工作区包括用于扩展、Schema、命令和序列化器的 `@slash-editor/core`，以及用于 Hooks 和无头原语的 `@slash-editor/react`。Tiptap core、Tiptap PM 和 Tiptap React 是由应用安装的 peer dependencies。

UI 组件是以封闭式库的形式提供的吗？

不是。UI 组件通过 shadcn registry 分发，并以源码形式安装到应用中。应用可以编辑这些复制的组件并重新设置其样式。

编辑器实例需要什么样式设置？

registry 组件要求存在一个带有 `.slash-content` 类的祖先元素。使用 slash-editor-kit 区块时，编辑器还需要文档所述的占位符规则；其他样式则应用于正常由 ProseMirror 呈现的元素和数据属性。

slash-editor 是否包含托管协作服务或 AI 服务？

没有相关托管服务的说明。协作通过自行托管的 Yjs 和 Hocuspocus 接入，AI 操作则使用由应用针对所选模型实现的 `StreamAdapter`。