Allow vertical embedding for embeds (codesandbox#569)

Author: CompuIves

packages/app/src/embed/components/App/index.js

@@ -42,6 +42,7 @@ type State = {
   forceRefresh: boolean,
   expandDevTools: boolean,
   runOnClick: boolean,
+  verticalMode: boolean,
   highlightedLines: Array<number>,
 };
 
@@ -65,6 +66,7 @@ export default class App extends React.PureComponent<{}, State> {
       forceRefresh,
       expandDevTools,
       runOnClick,
+      verticalMode,
     } = getSandboxOptions(document.location.href);
 
     this.state = {
@@ -85,6 +87,7 @@ export default class App extends React.PureComponent<{}, State> {
       forceRefresh,
       expandDevTools,
       runOnClick,
+      verticalMode,
       highlightedLines: highlightedLines || [],
     };
   }
@@ -177,7 +180,13 @@ export default class App extends React.PureComponent<{}, State> {
       );
     }
 
-    const { showEditor, showPreview, isInProjectView, runOnClick } = this.state;
+    const {
+      showEditor,
+      verticalMode,
+      showPreview,
+      isInProjectView,
+      runOnClick,
+    } = this.state;
 
     return (
       <ThemeProvider
@@ -214,6 +223,7 @@ export default class App extends React.PureComponent<{}, State> {
             forceRefresh={this.state.forceRefresh}
             expandDevTools={this.state.expandDevTools}
             runOnClick={runOnClick}
+            verticalMode={verticalMode}
           />
         </Container>
       </ThemeProvider>

packages/app/src/embed/components/Content/elements.js

@@ -27,8 +27,17 @@ export const Split = styled.div`
   display: flex;
   flex-direction: column;
   position: relative;
-  width: ${props => (props.show ? `${props.size}%` : '0px')};
-  max-width: ${props => (props.only ? '100%' : `${props.size}%`)};
-  min-width: ${props => (props.only ? '100%' : `${props.size}%`)};
+  ${props =>
+    (props.verticalMode ? 'height: ' : 'width: ') +
+    (props.show ? `${props.size}%` : '0px')};
+
+  ${props =>
+    (props.verticalMode ? 'max-height: ' : 'max-width: ') +
+    (props.only ? '100%' : `${props.size}%`)};
+
+  ${props =>
+    (props.verticalMode ? 'min-height: ' : 'min-width: ') +
+    (props.only ? '100%' : `${props.size}%`)};
+
   height: 100%;
 `;

packages/app/src/embed/components/Content/index.js

@@ -45,6 +45,7 @@ type Props = {
   forceRefresh: boolean,
   expandDevTools: boolean,
   runOnClick: boolean,
+  verticalMode: boolean,
 };
 
 type State = {
@@ -294,6 +295,7 @@ export default class Content extends React.PureComponent<Props, State> {
       isInProjectView,
       editorSize,
       expandDevTools,
+      verticalMode,
     } = this.props;
 
     const mainModule = isInProjectView
@@ -305,12 +307,13 @@ export default class Content extends React.PureComponent<Props, State> {
     const { RunOnClick } = this;
 
     return (
-      <Container>
+      <Container style={{ flexDirection: verticalMode ? 'column' : 'row' }}>
         {showEditor && (
           <Split
             show={showEditor}
             only={showEditor && !showPreview}
             size={editorSize}
+            verticalMode={verticalMode}
           >
             <Tabs>
               {this.state.tabs.map((module, i) => {
@@ -365,6 +368,7 @@ export default class Content extends React.PureComponent<Props, State> {
             show={showPreview}
             only={showPreview && !showEditor}
             size={100 - editorSize}
+            verticalMode={verticalMode}
           >
             {!this.state.running ? (
               <RunOnClick />

packages/common/url.js

@@ -57,6 +57,7 @@ export const getSandboxOptions = (url: string) => {
   result.enableEslint = url.includes('eslint=1');
   result.forceRefresh = url.includes('forcerefresh=1');
   result.expandDevTools = url.includes('expanddevtools=1');
+  result.verticalMode = url.includes('verticallayout=1');
   result.runOnClick = url.includes('runonclick=0')
     ? false
     : url.includes('runonclick=1') ||

packages/homepage/content/docs/2-embedding.md

@@ -6,21 +6,30 @@ description: "It's possible to embed a sandbox on Medium and other websites."
 
 ## What is an Embed?
 
-CodeSandbox has a separate application for the embed. This application is specifically built to be as small as possible. If you replace `s` in the URL of a sandbox to `embed` you have the embed version of the sandbox. Example: https://codesandbox.io/**s**/new => https://codesandbox.io/**embed**/new. Notice that the embed doesn't have all features of the full editor.
+CodeSandbox has a separate application for the embed. This application is
+specifically built to be as small as possible. If you replace `s` in the URL of
+a sandbox to `embed` you have the embed version of the sandbox. Example:
+https://codesandbox.io/**s**/new => https://codesandbox.io/**embed**/new. Notice
+that the embed doesn't have all features of the full editor.
 
 ## Generate a URL
 
-You can generate a URL clicking 'Share' in the header and selecting the options you want to have enabled.
+You can generate a URL clicking 'Share' in the header and selecting the options
+you want to have enabled.
 
 ![Share Button](./images/share-button.png)
 
 ## Embed on Medium
 
-You can easily embed on Medium by taking your sandbox URL (like https://codesandbox.io/s/new) and pasting it in a Medium article. It should automatically become an embed after you press enter.
+You can easily embed on Medium by taking your sandbox URL (like
+https://codesandbox.io/s/new) and pasting it in a Medium article. It should
+automatically become an embed after you press enter.
 
 ## Embed Options
 
-The options shown in the embed modal are not all options available. We need a new UI for the share model to reflect these options, in the meantime you can find them here.
+The options shown in the embed modal are not all options available. We need a
+new UI for the share model to reflect these options, in the meantime you can
+find them here.
 
 | Option           | Description                                                                   | Values                               | Default                              |
 | ---------------- | ----------------------------------------------------------------------------- | ------------------------------------ | ------------------------------------ |
@@ -38,6 +47,7 @@ The options shown in the embed modal are not all options available. We need a ne
 | `fontsize`       | Font size of editor                                                           | number (in px)                       | `14`                                 |
 | `highlights`     | Which lines to highlight (only works in CodeMirror)                           | comma separated list of line numbers |                                      |
 | `editorsize`     | Size in percentage of editor.                                                 | number                               | `50`                                 |
+| `verticallayout` | Whether to show the editor and preview vertically.                            | `0`/`1`                              | `0`                                  |
 
 ## Example Embeds
 
@@ -51,21 +61,29 @@ This embed is focused on being as light as possible:
 
 Use this code to embed:
 
-`<iframe src="https://codesandbox.io/embed/new?codemirror=1" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>`
+`<iframe src="https://codesandbox.io/embed/new?codemirror=1" style="width:100%;
+height:500px; border:0; border-radius: 4px; overflow:hidden;"
+sandbox="allow-modals allow-forms allow-popups allow-scripts
+allow-same-origin"></iframe>`
 
 That will give to a result like this:
 
 <iframe src="https://codesandbox.io/embed/new?codemirror=1" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
 
 ### Code Example Embed
 
-You can also use CodeSandbox to show code examples, with highlighted lines. This is only supported with the CodeMirror editor currently:
+You can also use CodeSandbox to show code examples, with highlighted lines. This
+is only supported with the CodeMirror editor currently:
 
 `https://codesandbox.io/embed/new?codemirror=1&highlights=11,12,13,14`
 
 Use this code to embed:
 
-`<iframe src="https://codesandbox.io/embed/new?codemirror=1&highlights=11,12,13,14" style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;" sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>`
+`<iframe
+src="https://codesandbox.io/embed/new?codemirror=1&highlights=11,12,13,14"
+style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+sandbox="allow-modals allow-forms allow-popups allow-scripts
+allow-same-origin"></iframe>`
 
 That will give to a result like this: