From fe5db123744c380bdddb36f196dd6cf7518d41cf Mon Sep 17 00:00:00 2001 From: Harrison Healey Date: Mon, 30 May 2016 07:57:44 -0400 Subject: [PATCH] PLT-3080 Added ability to disable formatting for debugging and updated marked to fix errors (#3141) * Removed injectIntl from user_settings_advanced.jsx * Added setting to disable formatting for debugging * Updated fork of marked --- .../user_settings/user_settings_advanced.jsx | 216 +++++++++++++----- webapp/i18n/en.json | 6 +- webapp/package.json | 2 +- webapp/utils/text_formatting.jsx | 12 +- 4 files changed, 171 insertions(+), 65 deletions(-) diff --git a/webapp/components/user_settings/user_settings_advanced.jsx b/webapp/components/user_settings/user_settings_advanced.jsx index dc5bd1c0e3..558eb608e5 100644 --- a/webapp/components/user_settings/user_settings_advanced.jsx +++ b/webapp/components/user_settings/user_settings_advanced.jsx @@ -8,57 +8,15 @@ import SettingItemMax from '../setting_item_max.jsx'; import Constants from 'utils/constants.jsx'; import PreferenceStore from 'stores/preference_store.jsx'; import UserStore from 'stores/user_store.jsx'; +import * as Utils from 'utils/utils.jsx'; -import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'react-intl'; +import {FormattedMessage} from 'react-intl'; const PreReleaseFeatures = Constants.PRE_RELEASE_FEATURES; -const holders = defineMessages({ - sendTitle: { - id: 'user.settings.advance.sendTitle', - defaultMessage: 'Send messages on Ctrl + Enter' - }, - on: { - id: 'user.settings.advance.on', - defaultMessage: 'On' - }, - off: { - id: 'user.settings.advance.off', - defaultMessage: 'Off' - }, - preReleaseTitle: { - id: 'user.settings.advance.preReleaseTitle', - defaultMessage: 'Preview pre-release features' - }, - feature: { - id: 'user.settings.advance.feature', - defaultMessage: ' Feature ' - }, - features: { - id: 'user.settings.advance.features', - defaultMessage: ' Features ' - }, - enabled: { - id: 'user.settings.advance.enabled', - defaultMessage: 'enabled' - }, - MARKDOWN_PREVIEW: { - id: 'user.settings.advance.markdown_preview', - defaultMessage: 'Show markdown preview option in message input box' - }, - EMBED_PREVIEW: { - id: 'user.settings.advance.embed_preview', - defaultMessage: 'Show preview snippet of links below message' - }, - EMBED_TOGGLE: { - id: 'user.settings.advance.embed_toggle', - defaultMessage: 'Show toggle for all embed previews' - } -}); - import React from 'react'; -class AdvancedSettingsDisplay extends React.Component { +export default class AdvancedSettingsDisplay extends React.Component { constructor(props) { super(props); @@ -74,6 +32,11 @@ class AdvancedSettingsDisplay extends React.Component { Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'send_on_ctrl_enter', 'false' + ), + formatting: PreferenceStore.get( + Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, + 'formatting', + 'true' ) }; @@ -156,9 +119,54 @@ class AdvancedSettingsDisplay extends React.Component { this.props.updateSection(section); } + renderOnOffLabel(enabled) { + if (enabled === 'false') { + return ( + + ); + } + + return ( + + ); + } + + renderFeatureLabel(feature) { + switch (feature) { + case 'MARKDOWN_PREVIEW': + return ( + + ); + case 'EMBED_PREVIEW': + return ( + + ); + case 'EMBED_TOGGLE': + return ( + + ); + default: + return null; + } + } + render() { const serverError = this.state.serverError || null; - const {formatMessage} = this.props.intl; let ctrlSendSection; if (this.props.activeSection === 'advancedCtrlSend') { @@ -208,10 +216,14 @@ class AdvancedSettingsDisplay extends React.Component { ]; - ctrlSendSection = ( + } inputs={inputs} submit={() => this.handleSubmit('send_on_ctrl_enter')} server_error={serverError} @@ -224,13 +236,92 @@ class AdvancedSettingsDisplay extends React.Component { } else { ctrlSendSection = ( + } + describe={this.renderOnOffLabel(this.state.settings.send_on_ctrl_enter)} updateSection={() => this.props.updateSection('advancedCtrlSend')} /> ); } + let formattingSection; + if (this.props.activeSection === 'formatting') { + formattingSection = ( + + } + inputs={ +
+
+ +
+
+
+ +
+
+
+
+ +
+
+ } + submit={() => this.handleSubmit('formatting')} + server_error={serverError} + updateSection={(e) => { + this.updateSection(''); + e.preventDefault(); + }} + /> + ); + } else { + formattingSection = ( + + } + describe={this.renderOnOffLabel(this.state.settings.formatting)} + updateSection={() => this.props.updateSection('formatting')} + /> + ); + } + let previewFeaturesSection; let previewFeaturesSectionDivider; if (this.state.preReleaseFeaturesKeys.length > 0) { @@ -254,7 +345,7 @@ class AdvancedSettingsDisplay extends React.Component { this.toggleFeature(feature.label, e.target.checked); }} /> - {formatMessage(holders[key])} + {this.renderFeatureLabel(key)} @@ -270,10 +361,14 @@ class AdvancedSettingsDisplay extends React.Component { /> ); - previewFeaturesSection = ( + } inputs={inputs} submit={this.saveEnabledFeatures} server_error={serverError} @@ -286,8 +381,14 @@ class AdvancedSettingsDisplay extends React.Component { } else { previewFeaturesSection = ( + } updateSection={() => this.props.updateSection('advancedPreviewFeatures')} /> ); @@ -331,6 +432,8 @@ class AdvancedSettingsDisplay extends React.Component {
{ctrlSendSection} +
+ {formattingSection} {previewFeaturesSectionDivider} {previewFeaturesSection}
@@ -341,7 +444,6 @@ class AdvancedSettingsDisplay extends React.Component { } AdvancedSettingsDisplay.propTypes = { - intl: intlShape.isRequired, user: React.PropTypes.object, updateSection: React.PropTypes.func, updateTab: React.PropTypes.func, @@ -349,5 +451,3 @@ AdvancedSettingsDisplay.propTypes = { closeModal: React.PropTypes.func.isRequired, collapseModal: React.PropTypes.func.isRequired }; - -export default injectIntl(AdvancedSettingsDisplay); diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json index 609de5a75c..34d8fed5f8 100644 --- a/webapp/i18n/en.json +++ b/webapp/i18n/en.json @@ -1226,9 +1226,9 @@ "upload_overlay.info": "Drop a file to upload it.", "user.settings.advance.embed_preview": "Show preview snippet of links below message", "user.settings.advance.embed_toggle": "Show toggle for all embed previews", - "user.settings.advance.enabled": "enabled", - "user.settings.advance.feature": " Feature ", - "user.settings.advance.features": " Features ", + "user.settings.advance.enabledFeatures": "{count, number} {count, plural, one {Feature} other {Features}} Enabled", + "user.settings.advance.formattingTitle": "Enable Post Formatting", + "user.settings.advance.formattingDesc": "If enabled, posts will be formatted to create links, show emoji, style the text, and add line breaks. By default, this setting is enabled. Changing this setting requires the page to be refreshed.", "user.settings.advance.markdown_preview": "Show markdown preview option in message input box", "user.settings.advance.off": "Off", "user.settings.advance.on": "On", diff --git a/webapp/package.json b/webapp/package.json index deecbc1a81..8e2063c847 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -16,7 +16,7 @@ "jasny-bootstrap": "3.1.3", "jquery": "2.2.3", "keymirror": "0.1.1", - "marked": "mattermost/marked#a16c38a3c7cdaaefc33922812b42bdf8bcfaa127", + "marked": "mattermost/marked#2d92082cd542dc0adc175a1407194f6a4c3cb621", "match-at": "0.1.0", "mattermost": "mattermost/mattermost-javascript#master", "match-at": "0.1.0", diff --git a/webapp/utils/text_formatting.jsx b/webapp/utils/text_formatting.jsx index a4622ad9e1..024e8e26e6 100644 --- a/webapp/utils/text_formatting.jsx +++ b/webapp/utils/text_formatting.jsx @@ -6,6 +6,7 @@ import {browserHistory} from 'react-router'; import Constants from './constants.jsx'; import * as Emoticons from './emoticons.jsx'; import * as Markdown from './markdown.jsx'; +import PreferenceStore from 'stores/preference_store.jsx'; import UserStore from 'stores/user_store.jsx'; import twemoji from 'twemoji'; import * as Utils from './utils.jsx'; @@ -19,13 +20,18 @@ import * as Utils from './utils.jsx'; // - emoticons - Enables emoticon parsing. Defaults to true. // - markdown - Enables markdown parsing. Defaults to true. export function formatText(text, options = {}) { - let output; + let output = text; + + // would probably make more sense if it was on the calling components, but this option is intended primarily for debugging + if (PreferenceStore.get(Constants.Preferences.CATEGORY_ADVANCED_SETTINGS, 'formatting', 'true') === 'false') { + return output; + } if (!('markdown' in options) || options.markdown) { // the markdown renderer will call doFormatText as necessary - output = Markdown.format(text, options); + output = Markdown.format(output, options); } else { - output = sanitizeHtml(text); + output = sanitizeHtml(output); output = doFormatText(output, options); }