bigbuffet-rw/app/soapbox/features/compose/components/compose-form.tsx

import classNames from 'clsx';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { defineMessages, FormattedMessage, MessageDescriptor, useIntl } from 'react-intl';
import { Link, useHistory } from 'react-router-dom';
import { length } from 'stringz';

import {
  changeCompose,
  submitCompose,
  clearComposeSuggestions,
  fetchComposeSuggestions,
  selectComposeSuggestion,
  insertEmojiCompose,
  uploadCompose,
} from 'soapbox/actions/compose';
import AutosuggestInput, { AutoSuggestion } from 'soapbox/components/autosuggest-input';
import AutosuggestTextarea from 'soapbox/components/autosuggest-textarea';
import { Button, HStack, Stack } from 'soapbox/components/ui';
import { useAppDispatch, useAppSelector, useCompose, useFeatures, useInstance, usePrevious } from 'soapbox/hooks';
import { isMobile } from 'soapbox/is-mobile';

import QuotedStatusContainer from '../containers/quoted-status-container';
import ReplyIndicatorContainer from '../containers/reply-indicator-container';
import ScheduleFormContainer from '../containers/schedule-form-container';
import UploadButtonContainer from '../containers/upload-button-container';
import WarningContainer from '../containers/warning-container';
import { countableText } from '../util/counter';

import EmojiPickerDropdown from './emoji-picker/emoji-picker-dropdown';
import MarkdownButton from './markdown-button';
import PollButton from './poll-button';
import PollForm from './polls/poll-form';
import PrivacyDropdown from './privacy-dropdown';
import ReplyMentions from './reply-mentions';
import ScheduleButton from './schedule-button';
import SpoilerButton from './spoiler-button';
import SpoilerInput from './spoiler-input';
import TextCharacterCounter from './text-character-counter';
import UploadForm from './upload-form';
import VisualCharacterCounter from './visual-character-counter';
import Warning from './warning';

import type { Emoji } from 'soapbox/components/autosuggest-emoji';

const allowedAroundShortCode = '><\u0085\u0020\u00a0\u1680\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\u2028\u2029\u0009\u000a\u000b\u000c\u000d';

const messages = defineMessages({
  placeholder: { id: 'compose_form.placeholder', defaultMessage: 'What\'s on your mind?' },
  pollPlaceholder: { id: 'compose_form.poll_placeholder', defaultMessage: 'Add a poll topic…' },
  eventPlaceholder: { id: 'compose_form.event_placeholder', defaultMessage: 'Post to this event' },
  spoiler_placeholder: { id: 'compose_form.spoiler_placeholder', defaultMessage: 'Write your warning here (optional)' },
  publish: { id: 'compose_form.publish', defaultMessage: 'Post' },
  publishLoud: { id: 'compose_form.publish_loud', defaultMessage: '{publish}!' },
  message: { id: 'compose_form.message', defaultMessage: 'Message' },
  schedule: { id: 'compose_form.schedule', defaultMessage: 'Schedule' },
  saveChanges: { id: 'compose_form.save_changes', defaultMessage: 'Save changes' },
});

interface IComposeForm<ID extends string> {
  id: ID extends 'default' ? never : ID,
  shouldCondense?: boolean,
  autoFocus?: boolean,
  clickableAreaRef?: React.RefObject<HTMLDivElement>,
  event?: string,
}

const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickableAreaRef, event }: IComposeForm<ID>) => {
  const history = useHistory();
  const intl = useIntl();
  const dispatch = useAppDispatch();
  const { configuration } = useInstance();

  const compose = useCompose(id);
  const showSearch = useAppSelector((state) => state.search.submitted && !state.search.hidden);
  const isModalOpen = useAppSelector((state) => !!(state.modals.size && state.modals.last()!.modalType === 'COMPOSE'));
  const maxTootChars = configuration.getIn(['statuses', 'max_characters']) as number;
  const scheduledStatusCount = useAppSelector((state) => state.scheduled_statuses.size);
  const features = useFeatures();

  const { text, suggestions, spoiler, spoiler_text: spoilerText, privacy, focusDate, caretPosition, is_submitting: isSubmitting, is_changing_upload: isChangingUpload, is_uploading: isUploading, schedule: scheduledAt } = compose;
  const prevSpoiler = usePrevious(spoiler);

  const hasPoll = !!compose.poll;
  const isEditing = compose.id !== null;
  const anyMedia = compose.media_attachments.size > 0;

  const [composeFocused, setComposeFocused] = useState(false);

  const formRef = useRef(null);
  const spoilerTextRef = useRef<AutosuggestInput>(null);
  const autosuggestTextareaRef = useRef<AutosuggestTextarea>(null);

  const handleChange: React.ChangeEventHandler<HTMLTextAreaElement> = (e) => {
    dispatch(changeCompose(id, e.target.value));
  };

  const handleKeyDown: React.KeyboardEventHandler = (e) => {
    if (e.keyCode === 13 && (e.ctrlKey || e.metaKey)) {
      handleSubmit();
      e.preventDefault(); // Prevent bubbling to other ComposeForm instances
    }
  };

  const getClickableArea = () => {
    return clickableAreaRef ? clickableAreaRef.current : formRef.current;
  };

  const isEmpty = () => {
    return !(text || spoilerText || anyMedia);
  };

  const isClickOutside = (e: MouseEvent | React.MouseEvent) => {
    return ![
      // List of elements that shouldn't collapse the composer when clicked
      // FIXME: Make this less brittle
      getClickableArea(),
      document.querySelector('.privacy-dropdown__dropdown'),
      document.querySelector('.emoji-picker-dropdown__menu'),
      document.getElementById('modal-overlay'),
    ].some(element => element?.contains(e.target as any));
  };

  const handleClick = useCallback((e: MouseEvent | React.MouseEvent) => {
    if (isEmpty() && isClickOutside(e)) {
      handleClickOutside();
    }
  }, []);

  const handleClickOutside = () => {
    setComposeFocused(false);
  };

  const handleComposeFocus = () => {
    setComposeFocused(true);
  };

  const handleSubmit = (e?: React.FormEvent<Element>) => {
    if (text !== autosuggestTextareaRef.current?.textarea?.value) {
      // Something changed the text inside the textarea (e.g. browser extensions like Grammarly)
      // Update the state to match the current text
      dispatch(changeCompose(id, autosuggestTextareaRef.current!.textarea!.value));
    }

    // Submit disabled:
    const fulltext = [spoilerText, countableText(text)].join('');

    if (e) {
      e.preventDefault();
    }

    if (isSubmitting || isUploading || isChangingUpload || length(fulltext) > maxTootChars || (fulltext.length !== 0 && fulltext.trim().length === 0 && !anyMedia)) {
      return;
    }

    dispatch(submitCompose(id, history));
  };

  const onSuggestionsClearRequested = () => {
    dispatch(clearComposeSuggestions(id));
  };

  const onSuggestionsFetchRequested = (token: string | number) => {
    dispatch(fetchComposeSuggestions(id, token as string));
  };

  const onSuggestionSelected = (tokenStart: number, token: string | null, value: string | undefined) => {
    if (value) dispatch(selectComposeSuggestion(id, tokenStart, token, value, ['text']));
  };

  const onSpoilerSuggestionSelected = (tokenStart: number, token: string | null, value: AutoSuggestion) => {
    dispatch(selectComposeSuggestion(id, tokenStart, token, value, ['spoiler_text']));
  };

  const setCursor = (start: number, end: number = start) => {
    if (!autosuggestTextareaRef.current?.textarea) return;
    autosuggestTextareaRef.current.textarea.setSelectionRange(start, end);
  };

  const handleEmojiPick = (data: Emoji) => {
    const position   = autosuggestTextareaRef.current!.textarea!.selectionStart;
    const needsSpace = data.custom && position > 0 && !allowedAroundShortCode.includes(text[position - 1]);

    dispatch(insertEmojiCompose(id, position, data, needsSpace));
  };

  const onPaste = (files: FileList) => {
    dispatch(uploadCompose(id, files, intl));
  };

  const focusSpoilerInput = () => {
    spoilerTextRef.current?.input?.focus();
  };

  const focusTextarea = () => {
    autosuggestTextareaRef.current?.textarea?.focus();
  };

  useEffect(() => {
    const length = text.length;
    document.addEventListener('click', handleClick, true);

    if (length > 0) {
      setCursor(length); // Set cursor at end
    }

    return () => {
      document.removeEventListener('click', handleClick, true);
    };
  }, []);

  useEffect(() => {
    if (spoiler && !prevSpoiler) {
      focusSpoilerInput();
    } else if (!spoiler && prevSpoiler) {
      focusTextarea();
    }
  }, [spoiler]);

  useEffect(() => {
    if (typeof caretPosition === 'number') {
      setCursor(caretPosition);
    }
  }, [focusDate]);

  const renderButtons = useCallback(() => (
    <HStack alignItems='center' space={2}>
      {features.media && <UploadButtonContainer composeId={id} />}
      <EmojiPickerDropdown onPickEmoji={handleEmojiPick} />
      {features.polls && <PollButton composeId={id} />}
      {features.privacyScopes && <PrivacyDropdown composeId={id} />}
      {features.scheduledStatuses && <ScheduleButton composeId={id} />}
      {features.spoilers && <SpoilerButton composeId={id} />}
      {features.richText && <MarkdownButton composeId={id} />}
    </HStack>
  ), [features, id]);

  const condensed = shouldCondense && !composeFocused && isEmpty() && !isUploading;
  const disabled = isSubmitting;
  const countedText = [spoilerText, countableText(text)].join('');
  const disabledButton = disabled || isUploading || isChangingUpload || length(countedText) > maxTootChars || (countedText.length !== 0 && countedText.trim().length === 0 && !anyMedia);
  const shouldAutoFocus = autoFocus && !showSearch && !isMobile(window.innerWidth);

  let publishText: string = '';
  let publishIcon: string | undefined;
  let textareaPlaceholder: MessageDescriptor;

  if (isEditing) {
    publishText = intl.formatMessage(messages.saveChanges);
  } else if (privacy === 'direct') {
    publishText = intl.formatMessage(messages.message);
    publishIcon = require('@tabler/icons/mail.svg');
  } else if (privacy === 'private') {
    publishText = intl.formatMessage(messages.publish);
    publishIcon = require('@tabler/icons/lock.svg');
  } else {
    publishText = privacy !== 'unlisted' ? intl.formatMessage(messages.publishLoud, { publish: intl.formatMessage(messages.publish) }) : intl.formatMessage(messages.publish);
  }

  if (scheduledAt) {
    publishText = intl.formatMessage(messages.schedule);
  }

  if (event) {
    textareaPlaceholder = messages.eventPlaceholder;
  } else if (hasPoll) {
    textareaPlaceholder = messages.pollPlaceholder;
  } else {
    textareaPlaceholder = messages.placeholder;
  }

  return (
    <Stack className='w-full' space={4} ref={formRef} onClick={handleClick} element='form' onSubmit={handleSubmit}>
      {scheduledStatusCount > 0 && !event && (
        <Warning
          message={(
            <FormattedMessage
              id='compose_form.scheduled_statuses.message'
              defaultMessage='You have scheduled posts. {click_here} to see them.'
              values={{ click_here: (
                <Link to='/scheduled_statuses'>
                  <FormattedMessage
                    id='compose_form.scheduled_statuses.click_here'
                    defaultMessage='Click here'
                  />
                </Link>
              ) }}
            />)
          }
        />
      )}

      <WarningContainer composeId={id} />

      {!shouldCondense && !event && <ReplyIndicatorContainer composeId={id} />}

      {!shouldCondense && !event && <ReplyMentions composeId={id} />}

      <AutosuggestTextarea
        ref={(isModalOpen && shouldCondense) ? undefined : autosuggestTextareaRef}
        placeholder={intl.formatMessage(textareaPlaceholder)}
        disabled={disabled}
        value={text}
        onChange={handleChange}
        suggestions={suggestions}
        onKeyDown={handleKeyDown}
        onFocus={handleComposeFocus}
        onSuggestionsFetchRequested={onSuggestionsFetchRequested}
        onSuggestionsClearRequested={onSuggestionsClearRequested}
        onSuggestionSelected={onSuggestionSelected}
        onPaste={onPaste}
        autoFocus={shouldAutoFocus}
        condensed={condensed}
        id='compose-textarea'
      >
        {
          !condensed &&
          <Stack space={4} className='compose-form__modifiers'>
            <UploadForm composeId={id} />
            <PollForm composeId={id} />
            <ScheduleFormContainer composeId={id} />

            <SpoilerInput
              composeId={id}
              onSuggestionsFetchRequested={onSuggestionsFetchRequested}
              onSuggestionsClearRequested={onSuggestionsClearRequested}
              onSuggestionSelected={onSpoilerSuggestionSelected}
              ref={spoilerTextRef}
            />
          </Stack>
        }
      </AutosuggestTextarea>

      <QuotedStatusContainer composeId={id} />

      <div
        className={classNames('flex flex-wrap items-center justify-between', {
          'hidden': condensed,
        })}
      >
        {renderButtons()}

        <HStack space={4} alignItems='center' className='ml-auto rtl:ml-0 rtl:mr-auto'>
          {maxTootChars && (
            <HStack space={1} alignItems='center'>
              <TextCharacterCounter max={maxTootChars} text={text} />
              <VisualCharacterCounter max={maxTootChars} text={text} />
            </HStack>
          )}

          <Button type='submit' theme='primary' text={publishText} icon={publishIcon} disabled={disabledButton} />
        </HStack>
        {/* <HStack alignItems='center' space={4}>
        </HStack> */}
      </div>
    </Stack>
  );
};

export default ComposeForm;