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

fix(views): add missing parser for quote links in thread op content

Browse Source
This commit is contained in:
plebeius.eth
2023-10-02 12:55:42 +02:00
parent 8ca19c9cda
commit be8bed74ef
4 changed files with 700 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/views/All.jsx
+200 -4
View File
@@ -1214,7 +1214,56 @@ const All = () => {
thread.content?.length > 1000 ? ( thread.content?.length > 1000 ? (
<Fragment key={`fragment5-${index}`}> <Fragment key={`fragment5-${index}`}>
<blockquote key={`bq-${index}`}> <blockquote key={`bq-${index}`}>
<Post content={thread.content?.slice(0, 1000)} key={`post-${index}`} /> <Post
key={`post-${thread.cid}`}
content={thread.content?.slice(0, 1000)}
postQuoteRef={(quoteShortParentCid, ref) => {
postRefs.current[quoteShortParentCid] = ref;
}}
postQuoteOnClick={(quoteShortParentCid) => {
handleQuoteClick(thread, quoteShortParentCid, null);
}}
postQuoteOnOver={(quoteShortParentCid) => {
const quoteParentCid = cidTracker[quoteShortParentCid];
if (outOfViewCid !== quoteParentCid) {
handleQuoteHover(thread, quoteShortParentCid, () => {
setOutOfViewCid(quoteParentCid);
const rect = postRefs.current[quoteShortParentCid].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);
}}
/>
<span key={`ttl-s-${index}`} className='ttl'> <span key={`ttl-s-${index}`} className='ttl'>
{' '} {' '}
(...) (...)
@@ -1237,7 +1286,56 @@ const All = () => {
</Fragment> </Fragment>
) : ( ) : (
<blockquote key={`bq-${index}`}> <blockquote key={`bq-${index}`}>
<Post content={thread.content} key={`post-${index}`} /> <Post
key={`post-${thread.cid}`}
content={thread.content}
postQuoteRef={(quoteShortParentCid, ref) => {
postRefs.current[quoteShortParentCid] = ref;
}}
postQuoteOnClick={(quoteShortParentCid) => {
handleQuoteClick(thread, quoteShortParentCid, null);
}}
postQuoteOnOver={(quoteShortParentCid) => {
const quoteParentCid = cidTracker[quoteShortParentCid];
if (outOfViewCid !== quoteParentCid) {
handleQuoteHover(thread, quoteShortParentCid, () => {
setOutOfViewCid(quoteParentCid);
const rect = postRefs.current[quoteShortParentCid].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-thread-${index}`} commentCid={thread.cid} className='ttl' /> <EditLabel key={`edit-label-thread-${index}`} commentCid={thread.cid} className='ttl' />
<StateLabel key={`state-label-thread-${index}`} commentIndex={thread.index} className='ttl ellipsis' /> <StateLabel key={`state-label-thread-${index}`} commentIndex={thread.index} className='ttl ellipsis' />
</blockquote> </blockquote>
@@ -2431,7 +2529,56 @@ const All = () => {
thread.content?.length > 500 ? ( thread.content?.length > 500 ? (
<Fragment key={`fragment12-${index}`}> <Fragment key={`fragment12-${index}`}>
<blockquote key={`mob-bq-${index}`} className='post-message-mobile'> <blockquote key={`mob-bq-${index}`} className='post-message-mobile'>
<Post content={thread.content?.slice(0, 500)} key={`post-mobile-${index}`} /> <Post
key={`post-mobile-${thread.cid}`}
content={thread.content?.slice(0, 500)}
postQuoteRef={(quoteShortParentCid, ref) => {
postRefs.current[quoteShortParentCid] = ref;
}}
postQuoteOnClick={(quoteShortParentCid) => {
handleQuoteClick(thread, quoteShortParentCid, null);
}}
postQuoteOnOver={(quoteShortParentCid) => {
const quoteParentCid = cidTracker[quoteShortParentCid];
if (outOfViewCid !== quoteParentCid) {
handleQuoteHover(thread, quoteShortParentCid, () => {
setOutOfViewCid(quoteParentCid);
const rect = postRefs.current[quoteShortParentCid].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);
}}
/>
<span key={`mob-ttl-s-${index}`} className='ttl'> <span key={`mob-ttl-s-${index}`} className='ttl'>
{' '} {' '}
(...) (...)
@@ -2454,7 +2601,56 @@ const All = () => {
</Fragment> </Fragment>
) : ( ) : (
<blockquote key={`mob-bq-${index}`} className='post-message-mobile'> <blockquote key={`mob-bq-${index}`} className='post-message-mobile'>
<Post content={thread.content} key={`post-mobile-${index}`} /> <Post
key={`post-mobile-${thread.cid}`}
content={thread.content}
postQuoteRef={(quoteShortParentCid, ref) => {
postRefs.current[quoteShortParentCid] = ref;
}}
postQuoteOnClick={(quoteShortParentCid) => {
handleQuoteClick(thread, quoteShortParentCid, null);
}}
postQuoteOnOver={(quoteShortParentCid) => {
const quoteParentCid = cidTracker[quoteShortParentCid];
if (outOfViewCid !== quoteParentCid) {
handleQuoteHover(thread, quoteShortParentCid, () => {
setOutOfViewCid(quoteParentCid);
const rect = postRefs.current[quoteShortParentCid].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-thread-mob-${index}`} commentCid={thread.cid} className='ttl' /> <EditLabel key={`edit-label-thread-mob-${index}`} commentCid={thread.cid} className='ttl' />
<StateLabel key={`state-label-thread-mob-${index}`} commentIndex={thread.index} className='ttl ellipsis' /> <StateLabel key={`state-label-thread-mob-${index}`} commentIndex={thread.index} className='ttl ellipsis' />
</blockquote> </blockquote>
src/components/views/Board.jsx
+200 -4
View File
@@ -2247,7 +2247,56 @@ const Board = () => {
thread.content?.length > 1000 ? ( thread.content?.length > 1000 ? (
<Fragment key={`fragment5-${index}`}> <Fragment key={`fragment5-${index}`}>
<blockquote key={`bq-${index}`}> <blockquote key={`bq-${index}`}>
<Post content={thread.content?.slice(0, 1000)} key={`post-${index}`} /> <Post
key={`post-${thread.cid}`}
content={thread.content?.slice(0, 1000)}
postQuoteRef={(quoteShortParentCid, ref) => {
postRefs.current[quoteShortParentCid] = ref;
}}
postQuoteOnClick={(quoteShortParentCid) => {
handleQuoteClick(thread, quoteShortParentCid, null);
}}
postQuoteOnOver={(quoteShortParentCid) => {
const quoteParentCid = cidTracker[quoteShortParentCid];
if (outOfViewCid !== quoteParentCid) {
handleQuoteHover(thread, quoteShortParentCid, () => {
setOutOfViewCid(quoteParentCid);
const rect = postRefs.current[quoteShortParentCid].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);
}}
/>
<span key={`ttl-s-${index}`} className='ttl'> <span key={`ttl-s-${index}`} className='ttl'>
{' '} {' '}
(...) (...)
@@ -2270,7 +2319,56 @@ const Board = () => {
</Fragment> </Fragment>
) : ( ) : (
<blockquote key={`bq-${index}`}> <blockquote key={`bq-${index}`}>
<Post content={thread.content} key={`post-${index}`} /> <Post
key={`post-${thread.cid}`}
content={thread.content}
postQuoteRef={(quoteShortParentCid, ref) => {
postRefs.current[quoteShortParentCid] = ref;
}}
postQuoteOnClick={(quoteShortParentCid) => {
handleQuoteClick(thread, quoteShortParentCid, null);
}}
postQuoteOnOver={(quoteShortParentCid) => {
const quoteParentCid = cidTracker[quoteShortParentCid];
if (outOfViewCid !== quoteParentCid) {
handleQuoteHover(thread, quoteShortParentCid, () => {
setOutOfViewCid(quoteParentCid);
const rect = postRefs.current[quoteShortParentCid].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-thread-${index}`} commentCid={thread.cid} className='ttl' /> <EditLabel key={`edit-label-thread-${index}`} commentCid={thread.cid} className='ttl' />
<StateLabel key={`state-label-thread-${index}`} commentIndex={thread.index} className='ttl ellipsis' /> <StateLabel key={`state-label-thread-${index}`} commentIndex={thread.index} className='ttl ellipsis' />
</blockquote> </blockquote>
@@ -3488,7 +3586,56 @@ const Board = () => {
thread.content?.length > 500 ? ( thread.content?.length > 500 ? (
<Fragment key={`fragment12-${index}`}> <Fragment key={`fragment12-${index}`}>
<blockquote key={`mob-bq-${index}`} className='post-message-mobile'> <blockquote key={`mob-bq-${index}`} className='post-message-mobile'>
<Post content={thread.content?.slice(0, 500)} key={`post-mobile-${index}`} /> <Post
key={`post-mobile-${thread.cid}`}
content={thread.content?.slice(0, 500)}
postQuoteRef={(quoteShortParentCid, ref) => {
postRefs.current[quoteShortParentCid] = ref;
}}
postQuoteOnClick={(quoteShortParentCid) => {
handleQuoteClick(thread, quoteShortParentCid, null);
}}
postQuoteOnOver={(quoteShortParentCid) => {
const quoteParentCid = cidTracker[quoteShortParentCid];
if (outOfViewCid !== quoteParentCid) {
handleQuoteHover(thread, quoteShortParentCid, () => {
setOutOfViewCid(quoteParentCid);
const rect = postRefs.current[quoteShortParentCid].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);
}}
/>
<span key={`mob-ttl-s-${index}`} className='ttl'> <span key={`mob-ttl-s-${index}`} className='ttl'>
{' '} {' '}
(...) (...)
@@ -3511,7 +3658,56 @@ const Board = () => {
</Fragment> </Fragment>
) : ( ) : (
<blockquote key={`mob-bq-${index}`} className='post-message-mobile'> <blockquote key={`mob-bq-${index}`} className='post-message-mobile'>
<Post content={thread.content} key={`post-mobile-${index}`} /> <Post
key={`post-mobile-${thread.cid}`}
content={thread.content?.slice(0, 1000)}
postQuoteRef={(quoteShortParentCid, ref) => {
postRefs.current[quoteShortParentCid] = ref;
}}
postQuoteOnClick={(quoteShortParentCid) => {
handleQuoteClick(thread, quoteShortParentCid, null);
}}
postQuoteOnOver={(quoteShortParentCid) => {
const quoteParentCid = cidTracker[quoteShortParentCid];
if (outOfViewCid !== quoteParentCid) {
handleQuoteHover(thread, quoteShortParentCid, () => {
setOutOfViewCid(quoteParentCid);
const rect = postRefs.current[quoteShortParentCid].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-thread-mob-${index}`} commentCid={thread.cid} className='ttl' /> <EditLabel key={`edit-label-thread-mob-${index}`} commentCid={thread.cid} className='ttl' />
<StateLabel key={`state-label-thread-mob-${index}`} commentIndex={thread.index} className='ttl ellipsis' /> <StateLabel key={`state-label-thread-mob-${index}`} commentIndex={thread.index} className='ttl ellipsis' />
</blockquote> </blockquote>
src/components/views/Subscriptions.jsx
+200 -4
View File
@@ -1224,7 +1224,56 @@ const Subscriptions = () => {
thread.content?.length > 1000 ? ( thread.content?.length > 1000 ? (
<Fragment key={`fragment5-${index}`}> <Fragment key={`fragment5-${index}`}>
<blockquote key={`bq-${index}`}> <blockquote key={`bq-${index}`}>
<Post content={thread.content?.slice(0, 1000)} key={`post-${index}`} /> <Post
key={`post-${thread.cid}`}
content={thread.content?.slice(0, 1000)}
postQuoteRef={(quoteShortParentCid, ref) => {
postRefs.current[quoteShortParentCid] = ref;
}}
postQuoteOnClick={(quoteShortParentCid) => {
handleQuoteClick(thread, quoteShortParentCid, null);
}}
postQuoteOnOver={(quoteShortParentCid) => {
const quoteParentCid = cidTracker[quoteShortParentCid];
if (outOfViewCid !== quoteParentCid) {
handleQuoteHover(thread, quoteShortParentCid, () => {
setOutOfViewCid(quoteParentCid);
const rect = postRefs.current[quoteShortParentCid].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);
}}
/>
<span key={`ttl-s-${index}`} className='ttl'> <span key={`ttl-s-${index}`} className='ttl'>
{' '} {' '}
(...) (...)
@@ -1247,7 +1296,56 @@ const Subscriptions = () => {
</Fragment> </Fragment>
) : ( ) : (
<blockquote key={`bq-${index}`}> <blockquote key={`bq-${index}`}>
<Post content={thread.content} key={`post-${index}`} /> <Post
key={`post-${thread.cid}`}
content={thread.content}
postQuoteRef={(quoteShortParentCid, ref) => {
postRefs.current[quoteShortParentCid] = ref;
}}
postQuoteOnClick={(quoteShortParentCid) => {
handleQuoteClick(thread, quoteShortParentCid, null);
}}
postQuoteOnOver={(quoteShortParentCid) => {
const quoteParentCid = cidTracker[quoteShortParentCid];
if (outOfViewCid !== quoteParentCid) {
handleQuoteHover(thread, quoteShortParentCid, () => {
setOutOfViewCid(quoteParentCid);
const rect = postRefs.current[quoteShortParentCid].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-thread-${index}`} commentCid={thread.cid} className='ttl' /> <EditLabel key={`edit-label-thread-${index}`} commentCid={thread.cid} className='ttl' />
<StateLabel key={`state-label-thread-${index}`} commentIndex={thread.index} className='ttl ellipsis' /> <StateLabel key={`state-label-thread-${index}`} commentIndex={thread.index} className='ttl ellipsis' />
</blockquote> </blockquote>
@@ -2441,7 +2539,56 @@ const Subscriptions = () => {
thread.content?.length > 500 ? ( thread.content?.length > 500 ? (
<Fragment key={`fragment12-${index}`}> <Fragment key={`fragment12-${index}`}>
<blockquote key={`mob-bq-${index}`} className='post-message-mobile'> <blockquote key={`mob-bq-${index}`} className='post-message-mobile'>
<Post content={thread.content?.slice(0, 500)} key={`post-mobile-${index}`} /> <Post
key={`post-mobile-${thread.cid}`}
content={thread.content?.slice(0, 500)}
postQuoteRef={(quoteShortParentCid, ref) => {
postRefs.current[quoteShortParentCid] = ref;
}}
postQuoteOnClick={(quoteShortParentCid) => {
handleQuoteClick(thread, quoteShortParentCid, null);
}}
postQuoteOnOver={(quoteShortParentCid) => {
const quoteParentCid = cidTracker[quoteShortParentCid];
if (outOfViewCid !== quoteParentCid) {
handleQuoteHover(thread, quoteShortParentCid, () => {
setOutOfViewCid(quoteParentCid);
const rect = postRefs.current[quoteShortParentCid].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);
}}
/>
<span key={`mob-ttl-s-${index}`} className='ttl'> <span key={`mob-ttl-s-${index}`} className='ttl'>
{' '} {' '}
(...) (...)
@@ -2464,7 +2611,56 @@ const Subscriptions = () => {
</Fragment> </Fragment>
) : ( ) : (
<blockquote key={`mob-bq-${index}`} className='post-message-mobile'> <blockquote key={`mob-bq-${index}`} className='post-message-mobile'>
<Post content={thread.content} key={`post-mobile-${index}`} /> <Post
key={`post-mobile-${thread.cid}`}
content={thread.content}
postQuoteRef={(quoteShortParentCid, ref) => {
postRefs.current[quoteShortParentCid] = ref;
}}
postQuoteOnClick={(quoteShortParentCid) => {
handleQuoteClick(thread, quoteShortParentCid, null);
}}
postQuoteOnOver={(quoteShortParentCid) => {
const quoteParentCid = cidTracker[quoteShortParentCid];
if (outOfViewCid !== quoteParentCid) {
handleQuoteHover(thread, quoteShortParentCid, () => {
setOutOfViewCid(quoteParentCid);
const rect = postRefs.current[quoteShortParentCid].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-thread-mob-${index}`} commentCid={thread.cid} className='ttl' /> <EditLabel key={`edit-label-thread-mob-${index}`} commentCid={thread.cid} className='ttl' />
<StateLabel key={`state-label-thread-mob-${index}`} commentIndex={thread.index} className='ttl ellipsis' /> <StateLabel key={`state-label-thread-mob-${index}`} commentIndex={thread.index} className='ttl ellipsis' />
</blockquote> </blockquote>
src/components/views/Thread.jsx
+100 -2
View File
@@ -1376,7 +1376,56 @@ const Thread = () => {
</div> </div>
</span> </span>
<blockquote key={`blockquote-${comment.cid}`}> <blockquote key={`blockquote-${comment.cid}`}>
<Post content={comment.content} comment={comment} key={`post-${comment.cid}`} /> <Post
key={`post-${comment.cid}`}
content={comment.content}
postQuoteRef={(quoteShortParentCid, ref) => {
postRefs.current[quoteShortParentCid] = ref;
}}
postQuoteOnClick={(quoteShortParentCid) => {
handleQuoteClick(comment, quoteShortParentCid, null);
}}
postQuoteOnOver={(quoteShortParentCid) => {
const quoteParentCid = cidTracker[quoteShortParentCid];
if (outOfViewCid !== quoteParentCid) {
handleQuoteHover(comment, quoteShortParentCid, () => {
setOutOfViewCid(quoteParentCid);
const rect = postRefs.current[quoteShortParentCid].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-thread-${index}`} commentCid={comment.cid} className='ttl' /> <EditLabel key={`edit-label-thread-${index}`} commentCid={comment.cid} className='ttl' />
<StateLabel key={`state-label-thread-${index}`} commentIndex={comment.index} className='ttl ellipsis' /> <StateLabel key={`state-label-thread-${index}`} commentIndex={comment.index} className='ttl ellipsis' />
</blockquote> </blockquote>
@@ -2376,7 +2425,56 @@ const Thread = () => {
<blockquote key={`mob-bq-${comment.cid}`} className='post-message-mobile'> <blockquote key={`mob-bq-${comment.cid}`} className='post-message-mobile'>
{comment.content ? ( {comment.content ? (
<> <>
<Post content={comment.content} comment={comment} key={`post-mobile-${comment.cid}`} /> <Post
key={`post-${comment.cid}`}
content={comment.content}
postQuoteRef={(quoteShortParentCid, ref) => {
postRefs.current[quoteShortParentCid] = ref;
}}
postQuoteOnClick={(quoteShortParentCid) => {
handleQuoteClick(comment, quoteShortParentCid, null);
}}
postQuoteOnOver={(quoteShortParentCid) => {
const quoteParentCid = cidTracker[quoteShortParentCid];
if (outOfViewCid !== quoteParentCid) {
handleQuoteHover(comment, quoteShortParentCid, () => {
setOutOfViewCid(quoteParentCid);
const rect = postRefs.current[quoteShortParentCid].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-thread-mob-${index}`} commentCid={comment.cid} className='ttl' /> <EditLabel key={`edit-label-thread-mob-${index}`} commentCid={comment.cid} className='ttl' />
<StateLabel key={`state-label-thread-mob-${index}`} commentIndex={comment.index} className='ttl ellipsis' /> <StateLabel key={`state-label-thread-mob-${index}`} commentIndex={comment.index} className='ttl ellipsis' />
</> </>