Inline controls for docs

Summary:
Adding inline controls in markdown using:
```
<controls prop="flexWrap"></controls>
```

Reviewed By: emilsjolander

Differential Revision: D6987150

fbshipit-source-id: 28def12df702ba5d5d5b6a83dd1cb907716d1b1c

website/src/components/DocsSidebar.js

@@ -10,13 +10,67 @@
  * @format
  */
 
-import React from 'react';
+import React, {Component} from 'react';
+import ReactDOM from 'react-dom';
+import EditValue from '../components/Playground/EditValue';
+import Link from 'gatsby-link';
 import './DocsSidebar.css';
+import type {LayoutRecordT} from './Playground/LayoutRecord';
+
+const TAG_PATTERN = /<controls prop="([A-Za-z]+)"><\/controls>/gi;
 
 type Props = {
-  children: any,
+  markdown: string,
+  onChange: (property: string, value: any) => void,
+  layout: LayoutRecordT,
 };
 
-export default (props: Props) => (
-  <div className="DocsSidebar">{props.children}</div>
-);
+export default class DocsSidebar extends Component<Props> {
+  componentDidMount() {
+    this.renderControls(this.props);
+  }
+
+  componentWillReceiveProps(nextProps: Props) {
+    this.renderControls(nextProps);
+  }
+
+  renderControls = (props: Props) => {
+    let match;
+    while ((match = TAG_PATTERN.exec(props.markdown))) {
+      const prop = match[1];
+      const element = window.document.querySelector(
+        `controls[prop="${match[1]}"]`,
+      );
+
+      if (element) {
+        if (element.childNodes.length !== 0) {
+          console.warn(
+            `The element <controls type="${prop}"> is not empty. It's content will be replaced by the react-component mounted in this element.`,
+          );
+        }
+        ReactDOM.render(
+          <EditValue
+            property={prop}
+            value={props.layout[prop]}
+            onChange={props.onChange}
+          />,
+          element,
+        );
+      }
+    }
+  };
+
+  render() {
+    return (
+      <div className="DocsSidebar">
+        <div
+          className="markdown"
+          dangerouslySetInnerHTML={{__html: this.props.markdown}}
+        />
+        <Link to="/docs" className="overview">
+          BACK TO OVERVIEW
+        </Link>
+      </div>
+    );
+  }
+}

website/src/templates/withPlayground.js

@@ -10,7 +10,7 @@
  * @format
  */
 
-import React from 'react';
+import React, {Component} from 'react';
 import Page from '../components/Page';
 import Playground from '../components/Playground';
 import DocsSidebar from '../components/DocsSidebar';
@@ -19,31 +19,30 @@ import Link from 'gatsby-link';
 import {Button, Icon, Row, Col} from 'antd';
 import './index.css';
 
-export default ({pathContext}) => (
-  <Page className="doc-block playground">
-    <Playground
-      selectedNodePath={[]}
-      showGuides={false}
-      renderSidebar={(layout, onChange) => (
-        <DocsSidebar>
-          <div className="markdown" dangerouslySetInnerHTML={{__html: pathContext.html}} />
-          
-          {(pathContext.frontmatter.editableProperties || []).map(prop => (
-            <div key={prop} className="prop">
-              <h4>{prop}</h4>
-              <EditValue
-                property={prop}
-                value={layout[prop]}
-                onChange={onChange}
-              />
-            </div>
-          ))}
-          
-          <Link to="/docs" className="overview">
-            BACK TO OVERVIEW
-          </Link>
-        </DocsSidebar>
-      )}
-    />
-  </Page>
-);
+type Props = {
+  pathContext: {
+    html: string,
+    frontmatter: {},
+  },
+};
+const REGEX = /<controls prop="([A-Za-z]+)"\s?\/>/gi;
+
+export default class withPlayground extends Component<Props> {
+  render() {
+    return (
+      <Page className="doc-block playground">
+        <Playground
+          selectedNodePath={[]}
+          showGuides={false}
+          renderSidebar={(layout, onChange) => (
+            <DocsSidebar
+              layout={layout}
+              onChange={onChange}
+              markdown={this.props.pathContext.html}
+            />
+          )}
+        />
+      </Page>
+    );
+  }
+}