Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed markdown renderer in Playground #2073

Merged
merged 6 commits into from
Jun 18, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
- Fix [#2068](https://github.com/Microsoft/BotFramework-WebChat/issues/2068). Fixed AdaptiveCards validate and rich card speak issues, by [@tdurnford](https://github.com/tdurnford) in PR [#2075](https://github.com/Microsoft/BotFramework-WebChat/pull/2075)
- Fix [#1966](https://github.com/Microsoft/BotFramework-WebChat/issues/1966). Update Localization files for es-ES, ja-JP, zh-HANS, zh-HANT, zh-YUE, by [@corinagum](https://github.com/corinagum) in PR [#2077](https://github.com/Microsoft/BotFramework-WebChat/pull/2077)
- Fix [#2078](https://github.com/microsoft/BotFramework-WebChat/issues/2078). Update Localization files for tr-TR by [@vefacaglar](https://github.com/vefacaglar)
- Fix [#2069](https://github.com/microsoft/BotFramework-WebChat/issues/2069). Fixed markdown renderer issue in Playground, by [@tdurnford](https://github.com/tdurnford) in PR[#2073](https://github.com/microsoft/BotFramework-WebChat/pull/2073)

## [4.4.1] - 2019-05-02

### Added
Expand Down
20 changes: 15 additions & 5 deletions packages/bundle/src/FullReactWebChat.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import React from 'react';
import createAdaptiveCardsAttachmentMiddleware from './adaptiveCards/createAdaptiveCardMiddleware';
import createStyleSet from './adaptiveCards/Styles/createStyleSetWithAdaptiveCards';
import defaultAdaptiveCardHostConfig from './adaptiveCards/Styles/adaptiveCardHostConfig';
import renderMarkdown from './renderMarkdown';
import defaultRenderMarkdown from './renderMarkdown';

// Add additional props to <WebChat>, so it support additional features
class FullReactWebChat extends React.Component {
Expand All @@ -27,14 +27,24 @@ class FullReactWebChat extends React.Component {
);

this.memoizeStyleSet = memoize((styleSet, styleOptions) => styleSet || createStyleSet(styleOptions));
this.memoizeRenderMarkdown = memoize((renderMarkdown, styleSet) => markdown => renderMarkdown(markdown, styleSet));
this.memoizeRenderMarkdown = memoize((renderMarkdown, { options }) => markdown =>
renderMarkdown(markdown, options)
);
}

render() {
const { adaptiveCardHostConfig, attachmentMiddleware, styleOptions, styleSet, ...otherProps } = this.props;
const {
adaptiveCardHostConfig,
attachmentMiddleware,
renderMarkdown,
styleOptions,
styleSet,
...otherProps
} = this.props;

const memoizedStyleSet = this.memoizeStyleSet(styleSet, styleOptions);
const memoizedRenderMarkdown = this.memoizeRenderMarkdown(renderMarkdown, memoizedStyleSet);
const memoizedRenderMarkdown =
renderMarkdown || this.memoizeRenderMarkdown(defaultRenderMarkdown, memoizedStyleSet);

return (
<BasicWebChat
Expand All @@ -46,7 +56,7 @@ class FullReactWebChat extends React.Component {
)}
renderMarkdown={memoizedRenderMarkdown}
styleOptions={styleOptions}
styleSet={styleSet || createStyleSet(styleOptions)}
styleSet={memoizedStyleSet}
{...otherProps}
/>
);
Expand Down
40 changes: 14 additions & 26 deletions packages/bundle/src/__tests__/renderMarkdown.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,60 +4,48 @@ import renderMarkdown from '../renderMarkdown';

describe('renderMarkdown', () => {
it('should render markdown', () => {
const styleSet = {
options: {
markdownRespectCRLF: true
}
};
expect(renderMarkdown('**Hello!**', styleSet)).not.toBeFalsy();
const options = { markdownRespectCRLF: true };
expect(renderMarkdown('**Hello!**', options)).not.toBeFalsy();
});

it('should properly render newline characters to markdown', () => {
const styleSet = {
options: {
markdownRespectCRLF: true
}
};
expect(renderMarkdown('Same line.\nSame line. \n2nd line.', styleSet)).toBe(
const options = { markdownRespectCRLF: true };
expect(renderMarkdown('Same line.\nSame line. \n2nd line.', options)).toBe(
'<p>Same line.\nSame line.<br />\n2nd line.</p>\n'
);
});

it('should respect CRFL', () => {
const styleSet = {
options: {
markdownRespectCRLF: true
}
};
expect(renderMarkdown('Same Line.\n\rSame Line.\r\n2nd line.', styleSet)).toBe(
const options = { markdownRespectCRLF: true };
expect(renderMarkdown('Same Line.\n\rSame Line.\r\n2nd line.', options)).toBe(
'<p>Same Line.\nSame Line.</p>\n<p>2nd line.</p>\n'
);
});

it('should respect LFCR', () => {
const styleSet = { options: { markdownRespectCRLF: false } };
expect(renderMarkdown('Same Line.\r\nSame Line.\n\r2nd line.', styleSet)).toBe(
const options = { markdownRespectCRLF: false };
expect(renderMarkdown('Same Line.\r\nSame Line.\n\r2nd line.', options)).toBe(
'<p>Same Line.\nSame Line.</p>\n<p>2nd line.</p>\n'
);
});

it('should render bold text', () => {
const styleSet = { options: { markdownRespectCRLF: true } };
expect(renderMarkdown('**Message with Markdown**\r\nShould see bold text.', styleSet)).toBe(
const options = { markdownRespectCRLF: true };
expect(renderMarkdown('**Message with Markdown**\r\nShould see bold text.', options)).toBe(
'<p><strong>Message with Markdown</strong></p>\n<p>Should see bold text.</p>\n'
);
});

it('should render code correctly', () => {
const styleSet = { options: { markdownRespectCRLF: true } };
expect(renderMarkdown(`\`\`\`\n${JSON.stringify({ hello: 'World!' }, null, 2)}\n\`\`\``, styleSet)).toBe(
const options = { markdownRespectCRLF: true };
expect(renderMarkdown(`\`\`\`\n${JSON.stringify({ hello: 'World!' }, null, 2)}\n\`\`\``, options)).toBe(
'<pre><code>{\n "hello": "World!"\n}\n</code></pre>\n'
);
});

it('should render sip protocol links correctly', () => {
const styleSet = { options: { markdownRespectCRLF: true } };
expect(renderMarkdown(`[[email protected]](sip:[email protected])`, styleSet)).toBe(
const options = { markdownRespectCRLF: true };
expect(renderMarkdown(`[[email protected]](sip:[email protected])`, options)).toBe(
'<p><a href="sip:[email protected]" target="_blank">[email protected]</a></p>\n'
);
});
Expand Down
2 changes: 1 addition & 1 deletion packages/bundle/src/renderMarkdown.js
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ const customMarkdownIt = new MarkdownIt({
}
});

export default function render(markdown, { options: { markdownRespectCRLF } }) {
export default function render(markdown, { markdownRespectCRLF }) {
if (markdownRespectCRLF) {
markdown = markdown.replace(/\n\r|\r\n/gu, carriageReturn => (carriageReturn === '\n\r' ? '\r\n' : '\n\r'));
}
Expand Down
4 changes: 1 addition & 3 deletions packages/playground/src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@ import memoize from 'memoize-one';
import ReactWebChat, {
createBrowserWebSpeechPonyfillFactory,
createCognitiveServicesBingSpeechPonyfillFactory,
createCognitiveServicesSpeechServicesPonyfillFactory,
renderMarkdown
createCognitiveServicesSpeechServicesPonyfillFactory
} from 'botframework-webchat';

import createDevModeActivityMiddleware from './createDevModeActivityMiddleware';
Expand Down Expand Up @@ -281,7 +280,6 @@ export default class extends React.Component {
directLine={directLine}
disabled={disabled}
locale={language}
renderMarkdown={renderMarkdown}
sendTimeout={+sendTimeout || undefined}
sendTypingIndicator={sendTypingIndicator}
store={store}
Expand Down