feat(events): quote comments in replies

* Added a button in the comment action dropdown to qute 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.

Author: palkerecsenyi

invenio_requests/assets/semantic-ui/js/invenio_requests/components/TimelineEventBody.js

@@ -4,20 +4,96 @@
 // Invenio RDM Records is free software; you can redistribute it and/or modify it
 // under the terms of the MIT License; see LICENSE file for more details.
 
-import React from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import PropTypes from "prop-types";
+import { Button, Popup } from "semantic-ui-react";
+import { i18next } from "@translations/invenio_requests/i18next";
 
-export const TimelineEventBody = ({ content, format }) => {
-  return format === "html" ? (
-    <span dangerouslySetInnerHTML={{ __html: content }} />
-  ) : (
-    content
+export const TimelineEventBody = ({ content, format, quote }) => {
+  const ref = useRef(null);
+  const [selectionRange, setSelectionRange] = useState(null);
+
+  useEffect(() => {
+    if (ref.current === null) return;
+
+    const onSelectionChange = () => {
+      const selection = window.getSelection();
+
+      // anchorNode is where the user started dragging the mouse,
+      // focusNode is where they finished. We make sure both nodes
+      // are contained by the ref so we are sure that 100% of the selection
+      // is within this comment event.
+      const selectionIsContainedByRef =
+        ref.current.contains(selection.anchorNode) &&
+        ref.current.contains(selection.focusNode);
+
+      if (
+        !selectionIsContainedByRef ||
+        selection.rangeCount === 0 ||
+        // A "Caret" type e.g. should not trigger a tooltip
+        selection.type !== "Range"
+      ) {
+        setSelectionRange(null);
+        return;
+      }
+
+      setSelectionRange(selection.getRangeAt(0));
+    };
+
+    document.addEventListener("selectionchange", onSelectionChange);
+    return () => document.removeEventListener("selectionchange", onSelectionChange);
+  }, [ref]);
+
+  const tooltipOffset = useMemo(() => {
+    if (!selectionRange) return null;
+
+    const selectionRect = selectionRange.getBoundingClientRect();
+    const refRect = ref.current.getBoundingClientRect();
+
+    // Offset set as [x, y] from the reference position.
+    // E.g. `top left` is relative to [0,0] but `top center` is relative to [{center}, 0]
+    return [selectionRect.x - refRect.x, -(selectionRect.y - refRect.y)];
+  }, [selectionRange]);
+
+  const onQuoteClick = useCallback(() => {
+    if (!selectionRange) return;
+    quote(selectionRange.toString());
+    window.getSelection().removeAllRanges();
+  }, [selectionRange, quote]);
+
+  return (
+    <Popup
+      eventsEnabled={false}
+      open={!!tooltipOffset}
+      offset={tooltipOffset}
+      position="top left"
+      className="requests-event-body-popup"
+      trigger={
+        <span ref={ref}>
+          {format === "html" ? (
+            <span dangerouslySetInnerHTML={{ __html: content }} />
+          ) : (
+            content
+          )}
+        </span>
+      }
+      basic
+    >
+      <Button
+        onClick={onQuoteClick}
+        icon="quote left"
+        content={i18next.t("Quote")}
+        size="small"
+        basic
+      />
+    </Popup>
   );
 };
 
 TimelineEventBody.propTypes = {
   content: PropTypes.string,
   format: PropTypes.string,
+  quote: PropTypes.func.isRequired,
 };
 
 TimelineEventBody.defaultProps = {

invenio_requests/assets/semantic-ui/js/invenio_requests/timelineCommentEditor/TimelineCommentEditor.js

@@ -5,19 +5,45 @@
 // under the terms of the MIT License; see LICENSE file for more details.
 
 import { RichEditor } from "react-invenio-forms";
-import React, { useEffect } from "react";
+import React, { useEffect, useRef } from "react";
 import { SaveButton } from "../components/Buttons";
 import { Container, Message } from "semantic-ui-react";
 import PropTypes from "prop-types";
 import { i18next } from "@translations/invenio_requests/i18next";
 import { RequestEventAvatarContainer } from "../components/RequestsFeed";
 
+// Make content inside the editor look identical to how we will render it in a comment.
+// TinyMCE runs within an iframe, so we cannot style it with page-wide CSS styles as normal.
+//
+// TinyMCE overrides blockquotes with custom styles, so we need to use !important to override
+// the overrides in a consistent and reliable way.
+// https://github.com/tinymce/tinymce-dist/blob/8d7491f2ee341c201b68cc7c3701d54703edd474/skins/content/tinymce-5/content.css#L61-L70
+//
+// The body styles are included in the `content_style` in RichEditor, so we need to include it here too.
+const editorContentStyle = `
+body {
+  font-size: 14px;
+}
+
+blockquote  {
+  margin-left: 0.5rem !important;
+  padding-left: 0.75rem !important;
+  color: #757575;
+  border-left: 4px solid #C5C5C5 !important;
+}
+
+blockquote > blockquote {
+  margin-left: 0 !important;
+}
+`;
+
 const TimelineCommentEditor = ({
   isLoading,
   commentContent,
   storedCommentContent,
   restoreCommentContent,
   setCommentContent,
+  appendedCommentContent,
   error,
   submitComment,
   userAvatar,
@@ -26,6 +52,16 @@ const TimelineCommentEditor = ({
     restoreCommentContent();
   }, [restoreCommentContent]);
 
+  const editorRef = useRef(null);
+  useEffect(() => {
+    if (!appendedCommentContent) return;
+    // Move the caret to the end of the body and focus the editor.
+    // See https://www.tiny.cloud/blog/set-and-get-cursor-position/#h_48266906174501699933284256
+    editorRef.current.selection.select(editorRef.current.getBody(), true);
+    editorRef.current.selection.collapse(false);
+    editorRef.current.focus();
+  }, [appendedCommentContent]);
+
   return (
     <div className="timeline-comment-editor-container">
       {error && <Message negative>{error}</Message>}
@@ -39,10 +75,14 @@ const TimelineCommentEditor = ({
             inputValue={commentContent}
             // initialValue is not allowed to change, so we use `storedCommentContent` which is set at most once
             initialValue={storedCommentContent}
-            onEditorChange={(event, editor) => {
+            onEditorChange={(_, editor) => {
               setCommentContent(editor.getContent());
             }}
             minHeight={150}
+            onInit={(_, editor) => (editorRef.current = editor)}
+            editorConfig={{
+              content_style: editorContentStyle,
+            }}
           />
         </Container>
       </div>
@@ -62,6 +102,7 @@ const TimelineCommentEditor = ({
 TimelineCommentEditor.propTypes = {
   commentContent: PropTypes.string,
   storedCommentContent: PropTypes.string,
+  appendedCommentContent: PropTypes.string,
   isLoading: PropTypes.bool,
   setCommentContent: PropTypes.func.isRequired,
   error: PropTypes.string,
@@ -73,6 +114,7 @@ TimelineCommentEditor.propTypes = {
 TimelineCommentEditor.defaultProps = {
   commentContent: "",
   storedCommentContent: null,
+  appendedCommentContent: "",
   isLoading: false,
   error: "",
   userAvatar: "",

invenio_requests/assets/semantic-ui/js/invenio_requests/timelineCommentEditor/index.js

@@ -19,6 +19,7 @@ const mapStateToProps = (state) => ({
   error: state.timelineCommentEditor.error,
   commentContent: state.timelineCommentEditor.commentContent,
   storedCommentContent: state.timelineCommentEditor.storedCommentContent,
+  appendedCommentContent: state.timelineCommentEditor.appendedCommentContent,
 });
 
 export const TimelineCommentEditor = connect(

invenio_requests/assets/semantic-ui/js/invenio_requests/timelineCommentEditor/state/actions.js

@@ -18,6 +18,7 @@ export const HAS_ERROR = "eventEditor/HAS_ERROR";
 export const SUCCESS = "eventEditor/SUCCESS";
 export const SETTING_CONTENT = "eventEditor/SETTING_CONTENT";
 export const RESTORE_CONTENT = "eventEditor/RESTORE_CONTENT";
+export const APPEND_CONTENT = "eventEditor/APPENDING_CONTENT";
 
 const draftCommentKey = (requestId) => `draft-comment-${requestId}`;
 const setDraftComment = (requestId, content) => {
@@ -68,6 +69,15 @@ export const restoreEventContent = () => {
   };
 };
 
+export const appendEventContent = (content, focus) => {
+  return async (dispatch, getState, config) => {
+    dispatch({
+      type: APPEND_CONTENT,
+      payload: content,
+    });
+  };
+};
+
 export const submitComment = (content, format) => {
   return async (dispatch, getState, config) => {
     const { timeline: timelineState, request } = getState();

invenio_requests/assets/semantic-ui/js/invenio_requests/timelineCommentEditor/state/reducer.js

@@ -11,19 +11,29 @@ import {
   SUCCESS,
   SETTING_CONTENT,
   RESTORE_CONTENT,
+  APPEND_CONTENT,
 } from "./actions";
 
 const initialState = {
   error: null,
   isLoading: false,
   commentContent: "",
   storedCommentContent: null,
+  appendedCommentContent: "",
 };
 
 export const commentEditorReducer = (state = initialState, action) => {
   switch (action.type) {
     case SETTING_CONTENT:
       return { ...state, commentContent: action.payload };
+    case APPEND_CONTENT:
+      return {
+        ...state,
+        commentContent: state.commentContent + action.payload,
+        // We keep track of appended content separately to trigger the focus event only when
+        // text is appended (not when the user is typing).
+        appendedCommentContent: state.appendedCommentContent + action.payload,
+      };
     case IS_LOADING:
       return { ...state, isLoading: true };
     case HAS_ERROR:

invenio_requests/assets/semantic-ui/js/invenio_requests/timelineCommentEventControlled/TimelineCommentEventControlled.js

@@ -59,6 +59,23 @@ class TimelineCommentEventControlled extends Component {
     openConfirmModal(() => deleteComment({ event }));
   };
 
+  /**
+   * Append a quote of the comment's content to the new comment in the editor.
+   *
+   * @param {string} [text] - A subset of the text to quote. If null, the entire comment is quoted.
+   */
+  quote = (text) => {
+    const {
+      appendCommentContent,
+      event: {
+        payload: { content },
+      },
+    } = this.props;
+
+    const quotedText = text ?? content;
+    appendCommentContent(`<blockquote>${quotedText}</blockquote><br />`);
+  };
+
   render() {
     const { event } = this.props;
     const { isLoading, isEditing, error } = this.state;
@@ -69,6 +86,7 @@ class TimelineCommentEventControlled extends Component {
           updateComment={this.updateComment}
           deleteComment={this.deleteComment}
           toggleEditMode={this.toggleEditMode}
+          quote={this.quote}
           isLoading={isLoading}
           isEditing={isEditing}
           error={error}
@@ -83,6 +101,7 @@ TimelineCommentEventControlled.propTypes = {
   event: PropTypes.object.isRequired,
   updateComment: PropTypes.func.isRequired,
   deleteComment: PropTypes.func.isRequired,
+  appendCommentContent: PropTypes.func.isRequired,
   openConfirmModal: PropTypes.func.isRequired,
 };
 

invenio_requests/assets/semantic-ui/js/invenio_requests/timelineCommentEventControlled/index.js

@@ -7,10 +7,12 @@
 import EventWithStateComponent from "./TimelineCommentEventControlled";
 import { connect } from "react-redux";
 import { updateComment, deleteComment } from "./state/actions";
+import { appendEventContent } from "../timelineCommentEditor/state/actions";
 
 const mapDispatchToProps = (dispatch) => ({
   updateComment: async (payload) => dispatch(updateComment(payload)),
   deleteComment: async (payload) => dispatch(deleteComment(payload)),
+  appendCommentContent: (content) => dispatch(appendEventContent(content)),
 });
 
 export const TimelineCommentEventControlled = connect(

invenio_requests/assets/semantic-ui/js/invenio_requests/timelineEvents/TimelineCommentEvent.js

@@ -50,6 +50,7 @@ class TimelineCommentEvent extends Component {
       updateComment,
       deleteComment,
       toggleEditMode,
+      quote,
     } = this.props;
     const { commentContent } = this.state;
 
@@ -88,6 +89,9 @@ class TimelineCommentEvent extends Component {
                     aria-label={i18next.t("Actions")}
                   >
                     <Dropdown.Menu>
+                      <Dropdown.Item onClick={() => quote()}>
+                        {i18next.t("Quote")}
+                      </Dropdown.Item>
                       {canUpdate && (
                         <Dropdown.Item onClick={() => toggleEditMode()}>
                           {i18next.t("Edit")}
@@ -126,6 +130,7 @@ class TimelineCommentEvent extends Component {
                     <TimelineEventBody
                       content={event?.payload?.content}
                       format={event?.payload?.format}
+                      quote={quote}
                     />
                   )}
 
@@ -154,6 +159,7 @@ TimelineCommentEvent.propTypes = {
   deleteComment: PropTypes.func.isRequired,
   updateComment: PropTypes.func.isRequired,
   toggleEditMode: PropTypes.func.isRequired,
+  quote: PropTypes.func.isRequired,
   isLoading: PropTypes.bool,
   isEditing: PropTypes.bool,
   error: PropTypes.string,