PHPackages maxime-rainville/shared-draft-comment - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. maxime-rainville/shared-draft-comment ActiveSilverstripe-vendormodule maxime-rainville/shared-draft-comment ===================================== Allow non-users to comment on shared draft. 0.1.1(2y ago)0245[2 PRs](https://github.com/maxime-rainville/shared-draft-comment/pulls)BSD-3-ClauseJavaScript Since Nov 26Pushed 2y ago1 watchersCompare [ Source](https://github.com/maxime-rainville/shared-draft-comment)[ Packagist](https://packagist.org/packages/maxime-rainville/shared-draft-comment)[ RSS](/packages/maxime-rainville-shared-draft-comment/feed)WikiDiscussions master Synced 1mo ago READMEChangelog (3)Dependencies (2)Versions (6)Used By (0) Silverstripe CMS Comments on shared draft ========================================= [](#silverstripe-cms-comments-on-shared-draft) This is a Silverstripe CMS module that adds the capability to leave comments on shared draft directly in the front end of your website. Warning ------- [](#warning) This is an experimental module. Use at your own risk. Team ---- [](#team) - JS and PHP development - @aria5305 - @maxime-rainville - UX and UI - Oscar Urrutia - User research and strategy - Erin Charter - Other contributions - Claire Kirby - @SimulatedPanda - Maira Florez - @matthew-dyson - Sandra De Villiers - @tamatifkaa What does it do? ---------------- [](#what-does-it-do) The [silverstripe/sharedraftcontent](https://github.com/silverstripe/silverstripe-sharedraftcontent) allows content authors to create special links to draft content. Content author can then choose to share those draft links with their stakeholders so they can preview the content. However, any feedback on the draft content then has to be collected in side channels like email message or Google Doc. This module extends the capability of the shared draft content module so people looking at a preview link can leave comment directly in the front end. Other users looking at the draft can view their comments and leave replies as well. [![Comment thread](https://private-user-images.githubusercontent.com/1168676/283954250-722dac95-bdbb-44ba-85ff-1b666136db56.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzUyMjkxMTAsIm5iZiI6MTc3NTIyODgxMCwicGF0aCI6Ii8xMTY4Njc2LzI4Mzk1NDI1MC03MjJkYWM5NS1iZGJiLTQ0YmEtODVmZi0xYjY2NjEzNmRiNTYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDQwMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA0MDNUMTUwNjUwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MTkxMjRiMmQzODBhYjQ0ZWMxZGI3OTdkY2ExMDZkYjFmNzZiYTU4MDJmYTY2ZjE1ZDIwYTE4NDUyY2I4ODE2OSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.SL5_DOgY2hnZm-vqsHUPBaQ7YiHLb7rhB_x8ygyBA00)](https://private-user-images.githubusercontent.com/1168676/283954250-722dac95-bdbb-44ba-85ff-1b666136db56.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzUyMjkxMTAsIm5iZiI6MTc3NTIyODgxMCwicGF0aCI6Ii8xMTY4Njc2LzI4Mzk1NDI1MC03MjJkYWM5NS1iZGJiLTQ0YmEtODVmZi0xYjY2NjEzNmRiNTYucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDQwMyUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjA0MDNUMTUwNjUwWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MTkxMjRiMmQzODBhYjQ0ZWMxZGI3OTdkY2ExMDZkYjFmNzZiYTU4MDJmYTY2ZjE1ZDIwYTE4NDUyY2I4ODE2OSZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.SL5_DOgY2hnZm-vqsHUPBaQ7YiHLb7rhB_x8ygyBA00) live-demo-comment.mp4 How does it work? ----------------- [](#how-does-it-work) ### Backend [](#backend) 4 DataObjects are tracked: - `Selection` which represent a specific sample of text on a specific page. - `DomMeta` which define the start or the end of a selection. Each selection has a `startMeta` and a `endMeta`. - `Comment` which represent a comment left on a specific selection. All comments attached to a selection are displayed together as a comment thread. - `Commenter` which represent a person who posted one or more comments. Commenters don't have any credentials and no attempt is made to validate their name. This is done to remove any barrier before posting a comment. The data can be retrieve and updated via a GraphQL endpoint at `/shared-draft-comment/graphql`. ### Frontend [](#frontend) The front end is divided into three main parts: - the inline commenting library - the Apollo Silverstripe CMS GraphQL data store - the Redux test data store. All the front end logic is written in TypeScript. #### Inline commenting library [](#inline-commenting-library) The files stored under the `src/lib` are responsible for: - displaying existing existing selections - providing an interface to create new selections - displaying comments - recording new comments. The inline commenting library is designed to be "store agnostic". Basically it doesn't care where its initial data is coming from and where newly created data goes. When the inline library get initialised, it expects a bunch of handlers it will then called to retrieve or update data. This part was designed so it could be split off as its own library later on. [web-highlighter](https://github.com/alienzhou/web-highlighter) is used to control the highlighting of text selection. The UI is rendered with React. While commenter data is attached to each comment, the inline commenting library doesn't manage that data or give you the means to update that data. It is the responsibility of the data store to keep track of who the current user is and to make sure that any new comment are attached to that user. This is done to avoid mandating any specific approach to managing the identity of commenters. #### Apollo Silverstripe CMS GraphQL data store [](#apollo-silverstripe-cms-graphql-data-store) The logic to control the exchange of data with the Silverstripe CMS backend via GraphQL is stored in `/src/apolloBootstrap.ts` and `/src/apollo`. This is also responsible for providing an interface to record the commenter's details. Basically, all the GraphQL queries and mutation are wrapped in handlers that return promises. Those handlers are then uses to bootstrap the inline commenting library. #### Redux test data store [](#redux-test-data-store) A simple test Redux store is included in `/src/reduxBootstrap.ts` and `/src/Store`. It basically does the same thing as the apollo store, except the data is read for a redux state and the updates are managed via redux action. This is only included to help test and update the inline commenting library. All changes are lost when you refresh the page. Development ----------- [](#development) ### `npm run build` [](#npm-run-build) To run the full Silverstripe CMS JS client, run `npm run build`. Performance optimisations have been disabled for now. See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information. ### `npm start` [](#npm-start) If you are just working on the inline commenting library, you can execute just that part with `npm start`. Runs the app in the development mode. Open to view it in the browser. The page will reload if you make edits. You will also see any lint errors in the console. ### `npm test` [](#npm-test) Launches the test runner in the interactive watch mode. See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information. Learn More ---------- [](#learn-more) You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started). To learn React, check out the [React documentation](https://reactjs.org/). ### Health Score 21 — LowBetter than 19% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity13 Limited adoption so far Community7 Small or concentrated contributor base Maturity36 Early-stage or recently created project Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~5 days Total 3 Last Release 884d ago ### Community Maintainers ![](https://avatars.githubusercontent.com/u/1168676?v=4)[Maxime Rainville](/maintainers/maxime-rainville)[@maxime-rainville](https://github.com/maxime-rainville) --- Top Contributors [![aria5305](https://avatars.githubusercontent.com/u/25812675?v=4)](https://github.com/aria5305 "aria5305 (4 commits)") ### Embed Badge ![Health badge](/badges/maxime-rainville-shared-draft-comment/health.svg) ``` [![Health](https://phpackages.com/badges/maxime-rainville-shared-draft-comment/health.svg)](https://phpackages.com/packages/maxime-rainville-shared-draft-comment) ``` ### Alternatives [silverstripe/graphql-devtools Tools to help developers building new applications on SilverStripe's GraphQL API 13367.2k6](/packages/silverstripe-graphql-devtools)[firesphere/graphql-jwt JWT Authentication for GraphQL 196.5k](/packages/firesphere-graphql-jwt) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)