From d9202baa580f288b1fd771885bea14ec9625ef88 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Thu, 1 Jul 2021 20:41:03 -0500 Subject: [PATCH] Simplify greentext code --- app/soapbox/components/status.js | 2 - app/soapbox/components/status_content.js | 46 +++++++------------ app/soapbox/containers/status_container.js | 1 - .../status/components/detailed_status.js | 2 - .../containers/detailed_status_container.js | 2 - app/soapbox/features/status/index.js | 2 - app/soapbox/utils/greentext.js | 22 +++++++++ 7 files changed, 39 insertions(+), 38 deletions(-) create mode 100644 app/soapbox/utils/greentext.js diff --git a/app/soapbox/components/status.js b/app/soapbox/components/status.js index 7b0d328df..1ff0b1e03 100644 --- a/app/soapbox/components/status.js +++ b/app/soapbox/components/status.js @@ -94,7 +94,6 @@ class Status extends ImmutablePureComponent { group: ImmutablePropTypes.map, displayMedia: PropTypes.string, allowedEmoji: ImmutablePropTypes.list, - greentext: PropTypes.bool, }; // Avoid checking props that are functions (and whose equality will always @@ -495,7 +494,6 @@ class Status extends ImmutablePureComponent { onClick={this.handleClick} expanded={!status.get('hidden')} onExpandedToggle={this.handleExpandedToggle} - greentext={this.props.greentext} collapsable /> diff --git a/app/soapbox/components/status_content.js b/app/soapbox/components/status_content.js index 5ea78b02e..b0db603e2 100644 --- a/app/soapbox/components/status_content.js +++ b/app/soapbox/components/status_content.js @@ -1,4 +1,5 @@ import React from 'react'; +import { connect } from 'react-redux'; import ImmutablePropTypes from 'react-immutable-proptypes'; import PropTypes from 'prop-types'; import { isRtl } from '../rtl'; @@ -6,11 +7,17 @@ import { FormattedMessage } from 'react-intl'; import Permalink from './permalink'; import classnames from 'classnames'; 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) -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 = { router: PropTypes.object, @@ -150,35 +157,16 @@ export default class StatusContent extends React.PureComponent { this.node = c; } - getHtmlContent = () => { - const { status } = this.props; - - const properContent = status.get('contentHtml'); - - return this.greentext(properContent); + parseHtml = html => { + const { greentext } = this.props; + if (greentext) return addGreentext(html); + return html; } - 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 `${string}`; - } else { - return string; - } - } catch(e) { - return string; - } - }); + getHtmlContent = () => { + const { status } = this.props; + const html = status.get('contentHtml'); + return this.parseHtml(html); } render() { diff --git a/app/soapbox/containers/status_container.js b/app/soapbox/containers/status_container.js index b4c2fbfcf..8f7af89a3 100644 --- a/app/soapbox/containers/status_container.js +++ b/app/soapbox/containers/status_container.js @@ -59,7 +59,6 @@ const makeMapStateToProps = () => { status: getStatus(state, props), displayMedia: getSettings(state).get('displayMedia'), allowedEmoji: soapbox.get('allowedEmoji'), - greentext: soapbox.get('greentext'), }; }; diff --git a/app/soapbox/features/status/components/detailed_status.js b/app/soapbox/features/status/components/detailed_status.js index e5ade55b8..43a645e60 100644 --- a/app/soapbox/features/status/components/detailed_status.js +++ b/app/soapbox/features/status/components/detailed_status.js @@ -36,7 +36,6 @@ export default class DetailedStatus extends ImmutablePureComponent { compact: PropTypes.bool, showMedia: PropTypes.bool, onToggleMediaVisibility: PropTypes.func, - greentext: PropTypes.bool, }; state = { @@ -192,7 +191,6 @@ export default class DetailedStatus extends ImmutablePureComponent { diff --git a/app/soapbox/features/status/containers/detailed_status_container.js b/app/soapbox/features/status/containers/detailed_status_container.js index f47781ee2..668ba020f 100644 --- a/app/soapbox/features/status/containers/detailed_status_container.js +++ b/app/soapbox/features/status/containers/detailed_status_container.js @@ -31,7 +31,6 @@ import { openModal } from '../../../actions/modal'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { showAlertForError } from '../../../actions/alerts'; import { getSettings } from 'soapbox/actions/settings'; -import { getSoapboxConfig } from 'soapbox/actions/soapbox'; import { deactivateUserModal, deleteUserModal, deleteStatusModal, toggleStatusSensitivityModal } from 'soapbox/actions/moderation'; const messages = defineMessages({ @@ -51,7 +50,6 @@ const makeMapStateToProps = () => { const mapStateToProps = (state, props) => ({ status: getStatus(state, props), domain: state.getIn(['meta', 'domain']), - greentext: getSoapboxConfig(state).get('greentext'), }); return mapStateToProps; diff --git a/app/soapbox/features/status/index.js b/app/soapbox/features/status/index.js index bff909f8f..b53deca44 100644 --- a/app/soapbox/features/status/index.js +++ b/app/soapbox/features/status/index.js @@ -116,7 +116,6 @@ const makeMapStateToProps = () => { me: state.get('me'), displayMedia: getSettings(state).get('displayMedia'), allowedEmoji: soapbox.get('allowedEmoji'), - greentext: soapbox.get('greentext'), }; }; @@ -546,7 +545,6 @@ class Status extends ImmutablePureComponent { onToggleHidden={this.handleToggleHidden} domain={domain} showMedia={this.state.showMedia} - greentext={this.props.greentext} onToggleMediaVisibility={this.handleToggleMediaVisibility} /> diff --git a/app/soapbox/utils/greentext.js b/app/soapbox/utils/greentext.js new file mode 100644 index 000000000..543bc2f23 --- /dev/null +++ b/app/soapbox/utils/greentext.js @@ -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 `${string}`; + } else { + return string; + } + } catch(e) { + return string; + } + }); +};