Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-04-08 02:52:39 -05:00
Code Issues Activity

Added ReplyBox to Articles viewed in drawer view

Browse source 
ref https://linear.app/ghost/issue/AP-514/show-replybox-when-article-is-opened-in-drawer
This commit is contained in:
Djordje Vlaisavljevic 2024-10-23 19:39:10 +01:00
parent 3d430b453f
commit 45df4bf860
1 changed files with 68 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

103
apps/admin-x-activitypub/src/components/feed/ArticleModal.tsx
View file

@ -22,6 +22,7 @@ const ArticleBody: React.FC<{heading: string, image: string|undefined, excerpt:
const site = useBrowseSite();
const siteData = site.data?.site;
const iframeRef = useRef<HTMLIFrameElement>(null);
const [iframeHeight, setIframeHeight] = useState('0px');
const cssContent = articleBodyStyles(siteData?.url.replace(/\/$/, ''));
@ -29,6 +30,22 @@ const ArticleBody: React.FC<{heading: string, image: string|undefined, excerpt:
<html>
<head>
${cssContent}
<style>
body {
margin: 0;
padding: 0;
overflow-y: hidden;
}
</style>
<script>
function resizeIframe() {
const height = document.body.scrollHeight;
window.parent.postMessage({type: 'resize', height: height}, '*');
}
window.addEventListener('load', resizeIframe);
window.addEventListener('resize', resizeIframe);
new MutationObserver(resizeIframe).observe(document.body, { subtree: true, childList: true });
</script>
</head>
<body>
<header class='gh-article-header gh-canvas'>
@ -53,20 +70,35 @@ const ArticleBody: React.FC<{heading: string, image: string|undefined, excerpt:
const iframe = iframeRef.current;
if (iframe) {
iframe.srcdoc = htmlContent;
const handleMessage = (event: MessageEvent) => {
if (event.data.type === 'resize') {
setIframeHeight(`${event.data.height}px`);
iframe.style.height = `${event.data.height}px`;
}
};
window.addEventListener('message', handleMessage);
return () => {
window.removeEventListener('message', handleMessage);
};
}
}, [htmlContent]);
return (
<div>
<div className="w-full border-b border-grey-200">
<iframe
ref={iframeRef}
className={`h-[calc(100vh_-_3vmin_-_4.8rem_-_2px)]`}
height='100%'
id='gh-ap-article-iframe'
style={{
width: '100%',
border: 'none',
height: iframeHeight,
overflow: 'hidden'
}}
title='Embedded Content'
width='100%'
>
</iframe>
/>
</div>
);
};
@ -140,34 +172,38 @@ const ArticleModal: React.FC<ArticleModalProps> = ({object, actor, comments, foc
size='bleed'
width={modalSize}
>
<div className='sticky top-0 z-50 border-grey-200 bg-white py-3'>
<div className='grid h-8 grid-cols-3'>
{canNavigateBack && (
<div className='col-[1/2] flex items-center justify-between px-8'>
<Button icon='chevron-left' size='sm' unstyled onClick={navigateBack}/>
<div className='flex h-full flex-col'>
<div className='sticky top-0 z-50 border-b border-grey-200 bg-white py-3'>
<div className='grid h-8 grid-cols-3'>
{canNavigateBack && (
<div className='col-[1/2] flex items-center justify-between px-8'>
<Button icon='chevron-left' size='sm' unstyled onClick={navigateBack}/>
</div>
)}
<div className='col-[2/3] flex grow items-center justify-center px-8 text-center'>
</div>
<div className='col-[3/4] flex items-center justify-end space-x-6 px-8'>
{/* <Button icon='angle-brackets' size='md' unstyled onClick={toggleModalSize}/> */}
<Button icon='close' size='sm' unstyled onClick={() => modal.remove()}/>
</div>
)}
<div className='col-[2/3] flex grow items-center justify-center px-8 text-center'>
</div>
<div className='col-[3/4] flex items-center justify-end space-x-6 px-8'>
{/* <Button icon='angle-brackets' size='md' unstyled onClick={toggleModalSize}/> */}
<Button icon='close' size='sm' unstyled onClick={() => modal.remove()}/>
</div>
</div>
</div>
<div className='mt-10 w-auto'>
{object.type === 'Note' && (
<div className='mx-auto max-w-[580px] pb-16'>
<FeedItem
actor={actor}
comments={comments}
layout='modal'
object={object}
type='Note'
onCommentClick={() => {
setReplyBoxFocused(true);
}}
/>
<div className='grow overflow-y-auto'>
<div className='mx-auto max-w-[580px] py-10'>
{object.type === 'Note' && (
<FeedItem
actor={actor}
comments={comments}
layout='modal'
object={object}
type='Note'
onCommentClick={() => {
setReplyBoxFocused(true);
}}
/>)}
{object.type === 'Article' && (
<ArticleBody excerpt={object?.preview?.content} heading={object.name} html={object.content} image={object?.image} />
)}
<APReplyBox focused={isFocused} object={object} onNewReply={handleNewReply}/>
<FeedItemDivider />
@ -214,10 +250,7 @@ const ArticleModal: React.FC<ArticleModalProps> = ({object, actor, comments, foc
);
})}
</div>
)}
{object.type === 'Article' && (
<ArticleBody excerpt={object?.preview?.content} heading={object.name} html={object.content} image={object?.image} />
)}
</div>
</div>
</Modal>
);