feat(events): quote comments in replies

[palkerecsenyi]

Closes #491

---

• Added a button in the comment action dropdown to quote that comment's contents in the new comment. When clicked, it appends the comment's contents to the RichEditor (inside a blockquote).

• Added a tooltip that renders above any text highlighted within comments and is dynamically positioned to be in the midpoint of the selection. The tooltip contains a "Quote" button and a "Copy" button. When "Quote" is clicked, it performs the same action as above, but just for the selected portion of text.

• Formatting is only kept in the quote for the first method, due to the complexities of propagating HTML formatting for partial selections.

• The blockquote currently has no real pointer to the quoted comment, and is freely editable by the user.

Preview

new.mp4

To-do

• Improve appearance of buttons within the tooltip. Maybe make them more streamline with the tooltip container and add an icon.
  • E.g. ChatGPT:
  • Styles have been added in feat(css): remove padding from request event item body popup invenio-app-rdm#3246
• Auto-focus and scroll to editor when quote is clicked
  • Implemented by listening to changes to a Redux state variable. This is the most elegant solution I could find. Depends on feat(tinymce): forward onInit prop from RichEditor react-invenio-forms#315.
• Ensure correct display when quoting comments with quoted content.
• Discuss if this solution is sufficient for our needs, or if we want some sort of pointer to the quoted comment
  • We will start with this and merge it, then see later if there's any demand for some sort of reference to the quoted comment