The feedback.tsx entrypoint instantiates a SelectionRenderer which does a couple things:
Renders any feedback currently stored in local storage as a yellow highlight
Tracks the user's current selection range (what they're highlighting in the document) and renders a tooltip over the selection
The tooltip component is found in tooltip.tsx
Clicking on the question mark icon in the tooltip triggers a modal for giving feedback (component in modal.tsx)
Stores new feedback in local storage when created
Displays a tooltip over existing feedback highlights when they're hovered over
Serialization of feedback ranges is done by web-highlighter. Their serialization strategy does not seem well-suited for dynamic content, something that will need to be fixed for a production-ready version of this feature.
Additional considerations
This PR does not currently send feedback to the telemetry/results server
This PR does not allow users to delete feedback (is this something that should be added?)
Todo
[x] Replace hard-coded colors with theme variables
[x] Factor out SelectionRenderer into multiple, simpler components
[x] Add ability to delete a highlight
[ ] Add integration test
[ ] Fix issue where not adding feedback causes the tooltip to render a question mark
Overview
This PR adds a (currently) naive system for adding and persisting feedback on book content.
Video example
https://user-images.githubusercontent.com/40175891/182223568-45bab38c-b625-47a6-b2b4-fc32dc67fc80.mp4
Implementation
The
feedback.tsx
entrypoint instantiates aSelectionRenderer
which does a couple things:tooltip.tsx
modal.tsx
)Serialization of feedback ranges is done by web-highlighter. Their serialization strategy does not seem well-suited for dynamic content, something that will need to be fixed for a production-ready version of this feature.
Additional considerations
Todo
SelectionRenderer
into multiple, simpler components