diff --git a/src/components/Post.jsx b/src/components/Post.jsx
index 64f173b5..1c64e4d3 100644
--- a/src/components/Post.jsx
+++ b/src/components/Post.jsx
@@ -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(
{}}
+ ref={(el) => {
+ if (typeof postQuoteRef === 'function') {
+ postQuoteRef(cid, el);
+ } else {
+ return;
+ }
+ }}
+ onClick={() => {postQuoteOnClick(cid)}}
+ onMouseOver={() => {postQuoteOnOver(cid)}}
+ onMouseLeave={() => {
+ postQuoteOnLeave();
+ }}
>
- {matchedText}
+ {matchedText}
);
@@ -104,7 +118,9 @@ const Post = ({ content }) => {
video: ({ src }) => {src},
source: ({ src }) => {src},
gif: ({ src }) => {src},
- p: ({ children }) =>
{createQuotelink(children)}
,
+ p: ({ children }) =>
+ {createQuotelink(children, postQuoteOnClick, postQuoteOnOver, postQuoteOnLeave, postQuoteRef)}
+
,
}}
/>
);
diff --git a/src/components/views/Thread.jsx b/src/components/views/Thread.jsx
index a95de4c8..31b26f1f 100755
--- a/src/components/views/Thread.jsx
+++ b/src/components/views/Thread.jsx
@@ -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}
-
-
+ }}
+ >
+ {`c/${shortParentCid}`}{shortParentCid === comment.shortCid ? " (OP)" : null}
+
+ {
+ 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);
+ }}
+ />