From bb8c6cc8f34535e254a8f8619ed3fa612903f0a1 Mon Sep 17 00:00:00 2001 From: plebbitor Date: Thu, 13 Apr 2023 17:08:35 +0200 Subject: [PATCH] added cid quotelinks --- src/components/Post.jsx | 31 +++++++++++++++++++++++++++++-- src/components/views/Board.jsx | 32 +++++--------------------------- src/components/views/Pending.jsx | 5 +++-- src/components/views/Thread.jsx | 28 +++++----------------------- src/utils/handleQuoteClick.js | 12 ++++++++++++ yarn.lock | 15 --------------- 6 files changed, 54 insertions(+), 69 deletions(-) create mode 100644 src/utils/handleQuoteClick.js diff --git a/src/components/Post.jsx b/src/components/Post.jsx index 5a341493..48782db1 100644 --- a/src/components/Post.jsx +++ b/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 [ + + {part.trim()} + , + ]; + } 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 }) => ( +

{createQuotelink(handleQuoteClick, comment, children)}

+ ), }} /> ); diff --git a/src/components/views/Board.jsx b/src/components/views/Board.jsx index f17d7c90..06a17410 100644 --- a/src/components/views/Board.jsx +++ b/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 ( @@ -641,10 +631,7 @@ const Board = () => { {reply.content ? ( reply.content.length > 500 ? -
- {}}> - {`c/${reply.parentCid.slice(0, 8)}`}{
} - +
(...)

@@ -654,10 +641,7 @@ const Board = () => {
:
- {}} key={`r-pm-${reply.cid}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, event)}> - {`c/${reply.parentCid.slice(0, 8)}`}{
} - - +
) : null} @@ -852,10 +836,7 @@ const Board = () => { reply.content.length > 500 ?
- {}}> - {`c/${reply.parentCid.slice(0, 8)}`}{
} - - + (...)

Comment too long.  @@ -864,10 +845,7 @@ const Board = () => {
:
- {}} key={`mob-r-pm-${reply.cid}`} className="quotelink" onClick={(event) => handleQuoteClick(reply, event)}> - {`c/${reply.parentCid.slice(0, 8)}`}{
} - - +
) : null} diff --git a/src/components/views/Pending.jsx b/src/components/views/Pending.jsx index 303c3720..b1a14be2 100644 --- a/src/components/views/Pending.jsx +++ b/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 = () => {
- +
@@ -351,7 +352,7 @@ const Pending = () => {
{comment.content ? ( <> - + ) : null}
diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx index 12eb815f..e83f6706 100644 --- a/src/components/views/Thread.jsx +++ b/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 ( @@ -506,7 +496,7 @@ const Thread = () => {
- +
@@ -618,11 +608,7 @@ const Thread = () => { ) : null}
- {}} className="quote-link" - onClick={(event) => handleQuoteClick(reply, event)}> - {`c/${reply.parentCid.slice(0, 8)}`}{
} - - +
@@ -717,7 +703,7 @@ const Thread = () => {
{comment.content ? ( <> - + ) : null}
@@ -767,11 +753,7 @@ const Thread = () => {
- {}} key={`mob-ql-${reply.cid}`} className="quotelink-mobile" - onClick={(event) => handleQuoteClick(reply, event)}> - {`c/${reply.parentCid.slice(0, 8)}`}{
} - - +
diff --git a/src/utils/handleQuoteClick.js b/src/utils/handleQuoteClick.js new file mode 100644 index 00000000..916fb97e --- /dev/null +++ b/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; \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 042e6bb9..d2e7ca57 100644 --- a/yarn.lock +++ b/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"