Make sure Monaco resizes with its container (#653)

Make Monaco resize with its container
mui · Jul 12, 2022 · 43efef2 · 43efef2
1 parent a28bf59
commit 43efef2
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 18 deletions.
diff --git a/packages/toolpad-app/src/components/AppEditor/CodeComponentEditor/index.tsx b/packages/toolpad-app/src/components/AppEditor/CodeComponentEditor/index.tsx
@@ -21,6 +21,7 @@ import { mapValues } from '../../../utils/collections';
 import ErrorAlert from '../PageEditor/ErrorAlert';
 import lazyComponent from '../../../utils/lazyComponent';
 import CenteredSpinner from '../../CenteredSpinner';
+import SplitPane from '../../SplitPane';
 
 const TypescriptEditor = lazyComponent(() => import('../../TypescriptEditor'), {
   noSsr: true,
@@ -158,17 +159,16 @@ function CodeComponentEditorContent({ codeComponentNode }: CodeComponentEditorCo
             Update
           </Button>
         </Toolbar>
-        <Box flex={1} display="flex">
-          <Box flex={1}>
+        <Box flex={1}>
+          <SplitPane split="vertical" allowResize size="50%">
             <TypescriptEditor
               value={input}
               onChange={(newValue) => setInput(newValue || '')}
               extraLibs={extraLibs}
             />
-          </Box>
-          <Box sx={{ flex: 1, position: 'relative' }}>
+
             <CanvasFrame ref={frameRef} title="Code component sandbox" onLoad={onLoad} />
-          </Box>
+          </SplitPane>
         </Box>
       </Stack>
       {iframeLoaded && frameDocument

diff --git a/packages/toolpad-app/src/components/MonacoEditor.tsx b/packages/toolpad-app/src/components/MonacoEditor.tsx
@@ -188,6 +188,7 @@ export default React.forwardRef<MonacoEditorHandle, MonacoEditorProps>(function
         minimap: { enabled: false },
         accessibilitySupport: 'off',
         tabSize: 2,
+        automaticLayout: true,
         ...extraOptions,
       });
 

diff --git a/packages/toolpad-app/src/components/SplitPane.tsx b/packages/toolpad-app/src/components/SplitPane.tsx
@@ -1,14 +1,14 @@
 import { styled } from '@mui/material';
 import clsx from 'clsx';
 import * as React from 'react';
-import SplitPane, { SplitPaneProps } from 'react-split-pane';
+import ReactSplitPane, { SplitPaneProps } from 'react-split-pane';
 
 const classes = {
   dragging: 'MuiToolpadSplitPaneDragging',
 };
 
 const WrappedSplitPane = React.forwardRef<
-  SplitPane,
+  ReactSplitPane,
   SplitPaneProps & { children?: React.ReactNode }
 >(({ className, onDragStarted, onDragFinished, ...props }, ref) => {
   const [dragActive, setDragActive] = React.useState(false);
@@ -30,20 +30,21 @@ const WrappedSplitPane = React.forwardRef<
   );
 
   return (
-    <SplitPane
+    <ReactSplitPane
       ref={ref}
       className={clsx({ [classes.dragging]: dragActive }, className)}
       onDragStarted={handleDragStarted}
       onDragFinished={handleDragFinished}
       // Some sensible defaults
       minSize={20}
       maxSize={-20}
+      paneStyle={{ display: 'block', ...props.paneStyle }}
       {...props}
     />
   );
 });
 
-const StyledSplitPane = styled(WrappedSplitPane)(({ theme }) => ({
+const SplitPane = styled(WrappedSplitPane)(({ theme }) => ({
   [`&.${classes.dragging} *`]: {
     // Workaround for https://github.com/tomkp/react-split-pane/issues/30
     pointerEvents: 'none',
@@ -53,14 +54,6 @@ const StyledSplitPane = styled(WrappedSplitPane)(({ theme }) => ({
     background: theme.palette.background.default,
   },
 
-  '& .Pane.Vertical': {
-    height: '100%',
-  },
-
-  '& .Pane.Horizontal': {
-    width: '100%',
-  },
-
   '& .Pane2': {
     zIndex: 1,
   },
@@ -113,4 +106,4 @@ const StyledSplitPane = styled(WrappedSplitPane)(({ theme }) => ({
   },
 }));
 
-export default StyledSplitPane;
+export default SplitPane;