Simplify greentext code
This commit is contained in:
parent
67392cbc12
commit
d9202baa58
7 changed files with 39 additions and 38 deletions
|
@ -94,7 +94,6 @@ class Status extends ImmutablePureComponent {
|
||||||
group: ImmutablePropTypes.map,
|
group: ImmutablePropTypes.map,
|
||||||
displayMedia: PropTypes.string,
|
displayMedia: PropTypes.string,
|
||||||
allowedEmoji: ImmutablePropTypes.list,
|
allowedEmoji: ImmutablePropTypes.list,
|
||||||
greentext: PropTypes.bool,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// Avoid checking props that are functions (and whose equality will always
|
// Avoid checking props that are functions (and whose equality will always
|
||||||
|
@ -495,7 +494,6 @@ class Status extends ImmutablePureComponent {
|
||||||
onClick={this.handleClick}
|
onClick={this.handleClick}
|
||||||
expanded={!status.get('hidden')}
|
expanded={!status.get('hidden')}
|
||||||
onExpandedToggle={this.handleExpandedToggle}
|
onExpandedToggle={this.handleExpandedToggle}
|
||||||
greentext={this.props.greentext}
|
|
||||||
collapsable
|
collapsable
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { isRtl } from '../rtl';
|
import { isRtl } from '../rtl';
|
||||||
|
@ -6,11 +7,17 @@ import { FormattedMessage } from 'react-intl';
|
||||||
import Permalink from './permalink';
|
import Permalink from './permalink';
|
||||||
import classnames from 'classnames';
|
import classnames from 'classnames';
|
||||||
import Icon from 'soapbox/components/icon';
|
import Icon from 'soapbox/components/icon';
|
||||||
import { processHtml } from 'soapbox/utils/tiny_post_html_processor';
|
import { getSoapboxConfig } from 'soapbox/actions/soapbox';
|
||||||
|
import { addGreentext } from 'soapbox/utils/greentext';
|
||||||
|
|
||||||
const MAX_HEIGHT = 642; // 20px * 32 (+ 2px padding at the top)
|
const MAX_HEIGHT = 642; // 20px * 32 (+ 2px padding at the top)
|
||||||
|
|
||||||
export default class StatusContent extends React.PureComponent {
|
const mapStateToProps = state => ({
|
||||||
|
greentext: getSoapboxConfig(state).get('greentext'),
|
||||||
|
});
|
||||||
|
|
||||||
|
export default @connect(mapStateToProps)
|
||||||
|
class StatusContent extends React.PureComponent {
|
||||||
|
|
||||||
static contextTypes = {
|
static contextTypes = {
|
||||||
router: PropTypes.object,
|
router: PropTypes.object,
|
||||||
|
@ -150,35 +157,16 @@ export default class StatusContent extends React.PureComponent {
|
||||||
this.node = c;
|
this.node = c;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
parseHtml = html => {
|
||||||
|
const { greentext } = this.props;
|
||||||
|
if (greentext) return addGreentext(html);
|
||||||
|
return html;
|
||||||
|
}
|
||||||
|
|
||||||
getHtmlContent = () => {
|
getHtmlContent = () => {
|
||||||
const { status } = this.props;
|
const { status } = this.props;
|
||||||
|
const html = status.get('contentHtml');
|
||||||
const properContent = status.get('contentHtml');
|
return this.parseHtml(html);
|
||||||
|
|
||||||
return this.greentext(properContent);
|
|
||||||
}
|
|
||||||
|
|
||||||
greentext = html => {
|
|
||||||
if (!this.props.greentext) return html;
|
|
||||||
|
|
||||||
// Copied from Pleroma FE
|
|
||||||
// https://git.pleroma.social/pleroma/pleroma-fe/-/blob/19475ba356c3fd6c54ca0306d3ae392358c212d1/src/components/status_content/status_content.js#L132
|
|
||||||
return processHtml(html, (string) => {
|
|
||||||
try {
|
|
||||||
if (string.includes('>') &&
|
|
||||||
string
|
|
||||||
.replace(/<[^>]+?>/gi, '') // remove all tags
|
|
||||||
.replace(/@\w+/gi, '') // remove mentions (even failed ones)
|
|
||||||
.trim()
|
|
||||||
.startsWith('>')) {
|
|
||||||
return `<span class='greentext'>${string}</span>`;
|
|
||||||
} else {
|
|
||||||
return string;
|
|
||||||
}
|
|
||||||
} catch(e) {
|
|
||||||
return string;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
|
|
@ -59,7 +59,6 @@ const makeMapStateToProps = () => {
|
||||||
status: getStatus(state, props),
|
status: getStatus(state, props),
|
||||||
displayMedia: getSettings(state).get('displayMedia'),
|
displayMedia: getSettings(state).get('displayMedia'),
|
||||||
allowedEmoji: soapbox.get('allowedEmoji'),
|
allowedEmoji: soapbox.get('allowedEmoji'),
|
||||||
greentext: soapbox.get('greentext'),
|
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -36,7 +36,6 @@ export default class DetailedStatus extends ImmutablePureComponent {
|
||||||
compact: PropTypes.bool,
|
compact: PropTypes.bool,
|
||||||
showMedia: PropTypes.bool,
|
showMedia: PropTypes.bool,
|
||||||
onToggleMediaVisibility: PropTypes.func,
|
onToggleMediaVisibility: PropTypes.func,
|
||||||
greentext: PropTypes.bool,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
|
@ -192,7 +191,6 @@ export default class DetailedStatus extends ImmutablePureComponent {
|
||||||
<StatusContent
|
<StatusContent
|
||||||
status={status}
|
status={status}
|
||||||
expanded={!status.get('hidden')}
|
expanded={!status.get('hidden')}
|
||||||
greentext={this.props.greentext}
|
|
||||||
onExpandedToggle={this.handleExpandedToggle}
|
onExpandedToggle={this.handleExpandedToggle}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|
|
@ -31,7 +31,6 @@ import { openModal } from '../../../actions/modal';
|
||||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
|
||||||
import { showAlertForError } from '../../../actions/alerts';
|
import { showAlertForError } from '../../../actions/alerts';
|
||||||
import { getSettings } from 'soapbox/actions/settings';
|
import { getSettings } from 'soapbox/actions/settings';
|
||||||
import { getSoapboxConfig } from 'soapbox/actions/soapbox';
|
|
||||||
import { deactivateUserModal, deleteUserModal, deleteStatusModal, toggleStatusSensitivityModal } from 'soapbox/actions/moderation';
|
import { deactivateUserModal, deleteUserModal, deleteStatusModal, toggleStatusSensitivityModal } from 'soapbox/actions/moderation';
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
|
@ -51,7 +50,6 @@ const makeMapStateToProps = () => {
|
||||||
const mapStateToProps = (state, props) => ({
|
const mapStateToProps = (state, props) => ({
|
||||||
status: getStatus(state, props),
|
status: getStatus(state, props),
|
||||||
domain: state.getIn(['meta', 'domain']),
|
domain: state.getIn(['meta', 'domain']),
|
||||||
greentext: getSoapboxConfig(state).get('greentext'),
|
|
||||||
});
|
});
|
||||||
|
|
||||||
return mapStateToProps;
|
return mapStateToProps;
|
||||||
|
|
|
@ -116,7 +116,6 @@ const makeMapStateToProps = () => {
|
||||||
me: state.get('me'),
|
me: state.get('me'),
|
||||||
displayMedia: getSettings(state).get('displayMedia'),
|
displayMedia: getSettings(state).get('displayMedia'),
|
||||||
allowedEmoji: soapbox.get('allowedEmoji'),
|
allowedEmoji: soapbox.get('allowedEmoji'),
|
||||||
greentext: soapbox.get('greentext'),
|
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -546,7 +545,6 @@ class Status extends ImmutablePureComponent {
|
||||||
onToggleHidden={this.handleToggleHidden}
|
onToggleHidden={this.handleToggleHidden}
|
||||||
domain={domain}
|
domain={domain}
|
||||||
showMedia={this.state.showMedia}
|
showMedia={this.state.showMedia}
|
||||||
greentext={this.props.greentext}
|
|
||||||
onToggleMediaVisibility={this.handleToggleMediaVisibility}
|
onToggleMediaVisibility={this.handleToggleMediaVisibility}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|
22
app/soapbox/utils/greentext.js
Normal file
22
app/soapbox/utils/greentext.js
Normal file
|
@ -0,0 +1,22 @@
|
||||||
|
import { processHtml } from './tiny_post_html_processor';
|
||||||
|
|
||||||
|
export const addGreentext = html => {
|
||||||
|
// Copied from Pleroma FE
|
||||||
|
// https://git.pleroma.social/pleroma/pleroma-fe/-/blob/19475ba356c3fd6c54ca0306d3ae392358c212d1/src/components/status_content/status_content.js#L132
|
||||||
|
return processHtml(html, (string) => {
|
||||||
|
try {
|
||||||
|
if (string.includes('>') &&
|
||||||
|
string
|
||||||
|
.replace(/<[^>]+?>/gi, '') // remove all tags
|
||||||
|
.replace(/@\w+/gi, '') // remove mentions (even failed ones)
|
||||||
|
.trim()
|
||||||
|
.startsWith('>')) {
|
||||||
|
return `<span class='greentext'>${string}</span>`;
|
||||||
|
} else {
|
||||||
|
return string;
|
||||||
|
}
|
||||||
|
} catch(e) {
|
||||||
|
return string;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
Loading…
Reference in a new issue