Unfloyded/Legamunt
0
0
Fork 0
Code Activity

Rewrite AutosuggestTextarea as Functional Component (#27618)

Browse source
This commit is contained in:
Claire 2023-10-31 11:17:37 +01:00 • committed by GitHub
parent a916251d8a
commit 9c8891b39a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 130 additions and 127 deletions
Download patch file Download diff file Expand all files Collapse all files

26
app/javascript/mastodon/features/compose/components/compose_form.jsx
View file

@ -1,4 +1,5 @@
import PropTypes from 'prop-types';
import { createRef } from 'react';
import { defineMessages, injectIntl } from 'react-intl';
@ -79,6 +80,11 @@ class ComposeForm extends ImmutablePureComponent {
highlighted: false,
};
constructor(props) {
super(props);
this.textareaRef = createRef(null);
}
handleChange = (e) => {
this.props.onChange(e.target.value);
};
@ -102,10 +108,10 @@ class ComposeForm extends ImmutablePureComponent {
};
handleSubmit = (e) => {
if (this.props.text !== this.autosuggestTextarea.textarea.value) {
if (this.props.text !== this.textareaRef.current.value) {
// Something changed the text inside the textarea (e.g. browser extensions like Grammarly)
// Update the state to match the current text
this.props.onChange(this.autosuggestTextarea.textarea.value);
this.props.onChange(this.textareaRef.current.value);
}
if (!this.canSubmit()) {
@ -184,26 +190,22 @@ class ComposeForm extends ImmutablePureComponent {
// immediately selectable, we have to wait for observers to run, as
// described in https://github.com/WICG/inert#performance-and-gotchas
Promise.resolve().then(() => {
this.autosuggestTextarea.textarea.setSelectionRange(selectionStart, selectionEnd);
this.autosuggestTextarea.textarea.focus();
this.textareaRef.current.setSelectionRange(selectionStart, selectionEnd);
this.textareaRef.current.focus();
this.setState({ highlighted: true });
this.timeout = setTimeout(() => this.setState({ highlighted: false }), 700);
}).catch(console.error);
} else if(prevProps.isSubmitting && !this.props.isSubmitting) {
this.autosuggestTextarea.textarea.focus();
this.textareaRef.current.focus();
} else if (this.props.spoiler !== prevProps.spoiler) {
if (this.props.spoiler) {
this.spoilerText.input.focus();
} else if (prevProps.spoiler) {
this.autosuggestTextarea.textarea.focus();
this.textareaRef.current.focus();
}
}
};
setAutosuggestTextarea = (c) => {
this.autosuggestTextarea = c;
};
setSpoilerText = (c) => {
this.spoilerText = c;
};
@ -214,7 +216,7 @@ class ComposeForm extends ImmutablePureComponent {
handleEmojiPick = (data) => {
const { text } = this.props;
const position = this.autosuggestTextarea.textarea.selectionStart;
const position = this.textarea.selectionStart;
const needsSpace = data.custom && position > 0 && !allowedAroundShortCode.includes(text[position - 1]);
this.props.onPickEmoji(position, data, needsSpace);
@ -263,7 +265,7 @@ class ComposeForm extends ImmutablePureComponent {
<div className={classNames('compose-form__highlightable', { active: highlighted })}>
<AutosuggestTextarea
ref={this.setAutosuggestTextarea}
ref={this.textareaRef}
placeholder={intl.formatMessage(messages.placeholder)}
disabled={disabled}
value={this.props.text}