Make text-expander work for CW & poll fields

src/components/compose-poll.jsx

···
 import i18nDuration from '../utils/i18n-duration';
 
 import Icon from './icon';
+import TextExpander from './text-expander';
 
 export const expiryOptions = {
   300: i18nDuration(5, 'minute'),
···
       <div class="poll-choices">
         {options.map((option, i) => (
           <div class="poll-choice" key={i}>
-            <input
-              required
-              type="text"
-              value={option}
-              disabled={disabled}
-              maxlength={maxCharactersPerOption}
-              placeholder={t`Choice ${i + 1}`}
-              lang={lang}
-              spellCheck="true"
-              dir="auto"
-              data-allow-custom-emoji="true"
-              onInput={(e) => {
-                const { value } = e.target;
-                options[i] = value;
-                onInput(poll);
-              }}
-            />
+            <TextExpander keys=":" class="poll-field-container">
+              <input
+                required
+                type="text"
+                value={option}
+                disabled={disabled}
+                maxlength={maxCharactersPerOption}
+                placeholder={t`Choice ${i + 1}`}
+                lang={lang}
+                spellCheck="true"
+                autocomplete="off"
+                dir="auto"
+                data-allow-custom-emoji="true"
+                onInput={(e) => {
+                  const { value } = e.target;
+                  options[i] = value;
+                  onInput(poll);
+                }}
+              />
+            </TextExpander>
             <button
               type="button"
               class="plain2 poll-button"

src/components/compose-textarea.jsx

···
-import '@github/text-expander-element';
-
-import { useLingui } from '@lingui/react/macro';
 import { forwardRef } from 'preact/compat';
 import { useEffect, useRef, useState } from 'preact/hooks';
 import { useDebouncedCallback, useThrottledCallback } from 'use-debounce';
 
-import { api } from '../utils/api';
 import { langDetector } from '../utils/browser-translator';
-import getCustomEmojis from '../utils/custom-emojis';
-import emojifyText from '../utils/emojify-text';
 import escapeHTML from '../utils/escape-html';
-import getDomain from '../utils/get-domain';
-import isRTL from '../utils/is-rtl';
-import shortenNumber from '../utils/shorten-number';
 import states from '../utils/states';
 import urlRegexObj from '../utils/url-regex';
 
-const menu = document.createElement('ul');
-menu.role = 'listbox';
-menu.className = 'text-expander-menu';
-
-// Set IntersectionObserver on menu, reposition it because text-expander doesn't handle it
-const windowMargin = 16;
-const observer = new IntersectionObserver((entries) => {
-  entries.forEach((entry) => {
-    if (entry.isIntersecting) {
-      const { left, width } = entry.boundingClientRect;
-      const { innerWidth } = window;
-      if (left + width > innerWidth) {
-        const insetInlineStart = isRTL() ? 'right' : 'left';
-        menu.style[insetInlineStart] = innerWidth - width - windowMargin + 'px';
-      }
-    }
-  });
-});
-observer.observe(menu);
+import TextExpander from './text-expander';
 
 // https://github.com/mastodon/mastodon/blob/c03bd2a238741a012aa4b98dc4902d6cf948ab63/app/models/account.rb#L69
 const USERNAME_RE = /[a-z0-9_]+([a-z0-9_.-]+[a-z0-9_]+)?/i;
···
   return null;
 };
 
-function encodeHTML(str) {
-  return str.replace(/[&<>"']/g, function (char) {
-    return '&#' + char.charCodeAt(0) + ';';
-  });
-}
-
 const Textarea = forwardRef((props, ref) => {
-  const { t } = useLingui();
-  const { masto, instance } = api();
   const [text, setText] = useState(ref.current?.value || '');
-  const {
-    maxCharacters,
-    performSearch = () => {},
-    onTrigger = () => {},
-    ...textareaProps
-  } = props;
-  // const snapStates = useSnapshot(states);
-  // const charCount = snapStates.composerCharacterCount;
-
-  // const customEmojis = useRef();
-  const searcherRef = useRef();
-  useEffect(() => {
-    getCustomEmojis(instance, masto)
-      .then((r) => {
-        const [emojis, searcher] = r;
-        searcherRef.current = searcher;
-      })
-      .catch((e) => {
-        console.error(e);
-      });
-  }, []);
+  const { maxCharacters, onTrigger = null, ...textareaProps } = props;
 
   const textExpanderRef = useRef();
-  const textExpanderTextRef = useRef('');
-  const hasTextExpanderRef = useRef(false);
-  useEffect(() => {
-    let handleChange,
-      handleValue,
-      handleCommited,
-      handleActivate,
-      handleDeactivate;
-    if (textExpanderRef.current) {
-      handleChange = (e) => {
-        // console.log('text-expander-change', e);
-        const { key, provide, text } = e.detail;
-        textExpanderTextRef.current = text;
-
-        if (text === '') {
-          provide(
-            Promise.resolve({
-              matched: false,
-            }),
-          );
-          return;
-        }
-
-        if (key === ':') {
-          // const emojis = customEmojis.current.filter((emoji) =>
-          //   emoji.shortcode.startsWith(text),
-          // );
-          const results = searcherRef.current?.search(text, {
-            limit: 5,
-          });
-          let html = '';
-          results.forEach(({ item: emoji }) => {
-            const { shortcode, url } = emoji;
-            html += `
-                <li role="option" data-value="${encodeHTML(shortcode)}">
-                <img src="${encodeHTML(
-                  url,
-                )}" width="16" height="16" alt="" loading="lazy" /> 
-                ${encodeHTML(shortcode)}
-              </li>`;
-          });
-          html += `<li role="option" data-value="" data-more="${text}">${t`More…`}</li>`;
-          // console.log({ emojis, html });
-          menu.innerHTML = html;
-          provide(
-            Promise.resolve({
-              matched: results.length > 0,
-              fragment: menu,
-            }),
-          );
-          return;
-        }
-
-        const type = {
-          '@': 'accounts',
-          '#': 'hashtags',
-        }[key];
-        provide(
-          new Promise((resolve) => {
-            const searchResults = performSearch({
-              type,
-              q: text,
-              limit: 5,
-            });
-            searchResults.then((value) => {
-              if (text !== textExpanderTextRef.current) {
-                return;
-              }
-              console.log({ value, type, v: value[type] });
-              const results = value[type] || value;
-              console.log('RESULTS', value, results);
-              let html = '';
-              results.forEach((result) => {
-                const {
-                  name,
-                  avatarStatic,
-                  displayName,
-                  username,
-                  acct,
-                  emojis,
-                  history,
-                  roles,
-                  url,
-                } = result;
-                const displayNameWithEmoji = emojifyText(displayName, emojis);
-                const accountInstance = getDomain(url);
-                // const item = menuItem.cloneNode();
-                if (acct) {
-                  html += `
-                    <li role="option" data-value="${encodeHTML(acct)}">
-                      <span class="avatar">
-                        <img src="${encodeHTML(
-                          avatarStatic,
-                        )}" width="16" height="16" alt="" loading="lazy" />
-                      </span>
-                      <span>
-                        <b>${displayNameWithEmoji || username}</b>
-                        <br><span class="bidi-isolate">@${encodeHTML(
-                          acct,
-                        )}</span>
-                        ${
-                          roles?.map(
-                            (role) => ` <span class="tag collapsed">
-                            ${role.name}
-                            ${
-                              !!accountInstance &&
-                              `<span class="more-insignificant">
-                                ${accountInstance}
-                              </span>`
-                            }
-                          </span>`,
-                          ) || ''
-                        }
-                      </span>
-                    </li>
-                  `;
-                } else {
-                  const total = history?.reduce?.(
-                    (acc, cur) => acc + +cur.uses,
-                    0,
-                  );
-                  html += `
-                    <li role="option" data-value="${encodeHTML(name)}">
-                      <span class="grow">#<b>${encodeHTML(name)}</b></span>
-                      ${
-                        total
-                          ? `<span class="count">${shortenNumber(total)}</span>`
-                          : ''
-                      }
-                    </li>
-                  `;
-                }
-              });
-              if (type === 'accounts') {
-                html += `<li role="option" data-value="" data-more="${text}">${t`More…`}</li>`;
-              }
-              menu.innerHTML = html;
-              console.log('MENU', results, menu);
-              resolve({
-                matched: results.length > 0,
-                fragment: menu,
-              });
-            });
-          }),
-        );
-      };
-
-      textExpanderRef.current.addEventListener(
-        'text-expander-change',
-        handleChange,
-      );
-
-      handleValue = (e) => {
-        const { key, item } = e.detail;
-        const { value, more } = item.dataset;
-        if (key === ':') {
-          e.detail.value = value ? `:${value}:` : '​'; // zero-width space
-          if (more) {
-            // Prevent adding space after the above value
-            e.detail.continue = true;
-
-            setTimeout(() => {
-              onTrigger?.({
-                name: 'custom-emojis',
-                defaultSearchTerm: more,
-              });
-            }, 300);
-          }
-        } else if (key === '@') {
-          e.detail.value = value ? `@${value}` : '​'; // zero-width space
-          if (more) {
-            e.detail.continue = true;
-            setTimeout(() => {
-              onTrigger?.({
-                name: 'mention',
-                defaultSearchTerm: more,
-              });
-            }, 300);
-          }
-        } else {
-          e.detail.value = `${key}${value}`;
-        }
-      };
-
-      textExpanderRef.current.addEventListener(
-        'text-expander-value',
-        handleValue,
-      );
-
-      handleCommited = (e) => {
-        const { input } = e.detail;
-        setText(input.value);
-        // fire input event
-        if (ref.current) {
-          const event = new Event('input', { bubbles: true });
-          ref.current.dispatchEvent(event);
-        }
-      };
-
-      textExpanderRef.current.addEventListener(
-        'text-expander-committed',
-        handleCommited,
-      );
-
-      handleActivate = () => {
-        hasTextExpanderRef.current = true;
-      };
-
-      textExpanderRef.current.addEventListener(
-        'text-expander-activate',
-        handleActivate,
-      );
-
-      handleDeactivate = () => {
-        hasTextExpanderRef.current = false;
-      };
-
-      textExpanderRef.current.addEventListener(
-        'text-expander-deactivate',
-        handleDeactivate,
-      );
-    }
-
-    return () => {
-      if (textExpanderRef.current) {
-        textExpanderRef.current.removeEventListener(
-          'text-expander-change',
-          handleChange,
-        );
-        textExpanderRef.current.removeEventListener(
-          'text-expander-value',
-          handleValue,
-        );
-        textExpanderRef.current.removeEventListener(
-          'text-expander-committed',
-          handleCommited,
-        );
-        textExpanderRef.current.removeEventListener(
-          'text-expander-activate',
-          handleActivate,
-        );
-        textExpanderRef.current.removeEventListener(
-          'text-expander-deactivate',
-          handleDeactivate,
-        );
-      }
-    };
-  }, []);
 
   useEffect(() => {
     // Resize observer for textarea
···
   }, 2000);
 
   return (
-    <text-expander
+    <TextExpander
       ref={textExpanderRef}
       keys="@ # :"
       class="compose-field-container"
+      onTrigger={onTrigger}
     >
       <textarea
         class="compose-field"
···
         onKeyDown={(e) => {
           // Get line before cursor position after pressing 'Enter'
           const { key, target } = e;
-          const hasTextExpander = hasTextExpanderRef.current;
+          const hasTextExpander = textExpanderRef.current?.activated();
           if (
             key === 'Enter' &&
             !(e.ctrlKey || e.metaKey || hasTextExpander) &&
···
         class="compose-highlight"
         aria-hidden="true"
       />
-    </text-expander>
+    </TextExpander>
   );
 });
 

src/components/compose.css

···
 #compose-container .toolbar.stretch {
   justify-content: stretch;
 }
-#compose-container .toolbar .spoiler-text-field {
-  flex: 1;
-  min-width: 0;
+#compose-container .toolbar {
+  .spoiler-text-field-container {
+    flex: 1;
+    min-width: 0;
+
+    .spoiler-text-field {
+      width: 100%;
+    }
+  }
 }
 #compose-container .toolbar-button {
   display: inline-block;
···
   justify-content: stretch;
   flex-direction: row-reverse;
 }
-#compose-container .poll-choice input {
+#compose-container .poll-choice .poll-field-container {
   flex-grow: 1;
   min-width: 0;
+
+  input {
+    width: 100%;
+  }
 }
 
 #compose-container .poll-button {

src/components/compose.jsx

···
   MIN_SCHEDULED_AT,
 } from './ScheduledAtField';
 import Status from './status';
+import TextExpander from './text-expander';
 
 const supportedLanguagesMap = supportedLanguages.reduce((acc, l) => {
   const [code, common, native] = l;
···
 
   const textareaRef = useRef();
   const spoilerTextRef = useRef();
+
   const [visibility, setVisibility] = useState('public');
   const [sensitive, setSensitive] = useState(false);
   const [language, setLanguage] = useState(
···
           }}
         >
           <div class="toolbar stretch">
-            <input
-              ref={spoilerTextRef}
-              type="text"
-              name="spoilerText"
-              placeholder={t`Content warning`}
-              data-allow-custom-emoji="true"
-              disabled={uiState === 'loading'}
-              class="spoiler-text-field"
-              lang={language}
-              spellCheck="true"
-              dir="auto"
-              style={{
-                opacity: sensitive ? 1 : 0,
-                pointerEvents: sensitive ? 'auto' : 'none',
-              }}
-              onInput={() => {
-                updateCharCount();
+            <TextExpander
+              keys=":"
+              class="spoiler-text-field-container"
+              onTrigger={(action) => {
+                if (action?.name === 'custom-emojis') {
+                  setShowEmoji2Picker({
+                    targetElement: spoilerTextRef,
+                    defaultSearchTerm: action?.defaultSearchTerm || null,
+                  });
+                }
               }}
-            />
+            >
+              <input
+                ref={spoilerTextRef}
+                type="text"
+                name="spoilerText"
+                placeholder={t`Content warning`}
+                data-allow-custom-emoji="true"
+                disabled={uiState === 'loading'}
+                class="spoiler-text-field"
+                lang={language}
+                spellCheck="true"
+                autocomplete="off"
+                dir="auto"
+                style={{
+                  opacity: sensitive ? 1 : 0,
+                  pointerEvents: sensitive ? 'auto' : 'none',
+                }}
+                onInput={() => {
+                  updateCharCount();
+                }}
+              />
+            </TextExpander>
             <label
               class={`toolbar-button ${sensitive ? 'highlight' : ''}`}
               title={t`Content warning or sensitive media`}
···
               updateCharCount();
             }}
             maxCharacters={maxCharacters}
-            performSearch={(params) => {
-              const { type, q, limit } = params;
-              if (type === 'accounts') {
-                return masto.v1.accounts.search.list({
-                  q,
-                  limit,
-                  resolve: false,
-                });
-              }
-              return masto.v2.search.list(params);
-            }}
             onTrigger={(action) => {
               if (action?.name === 'custom-emojis') {
                 setShowEmoji2Picker({

src/components/status.css

···
     var(--bg-color) 50%,
     var(--bg-faded-color)
   );
-  overflow: hidden;
+  /* overflow: hidden; */
   box-shadow: inset 0 0 0 1px var(--bg-color);
   min-width: 50%;
 }

src/components/text-expander.jsx

···
+import '@github/text-expander-element';
+
+import { useLingui } from '@lingui/react/macro';
+import { forwardRef, useImperativeHandle } from 'preact/compat';
+import { useEffect, useRef } from 'preact/hooks';
+
+import { api } from '../utils/api';
+import getCustomEmojis from '../utils/custom-emojis';
+import emojifyText from '../utils/emojify-text';
+import getDomain from '../utils/get-domain';
+import isRTL from '../utils/is-rtl';
+import shortenNumber from '../utils/shorten-number';
+
+const menu = document.createElement('ul');
+menu.role = 'listbox';
+menu.className = 'text-expander-menu';
+
+// Set IntersectionObserver on menu, reposition it because text-expander doesn't handle it
+const windowMargin = 16;
+const observer = new IntersectionObserver((entries) => {
+  entries.forEach((entry) => {
+    if (entry.isIntersecting) {
+      const { left, width } = entry.boundingClientRect;
+      const { innerWidth } = window;
+      if (left + width > innerWidth) {
+        const insetInlineStart = isRTL() ? 'right' : 'left';
+        menu.style[insetInlineStart] = innerWidth - width - windowMargin + 'px';
+      }
+    }
+  });
+});
+observer.observe(menu);
+
+function encodeHTML(str) {
+  return str.replace(/[&<>"']/g, function (char) {
+    return '&#' + char.charCodeAt(0) + ';';
+  });
+}
+
+function TextExpander({ onTrigger = null, ...props }, ref) {
+  const { t } = useLingui();
+  const textExpanderRef = useRef();
+  const { masto, instance } = api();
+  const searcherRef = useRef();
+  const textExpanderTextRef = useRef('');
+  const hasTextExpanderRef = useRef(false);
+
+  // Expose the activated state to parent components
+  useImperativeHandle(ref, () => ({
+    activated: () => hasTextExpanderRef.current,
+  }));
+
+  // Setup emoji search if not already set up
+  useEffect(() => {
+    if (searcherRef.current) return; // Already set up
+
+    getCustomEmojis(instance, masto)
+      .then(([, searcher]) => {
+        searcherRef.current = searcher;
+      })
+      .catch((e) => {
+        console.error(e);
+      });
+  }, [instance, masto]);
+
+  useEffect(() => {
+    const textExpander = textExpanderRef.current;
+    if (!textExpander) return;
+
+    const handleChange = (e) => {
+      const { key, provide, text } = e.detail;
+      textExpanderTextRef.current = text;
+
+      if (text === '') {
+        provide(
+          Promise.resolve({
+            matched: false,
+          }),
+        );
+        return;
+      }
+
+      if (key === ':') {
+        const showMore = !!onTrigger;
+        const results = searcherRef.current?.search(text, {
+          limit: 5,
+        });
+
+        let html = '';
+        results?.forEach(({ item: emoji }) => {
+          const { shortcode, url } = emoji;
+          html += `
+            <li role="option" data-value="${encodeHTML(shortcode)}">
+              <img src="${encodeHTML(
+                url,
+              )}" width="16" height="16" alt="" loading="lazy" />
+              ${encodeHTML(shortcode)}
+            </li>`;
+        });
+        if (showMore) {
+          html += `<li role="option" data-value="" data-more="${text}">${'More…'}</li>`;
+        }
+        menu.innerHTML = html;
+
+        provide(
+          Promise.resolve({
+            matched: (results?.length || 0) > 0,
+            fragment: menu,
+          }),
+        );
+        return;
+      }
+
+      // Handle @ mentions and # hashtags
+      const type = {
+        '@': 'accounts',
+        '#': 'hashtags',
+      }[key];
+
+      if (type) {
+        provide(
+          new Promise(async (resolve) => {
+            try {
+              let searchResults;
+              if (type === 'accounts') {
+                searchResults = await masto.v1.accounts.search.list({
+                  q: text,
+                  limit: 5,
+                  resolve: false,
+                });
+              } else {
+                const response = await masto.v2.search.list({
+                  type,
+                  q: text,
+                  limit: 5,
+                });
+                searchResults = response[type] || response;
+              }
+
+              if (text !== textExpanderTextRef.current) {
+                return;
+              }
+
+              const results = searchResults;
+              let html = '';
+              results.forEach((result) => {
+                const {
+                  name,
+                  avatarStatic,
+                  displayName,
+                  username,
+                  acct,
+                  emojis,
+                  history,
+                  roles,
+                  url,
+                } = result;
+                const displayNameWithEmoji = emojifyText(displayName, emojis);
+                const accountInstance = getDomain(url);
+
+                if (acct) {
+                  html += `
+                    <li role="option" data-value="${encodeHTML(acct)}">
+                      <span class="avatar">
+                        <img src="${encodeHTML(
+                          avatarStatic,
+                        )}" width="16" height="16" alt="" loading="lazy" />
+                      </span>
+                      <span>
+                        <b>${displayNameWithEmoji || username}</b>
+                        <br><span class="bidi-isolate">@${encodeHTML(
+                          acct,
+                        )}</span>
+                        ${
+                          roles?.map(
+                            (role) => ` <span class="tag collapsed">
+                            ${role.name}
+                            ${
+                              !!accountInstance &&
+                              `<span class="more-insignificant">
+                                ${accountInstance}
+                              </span>`
+                            }
+                          </span>`,
+                          ) || ''
+                        }
+                      </span>
+                    </li>
+                  `;
+                } else {
+                  const total = history?.reduce?.(
+                    (acc, cur) => acc + +cur.uses,
+                    0,
+                  );
+                  html += `
+                    <li role="option" data-value="${encodeHTML(name)}">
+                      <span class="grow">#<b>${encodeHTML(name)}</b></span>
+                      ${
+                        total
+                          ? `<span class="count">${shortenNumber(total)}</span>`
+                          : ''
+                      }
+                    </li>
+                  `;
+                }
+              });
+              if (type === 'accounts') {
+                html += `<li role="option" data-value="" data-more="${text}">${t`More…`}</li>`;
+              }
+              menu.innerHTML = html;
+              resolve({
+                matched: results.length > 0,
+                fragment: menu,
+              });
+            } catch (error) {
+              console.error('Search error:', error);
+              resolve({
+                matched: false,
+              });
+            }
+          }),
+        );
+        return;
+      }
+
+      // No other keys supported
+      provide(
+        Promise.resolve({
+          matched: false,
+        }),
+      );
+    };
+
+    const handleValue = (e) => {
+      const { key, item } = e.detail;
+      const { value, more } = item.dataset;
+
+      if (key === ':') {
+        e.detail.value = value ? `:${value}:` : '​'; // zero-width space
+        if (more) {
+          // Prevent adding space after the above value
+          e.detail.continue = true;
+
+          setTimeout(() => {
+            // Trigger custom emoji picker modal for more options
+            onTrigger?.({
+              name: 'custom-emojis',
+              defaultSearchTerm: more,
+            });
+          }, 300);
+        }
+      } else if (key === '@') {
+        e.detail.value = value ? `@${value}` : '​'; // zero-width space
+        if (more) {
+          e.detail.continue = true;
+          setTimeout(() => {
+            onTrigger?.({
+              name: 'mention',
+              defaultSearchTerm: more,
+            });
+          }, 300);
+        }
+      } else {
+        e.detail.value = `${key}${value}`;
+      }
+    };
+
+    const handleCommited = (e) => {
+      const { input } = e.detail;
+
+      if (input) {
+        const event = new Event('input', { bubbles: true });
+        input.dispatchEvent(event);
+      }
+    };
+
+    const handleActivate = () => {
+      hasTextExpanderRef.current = true;
+    };
+
+    const handleDeactivate = () => {
+      hasTextExpanderRef.current = false;
+    };
+
+    textExpander.addEventListener('text-expander-change', handleChange);
+    textExpander.addEventListener('text-expander-value', handleValue);
+    textExpander.addEventListener('text-expander-committed', handleCommited);
+    textExpander.addEventListener('text-expander-activate', handleActivate);
+    textExpander.addEventListener('text-expander-deactivate', handleDeactivate);
+
+    return () => {
+      textExpander.removeEventListener('text-expander-change', handleChange);
+      textExpander.removeEventListener('text-expander-value', handleValue);
+      textExpander.removeEventListener(
+        'text-expander-committed',
+        handleCommited,
+      );
+      textExpander.removeEventListener(
+        'text-expander-activate',
+        handleActivate,
+      );
+      textExpander.removeEventListener(
+        'text-expander-deactivate',
+        handleDeactivate,
+      );
+    };
+  }, [searcherRef.current, onTrigger, t, masto]);
+
+  return <text-expander ref={textExpanderRef} {...props} />;
+}
+
+export default forwardRef(TextExpander);

src/locales/en.po

···
 
 #: src/components/account-sheet.jsx:38
 #: src/components/add-remove-lists-sheet.jsx:45
-#: src/components/compose.jsx:832
+#: src/components/compose.jsx:834
 #: src/components/custom-emojis-modal.jsx:234
 #: src/components/drafts.jsx:57
 #: src/components/edit-profile-sheet.jsx:87
···
 msgstr "Add to thread"
 
 #. placeholder {0}: i + 1
-#: src/components/compose-poll.jsx:41
+#: src/components/compose-poll.jsx:43
 msgid "Choice {0}"
 msgstr "Choice {0}"
 
-#: src/components/compose-poll.jsx:61
+#: src/components/compose-poll.jsx:65
 #: src/components/media-attachment.jsx:300
 #: src/components/shortcuts-settings.jsx:726
 #: src/pages/catchup.jsx:1081
···
 msgid "Remove"
 msgstr ""
 
-#: src/components/compose-poll.jsx:89
+#: src/components/compose-poll.jsx:93
 msgid "Multiple choices"
 msgstr ""
 
-#: src/components/compose-poll.jsx:92
+#: src/components/compose-poll.jsx:96
 msgid "Duration"
 msgstr ""
 
-#: src/components/compose-poll.jsx:123
+#: src/components/compose-poll.jsx:127
 msgid "Remove poll"
 msgstr ""
 
-#: src/components/compose-textarea.jsx:197
-#: src/components/compose-textarea.jsx:290
-#: src/components/nav-menu.jsx:244
-msgid "More…"
-msgstr ""
-
-#: src/components/compose.jsx:99
+#: src/components/compose.jsx:100
 msgid "Take photo or video"
 msgstr "Take photo or video"
 
-#: src/components/compose.jsx:100
+#: src/components/compose.jsx:101
 msgid "Add media"
 msgstr "Add media"
 
-#: src/components/compose.jsx:101
+#: src/components/compose.jsx:102
 msgid "Add custom emoji"
 msgstr ""
 
-#: src/components/compose.jsx:102
+#: src/components/compose.jsx:103
 msgid "Add GIF"
 msgstr "Add GIF"
 
-#: src/components/compose.jsx:103
+#: src/components/compose.jsx:104
 msgid "Add poll"
 msgstr ""
 
-#: src/components/compose.jsx:104
+#: src/components/compose.jsx:105
 msgid "Schedule post"
 msgstr "Schedule post"
 
-#: src/components/compose.jsx:357
+#: src/components/compose.jsx:359
 msgid "You have unsaved changes. Discard this post?"
 msgstr "You have unsaved changes. Discard this post?"
 
 #. placeholder {0}: unsupportedFiles.length
 #. placeholder {1}: unsupportedFiles[0].name
 #. placeholder {2}: lf.format( unsupportedFiles.map((f) => f.name), )
-#: src/components/compose.jsx:595
+#: src/components/compose.jsx:597
 msgid "{0, plural, one {File {1} is not supported.} other {Files {2} are not supported.}}"
 msgstr "{0, plural, one {File {1} is not supported.} other {Files {2} are not supported.}}"
 
-#: src/components/compose.jsx:605
-#: src/components/compose.jsx:623
-#: src/components/compose.jsx:1696
+#: src/components/compose.jsx:607
+#: src/components/compose.jsx:625
+#: src/components/compose.jsx:1701
 #: src/components/file-picker-input.jsx:38
 msgid "{maxMediaAttachments, plural, one {You can only attach up to 1 file.} other {You can only attach up to # files.}}"
 msgstr ""
 
-#: src/components/compose.jsx:813
+#: src/components/compose.jsx:815
 msgid "Pop out"
 msgstr "Pop out"
 
-#: src/components/compose.jsx:820
+#: src/components/compose.jsx:822
 msgid "Minimize"
 msgstr "Minimize"
 
-#: src/components/compose.jsx:856
+#: src/components/compose.jsx:858
 msgid "Looks like you closed the parent window."
 msgstr "Looks like you closed the parent window."
 
-#: src/components/compose.jsx:863
+#: src/components/compose.jsx:865
 msgid "Looks like you already have a compose field open in the parent window and currently publishing. Please wait for it to be done and try again later."
 msgstr "Looks like you already have a compose field open in the parent window and currently publishing. Please wait for it to be done and try again later."
 
-#: src/components/compose.jsx:868
+#: src/components/compose.jsx:870
 msgid "Looks like you already have a compose field open in the parent window. Popping in this window will discard the changes you made in the parent window. Continue?"
 msgstr "Looks like you already have a compose field open in the parent window. Popping in this window will discard the changes you made in the parent window. Continue?"
 
-#: src/components/compose.jsx:911
+#: src/components/compose.jsx:913
 msgid "Pop in"
 msgstr "Pop in"
 
 #. placeholder {0}: replyToStatus.account.acct || replyToStatus.account.username
 #. placeholder {1}: rtf.format(-replyToStatusMonthsAgo, 'month')
-#: src/components/compose.jsx:921
+#: src/components/compose.jsx:923
 msgid "Replying to @{0}’s post (<0>{1}</0>)"
 msgstr ""
 
 #. placeholder {0}: replyToStatus.account.acct || replyToStatus.account.username
-#: src/components/compose.jsx:931
+#: src/components/compose.jsx:933
 msgid "Replying to @{0}’s post"
 msgstr ""
 
-#: src/components/compose.jsx:944
+#: src/components/compose.jsx:946
 msgid "Editing source post"
 msgstr ""
 
-#: src/components/compose.jsx:997
+#: src/components/compose.jsx:999
 msgid "Poll must have at least 2 options"
 msgstr "Poll must have at least 2 options"
 
-#: src/components/compose.jsx:1001
+#: src/components/compose.jsx:1003
 msgid "Some poll choices are empty"
 msgstr "Some poll choices are empty"
 
-#: src/components/compose.jsx:1014
+#: src/components/compose.jsx:1016
 msgid "Some media have no descriptions. Continue?"
 msgstr "Some media have no descriptions. Continue?"
 
-#: src/components/compose.jsx:1066
+#: src/components/compose.jsx:1068
 msgid "Attachment #{i} failed"
 msgstr "Attachment #{i} failed"
 
-#: src/components/compose.jsx:1162
+#: src/components/compose.jsx:1176
 #: src/components/status.jsx:2103
 #: src/components/timeline.jsx:1015
 msgid "Content warning"
 msgstr ""
 
-#: src/components/compose.jsx:1179
+#: src/components/compose.jsx:1195
 msgid "Content warning or sensitive media"
 msgstr "Content warning or sensitive media"
 
-#: src/components/compose.jsx:1215
+#: src/components/compose.jsx:1231
 #: src/components/status.jsx:87
 #: src/pages/settings.jsx:318
 msgid "Public"
 msgstr ""
 
-#: src/components/compose.jsx:1220
+#: src/components/compose.jsx:1236
 #: src/components/nav-menu.jsx:349
 #: src/components/shortcuts-settings.jsx:165
 #: src/components/status.jsx:88
 msgid "Local"
 msgstr ""
 
-#: src/components/compose.jsx:1224
+#: src/components/compose.jsx:1240
 #: src/components/status.jsx:89
 #: src/pages/settings.jsx:321
 msgid "Unlisted"
 msgstr ""
 
-#: src/components/compose.jsx:1227
+#: src/components/compose.jsx:1243
 #: src/components/status.jsx:90
 #: src/pages/settings.jsx:324
 msgid "Followers only"
 msgstr ""
 
-#: src/components/compose.jsx:1230
+#: src/components/compose.jsx:1246
 #: src/components/status.jsx:91
 #: src/components/status.jsx:1983
 msgid "Private mention"
 msgstr ""
 
-#: src/components/compose.jsx:1240
+#: src/components/compose.jsx:1256
 msgid "Post your reply"
 msgstr "Post your reply"
 
-#: src/components/compose.jsx:1242
+#: src/components/compose.jsx:1258
 msgid "Edit your post"
 msgstr "Edit your post"
 
-#: src/components/compose.jsx:1243
+#: src/components/compose.jsx:1259
 msgid "What are you doing?"
 msgstr "What are you doing?"
 
-#: src/components/compose.jsx:1323
+#: src/components/compose.jsx:1328
 msgid "Mark media as sensitive"
 msgstr ""
 
-#: src/components/compose.jsx:1360
+#: src/components/compose.jsx:1365
 msgid "Posting on <0/>"
 msgstr "Posting on <0/>"
 
-#: src/components/compose.jsx:1391
+#: src/components/compose.jsx:1396
 #: src/components/mention-modal.jsx:220
 #: src/components/shortcuts-settings.jsx:715
 #: src/pages/list.jsx:388
 msgid "Add"
 msgstr ""
 
-#: src/components/compose.jsx:1623
+#: src/components/compose.jsx:1628
 msgid "Schedule"
 msgstr "Schedule"
 
-#: src/components/compose.jsx:1625
+#: src/components/compose.jsx:1630
 #: src/components/keyboard-shortcuts-help.jsx:155
 #: src/components/status.jsx:965
 #: src/components/status.jsx:1751
···
 msgid "Reply"
 msgstr ""
 
-#: src/components/compose.jsx:1627
+#: src/components/compose.jsx:1632
 msgid "Update"
 msgstr "Update"
 
-#: src/components/compose.jsx:1628
+#: src/components/compose.jsx:1633
 msgctxt "Submit button in composer"
 msgid "Post"
 msgstr "Post"
 
-#: src/components/compose.jsx:1708
+#: src/components/compose.jsx:1713
 msgid "Downloading GIF…"
 msgstr "Downloading GIF…"
 
-#: src/components/compose.jsx:1736
+#: src/components/compose.jsx:1741
 msgid "Failed to download GIF"
 msgstr "Failed to download GIF"
 
···
 #: src/pages/bookmarks.jsx:12
 #: src/pages/bookmarks.jsx:26
 msgid "Bookmarks"
+msgstr ""
+
+#: src/components/nav-menu.jsx:244
+#: src/components/text-expander.jsx:208
+msgid "More…"
 msgstr ""
 
 #: src/components/nav-menu.jsx:253