Add more embed options (codesandbox#238)

* Add more embed options

* Update snapshots

Author: CompuIves

src/app/components/sandbox/CodeEditor/CodeMirror.js

@@ -31,6 +31,7 @@ type Props = {
   sandboxId: string,
   modules: Array,
   directories: Array,
+  hideNavigation: boolean,
 };
 
 const Container = styled.div`
@@ -55,7 +56,7 @@ const CodeContainer = styled.div`
   position: relative;
   overflow: auto;
   width: 100%;
-  height: calc(100% - 6rem);
+  height: calc(100% - ${props => (props.hideNavigation ? 3 : 6)}rem);
   .CodeMirror {
     font-family: ${props =>
       fontFamilies(props.fontFamily, 'Source Code Pro', 'monospace')};
@@ -501,18 +502,22 @@ export default class CodeEditor extends React.Component<Props, State> {
       modules,
       directories,
       id,
+      hideNavigation,
     } = this.props;
 
     return (
       <Container>
-        <Header
-          saveComponent={canSave && !onlyViewMode && this.handleSaveCode}
-          prettify={!onlyViewMode && this.prettify}
-          path={modulePath}
-        />
+        {!hideNavigation && (
+          <Header
+            saveComponent={canSave && !onlyViewMode && this.handleSaveCode}
+            prettify={!onlyViewMode && this.prettify}
+            path={modulePath}
+          />
+        )}
         <CodeContainer
           fontFamily={preferences.fontFamily}
           lineHeight={preferences.lineHeight}
+          hideNavigation={hideNavigation}
         >
           {this.state.fuzzySearchEnabled && (
             <FuzzySearch

src/app/components/sandbox/CodeEditor/Monaco.js

@@ -50,6 +50,7 @@ type Props = {
   setCurrentModule: ?(sandboxId: string, moduleId: string) => void,
   template: string,
   addDependency: ?(sandboxId: string, dependency: string) => void,
+  hideNavigation: boolean,
 };
 
 const Container = styled.div`
@@ -71,7 +72,7 @@ const fontFamilies = (...families) =>
 const CodeContainer = styled.div`
   position: relative;
   width: 100%;
-  height: calc(100% - 6rem);
+  height: calc(100% - ${props => (props.hideNavigation ? 3 : 6)}rem);
   z-index: 30;
 
   .margin-view-overlays {
@@ -889,18 +890,23 @@ export default class CodeEditor extends React.Component<Props, State> {
       directories,
       onlyViewMode,
       modulePath,
+      hideNavigation,
     } = this.props;
 
     const options = this.getEditorOptions();
 
     return (
       <Container>
-        <Header
-          saveComponent={canSave && !onlyViewMode ? this.handleSaveCode : null}
-          prettify={!onlyViewMode && this.prettify}
-          path={modulePath}
-        />
-        <CodeContainer>
+        {!hideNavigation && (
+          <Header
+            saveComponent={
+              canSave && !onlyViewMode ? this.handleSaveCode : null
+            }
+            prettify={!onlyViewMode && this.prettify}
+            path={modulePath}
+          />
+        )}
+        <CodeContainer hideNavigation={hideNavigation}>
           {this.state.fuzzySearchEnabled && (
             <FuzzySearch
               closeFuzzySearch={this.closeFuzzySearch}

src/common/__snapshots__/url.test.js.snap

@@ -3,6 +3,7 @@
 exports[`url parameters can autoresize 1`] = `
 Object {
   "autoResize": true,
+  "editorSize": 50,
   "enableEslint": false,
   "hideNavigation": false,
   "isEditorScreen": false,
@@ -16,6 +17,7 @@ exports[`url parameters can handle multiple options 1`] = `
 Object {
   "autoResize": true,
   "currentModule": "test",
+  "editorSize": 50,
   "enableEslint": false,
   "hideNavigation": true,
   "isEditorScreen": true,
@@ -28,6 +30,7 @@ Object {
 exports[`url parameters can hide navigation 1`] = `
 Object {
   "autoResize": false,
+  "editorSize": 50,
   "enableEslint": false,
   "hideNavigation": true,
   "isEditorScreen": false,
@@ -40,6 +43,7 @@ Object {
 exports[`url parameters doesn't set unknown fields 1`] = `
 Object {
   "autoResize": false,
+  "editorSize": 50,
   "enableEslint": false,
   "hideNavigation": false,
   "isEditorScreen": false,
@@ -52,6 +56,7 @@ Object {
 exports[`url parameters keeps everything false on normal urls 1`] = `
 Object {
   "autoResize": false,
+  "editorSize": 50,
   "enableEslint": false,
   "hideNavigation": false,
   "isEditorScreen": false,
@@ -65,6 +70,7 @@ exports[`url parameters sets current module if there is one 1`] = `
 Object {
   "autoResize": false,
   "currentModule": "test",
+  "editorSize": 50,
   "enableEslint": false,
   "hideNavigation": false,
   "isEditorScreen": false,
@@ -77,6 +83,7 @@ Object {
 exports[`url parameters sets editor view 1`] = `
 Object {
   "autoResize": false,
+  "editorSize": 50,
   "enableEslint": false,
   "hideNavigation": false,
   "isEditorScreen": true,
@@ -89,6 +96,7 @@ Object {
 exports[`url parameters sets preview view 1`] = `
 Object {
   "autoResize": false,
+  "editorSize": 50,
   "enableEslint": false,
   "hideNavigation": false,
   "isEditorScreen": false,

src/common/url.js

@@ -1,7 +1,9 @@
 // @flow
 
 export const getSandboxOptions = (url: string) => {
-  const result = {};
+  const result: Object = {
+    editorSize: 50,
+  };
   const moduleMatch = url.match(/(\?|&)(module)=([^&]+)/);
   if (moduleMatch) {
     result.currentModule = moduleMatch[3];
@@ -17,6 +19,11 @@ export const getSandboxOptions = (url: string) => {
     result.fontSize = +fontSizeMatch[3];
   }
 
+  const editorSizeMatch = url.match(/(\?|&)(editorsize)=([^&]+)/);
+  if (editorSizeMatch) {
+    result.editorSize = +editorSizeMatch[3];
+  }
+
   result.isPreviewScreen = url.includes('view=preview');
   result.isEditorScreen = url.includes('view=editor');
 

src/embed/App.js

@@ -60,6 +60,7 @@ type State = {
   fontSize: number,
   enableEslint: boolean,
   useCodeMirror: boolean,
+  editorSize: number,
 };
 
 export default class App extends React.PureComponent<{}, State> {
@@ -77,6 +78,7 @@ export default class App extends React.PureComponent<{}, State> {
       fontSize,
       enableEslint,
       useCodeMirror,
+      editorSize,
     } = getSandboxOptions(document.location.href);
 
     this.state = {
@@ -93,6 +95,7 @@ export default class App extends React.PureComponent<{}, State> {
       hideNavigation,
       enableEslint,
       useCodeMirror,
+      editorSize,
     };
   }
 
@@ -212,6 +215,7 @@ export default class App extends React.PureComponent<{}, State> {
             setCurrentModule={this.setCurrentModule}
             useCodeMirror={this.state.useCodeMirror}
             enableEslint={this.state.enableEslint}
+            editorSize={this.state.editorSize}
           />
         </Container>
       </ThemeProvider>

src/embed/components/Content.js

@@ -21,9 +21,9 @@ const Container = styled.div`
 
 const Split = styled.div`
   position: relative;
-  width: ${props => (props.show ? '50%' : '0px')};
-  max-width: ${props => (props.only ? '100%' : '50%')};
-  min-width: ${props => (props.only ? '100%' : '50%')};
+  width: ${props => (props.show ? `${props.size}%` : '0px')};
+  max-width: ${props => (props.only ? '100%' : `${props.size}%`)};
+  min-width: ${props => (props.only ? '100%' : `${props.size}%`)};
   height: calc(100% + 3rem);
 `;
 
@@ -42,6 +42,7 @@ type Props = {
   useCodeMirror: boolean,
   enableEslint: boolean,
   isInProjectView: boolean,
+  editorSize: number,
 };
 
 type State = {
@@ -164,6 +165,7 @@ export default class Content extends React.PureComponent<Props, State> {
     autoDownloadTypes: true,
     lintEnabled: this.props.enableEslint,
     codeMirror: this.props.useCodeMirror,
+    lineHeight: 1.4,
   });
 
   setCurrentModule = (_, moduleId) => {
@@ -178,6 +180,7 @@ export default class Content extends React.PureComponent<Props, State> {
       isInProjectView,
       currentModule,
       hideNavigation,
+      editorSize,
     } = this.props;
 
     const { errors } = this.state;
@@ -203,7 +206,11 @@ export default class Content extends React.PureComponent<Props, State> {
     return (
       <Container>
         {showEditor && (
-          <Split show={showEditor} only={showEditor && !showPreview}>
+          <Split
+            show={showEditor}
+            only={showEditor && !showPreview}
+            size={editorSize}
+          >
             <CodeEditor
               code={alteredMainModule.code}
               id={alteredMainModule.id}
@@ -221,14 +228,19 @@ export default class Content extends React.PureComponent<Props, State> {
               setCurrentModule={this.setCurrentModule}
               template={sandbox.template}
               dependencies={sandbox.npmDependencies}
+              hideNavigation={hideNavigation}
               canSave={false}
               corrections={[]}
             />
           </Split>
         )}
 
         {showPreview && (
-          <Split show={showPreview} only={showPreview && !showEditor}>
+          <Split
+            show={showPreview}
+            only={showPreview && !showEditor}
+            size={100 - editorSize}
+          >
             <Preview
               sandboxId={sandbox.id}
               template={sandbox.template}

src/embed/components/Header.js

@@ -15,8 +15,8 @@ const Container = styled.div`
   height: 3rem;
   padding: 0 1rem;
   box-sizing: border-box;
-  border-bottom: 1px solid ${props => props.theme.background2.darken(0.3)};
-  background-color: ${props => props.theme.background2};
+  border-bottom: 1px solid ${props => props.theme.background.darken(0.3)};
+  background-color: ${props => props.theme.background};
 `;
 
 const MenuIcon = styled(MenuIconSVG)`