feat(reply modal): greentext by selecting text

src/components/post-desktop/post-desktop.tsx

@@ -78,7 +78,7 @@ const PostInfo = ({ openReplyModal, post, roles, isHidden }: PostProps) => {
             {!cid ? (
               <span className={styles.pendingCid}>{state === 'failed' || stateString === 'Failed' ? 'Failed' : 'Pending'}</span>
             ) : (
-              <span className={styles.replyToPost} title={t('reply_to_post')} onClick={() => openReplyModal && openReplyModal(cid)}>
+              <span className={styles.replyToPost} title={t('reply_to_post')} onMouseDown={() => openReplyModal && openReplyModal(cid)}>
                 {shortCid}
               </span>
             )}

src/components/post-mobile/post-mobile.tsx

@@ -89,7 +89,7 @@ const PostInfoAndMedia = ({ openReplyModal, post, roles }: PostProps) => {
               {!cid ? (
                 <span className={styles.pendingCid}>{state === 'failed' || stateString === 'Failed' ? 'Failed' : 'Pending'}</span>
               ) : (
-                <span className={styles.replyToPost} title={t('reply_to_post')} onClick={() => openReplyModal && openReplyModal(cid)}>
+                <span className={styles.replyToPost} title={t('reply_to_post')} onMouseDown={() => openReplyModal && openReplyModal(cid)}>
                   {shortCid}
                 </span>
               )}

src/components/reply-modal/reply-modal.tsx

@@ -7,6 +7,7 @@ import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js';
 import { getFormattedTimeAgo } from '../../lib/utils/time-utils';
 import { isValidURL } from '../../lib/utils/url-utils';
 import { isAllView, isSubscriptionsView } from '../../lib/utils/view-utils';
+import useSelectedTextStore from '../../stores/use-selected-text-store';
 import useReply from '../../hooks/use-reply';
 import useIsMobile from '../../hooks/use-is-mobile';
 import styles from './reply-modal.module.css';
@@ -23,14 +24,12 @@ const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => {
   const { t } = useTranslation();
   const { subplebbitAddress } = useParams() as { subplebbitAddress: string };
   const { setContent, resetContent, replyIndex, publishReply } = useReply({ cid: parentCid, subplebbitAddress });
-
   const account = useAccount();
   const { displayName } = account?.author || {};
-
   const [url, setUrl] = useState('');
-
-  const textRef = useRef<HTMLTextAreaElement>(null);
+  const textRef = useRef<HTMLTextAreaElement | null>(null);
   const urlRef = useRef<HTMLInputElement>(null);
+  const { selectedText } = useSelectedTextStore();
 
   const onPublishReply = () => {
     const currentContent = textRef.current?.value || '';
@@ -89,6 +88,15 @@ const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => {
       )
     : `The subplebbit might be offline and publishing might fail.`;
 
+  const setTextRef = (ref: HTMLTextAreaElement | null) => {
+    if (ref) {
+      textRef.current = ref;
+      !isMobile && ref.focus();
+      const len = ref.value.length;
+      ref.setSelectionRange(len, len);
+    }
+  };
+
   const modalContent = (
     <div className={styles.container} ref={nodeRef}>
       <div className={`replyModalHandle ${styles.title}`}>
@@ -130,12 +138,12 @@ const ReplyModal = ({ closeModal, parentCid, scrollY }: ReplyModalProps) => {
             cols={48}
             rows={3}
             wrap='soft'
-            ref={textRef}
+            ref={setTextRef}
+            defaultValue={selectedText}
             onChange={(e) => {
               const content = e.target.value.replace(/\n/g, '\n\n');
               setContent.content(content);
             }}
-            autoFocus={!isMobile} // autofocus causes auto scroll to top on mobile
           />
         </div>
         {!(isInAllView || isInSubscriptionsView) && offlineAlert}

src/hooks/use-reply-modal.ts

@@ -1,21 +1,26 @@
 import { useState, useCallback } from 'react';
 import useIsMobile from './use-is-mobile';
+import useSelectedTextStore from '../stores/use-selected-text-store';
 
 const useReplyModal = () => {
   const [showReplyModal, setShowReplyModal] = useState(false);
   const [activeCid, setActiveCid] = useState<string | null>(null);
+  const { resetSelectedText, setSelectedText } = useSelectedTextStore();
 
   // on mobile, the position is absolute instead of fixed, so we need to calculate the top position
   const isMobile = useIsMobile();
   const [scrollY, setScrollY] = useState<number>(0);
 
   const closeModal = useCallback(() => {
+    resetSelectedText();
     setActiveCid(null);
     setShowReplyModal(false);
-  }, []);
+  }, [resetSelectedText]);
 
   const openReplyModal = useCallback(
     (cid: string) => {
+      let text = document.getSelection()?.toString();
+      text && setSelectedText(`>${text}\n`);
       if (isMobile) {
         const currentScrollY = window.scrollY;
         setScrollY(currentScrollY);
@@ -27,7 +32,7 @@ const useReplyModal = () => {
         setShowReplyModal(true);
       }
     },
-    [activeCid, isMobile],
+    [activeCid, isMobile, setSelectedText],
   );
 
   return { activeCid, closeModal, openReplyModal, scrollY, showReplyModal };

src/stores/use-selected-text-store.ts

@@ -0,0 +1,15 @@
+import { create } from 'zustand';
+
+interface SelectedTextState {
+  selectedText: string;
+  setSelectedText: (text: string) => void;
+  resetSelectedText: () => void;
+}
+
+const useSelectedTextStore = create<SelectedTextState>((set) => ({
+  selectedText: '',
+  setSelectedText: (text) => set({ selectedText: text }),
+  resetSelectedText: () => set({ selectedText: '' }),
+}));
+
+export default useSelectedTextStore;