[Drafts] Some bugs (#9833)

* Fix text input not updating

* Fix autofocus

* make placeholder text fainter

* Await invalidation

* Image only drafts

* tweaks to gif presentation

---------

Co-authored-by: Eric Bailey <git@esb.lol>

src/view/com/composer/Composer.tsx

@@ -1115,7 +1115,7 @@ export const ComposePost = ({
             onLayout={onScrollViewLayout}>
             {replyTo ? <ComposerReplyTo replyTo={replyTo} /> : undefined}
             {thread.posts.map((post, index) => (
-              <React.Fragment key={post.id}>
+              <React.Fragment key={post.id + (composerState.draftId ?? '')}>
                 <ComposerPost
                   post={post}
                   dispatch={composerDispatch}
@@ -1320,7 +1320,7 @@ let ComposerPost = React.memo(function ComposerPost({
           style={[a.pt_xs]}
           richtext={richtext}
           placeholder={selectTextInputPlaceholder}
-          autoFocus
+          autoFocus={isLastPost}
           webForceMinHeight={forceMinHeight}
           // To avoid overlap with the close button:
           hasRightPadding={isPartOfThread}

src/view/com/composer/drafts/DraftItem.tsx

@@ -95,12 +95,14 @@ export function DraftItem({
                 paddingTop: 20 + a.pt_md.paddingTop,
               },
             ]}>
-            <RichText
-              style={[a.text_md, a.leading_snug, a.pointer_events_none]}
-              value={post.text}
-              enableTags
-              disableMentionFacetValidation
-            />
+            {!!post.text.trim().length && (
+              <RichText
+                style={[a.text_md, a.leading_snug, a.pointer_events_none]}
+                value={post.text}
+                enableTags
+                disableMentionFacetValidation
+              />
+            )}
 
             {!mediaExistsOnOtherDevice && <DraftMediaPreview post={post} />}
 

src/view/com/composer/drafts/state/queries.ts

@@ -184,7 +184,7 @@ export function useSaveDraftMutation() {
         }
       }
 
-      queryClient.invalidateQueries({queryKey: DRAFTS_QUERY_KEY})
+      await queryClient.invalidateQueries({queryKey: DRAFTS_QUERY_KEY})
     },
     onError: error => {
       // Check for draft limit error

src/view/com/composer/text-input/TextInput.tsx

@@ -224,9 +224,9 @@ export function TextInput({
         onPaste={onPaste}
         onSelectionChange={onSelectionChange}
         placeholder={placeholder}
-        placeholderTextColor={t.atoms.text_contrast_medium.color}
+        placeholderTextColor={t.atoms.text_contrast_low.color}
         keyboardAppearance={theme.colorScheme}
-        autoFocus={true}
+        autoFocus={props.autoFocus !== undefined ? props.autoFocus : true}
         allowFontScaling
         multiline
         scrollEnabled={false}

src/view/com/composer/text-input/TextInput.web.tsx

@@ -52,6 +52,7 @@ export function TextInput({
   onPressPublish,
   onNewLink,
   onFocus,
+  autoFocus,
 }: TextInputProps) {
   const {theme: t, fonts} = useAlf()
   const autocomplete = useActorAutocompleteFn()
@@ -244,20 +245,10 @@ export function TextInput({
       content: generateJSON(richTextToHTML(richtext), extensions, {
         preserveWhitespace: 'full',
       }),
-      autofocus: 'end',
+      autofocus: autoFocus ? 'end' : null,
       editable: true,
       injectCSS: true,
       shouldRerenderOnTransaction: false,
-      onCreate({editor: editorProp}) {
-        // HACK
-        // the 'enter' animation sometimes causes autofocus to fail
-        // (see Composer.web.tsx in shell)
-        // so we wait 200ms (the anim is 150ms) and then focus manually
-        // -prf
-        setTimeout(() => {
-          editorProp.chain().focus('end').run()
-        }, 200)
-      },
       onUpdate({editor: editorProp}) {
         const json = editorProp.getJSON()
         const newText = editorJsonToText(json)