allow quoting posts

pioneer/packages/joy-forum/src/EditReply.tsx

@@ -47,6 +47,7 @@ type OuterProps = ValidationProps & {
   id?: PostId;
   struct?: Post;
   threadId: ThreadId;
+  quotedPost?: Post | null;
   onEditSuccess?: () => void;
   onEditCancel?: () => void;
 };
@@ -172,13 +173,24 @@ const InnerForm = (props: FormProps) => {
   );
 };
 
+const getQuotedPostString = (post: Post) => {
+  const lines = post.current_text.split('\n');
+  return lines.reduce((acc, line) => {
+    return `${acc}> ${line}\n`;
+  }, '');
+};
+
 const EditForm = withFormik<OuterProps, FormValues>({
 
   // Transform outer props into form values
   mapPropsToValues: props => {
-    const { struct } = props;
+    const { struct, quotedPost } = props;
     return {
-      text: (struct && struct.current_text) || ''
+      text: struct
+        ? struct.current_text
+        : quotedPost
+          ? getQuotedPostString(quotedPost)
+          : ''
     };
   },
 

pioneer/packages/joy-forum/src/ViewReply.tsx

@@ -15,6 +15,13 @@ import { TimeAgoDate, ReplyIdxQueryParam } from './utils';
 const HORIZONTAL_PADDING = '1em';
 const ReplyMarkdown = styled(ReactMarkdown)`
   font-size: 1.15rem;
+
+  blockquote {
+    color: rgba(78, 78, 78, 0.6);
+    margin-left: 15px;
+    padding-left: 15px;
+    border-left: 2px solid rgba(78, 78, 78, 0.6);
+  }
 `;
 const ReplyContainer = styled.div<{ selected?: boolean }>`
   && {

pioneer/packages/joy-forum/src/ViewThread.tsx

@@ -131,9 +131,11 @@ type ViewThreadProps = ApiProps & InnerViewThreadProps & {
 function InnerViewThread (props: ViewThreadProps) {
   const [showModerateForm, setShowModerateForm] = useState(false);
   const [displayedPosts, setDisplayedPosts] = useState<Post[]>([]);
+  const [quotedPost, setQuotedPost] = useState<Post | null>(null);
+
   const postsRefs = useRef<Record<number, React.RefObject<HTMLDivElement>>>({});
-  const { category, thread, preview = false } = props;
   const replyFormRef = useRef<HTMLDivElement>(null);
+
   const [rawSelectedPostIdx, setSelectedPostIdx] = useQueryParam(ReplyIdxQueryParam);
   const [rawEditedPostId, setEditedPostId] = useQueryParam(ReplyEditIdQueryParam);
   const [currentPage, setCurrentPage] = usePagination();
@@ -141,6 +143,8 @@ function InnerViewThread (props: ViewThreadProps) {
   const parsedSelectedPostIdx = rawSelectedPostIdx ? parseInt(rawSelectedPostIdx) : null;
   const selectedPostIdx = (parsedSelectedPostIdx && !Number.isNaN(parsedSelectedPostIdx)) ? parsedSelectedPostIdx : null;
 
+  const { category, thread, preview = false } = props;
+
   const editedPostId = rawEditedPostId && new PostId(rawEditedPostId);
 
   if (!thread) {
@@ -264,6 +268,7 @@ function InnerViewThread (props: ViewThreadProps) {
 
   const onThreadReplyClick = () => {
     clearEditedPost();
+    setQuotedPost(null);
     scrollToReplyForm();
   };
 
@@ -304,6 +309,11 @@ function InnerViewThread (props: ViewThreadProps) {
         scrollToReplyForm();
       };
 
+      const onReplyQuoteClick = () => {
+        setQuotedPost(reply);
+        scrollToReplyForm();
+      };
+
       return (
         <ViewReply
           ref={postsRefs.current[replyIdx]}
@@ -313,7 +323,7 @@ function InnerViewThread (props: ViewThreadProps) {
           reply={reply}
           selected={selectedPostIdx === replyIdx}
           onEdit={onReplyEditClick}
-          onQuote={() => {}}
+          onQuote={onReplyQuoteClick}
         />
       );
     });
@@ -398,7 +408,7 @@ function InnerViewThread (props: ViewThreadProps) {
         editedPostId ? (
           <EditReply id={editedPostId} key={editedPostId.toString()} onEditSuccess={onPostEditSuccess} onEditCancel={clearEditedPost} />
         ) : (
-          <NewReply threadId={thread.id} />
+          <NewReply threadId={thread.id} key={quotedPost?.id.toString()} quotedPost={quotedPost} />
         )
       }
     </ReplyEditContainer>