Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-06 22:40:14 -05:00
Code Issues Activity

Focused reply input when clicking comment button in drawer

Browse source 
ref https://linear.app/tryghost/issue/AP-396

We need to use a number instead of boolean here so that the state is always
refreshed, otherwise we can run into issues where we set `focused` to true but
there's no rerender because it was previously set to true, but unfocused
This commit is contained in:
Fabien O'Carroll 2024-09-19 14:57:25 +07:00 committed by Fabien 'egg' O'Carroll
parent 6a3632e457
commit 78bb1461a8
2 changed files with 13 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -78,6 +78,14 @@ const FeedItemDivider: React.FC = () => (
const ArticleModal: React.FC<ArticleModalProps> = ({object, actor, comments, allComments, focusReply}) => {
const MODAL_SIZE_SM = 640;
const MODAL_SIZE_LG = 2800;
const [isFocused, setFocused] = useState(focusReply ? 1 : 0);
function setReplyBoxFocused(focused: boolean) {
if (focused) {
setFocused(prev => prev + 1);
} else {
setFocused(0);
}
}
const [modalSize, setModalSize] = useState<number>(MODAL_SIZE_SM);
const modal = useModal();
@ -152,8 +160,11 @@ const ArticleModal: React.FC<ArticleModalProps> = ({object, actor, comments, all
layout='modal'
object={object}
type='Note'
onCommentClick={() => {
setReplyBoxFocused(true);
}}
/>
<APReplyBox focused={focusReply} object={object}/>
<APReplyBox focused={isFocused} object={object}/>
<FeedItemDivider />
{/* {object.content && <div dangerouslySetInnerHTML={({__html: object.content})} className='ap-note-content text-pretty text-[1.5rem] text-grey-900'></div>} */}

2
apps/admin-x-activitypub/src/components/global/APReplyBox.tsx
View file

@ -19,7 +19,7 @@ export interface APTextAreaProps extends HTMLProps<HTMLTextAreaElement> {
className?: string;
onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
object: ObjectProperties;
focused: boolean;
focused: number;
}
const APReplyBox: React.FC<APTextAreaProps> = ({