Only quote selected text if it's from the item we're replying to, not…

… just any selected text
stackernews · Sep 29, 2023 · f75ec5c · f75ec5c
1 parent 0eeb5aa
commit f75ec5c
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 6 deletions.
diff --git a/components/comment.js b/components/comment.js
@@ -137,6 +137,7 @@ export default function Comment ({
       : null
   const bountyPaid = root.bountyPaidTo?.includes(Number(item.id))
   const replyRef = useRef()
+  const contentContainerRef = useRef()
 
   return (
     <div
@@ -209,7 +210,7 @@ export default function Comment ({
               />
               )
             : (
-              <div className={styles.text}>
+              <div className={styles.text} ref={contentContainerRef}>
                 <Text topLevel={topLevel} nofollow={item.sats + item.boost < NOFOLLOW_LIMIT}>
                   {truncate ? truncateString(item.text) : item.searchText || item.text}
                 </Text>
@@ -223,7 +224,7 @@ export default function Comment ({
           : (
             <div className={styles.children}>
               {!noReply &&
-                <Reply depth={depth + 1} item={item} replyOpen={replyOpen} ref={replyRef}>
+                <Reply depth={depth + 1} item={item} replyOpen={replyOpen} ref={replyRef} contentContainerRef={contentContainerRef}>
                   {root.bounty && !bountyPaid && <PayBounty item={item} />}
                 </Reply>}
               {children}

diff --git a/components/item-full.js b/components/item-full.js
@@ -122,6 +122,7 @@ function FwdUsers ({ forwards }) {
 function TopLevelItem ({ item, noReply, ...props }) {
   const ItemComponent = item.isJob ? ItemJob : Item
   const replyRef = useRef()
+  const contentContainerRef = useRef()
 
   return (
     <ItemComponent
@@ -138,7 +139,7 @@ function TopLevelItem ({ item, noReply, ...props }) {
       belowTitle={item.forwards && item.forwards.length > 0 && <FwdUsers forwards={item.forwards} />}
       {...props}
     >
-      <div className={styles.fullItemContainer}>
+      <div className={styles.fullItemContainer} ref={contentContainerRef}>
         {item.text && <ItemText item={item} />}
         {item.url && <ItemEmbed item={item} />}
         {item.poll && <Poll item={item} />}
@@ -158,7 +159,7 @@ function TopLevelItem ({ item, noReply, ...props }) {
       </div>
       {!noReply &&
         <>
-          <Reply item={item} replyOpen placeholder={item.ncomments ? undefined : 'start the conversation ...'} ref={replyRef} />
+          <Reply item={item} replyOpen placeholder={item.ncomments ? undefined : 'start the conversation ...'} ref={replyRef} contentContainerRef={contentContainerRef} />
           {!item.position && !item.isJob && !item.parentId && !item.bounty > 0 && <Related title={item.title} itemId={item.id} />}
           {item.bounty > 0 && <PastBounties item={item} />}
         </>}

diff --git a/components/reply.js b/components/reply.js
@@ -34,7 +34,7 @@ function FreebieDialog () {
   )
 }
 
-export default forwardRef(function Reply ({ item, onSuccess, replyOpen, children, placeholder }, ref) {
+export default forwardRef(function Reply ({ item, onSuccess, replyOpen, children, placeholder, contentContainerRef }, ref) {
   const [reply, setReply] = useState(replyOpen)
   const me = useMe()
   const parentId = item.id
@@ -46,7 +46,9 @@ export default forwardRef(function Reply ({ item, onSuccess, replyOpen, children
         setReply(true)
       }
       const selection = window.getSelection()
-      const textToQuote = selection.isCollapsed ? item.text : selection.toString()
+      const selectedText = selection.isCollapsed ? undefined : selection.toString()
+      const isSelectedTextInTarget = contentContainerRef?.current?.contains(selection.anchorNode)
+      const textToQuote = isSelectedTextInTarget ? selectedText : item.text
       let updatedValue
       if (formInnerRef.current && formInnerRef.current.values && !formInnerRef.current.values.text) {
         updatedValue = quote(textToQuote)