Skip to content

An Online Collaborative Documentation Project

Notifications You must be signed in to change notification settings

CaresWe/butterfly

This branch is 33 commits behind hzjswlgbsj/butterfly:master.

Repository files navigation

关于

三年前使用 OT 方案实现过一个在线文档,虽然尝试在公司内部推广使用过,但是最后依然没有能全面使用起来,原因是多方面的,其中就包括几个协同 Bug 没有解决。因为 OT 的方案是需要一个中心服务端的,当时后端同学使用的是 PHP ,导致协同代码没办公使用一份代码,后端同学实现了一版 OT 算法,我再前端实现了一版,这中间出 BUG 后调试和修改起来真的很酸爽,以至于我后来比较排斥 OT 这种方案,后来我了解到了 CRDT 这种方案,本项目就是 CRDT 的一个完整跑通的示例项目。

本项目基于 CRDT 方案来实现协同,使用了社区氛围比较好的 Yjs。以 monorepo + pnpm 的方式管理代码,包含了前端和服务端全流程。

前端

结构

目前主要实现了几个包

├─collaborate           // 主要处理协同相关代码,封装y-websocket
├─editor                // 对 slate 编辑器进行扩展
├─frontend              // 文档业务相关代码
├─toolbar               // 为编辑器定制的腾讯文档风格的工具栏
└─util                  // 工具函数

其中 frontend 的 src 结构

├─api                   // 网路请求代码、工具类函数和相关配置
├─application           // 项目核心功能
├─assets                // 字体配置及全局样式
├─baseUI                // 基础 UI 轮子
├─components            // 可复用的 UI 组件
├─routes                // 路由配置文件
└─store                 //redux 相关文件
  App.js                // 根组件
  index.js              // 入口文件
  serviceWorker.js      // PWA 离线应用配置
  style.js              // 默认样式、主题样式等

样式采用 styled-components 来进行开发,也就是利用 css in js 的方式,为什么要这么做,有兴趣的同学可以阅读一下这篇文章 styled-components 前端组件拆分新思路。虽然这个库有一些缺点,但我依然坚持用它进行开发,因为它在工程化方面的优势依然非常明显,而且大部分缺点我们也可以有意识的去避开。

开发

进入 frontend 包,执行

npm run dev

服务端

服务端我新开了一个 仓库,原因是后端是有很多方案的,我这边使用的是 Nodejs,方便我跑流程,实际上在真实的在线文档项目中,纯 Nodejs 是无法挑起这个重担的,必然是需要 Nodejs 做中间层,存储和计算等还是需要类似于 Java 这种语言。

开启 y-websocket

npm run server

开启接口服务

npm run start

Todo

  • 增加单元测试
  • 补全腾讯文档风格的 Toolbar
  • 增加协同部分 y-websocket 更多的 API 以供修改数据
  • 优化 Nodejs 端数据处理,提高性能
  • 增加文件管理

最后

这是一个探索性的项目,请不要用于生产环境,在线文档项目要做好不仅仅是跑通一个 Demo 就可以的。本项目首先是给有相同需求的朋友提供一些资料和 demo 以减少你们调研和项目初始化所花费的时间;其次,大家可以一起交流在线办公领域的解决方案。

这里也有一些资料,可以供你参考: 在线文档

如果该项目有帮助到你,请给个 Star 鼓励一下!

About

An Online Collaborative Documentation Project

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 72.2%
  • HTML 21.4%
  • CSS 6.4%