Spoiler now supports emoji as well

src/screens/Compose.tsx

@@ -362,8 +362,20 @@ const ScreenCompose: React.FC<RootStackScreenProps<'Screen-Compose'>> = ({
         composeState.text.selection,
         selection => composeDispatch({ type: 'text', payload: { selection } })
       ],
-      isFocused: useRef<boolean>(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
     }
   ]
 

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 (
     <TextInput
@@ -65,12 +59,16 @@ const ComposeSpoilerInput: React.FC = () => {
         })
       }}
       scrollEnabled={false}
-      onFocus={() =>
+      onFocus={() => {
         composeDispatch({
           type: 'textInputFocus',
           payload: { current: 'spoiler' }
         })
-      }
+        composeState.textInputFocus.isFocused.spoiler.current = true
+      }}
+      onBlur={() => {
+        composeState.textInputFocus.isFocused.spoiler.current = false
+      }}
     >
       <CustomText>{composeState.spoiler.formatted}</CustomText>
     </TextInput>

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 (
     <PasteInput
@@ -59,12 +50,16 @@ const ComposeTextInput: React.FC = () => {
           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'
               }
             ]

src/screens/Compose/utils/initialState.ts

@@ -39,7 +39,8 @@ const composeInitialState: Omit<ComposeState, 'timestamp'> = {
   replyToStatus: undefined,
   textInputFocus: {
     current: 'text',
-    refs: { text: createRef() }
+    refs: { text: createRef() },
+    isFocused: { text: createRef(), spoiler: createRef() }
   }
 }
 

src/screens/Compose/utils/types.d.ts

@@ -59,6 +59,7 @@ export type ComposeState = {
   textInputFocus: {
     current: 'text' | 'spoiler'
     refs: { text: RefObject<TextInput> }
+    isFocused: { text: MutableRefObject<boolean>, spoiler: MutableRefObject<boolean> }
   }
 }