Make Lexical the only editor

src/features/compose/components/compose-form.tsx

@@ -1,6 +1,6 @@
 import clsx from 'clsx';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { defineMessages, FormattedMessage, useIntl, type MessageDescriptor } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 import { length } from 'stringz';
 
@@ -19,7 +19,7 @@ import { Button, HStack, Stack } from 'soapbox/components/ui';
 import EmojiPickerDropdown from 'soapbox/features/emoji/containers/emoji-picker-dropdown-container';
 import Bundle from 'soapbox/features/ui/components/bundle';
 import { ComposeEditor } from 'soapbox/features/ui/util/async-components';
-import { useAppDispatch, useAppSelector, useCompose, useDraggedFiles, useFeatures, useInstance, usePrevious, useSettings } from 'soapbox/hooks';
+import { useAppDispatch, useAppSelector, useCompose, useDraggedFiles, useFeatures, useInstance, usePrevious } from 'soapbox/hooks';
 import { isMobile } from 'soapbox/is-mobile';
 
 import QuotedStatusContainer from '../containers/quoted-status-container';
@@ -76,14 +76,24 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
 
   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 wysiwygEditor = useSettings().get('wysiwyg');
+  const {
+    spoiler,
+    spoiler_text: spoilerText,
+    privacy,
+    focusDate,
+    caretPosition,
+    is_submitting: isSubmitting,
+    is_changing_upload:
+    isChangingUpload,
+    is_uploading: isUploading,
+    schedule: scheduledAt,
+    group_id: groupId,
+  } = compose;
 
-  const { text: composeText, suggestions, spoiler, spoiler_text: spoilerText, privacy, focusDate, caretPosition, is_submitting: isSubmitting, is_changing_upload: isChangingUpload, is_uploading: isUploading, schedule: scheduledAt, group_id: groupId } = compose;
   const prevSpoiler = usePrevious(spoiler);
 
   const hasPoll = !!compose.poll;
@@ -97,21 +107,10 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
   const spoilerTextRef = useRef<AutosuggestInput>(null);
   const autosuggestTextareaRef = useRef<AutosuggestTextarea>(null);
   const editorStateRef = useRef<string>(null);
-  const text = wysiwygEditor ? editorStateRef.current || '' : composeText;
+  const text = editorStateRef.current || '';
 
   const { isDraggedOver } = useDraggedFiles(formRef);
 
-  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;
   };
@@ -146,15 +145,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
   };
 
   const handleSubmit = (e?: React.FormEvent<Element>) => {
-    if (wysiwygEditor) {
-      dispatch(changeCompose(id, editorStateRef.current!));
-    } else {
-      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));
-      }
-    }
+    dispatch(changeCompose(id, editorStateRef.current!));
 
     // Submit disabled:
     const fulltext = [spoilerText, countableText(text)].join('');
@@ -178,10 +169,6 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
     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']));
   };
@@ -277,8 +264,6 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
 
   let publishText: string | JSX.Element = '';
   let publishIcon: string | undefined = undefined;
-  let textareaPlaceholder: MessageDescriptor;
-
 
   if (isEditing) {
     publishText = intl.formatMessage(messages.saveChanges);
@@ -296,15 +281,6 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
     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 && !group && (
@@ -334,47 +310,25 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
 
       {!shouldCondense && !event && !group && <ReplyMentions composeId={id} />}
 
-      {wysiwygEditor ? (
-        <div>
-          <Bundle fetchComponent={ComposeEditor}>
-            {(Component: any) => (
-              <Component
-                ref={editorStateRef}
-                className='mt-2'
-                composeId={id}
-                condensed={condensed}
-                eventDiscussion={!!event}
-                autoFocus={shouldAutoFocus}
-                hasPoll={hasPoll}
-                handleSubmit={handleSubmit}
-                onFocus={handleComposeFocus}
-                onPaste={onPaste}
-              />
-            )}
-          </Bundle>
-          {composeModifiers}
-        </div>
-      ) : (
-        <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'
-        >
-          {composeModifiers}
-        </AutosuggestTextarea>
-      )}
+      <div>
+        <Bundle fetchComponent={ComposeEditor}>
+          {(Component: any) => (
+            <Component
+              ref={editorStateRef}
+              className='mt-2'
+              composeId={id}
+              condensed={condensed}
+              eventDiscussion={!!event}
+              autoFocus={shouldAutoFocus}
+              hasPoll={hasPoll}
+              handleSubmit={handleSubmit}
+              onFocus={handleComposeFocus}
+              onPaste={onPaste}
+            />
+          )}
+        </Bundle>
+        {composeModifiers}
+      </div>
 
       <QuotedStatusContainer composeId={id} />