added editor with sample

demo/playground/hmr-playground.tsx

@@ -19,7 +19,9 @@ const renderRoot = (props: RedocProps) =>
 const big = window.location.search.indexOf('big') > -1;
 const swagger = window.location.search.indexOf('swagger') > -1; // compatibility mode ?
 
-const specUrl = swagger ? 'swagger.yaml' : big ? 'big-openapi.json' : 'openapi.yaml';
+let specUrl = swagger ? 'swagger.yaml' : big ? 'big-openapi.json' : 'openapi.yaml';
+specUrl = 'intent.json';
+//specUrl = 'swagger.yaml';
 
 let store;
 const options: RedocRawOptions = { nativeScrollbars: false };

package.json

@@ -74,6 +74,7 @@
     "babel-loader": "8.0.0-beta.2",
     "babel-plugin-styled-components": "^1.5.1",
     "beautify-benchmark": "^0.2.4",
+    "brace": "^0.11.1",
     "bundlesize": "^0.17.0",
     "conventional-changelog-cli": "^1.3.17",
     "copy-webpack-plugin": "^4.5.1",
@@ -88,12 +89,13 @@
     "fork-ts-checker-webpack-plugin": "^0.4.1",
     "html-webpack-plugin": "^3.1.0",
     "jest": "^22.4.3",
-    "lodash": "^4.17.4",
+    "lodash": "^4.17.5",
     "prettier": "^1.5.3",
     "prettier-eslint": "^8.8.1",
     "puppeteer": "^1.2.0",
     "raf": "^3.4.0",
     "react": "^16.3.0-alpha.2",
+    "react-ace": "^6.0.0",
     "react-dom": "^16.3.0-alpha.2",
     "rimraf": "^2.6.2",
     "shelljs": "^0.8.1",

src/components/Console/ConsoleEditor.tsx

@@ -0,0 +1,70 @@
+import { observer } from 'mobx-react';
+import * as React from 'react';
+
+import AceEditor from 'react-ace';
+
+import 'brace/mode/json';
+import 'brace/mode/curly';
+import 'brace/theme/github';
+import 'brace/theme/monokai';
+
+
+import { MediaTypeModel } from '../../services/models';
+import { MediaTypesSwitch } from '../MediaTypeSwitch/MediaTypesSwitch';
+
+import { MediaTypeSamples } from '../PayloadSamples/MediaTypeSamples';
+
+import { DropdownOrLabel } from '../DropdownOrLabel/DropdownOrLabel';
+import { InvertedSimpleDropdown, MimeLabel } from '../PayloadSamples/styled.elements';
+
+export interface ConsoleEditorProps {
+  mediaTypes: MediaTypeModel[]
+}
+
+@observer
+export class ConsoleEditor extends React.Component<ConsoleEditorProps> {
+  render() {
+    const { mediaTypes } = this.props;
+
+    if (!mediaTypes.length) {
+      return null;
+    }
+    let sample = {};
+    for (let mediaType of mediaTypes) {
+      if (mediaType.name.indexOf('json') > -1) {
+        if (mediaType.examples) {
+          sample = mediaType.examples && mediaType.examples.default;
+        }
+        break;
+      }
+    }
+
+
+    /*
+    let body = {};
+    if(mimeContent.mediaTypes && mimeContent.mediaTypes.length>0){
+      body = mimeContent.mediaTypes[0];
+      if(body.examples && body.examples.default) {
+
+      }
+    }
+    */
+    return (
+      <div>
+        <h3>ConsoleEditor</h3>
+        <AceEditor
+          tabSize={1}
+          fontSize={10}
+          mode="json"
+          theme="monokai"
+          name="request-builder-editor"
+          editorProps={{ $blockScrolling: true }}
+          value={JSON.stringify(sample, null, 2)}
+          width="100%"
+          height="400px"
+        />
+      </div>
+    );
+  }
+
+}

src/components/Console/ConsoleViewer.tsx

@@ -0,0 +1,36 @@
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import { OperationModel } from '../../services/models';
+import { PayloadSamples } from '../PayloadSamples/PayloadSamples';
+import { SourceCodeWithCopy } from '../SourceCode/SourceCode';
+import { ConsoleEditor } from './ConsoleEditor';
+
+export interface ConsoleViewerProps {
+  operation: OperationModel;
+}
+
+@observer
+export class ConsoleViewer extends React.Component<ConsoleViewerProps> {
+  operation: OperationModel;
+  visited = new Set();
+
+  render() {
+    const { operation } = this.props;
+    const requestBodyContent = operation.requestBody && operation.requestBody.content && operation.requestBody.content;
+    const hasBodySample = requestBodyContent && requestBodyContent.hasSample;
+    const samples = operation.codeSamples;
+    const mediaTypes = (requestBodyContent && requestBodyContent.mediaTypes) ? requestBodyContent.mediaTypes : [];
+
+    return (
+      <div>
+        <h3> Console </h3>
+        {hasBodySample && (
+          <ConsoleEditor mediaTypes={mediaTypes} />
+        )}
+        {samples.map(sample => (
+          <SourceCodeWithCopy lang={sample.lang} source={sample.source} />
+        ))}
+      </div>
+    );
+  }
+}

src/components/Operation/Operation.tsx

@@ -15,6 +15,7 @@ import { Parameters } from '../Parameters/Parameters';
 import { RequestSamples } from '../RequestSamples/RequestSamples';
 import { ResponsesList } from '../Responses/ResponsesList';
 import { ResponseSamples } from '../ResponseSamples/ResponseSamples';
+import { ConsoleViewer } from '../Console/ConsoleViewer';
 
 import { OperationModel as OperationType } from '../../services/models';
 
@@ -96,7 +97,9 @@ export class Operation extends React.Component<OperationProps, OperationState> {
             <DarkRightPanel>
               {!options.pathInMiddlePanel && <Endpoint operation={operation} />}
               {executeMode &&
-                <div>Execute Mode</div>
+                <div>
+                  <ConsoleViewer operation={operation} />
+                </div>
               }
               {!executeMode &&
                 <RequestSamples operation={operation} />

src/utils/loadAndBundleSpec.ts

@@ -1,18 +1,27 @@
 import * as JsonSchemaRefParser from 'json-schema-ref-parser';
 import { convertObj } from 'swagger2openapi';
 import { OpenAPISpec } from '../types';
+import { cloneDeep } from 'lodash';
 
 export async function loadAndBundleSpec(specUrlOrObject: object | string): Promise<OpenAPISpec> {
   const parser = new JsonSchemaRefParser();
-  const spec = await parser.bundle(specUrlOrObject, {
+  let spec = await parser.bundle(specUrlOrObject, {
     resolve: { http: { withCredentials: false } },
   } as object);
 
+  let v2Specs = spec;
   if (spec.swagger !== undefined) {
-    return convertSwagger2OpenAPI(spec);
-  } else {
-    return spec;
+    v2Specs = await convertSwagger2OpenAPI(spec);
   }
+
+  // we can derefrence the schema here for future use.
+  // const derefrencedSpec = await parser.dereference(cloneDeep(spec));
+  const derefed = await parser.dereference(v2Specs, {
+    resolve: { http: { withCredentials: false } },
+  } as object);
+
+  return derefed;
+
 }
 
 export function convertSwagger2OpenAPI(spec: any): Promise<OpenAPISpec> {

tsconfig.json

@@ -39,4 +39,4 @@
     "./src/standalone.tsx",
     "demo/*.tsx"
   ]
-}
+}

yarn.lock

@@ -1589,6 +1589,10 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
+brace@^0.11.0, brace@^0.11.1:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/brace/-/brace-0.11.1.tgz#4896fcc9d544eef45f4bb7660db320d3b379fe58"
+
 braces@^1.8.2:
   version "1.8.5"
   resolved "https://registry.yarnpkg.com/braces/-/braces-1.8.5.tgz#ba77962e12dff969d6b76711e914b737857bf6a7"
@@ -2970,6 +2974,10 @@ detect-node@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.3.tgz#a2033c09cc8e158d37748fbde7507832bd6ce127"
 
+diff-match-patch@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/diff-match-patch/-/diff-match-patch-1.0.0.tgz#1cc3c83a490d67f95d91e39f6ad1f2e086b63048"
+
 diff@^3.1.0, diff@^3.2.0, diff@^3.3.1, diff@^3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/diff/-/diff-3.5.0.tgz#800c0dd1e0a8bfbc95835c202ad220fe317e5a12"
@@ -5947,6 +5955,14 @@ lodash.flattendeep@^4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz#fb030917f86a3134e5bc9bec0d69e0013ddfedb2"
 
+lodash.get@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
+
+lodash.isequal@^4.1.1:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
+
 lodash.isfunction@^3.0.8:
   version "3.0.9"
   resolved "https://registry.yarnpkg.com/lodash.isfunction/-/lodash.isfunction-3.0.9.tgz#06de25df4db327ac931981d1bdb067e5af68d051"
@@ -7553,7 +7569,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.0, prop-types@^15.5.4, prop-types@^15.6.0:
+prop-types@^15.5.0, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0:
   version "15.6.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca"
   dependencies:
@@ -7747,6 +7763,16 @@ rc@^1.1.6, rc@^1.1.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-ace@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/react-ace/-/react-ace-6.0.0.tgz#c211c21825f27343a7392f102493dc3ae099886d"
+  dependencies:
+    brace "^0.11.0"
+    diff-match-patch "^1.0.0"
+    lodash.get "^4.4.2"
+    lodash.isequal "^4.1.1"
+    prop-types "^15.5.8"
+
 react-dom@^16.3.0-alpha.2:
   version "16.3.0-alpha.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.3.0-alpha.2.tgz#a970b6185684941e89a568c09321d22643457cb6"