The goal of this ticket was to implement a hardcoded example of "text highlighting" using our BoundingBox library component. In this case, text highlighting refers to making text appear as if it has been highlighted with a marker (as opposed to text selection with the cursor).
I made the following changes to our library components:
Added isHighlighted prop to BoundingBox- when true this adds a class that turns the box yellow and semi transparent
Modified Overlay component to accept 1 or more children (previously only accepted 1)
Added isShowingTextHighlight and setIsShowingTextHighlight to UiContext and ContextProvider. This may change in the future depending on how we end up getting/setting real data but it's good enough for a hardcoded demo ticket.
I made the following changes to our example Hello World app:
Added link to Header that toggles display of highlighted text demo (note: I used a prop to pass the click handler here even though I could have used the context var I just created. This was to keep things consistent between props/context in this file until I get to the 28926 subtask for using context over props in Header).
Updated Reader to handle toggling of text highlight and highlight overlay components.
Reviewer Instructions
Reader is getting pretty messy with these hard coded examples. I added TODOs to functions that I would like to remove once we nail down a working backend and UI design.
Testing Plan
Manual testing: Header displays "Highlight Text" link that toggles text highlight display on click. Tested that all other Header items still work as expected.
Description
Ticket: https://github.com/allenai/scholar/issues/29029
The goal of this ticket was to implement a hardcoded example of "text highlighting" using our
BoundingBoxlibrary component. In this case, text highlighting refers to making text appear as if it has been highlighted with a marker (as opposed to text selection with the cursor).I made the following changes to our library components:
isHighlightedprop toBoundingBox- when true this adds a class that turns the box yellow and semi transparentOverlaycomponent to accept 1 or more children (previously only accepted 1)isShowingTextHighlightandsetIsShowingTextHighlighttoUiContextandContextProvider. This may change in the future depending on how we end up getting/setting real data but it's good enough for a hardcoded demo ticket.I made the following changes to our example Hello World app:
Headerthat toggles display of highlighted text demo (note: I used a prop to pass the click handler here even though I could have used the context var I just created. This was to keep things consistent between props/context in this file until I get to the 28926 subtask for using context over props inHeader).Readerto handle toggling of text highlight and highlight overlay components.Reviewer Instructions
Readeris getting pretty messy with these hard coded examples. I added TODOs to functions that I would like to remove once we nail down a working backend and UI design.Testing Plan
Headerdisplays "Highlight Text" link that toggles text highlight display on click. Tested that all otherHeaderitems still work as expected.Demo