Leave comments on someone elses pages #47 - #261

User Interface

Page load

When the page loads, we'll make an AJAX call to load the 30 most recent parent comments.

Fetching the child comments

On page load the child comments will not be fetched, click on Show replies at the bottom of the parent comment will make another AJAX call to load the replies, which will also be loaded 30 at a time.

Only single levels of depth are allowed in the commenting architecture.

Deleting

A enabled delete icon will be presented to the user to delete the comment. A user can only delete comments if he is the owner or an administrator. Deleting will not wipe out the entire comment, but will simply empty the content in the database.

Editing

Editing will transform the comment being editing into a simple markdown editor that can then be used to update the comment.

Replying

Replying to a comment will open a editor right below the comment to which you are replying.

Adding

A new thread can be started by adding a comment to a editor at the bottom of the comment section.

@ssddanbrown - Sorry for the lack of update on this. I've started working on this again recently.

For the comment box, I'm using https://simplemde.com/

Its a basic markdown editor, that looks and functions a lot like the Github markdown editor. Its MIT Licensed

Do you have any concerns? Would you like me to use a different editor?

Hi @Abijeet, Thanks for your continued work on this.

My concerns with SimpleMDE are that it's fairly chunky in the amount of code it brings in for a fairly simple use case such as this. I was thinking that a normal old textarea would be fine for something like this, At least initially until we get a feel for how it's used. Keeping the input simple prevents people getting to fancy in the comments and keeps them secondary to page content.

Let me know if you disagree with this though or if there's any technical reasons a more featureful editor would be better.

@ssddanbrown - Can you please review the code and merge it when you get a chance?

I've completed everything mentioned in the checklist above other than the test data generator. I'll need some help with that as I'm unable to find that code. Basically I'd like to add comments on the demo website.

After the merge I'll also update any documentation that needs updating.

Hi @Abijeet, Thanks again for the above work, For an initial quick look over the code it looks great. Unfortunately I've had limited time recently, Due to moving home and some health issues, so I haven't had a deeper dive into this yet.

The next BookStack release, V0.17, is going to be a cleanup of code display/inputs, which is what I've been slowly working on recently but I've marked this commenting system as being the main feature of the release after that (v0.18). Once v0.17 is out I'll put all my focus on reviewing and merging your work here.

@ssddanbrown - Thanks, the plan sounds good. Take care of your health.

Hi @Abijeet,
BookStack v0.18 is now the development focus so I've just pulled down your code and played around with the comments. It all works great! Thanks so much for your work here.

I'll merge this into master now. Before merging I'm going to combine the two required database migrations into one and rename it to be the latest to ensure a smooth upgrade for all users. This may break any instances you've developed this comments system on.

I've only lightly skimmed the rest of the code but I'll go through it in detail soon. Before v0.18 is released I'll probably rewrite any angular components here in Vue as I plan to migrate everything else to Vue soon. I also plan on doing some design changes across BookStack for v0.18 so some styling of this system may change.

In regards to setting up the demo data for demo.bookstackapp.com, That's simply done by me manually before taking a database dump so don't worry about having to code that in at all.

Once again, Thank you for your work here.

Thanks a ton for this @Abijeet and @ssddanbrown!

@ssddanbrown Will this be pushed into release sometime soon?

@alagu It's marked for the next release so yeah, Milestone here.

As above there's some changes I want to make (In general in BookStack) as part of the next release. Will likely be released later this month.

@ssddanbrown - There is a lot of AngularJS code here that'll have to be migrated to VueJS. I'll see if I can help you with that. I've wanted to work with VueJS for some time now, this will give me the opportunity to do so.

Other than the code there are a couple of things I think we should do, please feel free to add your thoughts,

1. Regarding the demo data, I want to have a page with comments and sub comments displayed on it.
2. It maybe worth mentioning comments on the website here - https://www.bookstackapp.com/, maybe under powerful features?

@ssddanbrown - For Vue, are you modelling the code in a certain manner? Is there some sample code that I can view and build off of?

Regarding the demo data, I want to have a page with comments and sub comments displayed on it.

Yeah, That's fine, Once this is in release I'll go through a few of the pages and add comments before snapshotting demo data.

It maybe worth mentioning comments on the website here - https://www.bookstackapp.com/, maybe under powerful features?

Yeah, I agree. In general the features info needs an update as I have not touched that in over a year.

In regards to vue, All vue-based js can be found in the vue folder. Vue logic is put in it's own file then registered in the vues.js file. This system looks for elements of ID's based on that registration then, If a matching element is found, a new Vue instance is created.

The largest example of this currently in place is the search system, With all of the JS vue logic here and the matching HTML found here.

Hi there, I cannot figure out reading https://www.bookstackapp.com/ if there is even a comment system included. It is not documented and I simply cannot find it in the demo. What am I missing?

@fcayre The documentation around the comment system can be improved, but for the time being you can see it in action here: https://demo.bookstackapp.com/books/bookstack-demo-site/page/mixed-content-example-page#comment1

OK thank you very much. I would have expected the comment system to make it possible to comment text parts, not only whole pages (like google doc). Is there a way to promote that feature need somewhere?

@fcayre I guess #576 aligns with your desire. You could add a thumbs-up reaction to the original request (Top original comment) to show support.