feat(ui-toolkit): add editor component

packages/ui-toolkit/package.json

@@ -36,6 +36,7 @@
     "d3": "^4.10.0",
     "disable-scroll": "^0.3.0",
     "fontfaceobserver": "^2.0.13",
+    "joyent-manifest-editor": "^1.3.0",
     "lodash.difference": "^4.5.0",
     "lodash.differenceby": "^4.8.0",
     "lodash.isequal": "^4.5.0",
@@ -46,6 +47,7 @@
     "polished": "^1.6.1",
     "prop-types": "^15.5.10",
     "react-broadcast": "^0.1.2",
+    "react-bundle": "^1.0.4",
     "react-input-range": "^1.2.1",
     "react-responsive": "^1.3.4",
     "react-styled-flexboxgrid": "^2.0.3",

packages/ui-toolkit/src/base/global.js

@@ -24,7 +24,19 @@ export default ({ theme }) => css`
     ${unloadedFontFamily};
   }
 
+  html, body, #root {
+    height: 100%;
+  }
+
   .fonts-loaded body {
     ${loadedFontFamily};
   }
+
+  .CodeMirror, .ReactCodeMirror {
+    height: 100% !important;
+  }
+
+  .CodeMirror {
+    border: solid 1px ${theme.grey};
+  }
 `;

packages/ui-toolkit/src/editor/index.js

@@ -0,0 +1,46 @@
+import React, { Component } from 'react';
+import Bundle from 'react-bundle';
+
+import Loader from '../status-loader';
+
+class ManifestEditorBundle extends Component {
+  constructor() {
+    super();
+
+    this.state = {};
+
+    this.handleRender = this.handleRender.bind(this);
+  }
+  handleRender(ManifestEditor) {
+    if (ManifestEditor) {
+      setTimeout(() => {
+        this.setState({ ManifestEditor });
+      }, 80);
+    }
+
+    return <Loader />;
+  }
+  render() {
+    if (!this.state.ManifestEditor) {
+      return (
+        <Bundle load={() => import('joyent-manifest-editor')}>
+          {this.handleRender}
+        </Bundle>
+      );
+    }
+
+    const { ManifestEditor } = this.state;
+    const { children, ...rest } = this.props;
+
+    return <ManifestEditor {...rest}>{children}</ManifestEditor>;
+  }
+}
+
+export default ({ input, mode, defaultValue, readOnly }) => (
+  <ManifestEditorBundle
+    mode={mode}
+    {...input}
+    value={input.value || defaultValue}
+    readOnly={readOnly}
+  />
+);

packages/ui-toolkit/src/index.js

@@ -17,6 +17,7 @@ export { default as Modal, ModalHeading, ModalText } from './modal';
 export { default as Chevron } from './chevron';
 export { default as CloseButton } from './close-button';
 export { default as Divider } from './divider';
+export { default as Editor } from './editor';
 export { default as IconButton } from './icon-button';
 export { default as StatusLoader } from './status-loader';
 export { default as Message } from './message';