# slash-editor 面向 React 的 Notion 风格区块编辑器，采用由应用掌控源码的设计，并以内核无头的 Tiptap 为基础。 - Findings24: - 网站: - 价格: Freemium - 分类: 开发者工具 ## 什么是 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\`。 ## 快速信息 - **产品类型**: 面向 React 的 Notion 风格区块编辑器 - **核心技术**: Tiptap 和 ProseMirror - **UI 分发方式**: 以源码形式安装的 shadcn registry 组件 - **许可证**: MIT - **软件包**: @slash-editor/core 和 @slash-editor/react - **协作**: 已说明自行托管的 Yjs 和 Hocuspocus 集成