diff --git a/src/screens/Compose.tsx b/src/screens/Compose.tsx index 4a130def..3a3e8901 100644 --- a/src/screens/Compose.tsx +++ b/src/screens/Compose.tsx @@ -362,8 +362,20 @@ const ScreenCompose: React.FC> = ({ composeState.text.selection, selection => composeDispatch({ type: 'text', payload: { selection } }) ], - isFocused: useRef(composeState.textInputFocus.current === 'text'), - maxLength: maxTootChars + isFocused: composeState.textInputFocus.isFocused.text, + maxLength: maxTootChars - (composeState.spoiler.active ? composeState.spoiler.count : 0) + }, + { + value: [ + composeState.spoiler.raw, + content => formatText({ textInput: 'spoiler', composeDispatch, content }) + ], + selection: [ + composeState.spoiler.selection, + selection => composeDispatch({ type: 'spoiler', payload: { selection } }) + ], + isFocused: composeState.textInputFocus.isFocused.spoiler, + maxLength: maxTootChars - composeState.text.count } ] diff --git a/src/screens/Compose/Root/Header/SpoilerInput.tsx b/src/screens/Compose/Root/Header/SpoilerInput.tsx index e5794fda..b1483bbf 100644 --- a/src/screens/Compose/Root/Header/SpoilerInput.tsx +++ b/src/screens/Compose/Root/Header/SpoilerInput.tsx @@ -16,14 +16,8 @@ const ComposeSpoilerInput: React.FC = () => { const { colors, mode } = useTheme() const adaptiveFontsize = useSelector(getSettingsFontsize) - const adaptedFontsize = adaptiveScale( - StyleConstants.Font.Size.M, - adaptiveFontsize - ) - const adaptedLineheight = adaptiveScale( - StyleConstants.Font.LineHeight.M, - adaptiveFontsize - ) + const adaptedFontsize = adaptiveScale(StyleConstants.Font.Size.M, adaptiveFontsize) + const adaptedLineheight = adaptiveScale(StyleConstants.Font.LineHeight.M, adaptiveFontsize) return ( { }) }} scrollEnabled={false} - onFocus={() => + onFocus={() => { composeDispatch({ type: 'textInputFocus', payload: { current: 'spoiler' } }) - } + composeState.textInputFocus.isFocused.spoiler.current = true + }} + onBlur={() => { + composeState.textInputFocus.isFocused.spoiler.current = false + }} > {composeState.spoiler.formatted} diff --git a/src/screens/Compose/Root/Header/TextInput.tsx b/src/screens/Compose/Root/Header/TextInput.tsx index f107cebf..ab1f9f8a 100644 --- a/src/screens/Compose/Root/Header/TextInput.tsx +++ b/src/screens/Compose/Root/Header/TextInput.tsx @@ -18,20 +18,11 @@ const ComposeTextInput: React.FC = () => { const { t } = useTranslation('screenCompose') const { colors, mode } = useTheme() - const maxAttachments = useSelector( - getInstanceConfigurationStatusMaxAttachments, - () => true - ) + const maxAttachments = useSelector(getInstanceConfigurationStatusMaxAttachments, () => true) const adaptiveFontsize = useSelector(getSettingsFontsize) - const adaptedFontsize = adaptiveScale( - StyleConstants.Font.Size.M, - adaptiveFontsize - ) - const adaptedLineheight = adaptiveScale( - StyleConstants.Font.LineHeight.M, - adaptiveFontsize - ) + const adaptedFontsize = adaptiveScale(StyleConstants.Font.Size.M, adaptiveFontsize) + const adaptedLineheight = adaptiveScale(StyleConstants.Font.LineHeight.M, adaptiveFontsize) return ( { content }) } - onFocus={() => + onFocus={() => { composeDispatch({ type: 'textInputFocus', payload: { current: 'text' } }) - } + composeState.textInputFocus.isFocused.text.current = true + }} + onBlur={() => { + composeState.textInputFocus.isFocused.text.current = false + }} onSelectionChange={({ nativeEvent: { selection: { start, end } @@ -79,20 +74,13 @@ const ComposeTextInput: React.FC = () => { scrollEnabled={false} disableCopyPaste={false} onPaste={(error: string | null | undefined, files: PastedFile[]) => { - if ( - composeState.attachments.uploads.length + files.length > - maxAttachments - ) { + if (composeState.attachments.uploads.length + files.length > maxAttachments) { Alert.alert( - t( - 'content.root.header.textInput.keyboardImage.exceedMaximum.title' - ), + t('content.root.header.textInput.keyboardImage.exceedMaximum.title'), undefined, [ { - text: t( - 'content.root.header.textInput.keyboardImage.exceedMaximum.OK' - ), + text: t('content.root.header.textInput.keyboardImage.exceedMaximum.OK'), style: 'default' } ] diff --git a/src/screens/Compose/utils/initialState.ts b/src/screens/Compose/utils/initialState.ts index 28fbd460..532a0189 100644 --- a/src/screens/Compose/utils/initialState.ts +++ b/src/screens/Compose/utils/initialState.ts @@ -39,7 +39,8 @@ const composeInitialState: Omit = { replyToStatus: undefined, textInputFocus: { current: 'text', - refs: { text: createRef() } + refs: { text: createRef() }, + isFocused: { text: createRef(), spoiler: createRef() } } } diff --git a/src/screens/Compose/utils/types.d.ts b/src/screens/Compose/utils/types.d.ts index 40c31c3a..e910b70c 100644 --- a/src/screens/Compose/utils/types.d.ts +++ b/src/screens/Compose/utils/types.d.ts @@ -59,6 +59,7 @@ export type ComposeState = { textInputFocus: { current: 'text' | 'spoiler' refs: { text: RefObject } + isFocused: { text: MutableRefObject, spoiler: MutableRefObject } } }