diff --git a/apps/admin-x-activitypub/src/components/Inbox.tsx b/apps/admin-x-activitypub/src/components/Inbox.tsx index dbe4fa802d..b78923416b 100644 --- a/apps/admin-x-activitypub/src/components/Inbox.tsx +++ b/apps/admin-x-activitypub/src/components/Inbox.tsx @@ -44,10 +44,10 @@ const Inbox: React.FC = ({}) => { return commentsMap.get(id) ?? []; }; - const handleViewContent = (object: ObjectProperties, actor: ActorProperties, comments: Activity[]) => { + const handleViewContent = (object: ObjectProperties, actor: ActorProperties, comments: Activity[], focusReply = false) => { setArticleContent(object); setArticleActor(actor); - NiceModal.show(ArticleModal, {object, actor, comments, allComments: commentsMap}); + NiceModal.show(ArticleModal, {object, actor, comments, allComments: commentsMap, focusReply}); }; function getContentAuthor(activity: Activity) { @@ -101,6 +101,12 @@ const Inbox: React.FC = ({}) => { layout={layout} object={activity.object} type={activity.type} + onCommentClick={() => handleViewContent( + activity.object, + getContentAuthor(activity), + getCommentsForObject(activity.object.id), + true + )} /> {index < activities.length - 1 && (
diff --git a/apps/admin-x-activitypub/src/components/feed/ArticleModal.tsx b/apps/admin-x-activitypub/src/components/feed/ArticleModal.tsx index a21bb9176d..52986326bb 100644 --- a/apps/admin-x-activitypub/src/components/feed/ArticleModal.tsx +++ b/apps/admin-x-activitypub/src/components/feed/ArticleModal.tsx @@ -17,6 +17,7 @@ interface ArticleModalProps { actor: ActorProperties; comments: Activity[]; allComments: Map; + focusReply: boolean; } const ArticleBody: React.FC<{heading: string, image: string|undefined, html: string}> = ({heading, image, html}) => { @@ -74,7 +75,7 @@ const FeedItemDivider: React.FC = () => (
); -const ArticleModal: React.FC = ({object, actor, comments, allComments}) => { +const ArticleModal: React.FC = ({object, actor, comments, allComments, focusReply}) => { const MODAL_SIZE_SM = 640; const MODAL_SIZE_LG = 2800; @@ -152,7 +153,7 @@ const ArticleModal: React.FC = ({object, actor, comments, all object={object} type='Note' /> - + {/* {object.content &&
} */} diff --git a/apps/admin-x-activitypub/src/components/feed/FeedItem.tsx b/apps/admin-x-activitypub/src/components/feed/FeedItem.tsx index 48d7779ca7..7ede2d5ef8 100644 --- a/apps/admin-x-activitypub/src/components/feed/FeedItem.tsx +++ b/apps/admin-x-activitypub/src/components/feed/FeedItem.tsx @@ -205,11 +205,12 @@ interface FeedItemProps { comments?: Activity[]; last?: boolean; onClick?: () => void; + onCommentClick?: () => void; } const noop = () => {}; -const FeedItem: React.FC = ({actor, object, layout, type, comments = [], last, onClick = noop}) => { +const FeedItem: React.FC = ({actor, object, layout, type, comments = [], last, onClick = noop, onCommentClick}) => { const timestamp = new Date(object?.published ?? new Date()).toLocaleDateString('default', {year: 'numeric', month: 'short', day: '2-digit'}) + ', ' + new Date(object?.published ?? new Date()).toLocaleTimeString('default', {hour: '2-digit', minute: '2-digit'}); @@ -292,7 +293,7 @@ const FeedItem: React.FC = ({actor, object, layout, type, comment - +
@@ -303,7 +304,7 @@ const FeedItem: React.FC = ({actor, object, layout, type, comment commentCount={comments.length} likeCount={1} object={object} - onCommentClick={onLikeClick} + onCommentClick={onCommentClick} onLikeClick={onLikeClick} />
@@ -348,7 +349,7 @@ const FeedItem: React.FC = ({actor, object, layout, type, comment commentCount={comments.length} likeCount={1} object={object} - onCommentClick={onLikeClick} + onCommentClick={onCommentClick} onLikeClick={onLikeClick} />
@@ -395,7 +396,7 @@ const FeedItem: React.FC = ({actor, object, layout, type, comment commentCount={comments.length} likeCount={1} object={object} - onCommentClick={onLikeClick} + onCommentClick={onCommentClick} onLikeClick={onLikeClick} /> @@ -432,7 +433,7 @@ const FeedItem: React.FC = ({actor, object, layout, type, comment commentCount={comments.length} likeCount={1} object={object} - onCommentClick={onLikeClick} + onCommentClick={onCommentClick} onLikeClick={onLikeClick} /> diff --git a/apps/admin-x-activitypub/src/components/global/APReplyBox.tsx b/apps/admin-x-activitypub/src/components/global/APReplyBox.tsx index f4a1f16fb3..a8a57e280a 100644 --- a/apps/admin-x-activitypub/src/components/global/APReplyBox.tsx +++ b/apps/admin-x-activitypub/src/components/global/APReplyBox.tsx @@ -1,4 +1,4 @@ -import React, {HTMLProps, useId, useState} from 'react'; +import React, {HTMLProps, useEffect, useId, useRef, useState} from 'react'; import * as FormPrimitive from '@radix-ui/react-form'; import APAvatar from './APAvatar'; @@ -10,7 +10,6 @@ import {useReplyMutationForUser, useUserDataForUser} from '../../hooks/useActivi // import {useFocusContext} from '@tryghost/admin-x-design-system/types/providers/DesignSystemProvider'; export interface APTextAreaProps extends HTMLProps { - inputRef?: React.RefObject; title?: string; value?: string; rows?: number; @@ -20,10 +19,10 @@ export interface APTextAreaProps extends HTMLProps { className?: string; onChange?: (event: React.ChangeEvent) => void; object: ObjectProperties; + focused: boolean; } const APReplyBox: React.FC = ({ - inputRef, title, value, rows = 1, @@ -32,6 +31,7 @@ const APReplyBox: React.FC = ({ hint, className, object, + focused, // onChange, // onFocus, // onBlur, @@ -43,6 +43,14 @@ const APReplyBox: React.FC = ({ const {data: user} = useUserDataForUser('index'); + const textareaRef = useRef(null); + + useEffect(() => { + if (textareaRef.current && focused) { + textareaRef.current.focus(); + } + }, [focused]); + const styles = clsx( 'ap-textarea order-2 w-full resize-none rounded-lg border py-2 pr-3 text-[1.5rem] transition-all dark:text-white', error ? 'border-red' : 'border-transparent placeholder:text-grey-500 dark:placeholder:text-grey-800', @@ -76,7 +84,7 @@ const APReplyBox: React.FC = ({