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

add quote highlight and scroll to createQuotelink

Browse Source
This commit is contained in:
plebeius.eth
2023-06-21 21:53:45 +02:00
parent 43aa1a1a90
commit 7924e0a663
2 changed files with 92 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Post.jsx
+20 -4
View File
@@ -5,7 +5,7 @@ import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
import breaks from 'remark-breaks';
const Post = ({ content }) => {
const Post = ({ content, postQuoteOnClick, postQuoteOnOver, postQuoteOnLeave, postQuoteRef }) => {
const doubleNewlineContent = useMemo(() => content?.replaceAll(/\n(?!\n)/g, '\n\n'), [content]);
const customSchema = useMemo(() => ({
@@ -42,7 +42,7 @@ const Post = ({ content }) => {
};
const createQuotelink = (children) => {
const createQuotelink = (children, postQuoteOnClick, postQuoteOnOver, postQuoteOnLeave, postQuoteRef) => {
const regexC = /(c\/[A-Za-z0-9]{46}|c\/[A-Za-z0-9]{12})/g;
const regexP = /(p\/([A-Za-z0-9]{52}|[A-Za-z0-9-.]*\.eth))/g;
const regexU = /(u\/([A-Za-z0-9]{52}|[A-Za-z0-9-.]*\.eth))/g;
@@ -66,13 +66,27 @@ const Post = ({ content }) => {
newParts.push(child.substring(lastIndex, index));
}
const cid = matchedText.replace('c/', '');
newParts.push(
<Link
key={`link-${i}-${matchedText}`}
className="quotelink"
to={() => {}}
ref={(el) => {
if (typeof postQuoteRef === 'function') {
postQuoteRef(cid, el);
} else {
return;
}
}}
onClick={() => {postQuoteOnClick(cid)}}
onMouseOver={() => {postQuoteOnOver(cid)}}
onMouseLeave={() => {
postQuoteOnLeave();
}}
>
{matchedText}
{matchedText}
</Link>
);
@@ -104,7 +118,9 @@ const Post = ({ content }) => {
video: ({ src }) => <span>{src}</span>,
source: ({ src }) => <span>{src}</span>,
gif: ({ src }) => <span>{src}</span>,
p: ({ children }) => <div className='custom-paragraph'>{createQuotelink(children)}</div>,
p: ({ children }) => <div className='custom-paragraph'>
{createQuotelink(children, postQuoteOnClick, postQuoteOnOver, postQuoteOnLeave, postQuoteRef)}
</div>,
}}
/>
);
src/components/views/Thread.jsx
+72 -5
View File
@@ -85,6 +85,7 @@ const Thread = () => {
const postMenuCatalogRef = useRef(null);
const backlinkRefs = useRef({});
const quoteRefs = useRef({});
const postRefs = useRef({});
const postOnHoverRef = useRef(null);
const backlinkRefsMobile = useRef({});
const quoteRefsMobile = useRef({});
@@ -106,6 +107,25 @@ const Thread = () => {
const [outOfViewPosition, setOutOfViewPosition] = useState({top: 0, left: 0});
const [postOnHoverHeight, setPostOnHoverHeight] = useState(0);
const [executeAnonMode, setExecuteAnonMode] = useState(false);
const [cidTracker, setCidTracker] = useState({});
useEffect(() => {
const newCidTracker = {};
sortedReplies.forEach((reply) => {
newCidTracker[reply.shortCid] = reply.cid;
});
setCidTracker(newCidTracker);
}, [sortedReplies]);
// useEffect(() => {
// console.log("postrefs cidtracker", cidTracker);
// }, [cidTracker]);
// useEffect(() => {
// console.log("postRefs: ", postRefs)
// }, [postRefs]);
useAnonMode(selectedThread, anonymousMode && executeAnonMode);
@@ -1277,7 +1297,7 @@ const Thread = () => {
ref={el => {
quoteRefs.current[reply.cid] = el;
}}
onClick={(event) => handleQuoteClick(reply, shortParentCid, event)}
onClick={() => handleQuoteClick(reply, shortParentCid, null)}
onMouseOver={(event) => {
event.stopPropagation();
handleQuoteHover(reply, shortParentCid, () => {
@@ -1314,10 +1334,57 @@ const Thread = () => {
onMouseLeave={() => {
removeHighlight();
setOutOfViewCid(null);
}}>
{`c/${shortParentCid}`}{shortParentCid === comment.shortCid ? " (OP)" : null}
</Link>
<Post content={reply.content} comment={reply} key={`post-${index}`} />
}}
>
{`c/${shortParentCid}`}{shortParentCid === comment.shortCid ? " (OP)" : null}
</Link>
<Post key={`post-${index}`}
content={reply.content}
postQuoteRef={(cid, ref) => {
postRefs.current[cid] = ref;
}}
postQuoteOnClick={(quoteShortParentCid) => {
handleQuoteClick(reply, quoteShortParentCid, null)
}}
postQuoteOnOver={(quoteShortParentCid) => {
handleQuoteHover(reply, quoteShortParentCid, () => {
const quoteParentCid = cidTracker[quoteShortParentCid];
setOutOfViewCid(quoteParentCid);
// const rect = postRefs.current[quoteParentCid].getBoundingClientRect();
// const distanceToRight = window.innerWidth - rect.right;
// const distanceToTop = rect.top;
// const distanceToBottom = window.innerHeight - rect.bottom;
// let top;
// if (distanceToTop < postOnHoverHeight / 2) {
// top = window.scrollY - 5;
// } else if (distanceToBottom < postOnHoverHeight / 2) {
// top = window.scrollY - postOnHoverHeight + window.innerHeight - 10;
// } else {
// top = rect.top + window.scrollY - postOnHoverHeight / 2;
// }
// if (distanceToRight < 200) {
// setOutOfViewPosition({
// top,
// right: window.innerWidth - rect.left - 10,
// maxWidth: rect.left - 5
// });
// } else {
// setOutOfViewPosition({
// top,
// left: rect.left + rect.width + 5,
// maxWidth: window.innerWidth - rect.left - rect.width - 5
// });
// }
})
}}
postQuoteOnLeave={() => {
removeHighlight();
setOutOfViewCid(null);
}}
/>
<EditLabel key={`edit-label-reply-${index}`}
commentCid={reply.cid}
className="ttl"/>