Add editor size to full editor (codesandbox#1079)

?editorsize is currently only propagated in embed. Now it works in the full editor too.

Useful for doczjs/docz#284

Author: CompuIves

packages/app/src/app/pages/Sandbox/Editor/Content/Preview/FlyingContainer.js

@@ -58,7 +58,12 @@ class FlyingContainer extends React.Component<Props, State> {
       this.initialWidth = width;
       this.initialHeight = height;
 
-      this.props.signals.editor.setPreviewBounds({ width, height });
+      if (
+        this.props.store.editor.previewWindow.width == null &&
+        this.props.store.editor.previewWindow.height == null
+      ) {
+        this.props.signals.editor.setPreviewBounds({ width, height });
+      }
     }
   };
 

packages/app/src/app/pages/Sandbox/Editor/Content/Preview/index.js

@@ -25,7 +25,6 @@ type State = {
 class Preview extends React.Component<Props, State> {
   state = {
     aligned: window.innerHeight > window.innerWidth ? 'bottom' : 'right',
-    previewSizeScalar: 0.5,
     running: !this.props.runOnClick,
   };
 
@@ -109,11 +108,17 @@ class Preview extends React.Component<Props, State> {
       if (width !== this.props.width || height !== this.props.height) {
         if (this.state.aligned === 'bottom') {
           this.props.signals.editor.setPreviewBounds(
-            this.getBottomCoordinates(props, this.state.previewSizeScalar)
+            this.getBottomCoordinates(
+              props,
+              1 - this.props.store.editor.previewWindow.editorSize / 100
+            )
           );
         } else {
           this.props.signals.editor.setPreviewBounds(
-            this.getRightCoordinates(props, this.state.previewSizeScalar)
+            this.getRightCoordinates(
+              props,
+              1 - this.props.store.editor.previewWindow.editorSize / 100
+            )
           );
         }
       }
@@ -213,9 +218,13 @@ class Preview extends React.Component<Props, State> {
     ) {
       this.setState({ aligned: null });
     } else if (aligned === 'right' && newSizes.width) {
-      this.setState({ previewSizeScalar: newSizes.width / this.props.width });
+      this.props.signals.editor.editorSizeUpdated({
+        editorSize: (1 - newSizes.width / this.props.width) * 100,
+      });
     } else if (aligned === 'bottom' && newSizes.height) {
-      this.setState({ previewSizeScalar: newSizes.height / this.props.height });
+      this.props.signals.editor.editorSizeUpdated({
+        editorSize: (1 - newSizes.height / this.props.height) * 100,
+      });
     }
   };
 
@@ -257,15 +266,21 @@ class Preview extends React.Component<Props, State> {
               e.stopPropagation();
             }
             resize(this.getRightCoordinates());
-            this.setState({ aligned: 'right', previewSizeScalar: 0.5 });
+            this.setState({ aligned: 'right' });
+            this.props.signals.editor.editorSizeUpdated({
+              editorSize: 50,
+            });
           };
           const alignBottom = e => {
             if (e) {
               e.preventDefault();
               e.stopPropagation();
             }
             resize(this.getBottomCoordinates());
-            this.setState({ aligned: 'bottom', previewSizeScalar: 0.5 });
+            this.setState({ aligned: 'bottom' });
+            this.props.signals.editor.editorSizeUpdated({
+              editorSize: 50,
+            });
           };
 
           return (

packages/app/src/app/store/actions.js

@@ -84,7 +84,7 @@ export function setUrlOptions({ state, router, utils }) {
   if (options.highlightedLines)
     state.set('editor.highlightedLines', options.highlightedLines);
   if (options.editorSize)
-    state.set('preferences.settings.editorSize', options.editorSize);
+    state.set('editor.previewWindow.editorSize', options.editorSize);
   if (options.hideNavigation)
     state.set('preferences.hideNavigation', options.hideNavigation);
   if (options.isInProjectView)

packages/app/src/app/store/modules/editor/index.js

@@ -43,6 +43,7 @@ export default Module({
     previewWindow: {
       height: undefined,
       width: undefined,
+      editorSize: 50,
       x: 0,
       y: 0,
       content: 'browser',
@@ -90,5 +91,6 @@ export default Module({
     setPreviewContent: sequences.setPreviewContent,
     currentTabChanged: sequences.changeCurrentTab,
     discardModuleChanges: sequences.discardModuleChanges,
+    editorSizeUpdated: sequences.updateEditorSize,
   },
 });

packages/app/src/app/store/modules/editor/model.js

@@ -170,6 +170,7 @@ export default {
   quickActionsOpen: types.boolean,
   previewWindow: types.model({
     content: types.maybeNull(types.string),
+    editorSize: types.maybe(types.number),
     width: types.maybeNull(types.number),
     height: types.maybeNull(types.number),
     x: types.maybeNull(types.number),

packages/app/src/app/store/modules/editor/sequences.js

@@ -273,3 +273,7 @@ export const setPreviewBounds = [actions.setPreviewBounds];
 export const setPreviewContent = [
   set(state`editor.previewWindow.content`, props`content`),
 ];
+
+export const updateEditorSize = [
+  set(state`editor.previewWindow.editorSize`, props`editorSize`),
+];