From 03d82d0f321f6c36d37228468777be12a7242ca4 Mon Sep 17 00:00:00 2001 From: Chris Camplejohn Date: Wed, 30 Nov 2016 00:24:47 +0000 Subject: [PATCH] Server side rendering issue fix with Remarkable --- site/jekyll/getting-started/tutorial.md | 9 +++++++-- tutorial-code/wwwroot/js/tutorial.jsx | 7 ++++++- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/site/jekyll/getting-started/tutorial.md b/site/jekyll/getting-started/tutorial.md index d60278c9c..92dbee089 100644 --- a/site/jekyll/getting-started/tutorial.md +++ b/site/jekyll/getting-started/tutorial.md @@ -995,11 +995,16 @@ var CommentBox = React.createClass({ }); ``` -We also need to update the `Comment` component to use `Remarkable` from either `global` or `window`, due to a bug in Remarkable: +We also need to update the `Comment` component to use `Remarkable` from either `global` or `window`, due to a bug in Remarkable. We will do this by creating a function to create an instance of `Remarkable` and then calling it from the `Comment` component: ```javascript{3} +function createRemarkable() { + var remarkable = (("undefined" != typeof global) && (global.Remarkable)) ? global.Remarkable : window.Remarkable; + return new remarkable(); +} + var Comment = React.createClass({ rawMarkup: function () { - var md = new (global.Remarkable || window.Remarkable)(); + var md = createRemarkable(); var rawMarkup = md.render(this.props.children.toString()); return { __html: rawMarkup }; }, diff --git a/tutorial-code/wwwroot/js/tutorial.jsx b/tutorial-code/wwwroot/js/tutorial.jsx index b2079cf27..bbc08efda 100644 --- a/tutorial-code/wwwroot/js/tutorial.jsx +++ b/tutorial-code/wwwroot/js/tutorial.jsx @@ -103,9 +103,14 @@ var CommentForm = React.createClass({ } }); +function createRemarkable() { + var remarkable = (("undefined" != typeof global) && (global.Remarkable)) ? global.Remarkable : window.Remarkable; + return new remarkable(); +} + var Comment = React.createClass({ rawMarkup: function () { - var md = new (global.Remarkable || window.Remarkable)(); + var md = createRemarkable(); var rawMarkup = md.render(this.props.children.toString()); return { __html: rawMarkup }; },