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/contents/properties/absolute-layout.md

@@ -2,7 +2,10 @@
 path: "docs/absolute-layout"
 title: "Absolute Layout"
 hasPlayground: true
-editableProperties: ['positionType', 'position']
 ---
 
-## Absolute Layout
+## Absolute Layout
+
+<controls prop="positionType"></controls>
+
+<controls prop="position"></controls>

website/contents/properties/align-content.md

@@ -2,7 +2,8 @@
 path: "docs/align-content"
 title: "Align Content"
 hasPlayground: true
-editableProperties: ['alignContent']
 ---
 
-## Align Content
+## Align Content
+
+<controls prop="alignContent"></controls>

website/contents/properties/align-items.md

@@ -2,7 +2,10 @@
 path: "docs/align-items"
 title: "Align Items / Self"
 hasPlayground: true
-editableProperties: ['alignItems', 'alignSelf']
 ---
 
-## Align Items / Self
+## Align Items / Self
+
+<controls prop="alignItems"></controls>
+
+<controls prop="alignSelf"></controls>

website/contents/properties/aspect-ratio.md

@@ -2,7 +2,6 @@
 path: "docs/aspect-ratio"
 title: "Aspect Ratio"
 hasPlayground: true
-editableProperties: ['aspectRatio']
 ---
 
 ## Aspect Ratio
@@ -17,4 +16,6 @@ The aspect ratio property in Yoga has the following properties:
 - Defined as the ratio between the width and the height of a node e.g. if a node has an aspect ratio of 2 then its width is twice the size of its height.
 - Respects the Min and Max dimensions of an item.
 - Has higher priority than FlexGrow
-- If AspectRatio, Width, and Height are set then the cross dimension is overridden.
+- If AspectRatio, Width, and Height are set then the cross dimension is overridden.
+
+<controls prop="aspectRatio"></controls>

website/contents/properties/flex-direction.md

@@ -2,7 +2,8 @@
 path: "docs/flex-direction"
 title: "Flex Direction"
 hasPlayground: true
-editableProperties: ['flexDirection']
 ---
 
-## Flex Direction
+## Flex Direction
+
+<controls prop="flexDirection"></controls>

website/contents/properties/flex-wrap.md

@@ -2,7 +2,8 @@
 path: "docs/flex-wrap"
 title: "Flex Wrap"
 hasPlayground: true
-editableProperties: ['flexWrap']
 ---
 
-## Flex Wrap
+## Flex Wrap
+
+<controls prop="flexWrap"></controls>

website/contents/properties/flex.md

@@ -2,7 +2,6 @@
 path: "docs/flex"
 title: "Flex Basis, Grow, and Shrink"
 hasPlayground: true
-editableProperties: ['flexGrow', 'flexShrink', 'flexBasis']
 ---
 
 ## Flex Basis, Grow, and Shrink
@@ -16,6 +15,8 @@ distribute any remaining space according to the flex grow values specified by it
 flex grow accepts any floating point value >= 0, with 0 being the default value.
 A container will distribute any remaining space among its children weighted by the child’s flex grow value.
 
+<controls prop="flexGrow"></controls>
+
 ### Flex Shrink
 
 Flex shrink describes how to shrink children along the main axis in the
@@ -27,11 +28,15 @@ These two properties also work well together by allowing children to grow and sh
 flex shrink accepts any floating point value >= 0, with 1 being the default value.
 A container will shrink its children weighted by the child’s flex shrink value.
 
+<controls prop="flexShrink"></controls>
+
 ### Flex Basis
 
 Flex basis is an axis-independent way of providing the default size of an item
 along the main axis. Setting the flex basis of a child is similar to setting the Width of that
 child if its parent is a container with FlexDirection = row or setting the Height of a child
-if its parent is a container with FlexDirection = column. The flex basis of an item is the 
+if its parent is a container with FlexDirection = column. The flex basis of an item is the
 efault size of that item, the size of the item before any flex grow and flex shrink
 calculations are performed.
+
+<controls prop="flexBasis"></controls>

website/contents/properties/justify-content.md

@@ -2,7 +2,8 @@
 path: "docs/justify-content"
 title: "Justify Content"
 hasPlayground: true
-editableProperties: ['justifyContent']
 ---
 
-## Justify Content
+## Justify Content
+
+<controls prop="justifyContent"></controls>

website/contents/properties/layout-direction.md

@@ -2,7 +2,8 @@
 path: "docs/layout-direction"
 title: "Layout Direction"
 hasPlayground: true
-editableProperties: ['layoutDirection']
 ---
 
-## Layout Direction
+## Layout Direction
+
+<controls prop="layoutDirection"></controls>

website/contents/properties/margins-paddings-borders.md

@@ -2,7 +2,6 @@
 path: "docs/margins-paddings-borders"
 title: "Margins, Paddings, and Borders"
 hasPlayground: true
-editableProperties: ['margin', 'padding', 'border']
 ---
 
 ## Margins, Paddings, and Borders
@@ -14,6 +13,8 @@ will offset itself from the bounds of its parent but also offset the
 location of any siblings. The margin of a node contributes to the total size
 of its parent if the parent is auto sized.
 
+<controls prop="margin"></controls>
+
 ### Padding
 
 Padding affect the size of the node it is applied to. Padding in Yoga acts as if
@@ -21,6 +22,8 @@ Padding affect the size of the node it is applied to. Padding in Yoga acts as if
 of an element if it has an explicit size set. For auto sized nodes padding will increase
 the size of the node as well as offset the location of any children.
 
+<controls prop="padding"></controls>
+
 ### Border
 
 Border in Yoga acts exactly like padding and only exists as a seperate property so
@@ -28,3 +31,4 @@ that higher level frameworks get a hint as to how thick to draw a border. Yoga h
 does not do any drawing so just uses this information during layout where border
 acts exactly like padding.
 
+<controls prop="border"></controls>

website/contents/properties/min-max.md

@@ -2,7 +2,14 @@
 path: "docs/min-max"
 title: "Max / Min Width and Height"
 hasPlayground: true
-editableProperties: ['minWidth', 'minHeight', 'maxWidth', 'maxHeight']
 ---
 
-## Max / Min Width and Height
+## Max / Min Width and Height
+
+<controls prop="minWidth"></controls>
+
+<controls prop="minHeight"></controls>
+
+<controls prop="maxWidth"></controls>
+
+<controls prop="maxHeight"></controls>

website/contents/properties/width-height.md

@@ -2,7 +2,11 @@
 path: "docs/width-height"
 title: "Width and Height"
 hasPlayground: true
-editableProperties: ['width', 'height']
 ---
 
-## Width and Height
+## Width and Height
+
+
+<controls prop="width"></controls>
+
+<controls prop="height"></controls>

website/gatsby-node.js

@@ -25,7 +25,6 @@ exports.createPages = ({boundActionCreators, graphql}) => {
             frontmatter {
               path
               hasPlayground
-              editableProperties
             }
             html
           }

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>
+    );
+  }
+}