1 files changed, 83 insertions, 0 deletions
diff --git a/packages/gitbook-core/src/components/UnsafeComponent.js b/packages/gitbook-core/src/components/UnsafeComponent.js
new file mode 100644
index 0000000..de62471
--- /dev/null
+++ b/packages/gitbook-core/src/components/UnsafeComponent.js
@@ -0,0 +1,83 @@
+/* eslint-disable no-console */
+const React = require('react');
+const ReactDOM = require('react-dom');
+const ReactRedux = require('react-redux');
+
+/*
+ Public: Renders a component provided via the `component` prop, and ensures that
+ failures in the component's code do not cause state inconsistencies elsewhere in
+ the application. This component is used by {InjectedComponent} and
+ {InjectedComponentSet} to isolate third party code that could be buggy.
+
+ Occasionally, having your component wrapped in {UnsafeComponent} can cause style
+ issues. For example, in a Flexbox, the `div.unsafe-component-wrapper` will cause
+ your `flex` and `order` values to be one level too deep. For these scenarios,
+ UnsafeComponent looks for `containerStyles` on your React component and attaches
+ them to the wrapper div.
+ */
+
+
+const UnsafeComponent = React.createClass({
+    propTypes: {
+        Component: React.PropTypes.func.isRequired,
+        props:     React.PropTypes.object
+    },
+
+    componentDidMount() {
+        return this.renderInjected();
+    },
+
+    componentDidUpdate() {
+        return this.renderInjected();
+    },
+
+    componentWillUnmount() {
+        return this.unmountInjected();
+    },
+
+    renderInjected() {
+        const { Component, props } = this.props;
+        const { store } = this.context;
+
+        const node = ReactDOM.findDOMNode(this);
+
+        try {
+            this.injected = (
+                <ReactRedux.Provider store={store}>
+                    <Component {...props}/>
+                </ReactRedux.Provider>
+            );
+
+            ReactDOM.render(this.injected, node);
+        } catch (err) {
+            console.error(err);
+        }
+    },
+
+    unmountInjected() {
+        try {
+            const node = ReactDOM.findDOMNode(this);
+            return ReactDOM.unmountComponentAtNode(node);
+        } catch (err) {
+            console.error(err);
+        }
+    },
+
+    focus() {
+        if (this.injected.focus != null) {
+            return this.injected.focus();
+        }
+    },
+
+    blur() {
+        if (this.injected.blur != null) {
+            return this.injected.blur();
+        }
+    },
+
+    render() {
+        return <div name="unsafe-component-wrapper" />;
+    }
+});
+
+module.exports = ReactRedux.connect(UnsafeComponent);