diff --git a/src/shared/components/MarkdownRenderer/index.jsx b/src/shared/components/MarkdownRenderer/index.jsx index 195049e907..06aa09768a 100644 --- a/src/shared/components/MarkdownRenderer/index.jsx +++ b/src/shared/components/MarkdownRenderer/index.jsx @@ -5,12 +5,14 @@ * * Support for additional components can be added to the above file. */ +import _ from 'lodash'; import PT from 'prop-types'; import React, { Fragment } from 'react'; +import { connect } from 'react-redux'; import md from 'utils/markdown'; -export default class MarkdownRenderer extends React.Component { +class MarkdownRenderer extends React.Component { constructor(props) { super(props); this.state = { @@ -31,10 +33,17 @@ export default class MarkdownRenderer extends React.Component { } renderElements(markdown) { - const { preview, spaceName, environment } = this.props; + const { + preview, + spaceName, + environment, + profile, + } = this.props; if (markdown) { + const compiled = _.template(markdown, { variable: 'profile' }); + const interpolated = compiled(profile); this.setState({ - elements: md(markdown, { preview, spaceName, environment }), + elements: md(interpolated, { preview, spaceName, environment }), }); } } @@ -58,6 +67,7 @@ MarkdownRenderer.defaultProps = { preview: false, spaceName: null, environment: null, + profile: {}, }; MarkdownRenderer.propTypes = { @@ -65,4 +75,16 @@ MarkdownRenderer.propTypes = { preview: PT.bool, spaceName: PT.string, environment: PT.string, + profile: PT.shape(), }; + +function mapStateToProps(state) { + const profile = state.auth && state.auth.profile ? { ...state.auth.profile } : {}; + return { profile }; +} + +const MarkdownRendererContainer = connect( + mapStateToProps, +)(MarkdownRenderer); + +export default MarkdownRendererContainer;