[MM-19344] enable toggling latex rendering in posts (mattermost#4045)

* [MM-19344] enable toggling latex rendering in posts * [MM-19344] fix i18n * improve description of toggle
outofgamut · Oct 31, 2019 · 9b7c55a · 9b7c55a
1 parent 94b192a
commit 9b7c55a
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 3 deletions.
diff --git a/components/admin_console/admin_definition.jsx b/components/admin_console/admin_definition.jsx
@@ -1975,6 +1975,14 @@ const AdminDefinition = {
  help_text: t('admin.customization.enableSVGsDesc'),
  help_text_default: 'Enable previews for SVG file attachments and allow them to appear in messages.',
  },
+ {
+ type: Constants.SettingsTypes.TYPE_BOOL,
+ key: 'ServiceSettings.EnableLatex',
+ label: t('admin.customization.enableLatexTitle'),
+ label_default: 'Enable Latex Rendering:',
+ help_text: t('admin.customization.enableLatexDesc'),
+ help_text_default: 'Enable rending of Latex code. If false, Latex code will be highlighted only.',
+ },
  {
  type: Constants.SettingsTypes.TYPE_CUSTOM,
  component: CustomUrlSchemesSetting,

diff --git a/components/latex_block/index.js b/components/latex_block/index.js
@@ -0,0 +1,17 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {connect} from 'react-redux';
+
+import {getConfig} from 'mattermost-redux/selectors/entities/general';
+
+import LatexBlock from './latex_block.jsx';
+
+function mapStateToProps(state) {
+ const config = getConfig(state);
+ return {
+ enableLatex: config.EnableLatex === 'true',
+ };
+}
+
+export default connect(mapStateToProps)(LatexBlock);
diff --git a/components/latex_block.jsx → components/latex_block/latex_block.jsx b/components/latex_block.jsx → components/latex_block/latex_block.jsx
@@ -8,6 +8,7 @@ import {FormattedMessage} from 'react-intl';
 export default class LatexBlock extends React.Component {
  static propTypes = {
  content: PropTypes.string.isRequired,
+ enableLatex: PropTypes.bool.isRequired,
  }
 
  constructor(props) {
@@ -25,7 +26,7 @@ export default class LatexBlock extends React.Component {
  }
 
  render() {
- if (this.state.katex == null) {
+ if (this.state.katex == null || !this.props.enableLatex) {
  return (
  <div
  className='post-body--code tex'
@@ -58,3 +59,7 @@ export default class LatexBlock extends React.Component {
  }
  }
 }
+
+LatexBlock.defaultProps = {
+ enableLatex: false,
+};
diff --git a/i18n/en.json b/i18n/en.json
@@ -333,6 +333,8 @@
  "admin.customization.enableEmojiPickerTitle": "Enable Emoji Picker:",
  "admin.customization.enableGifPickerDesc": "Allow users to select GIFs from the emoji picker via a Gfycat integration.",
  "admin.customization.enableGifPickerTitle": "Enable GIF Picker:",
+ "admin.customization.enableLatexDesc": "Enable rending of Latex code. If false, Latex code will be highlighted only.",
+ "admin.customization.enableLatexTitle": "Enable Latex Rendering:",
  "admin.customization.enableLinkPreviewsDesc": "Display a preview of website content, image links and YouTube links below the message when available. The server must be connected to the internet and have access through the firewall (if applicable) to the websites from which previews are expected. Users can disable these previews from Account Settings > Display > Website Link Previews.",
  "admin.customization.enableLinkPreviewsTitle": "Enable Link Previews:",
  "admin.customization.enableSVGsDesc": "Enable previews for SVG file attachments and allow them to appear in messages.",

diff --git a/utils/__snapshots__/message_html_to_component.test.jsx.snap b/utils/__snapshots__/message_html_to_component.test.jsx.snap
@@ -44,10 +44,10 @@ Array [
  </p>,
  "
 ",
- <LatexBlock
+ <Connect(LatexBlock)
  content="x^2 + y^2 = z^2"
  />,
- <LatexBlock
+ <Connect(LatexBlock)
  content="F_m - 2 = F_0 F_1 \\\\dots F_{m-1}"
  />,
  <p>