added cid quotelinks

src/components/Post.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactMarkdown from 'react-markdown';
+import { Link } from 'react-router-dom';
 import { visit } from 'unist-util-visit';
 import DOMPurify from 'dompurify';
 
@@ -24,7 +25,31 @@ const blockquoteToGreentext = () => (tree) => {
   });
 };
 
-const Post = ({ content }) => {
+const createQuotelink = (handleQuoteClick, comment, children) => {
+  const text = children.map((child) => (typeof child === 'string' ? child : child.props.children)).join('');
+  const regex = /(\s|^)(c\/[A-Za-z0-9]{12}|c\/[A-Za-z0-9]{45})(?=\s|$)/g;
+  const parts = text.split(regex);
+
+  return parts.flatMap((part, i) => {
+    if (regex.test(part)) {
+      return [
+        <Link
+          key={`link-${i}`}
+          className="quotelink"
+          to=""
+          onClick={handleQuoteClick}
+        >
+          {part.trim()}
+        </Link>,
+      ];
+    } else {
+      return [part];
+    }
+  });
+};
+
+
+const Post = ({ content, handleQuoteClick, comment }) => {
   const sanitizedContent = DOMPurify.sanitize(content);
 
   return (
@@ -36,7 +61,9 @@ const Post = ({ content }) => {
         video: () => null,
         source: () => null,
         gif: () => null,
-        a: () => null
+        p: ({ children }) => (
+          <p>{createQuotelink(handleQuoteClick, comment, children)}</p>
+        ),
       }}
     />
   );

src/components/views/Board.jsx

@@ -13,6 +13,7 @@ import ReplyModal from '../ReplyModal';
 import SettingsModal from '../SettingsModal';
 import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
 import getDate from '../../utils/getDate';
+import handleQuoteClick from '../../utils/handleQuoteClick';
 import handleStyleChange from '../../utils/handleStyleChange';
 import renderComments from '../../utils/renderComments';
 import useClickForm from '../../hooks/useClickForm';
@@ -233,17 +234,6 @@ const Board = () => {
     navigate(`/p/${selected}`);
   };
 
-  // scroll to post when quote is clicked
-  function handleQuoteClick(reply, event) {
-    event.preventDefault();
-    const cid = reply.shortCid;
-    const targetElement = [...document.querySelectorAll('.post-reply')]
-      .find(el => el.innerHTML.includes(cid));
-    if (targetElement) {
-        targetElement.scrollIntoView({ behavior: "instant" });
-    }
-  };
-
 
   return (
     <Container>
@@ -641,10 +631,7 @@ const Board = () => {
                           {reply.content ? (
                               reply.content.length > 500 ?
                               <Fragment key={`fragment8-${reply.cid}`}>
-                                <blockquote key={`pm-${reply.cid}`} className="post-message">
+                                <blockquote key={`pm-${reply.cid}`} handleQuoteClick={handleQuoteClick} comment={reply} className="post-message">
-                                  <Link to="" key={`r-pm-${reply.cid}`} className="quotelink" onClick={() => {}}>
-                                    {`c/${reply.parentCid.slice(0, 8)}`}{<br />}
-                                  </Link>
                                   <Post content={reply.content.slice(0, 500)} key={`post-${reply.cid}`} />
                                   <span key={`ttl-s-${reply.cid}`} className="ttl"> (...)
                                   <br key={`ttl-s-br1-${reply.cid}`} /><br key={`ttl-s-br2${reply.cid}`} />
@@ -654,10 +641,7 @@ const Board = () => {
                                 </blockquote>
                               </Fragment>
                             : <blockquote key={`pm-${reply.cid}`} className="post-message">
-                                <Link to={() => {}} key={`r-pm-${reply.cid}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, event)}>
+                                <Post content={reply.content} key={`post-${reply.cid}`} handleQuoteClick={handleQuoteClick} comment={reply} />
-                                  {`c/${reply.parentCid.slice(0, 8)}`}{<br />}
-                                </Link>
-                                <Post content={reply.content} key={`post-${reply.cid}`} />
                               </blockquote>)
                             : null}
                         </div>
@@ -852,10 +836,7 @@ const Board = () => {
                           reply.content.length > 500 ?
                           <Fragment key={`fragment15-${reply.cid}`}>
                             <blockquote key={`mob-pm-${reply.cid}`} className="post-message">
-                              <Link to="" key={`mob-r-pm-${reply.cid}`} className="quotelink" onClick={() => {}}>
+                              <Post content={reply.content.slice(0, 500)} key={`post-mobile-${reply.cid}`} handleQuoteClick={handleQuoteClick} comment={reply} />
-                                {`c/${reply.parentCid.slice(0, 8)}`}{<br />}
-                              </Link>
-                              <Post content={reply.content.slice(0, 500)} key={`post-mobile-${reply.cid}`} />
                               <span key={`mob-ttl-s-${reply.cid}`} className="ttl"> (...)
                               <br key={`mob-ttl-s-br1-${reply.cid}`} /><br key={`mob-ttl-s-br2${reply.cid}`} />
                               Comment too long.&nbsp;
@@ -864,10 +845,7 @@ const Board = () => {
                             </blockquote>
                           </Fragment>
                         : <blockquote key={`mob-pm-${reply.cid}`} className="post-message">
-                            <Link to={() => {}} key={`mob-r-pm-${reply.cid}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, event)}>
+                            <Post content={reply.content} key={`post-mobile-${reply.cid}`} handleQuoteClick={handleQuoteClick} comment={reply} />
-                              {`c/${reply.parentCid.slice(0, 8)}`}{<br />}
-                            </Link>
-                            <Post content={reply.content} key={`post-mobile-${reply.cid}`} />
                           </blockquote>)
                         : null}
                       </div>

src/components/views/Pending.jsx

@@ -10,6 +10,7 @@ import PostLoader from '../PostLoader';
 import SettingsModal from '../SettingsModal';
 import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
 import getDate from '../../utils/getDate';
+import handleQuoteClick from '../../utils/handleQuoteClick';
 import handleStyleChange from '../../utils/handleStyleChange';
 import useError from '../../hooks/useError';
 import useSuccess from '../../hooks/useSuccess';
@@ -259,7 +260,7 @@ const Pending = () => {
                       <button key={`pmb-${"pending"}`} className="post-menu-button" onClick={() => {}} title="Post menu" style={{ all: 'unset', cursor: 'pointer' }}>▶</button>
                     </span>
                     <blockquote key={`blockquote-${"pending"}`}>
-                      <Post content={comment.content} key={`post-${"pending"}`} />
+                      <Post content={comment.content} comment={comment} handleQuoteClick={handleQuoteClick} key={`post-${"pending"}`} />
                     </blockquote>
                   </div>
                 </div>
@@ -351,7 +352,7 @@ const Pending = () => {
                     <blockquote key={`mob-bq-${"pending"}`} className="post-message-mobile">
                       {comment.content ? (
                         <>
-                          <Post content={comment.content} key={`post-mobile-${"pending"}`} /> 
+                          <Post content={comment.content} handleQuoteClick={handleQuoteClick} comment={comment} key={`post-mobile-${"pending"}`} /> 
                         </>
                       ) : null}
                     </blockquote>

src/components/views/Thread.jsx

@@ -13,6 +13,7 @@ import ReplyModal from '../ReplyModal';
 import SettingsModal from '../SettingsModal';
 import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
 import getDate from '../../utils/getDate';
+import handleQuoteClick from '../../utils/handleQuoteClick';
 import handleStyleChange from '../../utils/handleStyleChange';
 import renderThreadComments from '../../utils/renderThreadComments';
 import useClickForm from '../../hooks/useClickForm';
@@ -215,17 +216,6 @@ const Thread = () => {
     navigate(`/p/${selected}`);
   };
 
-  // scroll to post when quote is clicked
-  function handleQuoteClick(reply, event) {
-    event.preventDefault();
-    const cid = reply.shortCid;
-    const targetElement = [...document.querySelectorAll('.post-reply')]
-      .find(el => el.innerHTML.includes(cid));
-    if (targetElement) {
-        targetElement.scrollIntoView({ behavior: "instant" });
-    }
-  };
-
 
   return (
     <Container>
@@ -506,7 +496,7 @@ const Thread = () => {
                       </div>
                     </span>
                     <blockquote key={`blockquote-${comment.cid}`}>
-                      <Post content={comment.content} key={`post-${comment.cid}`} />
+                      <Post content={comment.content} handleQuoteClick={handleQuoteClick} comment={comment} key={`post-${comment.cid}`} />
                     </blockquote>
                   </div>
                 </div>
@@ -618,11 +608,7 @@ const Thread = () => {
                             </div>
                           ) : null}
                         <blockquote key={`pm-${reply.cid}`} className="post-message">
-                          <Link to={() => {}} className="quote-link"
+                          <Post content={reply.content} comment={reply} handleQuoteClick={handleQuoteClick} key={`post-${reply.cid}`} />
-                            onClick={(event) => handleQuoteClick(reply, event)}>
-                            {`c/${reply.parentCid.slice(0, 8)}`}{<br />}
-                          </Link>
-                          <Post content={reply.content} key={`post-${reply.cid}`} />
                         </blockquote>
                       </div>
                     </div>
@@ -717,7 +703,7 @@ const Thread = () => {
                     <blockquote key={`mob-bq-${comment.cid}`} className="post-message-mobile">
                       {comment.content ? (
                         <>
-                          <Post content={comment.content} key={`post-mobile-${comment.cid}`} /> 
+                          <Post content={comment.content} handleQuoteClick={handleQuoteClick} comment={comment} key={`post-mobile-${comment.cid}`} /> 
                         </>
                       ) : null}
                     </blockquote>
@@ -767,11 +753,7 @@ const Thread = () => {
                         </span>
                       </div>
                       <blockquote key={`mob-pm-${reply.cid}`} className="post-message-mobile">
-                        <Link to={() => {}} key={`mob-ql-${reply.cid}`} className="quotelink-mobile" 
+                        <Post content={reply.content} comment={reply} handleQuoteClick={handleQuoteClick} key={`post-mobile-${reply.cid}`} />
-                        onClick={(event) => handleQuoteClick(reply, event)}>
-                          {`c/${reply.parentCid.slice(0, 8)}`}{<br />}
-                        </Link>
-                        <Post content={reply.content} key={`post-mobile-${reply.cid}`} />
                       </blockquote>
                     </div>
                   </div>

src/utils/handleQuoteClick.js

@@ -0,0 +1,12 @@
+function handleQuoteClick(reply) {
+  const cid = reply.shortCid;
+  const targetElement = [...document.querySelectorAll('.post-reply')]
+    .find(el => el.innerHTML.includes(cid));
+  if (targetElement) {
+      targetElement.scrollIntoView({ behavior: "instant" });
+  } else {
+    console.log('Could not find target element');
+  }
+};
+
+export default handleQuoteClick;

yarn.lock

@@ -2472,21 +2472,6 @@
   dependencies:
     debug "4.3.3"
 
-"@plebbit/plebbit-react-hooks@https://github.com/plebbit/plebbit-react-hooks.git#33fca8ef1cfc78e5c16d7fcbe7effbeebeb082c8":
-  version "0.0.1"
-  resolved "https://github.com/plebbit/plebbit-react-hooks.git#33fca8ef1cfc78e5c16d7fcbe7effbeebeb082c8"
-  dependencies:
-    "@plebbit/plebbit-js" "https://github.com/plebbit/plebbit-js.git#c90a5a2920f763a32bedc0584606b358d83600e5"
-    "@plebbit/plebbit-logger" "https://github.com/plebbit/plebbit-logger.git"
-    assert "2.0.0"
-    ethers "5.6.9"
-    localforage "1.10.0"
-    lodash.isequal "4.5.0"
-    memoizee "0.4.15"
-    quick-lru "5.1.1"
-    uuid "8.3.2"
-    zustand "4.0.0"
-
 "@plebbit/plebbit-react-hooks@https://github.com/plebbit/plebbit-react-hooks.git#87e3b09611c002ae385ca4517890fc2e139d3822":
   version "0.0.1"
   resolved "https://github.com/plebbit/plebbit-react-hooks.git#87e3b09611c002ae385ca4517890fc2e139d3822"