Make Lexical the only editor

src/actions/settings.ts

@@ -48,7 +48,6 @@ const defaultSettings = ImmutableMap({
 
   systemFont: false,
   demetricator: false,
-  wysiwyg: false,
 
   isDeveloper: false,
 

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!));
-      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));
-      }
-    }
 
     // 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>
-        <div>
+        <Bundle fetchComponent={ComposeEditor}>
-          <Bundle fetchComponent={ComposeEditor}>
+          {(Component: any) => (
-            {(Component: any) => (
+            <Component
-              <Component
+              ref={editorStateRef}
-                ref={editorStateRef}
+              className='mt-2'
-                className='mt-2'
+              composeId={id}
-                composeId={id}
+              condensed={condensed}
-                condensed={condensed}
+              eventDiscussion={!!event}
-                eventDiscussion={!!event}
+              autoFocus={shouldAutoFocus}
-                autoFocus={shouldAutoFocus}
+              hasPoll={hasPoll}
-                hasPoll={hasPoll}
+              handleSubmit={handleSubmit}
-                handleSubmit={handleSubmit}
+              onFocus={handleComposeFocus}
-                onFocus={handleComposeFocus}
+              onPaste={onPaste}
-                onPaste={onPaste}
+            />
-              />
+          )}
-            )}
+        </Bundle>
-          </Bundle>
+        {composeModifiers}
-          {composeModifiers}
+      </div>
-        </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>
-      )}
 
       <QuotedStatusContainer composeId={id} />
 

src/features/developers/settings-store.tsx

@@ -140,12 +140,6 @@ const SettingsStore: React.FC = () => {
         >
           <SettingToggle settings={settings} settingPath={['demetricator']} onChange={onToggleChange} />
         </ListItem>
-
-        <ListItem
-          label={<FormattedMessage id='preferences.fields.wysiwyg_label' defaultMessage='Use WYSIWYG editor' />}
-        >
-          <SettingToggle settings={settings} settingPath={['wysiwyg']} onChange={onToggleChange} />
-        </ListItem>
       </List>
     </Column>
   );

src/features/ui/util/global-hotkeys.tsx

@@ -4,7 +4,7 @@ import { useHistory } from 'react-router-dom';
 import { resetCompose } from 'soapbox/actions/compose';
 import { openModal } from 'soapbox/actions/modals';
 import { FOCUS_EDITOR_COMMAND } from 'soapbox/features/compose/editor/plugins/focus-plugin';
-import { useAppSelector, useAppDispatch, useOwnAccount, useSettings } from 'soapbox/hooks';
+import { useAppSelector, useAppDispatch, useOwnAccount } from 'soapbox/hooks';
 
 import { HotKeys } from '../components/hotkeys';
 
@@ -50,25 +50,14 @@ const GlobalHotkeys: React.FC<IGlobalHotkeys> = ({ children, node }) => {
   const dispatch = useAppDispatch();
   const me = useAppSelector(state => state.me);
   const { account } = useOwnAccount();
-  const wysiwygEditor = useSettings().get('wysiwyg');
 
   const handleHotkeyNew = (e?: KeyboardEvent) => {
     e?.preventDefault();
 
-    let element;
+    const element = node.current?.querySelector('div[data-lexical-editor="true"]') as HTMLTextAreaElement;
-
-    if (wysiwygEditor) {
-      element = node.current?.querySelector('div[data-lexical-editor="true"]') as HTMLTextAreaElement;
-    } else {
-      element = node.current?.querySelector('textarea#compose-textarea') as HTMLTextAreaElement;
-    }
 
     if (element) {
-      if (wysiwygEditor) {
+      ((element as any).__lexicalEditor as LexicalEditor).dispatchCommand(FOCUS_EDITOR_COMMAND, undefined);
-        ((element as any).__lexicalEditor as LexicalEditor).dispatchCommand(FOCUS_EDITOR_COMMAND, undefined);
-      } else {
-        element.focus();
-      }
     } else {
       dispatch(openModal('COMPOSE'));
     }

src/locales/en.json

@@ -1207,7 +1207,6 @@
   "preferences.fields.theme": "Theme",
   "preferences.fields.underline_links_label": "Always underline links in posts",
   "preferences.fields.unfollow_modal_label": "Show confirmation dialog before unfollowing someone",
-  "preferences.fields.wysiwyg_label": "Use WYSIWYG editor",
   "preferences.hints.demetricator": "Decrease social media anxiety by hiding all numbers from the site.",
   "preferences.notifications.advanced": "Show all notification categories",
   "preferences.options.content_type_markdown": "Markdown",

src/schemas/soapbox/settings.ts

@@ -28,7 +28,6 @@ const settingsSchema = z.object({
   autoloadMore: z.boolean().catch(true),
   systemFont: z.boolean().catch(false),
   demetricator: z.boolean().catch(false),
-  wysiwyg: z.boolean().catch(false),
   isDeveloper: z.boolean().catch(false),
 });