Fixed markdown renderer in Playground (microsoft#2073)

* Fixed markdown renderer in Playground * Updated CHANGELOG.md * Fixed markdown renderer in Playground * Updated CHANGELOG.md * Modified renderMarkdown function
corinagum · Jun 19, 2019 · 0fec2a1 · 0fec2a1
1 parent 010df41
commit 0fec2a1
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 35 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -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

diff --git a/packages/bundle/src/FullReactWebChat.js b/packages/bundle/src/FullReactWebChat.js
@@ -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 {
@@ -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
@@ -46,7 +56,7 @@ class FullReactWebChat extends React.Component {
         )}
         renderMarkdown={memoizedRenderMarkdown}
         styleOptions={styleOptions}
-        styleSet={styleSet || createStyleSet(styleOptions)}
+        styleSet={memoizedStyleSet}
         {...otherProps}
       />
     );

diff --git a/packages/bundle/src/__tests__/renderMarkdown.spec.js b/packages/bundle/src/__tests__/renderMarkdown.spec.js
@@ -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'
     );
   });

diff --git a/packages/bundle/src/renderMarkdown.js b/packages/bundle/src/renderMarkdown.js
@@ -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'));
   }

diff --git a/packages/playground/src/App.js b/packages/playground/src/App.js
@@ -5,8 +5,7 @@ import memoize from 'memoize-one';
 import ReactWebChat, {
   createBrowserWebSpeechPonyfillFactory,
   createCognitiveServicesBingSpeechPonyfillFactory,
-  createCognitiveServicesSpeechServicesPonyfillFactory,
-  renderMarkdown
+  createCognitiveServicesSpeechServicesPonyfillFactory
 } from 'botframework-webchat';
 
 import createDevModeActivityMiddleware from './createDevModeActivityMiddleware';
@@ -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}