From 4447a9c610db9c0fd0a4ad32e77148ec347bf90e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= <mail@sergioramos.me>
Date: Wed, 27 Sep 2017 15:22:01 +0100
Subject: [PATCH] feat(ui-toolkit): add editor component

---
 packages/ui-toolkit/package.json        |  2 ++
 packages/ui-toolkit/src/base/global.js  | 12 +++++++
 packages/ui-toolkit/src/editor/index.js | 46 +++++++++++++++++++++++++
 packages/ui-toolkit/src/index.js        |  1 +
 4 files changed, 61 insertions(+)
 create mode 100644 packages/ui-toolkit/src/editor/index.js

diff --git a/packages/ui-toolkit/package.json b/packages/ui-toolkit/package.json
index e9f6e093..3578d037 100644
--- a/packages/ui-toolkit/package.json
+++ b/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",
diff --git a/packages/ui-toolkit/src/base/global.js b/packages/ui-toolkit/src/base/global.js
index 1c64ff91..b8cb4f17 100644
--- a/packages/ui-toolkit/src/base/global.js
+++ b/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};
+  }
 `;
diff --git a/packages/ui-toolkit/src/editor/index.js b/packages/ui-toolkit/src/editor/index.js
new file mode 100644
index 00000000..80398c2d
--- /dev/null
+++ b/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}
+  />
+);
diff --git a/packages/ui-toolkit/src/index.js b/packages/ui-toolkit/src/index.js
index 8ad84875..a79abdb3 100644
--- a/packages/ui-toolkit/src/index.js
+++ b/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';