From 55086da91c02811f70aa2ab9c0708fe8d8fa778c Mon Sep 17 00:00:00 2001
From: Robert Wagner <rwwagner90@gmail.com>
Date: Thu, 8 Aug 2019 21:22:25 -0400
Subject: [PATCH] Support passing elements for text (#493)

Fixes #492
---
 demo/js/welcome.js                            |  5 ++++-
 .../shepherd-content/shepherd-text/index.jsx  | 21 +++++++++++++++++--
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/demo/js/welcome.js b/demo/js/welcome.js
index ad502d38e..fa17ac680 100644
--- a/demo/js/welcome.js
+++ b/demo/js/welcome.js
@@ -63,11 +63,14 @@
       useModalOverlay: true
     });
 
+    const element = document.createElement('p');
+    element.innerText = 'Including Shepherd is easy! Just include shepherd.js. The styles are bundled with the JS.';
+
     // These steps should be added via `addSteps`
     const steps = [
       {
         title: 'Including',
-        text: 'Including Shepherd is easy! Just include shepherd.js. The styles are bundled with the JS.',
+        text: element,
         attachTo: {
           element: '.hero-including',
           on: 'bottom'
diff --git a/src/js/components/shepherd-content/shepherd-text/index.jsx b/src/js/components/shepherd-content/shepherd-text/index.jsx
index cbf3b2d11..ee60256c6 100644
--- a/src/js/components/shepherd-content/shepherd-text/index.jsx
+++ b/src/js/components/shepherd-content/shepherd-text/index.jsx
@@ -1,9 +1,26 @@
 import preact from 'preact';
-import { isFunction } from '../../../utils/type-check';
+import { isElement, isFunction } from '../../../utils/type-check';
 
 const { Component } = preact;
 
 export default class ShepherdText extends Component {
+  shouldComponentUpdate() {
+    return false;
+  }
+
+  componentDidMount() {
+    const { step } = this.props;
+    let { text } = step.options;
+
+    if (isFunction(text)) {
+      text = text.call(step);
+    }
+
+    if (isElement(text)) {
+      this.base.appendChild(text);
+    }
+  }
+
   render(props) {
     const { descriptionId, step, styles } = props;
     let { text } = step.options;
@@ -14,7 +31,7 @@ export default class ShepherdText extends Component {
 
     return <div
       className={styles.text.trim()}
-      dangerouslySetInnerHTML={{ __html: text }}
+      dangerouslySetInnerHTML={{ __html: !isElement(text) ? text : null }}
       id={descriptionId}
     />;
   }