Merge pull request #1543 from GitbookIO/dream

React for rendering website with plugins

1 files changed, 77 insertions, 0 deletions

diff --git a/packages/gitbook-core/src/components/HTMLContent.js b/packages/gitbook-core/src/components/HTMLContent.js
new file mode 100644
index 0000000..9d15398
--- /dev/null
+++ b/packages/gitbook-core/src/components/HTMLContent.js
@@ -0,0 +1,77 @@
+const React = require('react');
+const ReactSafeHtml = require('react-safe-html');
+const { DOMProperty } = require('react-dom/lib/ReactInjection');
+const htmlTags = require('html-tags');
+const entities = require('entities');
+
+const { InjectedComponent } = require('./InjectedComponent');
+
+DOMProperty.injectDOMPropertyConfig({
+    Properties: {
+        align: DOMProperty.MUST_USE_ATTRIBUTE
+    },
+    isCustomAttribute: (attributeName) => {
+        return attributeName === 'align';
+    }
+});
+
+/*
+    HTMLContent is a container for the page HTML that parse the content and
+    render the right block.
+    All html elements can be extended using the injected component.
+ */
+
+function inject(injectedProps, Component) {
+    return (props) => {
+        const cleanProps = {
+            ...props,
+            className: props['class']
+        };
+        delete cleanProps['class'];
+
+        return (
+            <InjectedComponent {...injectedProps(cleanProps)}>
+                <Component {...cleanProps} />
+            </InjectedComponent>
+        );
+    };
+}
+
+const COMPONENTS = {
+    // Templating blocks are exported as <xblock name="youtube" props="{}" />
+    'xblock': inject(
+        ({name, props}) => {
+            props = entities.decodeHTML(props);
+            return {
+                matching: { role: `block:${name}` },
+                props: JSON.parse(props)
+            };
+        },
+        props => <div {...props} />
+    )
+};
+
+htmlTags.forEach(tag => {
+    COMPONENTS[tag] = inject(
+        props => {
+            return {
+                matching: { role: `html:${tag}` },
+                props
+            };
+        },
+        props => React.createElement(tag, props)
+    );
+});
+
+const HTMLContent = React.createClass({
+    propTypes: {
+        html: React.PropTypes.string.isRequired
+    },
+
+    render() {
+        const { html } = this.props;
+        return <ReactSafeHtml html={html} components={COMPONENTS} />;
+    }
+});
+
+module.exports = HTMLContent;