Revert "AutosuggestInput/AutosuggestTextarea: actually, just remove RTL checking. The browser should handle it"

This reverts commit ee9908aab2.

app/soapbox/components/autosuggest-input.tsx

@@ -8,6 +8,7 @@ import AutosuggestEmoji, { Emoji } from 'soapbox/components/autosuggest-emoji';
 import Icon from 'soapbox/components/icon';
 import { Input } from 'soapbox/components/ui';
 import AutosuggestAccount from 'soapbox/features/compose/components/autosuggest-account';
+import { isRtl } from 'soapbox/rtl';
 import { textAtCursorMatchesToken } from 'soapbox/utils/suggestions';
 
 import type { Menu, MenuItem } from 'soapbox/components/dropdown-menu';
@@ -263,8 +264,15 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
   render() {
     const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus, className, id, maxLength, menu, theme } = this.props;
     const { suggestionsHidden } = this.state;
+    const style: React.CSSProperties = { direction: 'ltr' };
+
     const visible = !suggestionsHidden && (!suggestions.isEmpty() || (menu && value));
 
+    // TODO: convert to functional component and use `useLocale()` hook instead of checking placeholder text.
+    if (isRtl(value) || (placeholder && isRtl(placeholder))) {
+      style.direction = 'rtl';
+    }
+
     return [
       <div key='input' className='relative w-full'>
         <label className='sr-only'>{placeholder}</label>
@@ -283,6 +291,7 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
           onKeyUp={onKeyUp}
           onFocus={this.onFocus}
           onBlur={this.onBlur}
+          style={style}
           aria-autocomplete='list'
           id={id}
           maxLength={maxLength}

app/soapbox/components/autosuggest-textarea.tsx

@@ -7,6 +7,7 @@ import Textarea from 'react-textarea-autosize';
 import { textAtCursorMatchesToken } from 'soapbox/utils/suggestions';
 
 import AutosuggestAccount from '../features/compose/components/autosuggest-account';
+import { isRtl } from '../rtl';
 
 import AutosuggestEmoji, { Emoji } from './autosuggest-emoji';
 
@@ -226,6 +227,12 @@ class AutosuggestTextarea extends ImmutablePureComponent<IAutosuggesteTextarea>
   render() {
     const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus, children, condensed, id } = this.props;
     const { suggestionsHidden } = this.state;
+    const style = { direction: 'ltr', minRows: 10 };
+
+    // TODO: convert to functional component and use `useLocale()` hook instead of checking placeholder text.
+    if (isRtl(value) || (placeholder && isRtl(placeholder))) {
+      style.direction = 'rtl';
+    }
 
     return [
       <div key='textarea'>
@@ -250,6 +257,7 @@ class AutosuggestTextarea extends ImmutablePureComponent<IAutosuggesteTextarea>
               onFocus={this.onFocus}
               onBlur={this.onBlur}
               onPaste={this.onPaste}
+              style={style as any}
               aria-autocomplete='list'
             />
           </label>