Modified Profile bio to use textarea, preserving newlines and HTML rendered

This commit is contained in:
crockwave 2020-08-05 19:08:38 -05:00
parent f07de93ee3
commit 6e782ca3a0
1 changed files with 16 additions and 6 deletions

View File

@ -11,6 +11,7 @@ import {
TextInput, TextInput,
Checkbox, Checkbox,
FileChooser, FileChooser,
SimpleTextarea,
} from 'soapbox/features/forms'; } from 'soapbox/features/forms';
import ProfilePreview from './components/profile_preview'; import ProfilePreview from './components/profile_preview';
import { import {
@ -18,7 +19,7 @@ import {
List as ImmutableList, List as ImmutableList,
} from 'immutable'; } from 'immutable';
import { patchMe } from 'soapbox/actions/me'; import { patchMe } from 'soapbox/actions/me';
import { unescape } from 'lodash'; import { unescape, escape } from 'lodash';
const messages = defineMessages({ const messages = defineMessages({
heading: { id: 'column.edit_profile', defaultMessage: 'Edit profile' }, heading: { id: 'column.edit_profile', defaultMessage: 'Edit profile' },
@ -69,7 +70,7 @@ class EditProfile extends ImmutablePureComponent {
map.merge(map.get('source')); map.merge(map.get('source'));
map.delete('source'); map.delete('source');
map.set('fields', normalizeFields(map.get('fields'), props.maxFields)); map.set('fields', normalizeFields(map.get('fields'), props.maxFields));
unescapeParams(map, ['display_name', 'note']); unescapeParams(map, ['display_name']);
}); });
this.state = initialState.toObject(); this.state = initialState.toObject();
} }
@ -110,7 +111,9 @@ class EditProfile extends ImmutablePureComponent {
const data = this.getParams(); const data = this.getParams();
let formData = new FormData(); let formData = new FormData();
for (let key in data) { for (let key in data) {
const shouldAppend = Boolean(data[key] || key.startsWith('fields_attributes')); const shouldAppend = Boolean(data[key]
|| key.startsWith('fields_attributes')
|| key.startsWith('note'));
if (shouldAppend) formData.append(key, data[key] || ''); if (shouldAppend) formData.append(key, data[key] || '');
} }
return formData; return formData;
@ -135,6 +138,11 @@ class EditProfile extends ImmutablePureComponent {
this.setState({ [e.target.name]: e.target.value }); this.setState({ [e.target.name]: e.target.value });
} }
handleTextAreaChange = e => {
const value = escape(e.target.value);
this.setState({ [e.target.name]: value });
}
handleFieldChange = (i, key) => { handleFieldChange = (i, key) => {
return (e) => { return (e) => {
this.setState({ this.setState({
@ -168,11 +176,13 @@ class EditProfile extends ImmutablePureComponent {
value={this.state.display_name} value={this.state.display_name}
onChange={this.handleTextChange} onChange={this.handleTextChange}
/> />
<TextInput <SimpleTextarea
label={<FormattedMessage id='edit_profile.fields.bio_label' defaultMessage='Bio' />} label={<FormattedMessage id='edit_profile.fields.bio_label' defaultMessage='Bio' />}
name='note' name='note'
value={this.state.note} autoComplete='off'
onChange={this.handleTextChange} value={this.state.note.replace(/<br\s*\/?>/gi, '\n')}
wrap='hard'
onChange={this.handleTextAreaChange}
/> />
<div className='fields-row'> <div className='fields-row'>
<div className='fields-row__column fields-row__column-6'> <div className='fields-row__column fields-row__column-6'>