README

这是一个 Silverstripe CMS 模块，它增加了在网站前端直接对共享草案进行评论的功能。

警告

这是一个实验性模块。请自行承担风险。

团队

JS 和 PHP 开发
- @aria5305
- @maxime-rainville
用户体验和界面设计
- Oscar Urrutia
用户研究和策略
- Erin Charter
其他贡献
- Claire Kirby
- @SimulatedPanda
- Maira Florez
- @matthew-dyson
- Sandra De Villiers
- @tamatifkaa

它做什么？

silverstripe/sharedraftcontent 允许内容作者创建指向草案内容的特殊链接。内容作者可以选择将这些草案链接与利益相关者共享，以便他们可以预览内容。

然而，对草案内容的任何反馈都必须通过电子邮件消息或 Google Doc 等侧信道收集。

此模块扩展了共享草案内容模块的功能，使得查看预览链接的人可以直接在前端留下评论。其他查看草案的用户可以查看他们的评论并回复。

live-demo-comment.mp4

它是如何工作的？

后端

跟踪 4 个 DataObjects

Selection 代表特定页面上的特定文本样本。
DomMeta 定义选择的开始或结束。每个选择都有一个 startMeta 和一个 endMeta。
Comment 代表对特定选择的评论。所有附加到选择的评论都作为评论线程一起显示。
Commenter 代表发表一个或多个评论的人。评论者没有任何凭证，也没有尝试验证他们的姓名。这样做是为了在发表评论之前消除任何障碍。

数据可以通过 /shared-draft-comment/graphql 的 GraphQL 端点检索和更新。

前端

前端分为三个主要部分

内联评论库
Apollo Silverstripe CMS GraphQL 数据存储
Redux 测试数据存储。

所有前端逻辑都用 TypeScript 编写。

内联评论库

存储在 src/lib 下的文件负责

显示现有选择
提供创建新选择的接口
显示评论
记录新评论。

内联评论库设计为“存储无关”。基本上，它不关心其初始数据来自何处以及新创建的数据去向何方。当内联库初始化时，它期望调用一些处理程序来检索或更新数据。

这部分的设计是为了将来可以将其拆分为自己的库。

web-highlighter 用于控制文本选择的突出显示。

UI 使用 React 渲染。

虽然评论者的数据附着在每条评论上，但内联评论库并不管理这些数据或提供更新这些数据的手段。跟踪当前用户并确保任何新的评论都附属于该用户是数据存储的责任。这样做是为了避免强制采用任何特定的管理评论者身份的方法。

Apollo Silverstripe CMS GraphQL数据存储

通过GraphQL与Silverstripe CMS后端交换数据的逻辑存储在/src/apolloBootstrap.ts和/src/apollo中。

它还负责提供记录评论者详情的接口。

基本上，所有的GraphQL查询和变更都被包装在返回承诺的处理程序中。然后使用这些处理程序启动内联评论库。

Redux测试数据存储

一个简单的测试Redux存储包含在/src/reduxBootstrap.ts和/src/Store中。它基本上与Apollo存储做同样的事情，只是数据是从Redux状态中读取的，并且更新是通过Redux操作管理的。

这只是为了帮助测试和更新内联评论库。当您刷新页面时，所有更改都将丢失。

开发

`npm run build`

要运行完整的Silverstripe CMS JS客户端，请运行npm run build。目前已禁用性能优化。

有关更多信息，请参阅部署部分。

`npm start`

如果您只是在处理内联评论库，可以使用npm start仅执行该部分。

以开发模式运行应用。
打开http://localhost:3000在浏览器中查看。

如果您进行编辑，页面将会重新加载。
您还将在控制台中看到任何lint错误。

`npm test`

以交互式监视模式启动测试运行器。
有关更多信息，请参阅运行测试部分。

了解更多

您可以在Create React App文档中了解更多信息。

要学习React，请查阅React文档。

maxime-rainville / shared-draft-comment

维护者

详细信息