External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

added cid quotelinks

Browse Source
This commit is contained in:
plebbitor
2023-04-13 17:08:35 +02:00
parent d1f0fcd10c
commit bb8c6cc8f3
6 changed files with 54 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Post.jsx
+29 -2
View File
@@ -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
+5 -27
View File
@@ -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">
<Link to="" key={`r-pm-${reply.cid}`} className="quotelink" onClick={() => {}}>
{`c/${reply.parentCid.slice(0, 8)}`}{<br />}
</Link>
<blockquote key={`pm-${reply.cid}`} handleQuoteClick={handleQuoteClick} comment={reply} className="post-message">
<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)}>
{`c/${reply.parentCid.slice(0, 8)}`}{<br />}
</Link>
<Post content={reply.content} key={`post-${reply.cid}`} />
<Post content={reply.content} key={`post-${reply.cid}`} handleQuoteClick={handleQuoteClick} comment={reply} />
</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={() => {}}>
{`c/${reply.parentCid.slice(0, 8)}`}{<br />}
</Link>
<Post content={reply.content.slice(0, 500)} key={`post-mobile-${reply.cid}`} />
<Post content={reply.content.slice(0, 500)} key={`post-mobile-${reply.cid}`} handleQuoteClick={handleQuoteClick} comment={reply} />
<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)}>
{`c/${reply.parentCid.slice(0, 8)}`}{<br />}
</Link>
<Post content={reply.content} key={`post-mobile-${reply.cid}`} />
<Post content={reply.content} key={`post-mobile-${reply.cid}`} handleQuoteClick={handleQuoteClick} comment={reply} />
</blockquote>)
: null}
</div>
src/components/views/Pending.jsx
+3 -2
View File
@@ -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
+5 -23
View File
@@ -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"
onClick={(event) => handleQuoteClick(reply, event)}>
{`c/${reply.parentCid.slice(0, 8)}`}{<br />}
</Link>
<Post content={reply.content} key={`post-${reply.cid}`} />
<Post content={reply.content} comment={reply} handleQuoteClick={handleQuoteClick} 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"
onClick={(event) => handleQuoteClick(reply, event)}>
{`c/${reply.parentCid.slice(0, 8)}`}{<br />}
</Link>
<Post content={reply.content} key={`post-mobile-${reply.cid}`} />
<Post content={reply.content} comment={reply} handleQuoteClick={handleQuoteClick} key={`post-mobile-${reply.cid}`} />
</blockquote>
</div>
</div>