From 53858f7eb8b7ab7b9f8717d9b698d9ebe67e9dfd Mon Sep 17 00:00:00 2001
From: TJ Durnford <tjdford@gmail.com>
Date: Tue, 11 Jun 2019 15:50:25 -0700
Subject: [PATCH 1/5] Fixed markdown renderer in Playground

---
 CHANGELOG.md                            |  1 +
 packages/bundle/src/FullReactWebChat.js | 14 +++++++++++---
 packages/playground/src/App.js          |  4 +---
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4bcfd4c412..cc9308ed8a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -50,6 +50,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Fix [#2057](https://github.com/Microsoft/BotFramework-WebChat/issues/2057). Added sip protocol to sanitize HTML options, by [@tdurnford](https://github.com/tdurnford) in PR [#2061](https://github.com/Microsoft/BotFramework-WebChat/pull/2061)
 -  Fix [#2062](https://github.com/Microsoft/BotFramework-WebChat/issues/2062). Fixed markdown rendering issue in cards, by [@tdurnford](https://github.com/tdurnford) in PR [#2063](https://github.com/Microsoft/BotFramework-WebChat/pull/2063)
 -  Fix [#1896](https://github.com/microsoft/BotFramework-WebChat/issues/1896). Added data schema to render base64 images, by [@denscollo](https://github.com/denscollo) in PR[#2067](https://github.com/microsoft/BotFramework-WebChat/pull/2067)
+-  Fix [#2069](https://github.com/microsoft/BotFramework-WebChat/issues/2069). Fixed markdown renderer issue in Playground, by [@tdurnford](https://github.com/tdurnford) in PR[#xxx](https://github.com/microsoft/BotFramework-WebChat/pull/xxx)
 
 ## [4.4.1] - 2019-05-02
 
diff --git a/packages/bundle/src/FullReactWebChat.js b/packages/bundle/src/FullReactWebChat.js
index c82e0b566d..7dea5ad852 100644
--- 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 {
@@ -31,10 +31,18 @@ class FullReactWebChat extends React.Component {
   }
 
   render() {
-    const { adaptiveCardHostConfig, attachmentMiddleware, styleOptions, styleSet, ...otherProps } = this.props;
+    const {
+      adaptiveCardHostConfig,
+      attachmentMiddleware,
+      styleOptions,
+      styleSet,
+      renderMarkdown,
+      ...otherProps
+    } = this.props;
 
     const memoizedStyleSet = this.memoizeStyleSet(styleSet, styleOptions);
-    const memoizedRenderMarkdown = this.memoizeRenderMarkdown(renderMarkdown, memoizedStyleSet);
+    const memoizedRenderMarkdown =
+      renderMarkdown || this.memoizeRenderMarkdown(defaultRenderMarkdown, memoizedStyleSet.options.markdown);
 
     return (
       <BasicWebChat
diff --git a/packages/playground/src/App.js b/packages/playground/src/App.js
index c027940753..d01a58a2d6 100644
--- 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}

From 93cc7f309e1a61ec969d5bbdbb4b856da10607fd Mon Sep 17 00:00:00 2001
From: TJ Durnford <tjdford@gmail.com>
Date: Wed, 12 Jun 2019 13:43:41 -0700
Subject: [PATCH 2/5] Updated CHANGELOG.md

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cc9308ed8a..76bb968d2f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -50,7 +50,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Fix [#2057](https://github.com/Microsoft/BotFramework-WebChat/issues/2057). Added sip protocol to sanitize HTML options, by [@tdurnford](https://github.com/tdurnford) in PR [#2061](https://github.com/Microsoft/BotFramework-WebChat/pull/2061)
 -  Fix [#2062](https://github.com/Microsoft/BotFramework-WebChat/issues/2062). Fixed markdown rendering issue in cards, by [@tdurnford](https://github.com/tdurnford) in PR [#2063](https://github.com/Microsoft/BotFramework-WebChat/pull/2063)
 -  Fix [#1896](https://github.com/microsoft/BotFramework-WebChat/issues/1896). Added data schema to render base64 images, by [@denscollo](https://github.com/denscollo) in PR[#2067](https://github.com/microsoft/BotFramework-WebChat/pull/2067)
--  Fix [#2069](https://github.com/microsoft/BotFramework-WebChat/issues/2069). Fixed markdown renderer issue in Playground, by [@tdurnford](https://github.com/tdurnford) in PR[#xxx](https://github.com/microsoft/BotFramework-WebChat/pull/xxx)
+-  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
 

From d71ca2e7e05f78030344a70515d4d03be6ae01e7 Mon Sep 17 00:00:00 2001
From: TJ Durnford <tjdford@gmail.com>
Date: Tue, 11 Jun 2019 15:50:25 -0700
Subject: [PATCH 3/5] Fixed markdown renderer in Playground

---
 CHANGELOG.md                            |  2 ++
 packages/bundle/src/FullReactWebChat.js | 14 +++++++++++---
 packages/playground/src/App.js          |  4 +---
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 103f5f4cfa..c28a1cd958 100644
--- 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[#xxx](https://github.com/microsoft/BotFramework-WebChat/pull/xxx)
+
 ## [4.4.1] - 2019-05-02
 
 ### Added
diff --git a/packages/bundle/src/FullReactWebChat.js b/packages/bundle/src/FullReactWebChat.js
index c82e0b566d..7dea5ad852 100644
--- 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 {
@@ -31,10 +31,18 @@ class FullReactWebChat extends React.Component {
   }
 
   render() {
-    const { adaptiveCardHostConfig, attachmentMiddleware, styleOptions, styleSet, ...otherProps } = this.props;
+    const {
+      adaptiveCardHostConfig,
+      attachmentMiddleware,
+      styleOptions,
+      styleSet,
+      renderMarkdown,
+      ...otherProps
+    } = this.props;
 
     const memoizedStyleSet = this.memoizeStyleSet(styleSet, styleOptions);
-    const memoizedRenderMarkdown = this.memoizeRenderMarkdown(renderMarkdown, memoizedStyleSet);
+    const memoizedRenderMarkdown =
+      renderMarkdown || this.memoizeRenderMarkdown(defaultRenderMarkdown, memoizedStyleSet.options.markdown);
 
     return (
       <BasicWebChat
diff --git a/packages/playground/src/App.js b/packages/playground/src/App.js
index c027940753..d01a58a2d6 100644
--- 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}

From 9e1d76b19bfa6b20b82f4b69c29fc1281cb2f492 Mon Sep 17 00:00:00 2001
From: TJ Durnford <tjdford@gmail.com>
Date: Wed, 12 Jun 2019 13:43:41 -0700
Subject: [PATCH 4/5] Updated CHANGELOG.md

---
 CHANGELOG.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c28a1cd958..aea6feca65 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -54,7 +54,7 @@ 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[#xxx](https://github.com/microsoft/BotFramework-WebChat/pull/xxx)
+-  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
 

From 6cea47497f16b1cc0a37baeb03b703710fa92b4f Mon Sep 17 00:00:00 2001
From: TJ Durnford <tjdford@gmail.com>
Date: Mon, 17 Jun 2019 16:28:15 -0700
Subject: [PATCH 5/5] Modified renderMarkdown function

---
 packages/bundle/src/FullReactWebChat.js       | 10 +++--
 .../src/__tests__/renderMarkdown.spec.js      | 40 +++++++------------
 packages/bundle/src/renderMarkdown.js         |  2 +-
 3 files changed, 21 insertions(+), 31 deletions(-)

diff --git a/packages/bundle/src/FullReactWebChat.js b/packages/bundle/src/FullReactWebChat.js
index 7dea5ad852..e8587abb85 100644
--- a/packages/bundle/src/FullReactWebChat.js
+++ b/packages/bundle/src/FullReactWebChat.js
@@ -27,22 +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,
+      renderMarkdown,
       styleOptions,
       styleSet,
-      renderMarkdown,
       ...otherProps
     } = this.props;
 
     const memoizedStyleSet = this.memoizeStyleSet(styleSet, styleOptions);
     const memoizedRenderMarkdown =
-      renderMarkdown || this.memoizeRenderMarkdown(defaultRenderMarkdown, memoizedStyleSet.options.markdown);
+      renderMarkdown || this.memoizeRenderMarkdown(defaultRenderMarkdown, memoizedStyleSet);
 
     return (
       <BasicWebChat
@@ -54,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
index 7bc45754eb..03d5c2caef 100644
--- 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(`[example@test.com](sip:example@test.com)`, styleSet)).toBe(
+    const options = { markdownRespectCRLF: true };
+    expect(renderMarkdown(`[example@test.com](sip:example@test.com)`, options)).toBe(
       '<p><a href="sip:example@test.com" target="_blank">example@test.com</a></p>\n'
     );
   });
diff --git a/packages/bundle/src/renderMarkdown.js b/packages/bundle/src/renderMarkdown.js
index 65d2eff7ff..a5c53241a9 100644
--- 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'));
   }