moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make Lexical the only editor

This commit is contained in:
Alex Gleason 2023-09-23 14:31:52 -05:00
parent 206927fd4b
commit 89b1574c77
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
6 changed files with 39 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/actions/settings.ts
View File

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

118
src/features/compose/components/compose-form.tsx
View File

@ -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} />

6
src/features/developers/settings-store.tsx
View File

@ -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>
);

17
src/features/ui/util/global-hotkeys.tsx
View File

@ -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;
if (wysiwygEditor) {
element = node.current?.querySelector('div[data-lexical-editor="true"]') as HTMLTextAreaElement;
} else {
element = node.current?.querySelector('textarea#compose-textarea') as HTMLTextAreaElement;
}
const element = node.current?.querySelector('div[data-lexical-editor="true"]') as HTMLTextAreaElement;
if (element) {
if (wysiwygEditor) {
((element as any).__lexicalEditor as LexicalEditor).dispatchCommand(FOCUS_EDITOR_COMMAND, undefined);
} else {
element.focus();
}
((element as any).__lexicalEditor as LexicalEditor).dispatchCommand(FOCUS_EDITOR_COMMAND, undefined);
} else {
dispatch(openModal('COMPOSE'));
}

1
src/locales/en.json
View File

@ -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",

1
src/schemas/soapbox/settings.ts
View File

@ -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),
});