Use json-stringify-pretty-compact to give compact pretty JSON in purple code for x- extensions

src/common-elements/fields.ts

@@ -88,7 +88,14 @@ export const ExampleValue = styled(FieldLabel)`
   ${extensionsHook('ExampleValue')};
 `;
 
-export const ExtensionValue = styled(ExampleValue)``;
+
+export const ExtensionValue = styled(ExampleValue)`
+  white-space: pre;
+  display: block;
+  overflow: scroll;
+  max-height: ${({ theme }) => theme.extension.maxHeight};
+  ${extensionsHook('ExtensionValue')};
+`;
 
 export const ConstraintItem = styled(FieldLabel)`
   border-radius: 2px;

src/components/Fields/Extensions.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
 
+import * as prettyCompactJSON from 'json-stringify-pretty-compact';
+
 import { ExtensionValue, FieldLabel } from '../../common-elements/fields';
 
 import styled from '../../styled-components';
@@ -30,7 +32,7 @@ export class Extensions extends React.PureComponent<ExtensionsProps> {
                 <Extension key={key}>
                   <FieldLabel> {key.substring(2)}: </FieldLabel>{' '}
                   <ExtensionValue>
-                    {typeof exts[key] === 'string' ? exts[key] : JSON.stringify(exts[key])}
+                      {typeof exts[key] === 'string' ? exts[key] : prettyCompactJSON(exts[key], {indent: 2})}
                   </ExtensionValue>
                 </Extension>
               ))}

src/theme.ts

@@ -150,6 +150,9 @@ const defaultTheme: ThemeInterface = {
   codeSample: {
     backgroundColor: ({ rightPanel }) => darken(0.1, rightPanel.backgroundColor),
   },
+  extension: {
+    maxHeight: '16em'
+  }
 };
 
 export default defaultTheme;
@@ -320,7 +323,9 @@ export interface ResolvedThemeInterface {
   codeSample: {
     backgroundColor: string;
   };
-
+  extension: {
+    maxHeight: string;
+  }
   extensionsHook?: (name: string, props: any) => string;
 }