diff --git a/src/style.css b/src/style.css index ef22a44571..6f908c288b 100644 --- a/src/style.css +++ b/src/style.css @@ -92,9 +92,6 @@ a[role='link'][data-no-underline='1']:hover { } /* ProseMirror */ -.ProseMirror { - min-height: 140px; -} .ProseMirror-dark { color: white; } diff --git a/src/view/com/composer/Composer.tsx b/src/view/com/composer/Composer.tsx index efebd65fe0..3eb7fbac6a 100644 --- a/src/view/com/composer/Composer.tsx +++ b/src/view/com/composer/Composer.tsx @@ -565,6 +565,9 @@ function ComposerPost({ const {_} = useLingui() const {data: currentProfile} = useProfileQuery({did: currentDid}) const richtext = draft.richtext + const isTextOnly = + !draft.embed.link && !draft.embed.quote && !draft.embed.media + const forceMinHeight = isWeb && isTextOnly const selectTextInputPlaceholder = isReply ? _(msg`Write your reply`) : _(msg`What's up?`) @@ -615,6 +618,7 @@ function ComposerPost({ richtext={richtext} placeholder={selectTextInputPlaceholder} autoFocus + webForceMinHeight={forceMinHeight} setRichText={rt => { dispatch({type: 'update_richtext', richtext: rt}) }} @@ -757,7 +761,7 @@ function ComposerEmbeds({ )} {embed.media?.type === 'gif' && ( - + dispatch({type: 'embed_remove_gif'})} @@ -773,7 +777,7 @@ function ComposerEmbeds({ )} {!embed.media && embed.link && ( - + { richtext: RichText placeholder: string + webForceMinHeight: boolean setRichText: (v: RichText) => void onPhotoPasted: (uri: string) => void onPressPublish: (richtext: RichText) => void @@ -230,7 +231,7 @@ export const TextInput = forwardRef(function TextInputImpl( }, [t, richtext, inputTextStyle]) return ( - + + webForceMinHeight: boolean setRichText: (v: RichText | ((v: RichText) => RichText)) => void onPhotoPasted: (uri: string) => void onPressPublish: (richtext: RichText) => void @@ -52,6 +53,7 @@ export const TextInput = React.forwardRef(function TextInputImpl( { richtext, placeholder, + webForceMinHeight, setRichText, onPhotoPasted, onPressPublish, @@ -271,6 +273,13 @@ export const TextInput = React.forwardRef(function TextInputImpl( return style }, [t, fonts]) + React.useLayoutEffect(() => { + let node = editor?.view.dom + if (node) { + node.style.minHeight = webForceMinHeight ? '140px' : '' + } + }, [editor, webForceMinHeight]) + return ( <>