Save Comment to Browser Storage

[psychemedia]

Description / Summary

Adding comments to books is currently supported using external comment or annotation servers such as hypothesis.

Looking at my institution's Moodle VLE recently, I noticed a block type that provides an editable free text comment box within which users can make and save their own notes:

In the above example, the text entry box is also linked to a hidden discussion reveal block that is enabled once text has been entered into the comment form.

It would be useful to support a Jupyter Book admonition that allowed:

• a user to enter free text comments;
• a user to save their free text comments to browser storage;
• a user to reload their saved free text comments from browser storage back into a viewed document.

Value / benefit

Users who use the same browser would be able to make and save notes in a book without a network connection or an account on a third party comment or annotation server.

Browser storage support might also be reusable for saving and reload edited executable code blocks.

Implementation details

Possibly related:

• jupyter-offlinenotebook: "save and load notebooks to browser storage, even if you've lost your connection to the server"
• thebe: editable and executable code cells;

Tasks to complete

• [ ] add text form to book page with unique identifier;
• [ ] add means to save content to browser storage;
• [ ] add means to reload content from browser storage;
• [ ] UI design (eg where should load / save buttons live; should there be indications that save content is available for a page? Should it be automatically loaded?

[choldgraf]

This is a cool idea! My main question would be whether there are any pre-existing JS libraries that support this already, as it seems like it might be a complex thing to implement from scratch. Perhaps there's something we could build a light wrapper around, similar to what we do with Hypothesis etc?

[psychemedia]

Agreed. There seem to be a few jquery packages in the ballpark (eg Get And Restore Form Data Using Local Storage - jQuery Save My Form) and related packages although I've never used any of them before.

More generally, I don't know of anything offhand, or whether there is something that could be pulled out of jupyter-offlinenotebook or maybe even jupyterlite on the storage front? store.js also looks pretty robust from the repo stats at least.