diff --git a/src/components/PostEditor/PostContent.tsx b/src/components/PostEditor/PostContent.tsx index 221e7ec3..7b463987 100644 --- a/src/components/PostEditor/PostContent.tsx +++ b/src/components/PostEditor/PostContent.tsx @@ -47,6 +47,7 @@ import { } from '@/constants' import { cn } from '@/lib/utils' import { useNostr } from '@/providers/NostrProvider' +import { useScreenSize } from '@/providers/ScreenSizeProvider' import { useReplyIngress } from '@/hooks/useReplyIngress' import { canonicalizeRssArticleUrl, getArticleUrlFromCommentITags } from '@/lib/rss-article' import { cleanUrl, isBlossomBudBlobUrl, rewritePlainTextHttpUrls } from '@/lib/url' @@ -200,6 +201,7 @@ export default function PostContent({ }) { const { t, i18n } = useTranslation() const { pubkey, publish, checkLogin, canSignEvents } = useNostr() + const { isSmallScreen } = useScreenSize() const { addReplies } = useReplyIngress() const mergePublishedReplyIntoThread = useCallback( @@ -2519,7 +2521,19 @@ export default function PostContent({ } return ( -
+
+ +
{/* Dynamic Title based on mode */}
{(() => { @@ -2569,7 +2583,7 @@ export default function PostContent({
{parentEvent && ( - +
@@ -3355,7 +3369,6 @@ export default function PostContent({
)} - post()} className={cn( - isPoll ? 'min-h-20' : 'min-h-52', + isPoll ? 'min-h-20' : isSmallScreen ? 'min-h-36' : 'min-h-52', isDiscussionThread && threadErrors.content && 'border-destructive' )} onUploadStart={handleUploadStart} @@ -3718,6 +3731,14 @@ export default function PostContent({
+
) : null} +
{/* Media Kind Selection Dialog */} diff --git a/src/components/PostEditor/PostTextarea/index.tsx b/src/components/PostEditor/PostTextarea/index.tsx index 56d64089..933ef541 100644 --- a/src/components/PostEditor/PostTextarea/index.tsx +++ b/src/components/PostEditor/PostTextarea/index.tsx @@ -13,10 +13,12 @@ import Text from '@tiptap/extension-text' import { TextSelection } from '@tiptap/pm/state' import { Editor, EditorContent, useEditor } from '@tiptap/react' import { Event } from 'nostr-tools' +import { useScreenSizeOptional } from '@/providers/ScreenSizeProvider' import { Dispatch, forwardRef, SetStateAction, + useEffect, useImperativeHandle, useMemo, useRef, @@ -122,6 +124,7 @@ const PostTextarea = forwardRef< ref ) => { const { t } = useTranslation() + const isSmallScreen = useScreenSizeOptional()?.isSmallScreen ?? false const onUploadSuccessRef = useRef(onUploadSuccess) onUploadSuccessRef.current = onUploadSuccess const onUploadCompressPhaseRef = useRef(onUploadCompressPhase) @@ -197,6 +200,19 @@ const PostTextarea = forwardRef< editorRef.current = editor + useEffect(() => { + if (!editor || !isSmallScreen) return + const scrollEditorIntoView = () => { + requestAnimationFrame(() => { + editor.view.dom.scrollIntoView({ block: 'nearest', inline: 'nearest' }) + }) + } + editor.on('focus', scrollEditorIntoView) + return () => { + editor.off('focus', scrollEditorIntoView) + } + }, [editor, isSmallScreen]) + useImperativeHandle(ref, () => ({ appendText: (text: string, addNewline = false) => { const ed = editorRef.current diff --git a/src/components/PostEditor/index.tsx b/src/components/PostEditor/index.tsx index 6033a60e..eb1b748b 100644 --- a/src/components/PostEditor/index.tsx +++ b/src/components/PostEditor/index.tsx @@ -98,7 +98,7 @@ export default function PostEditor({ return ( { @@ -114,15 +114,13 @@ export default function PostEditor({ } }} > - -
- - Post Editor - Create a new post or reply - - {content} -
-
+
+ + Post Editor + Create a new post or reply + + {content} +
)