Chore: Added adjustable panels for the Editors panels (#5039)

Author: heath-freenome

package-lock.json

@@ -69,6 +69,7 @@
     "react-dom": "^18.3.1",
     "react-frame-component": "^5.3.2",
     "react-is": "^18.3.1",
+    "react-resizable-panels": "^4.10.0",
     "semantic-ui-react": "^2.1.5"
   },
   "devDependencies": {

packages/playground/package.json

@@ -9,6 +9,7 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import MonacoEditor from '@monaco-editor/react';
 import { ErrorSchema, RJSFSchema, UiSchema } from '@rjsf/utils';
 import isEqualWith from 'lodash/isEqualWith';
+import { Panel, Group, Separator } from 'react-resizable-panels';
 
 import ThemeSelector, { ThemesType } from './ThemeSelector';
 import SubthemeSelector, { SubthemeType } from './SubthemeSelector';
@@ -60,7 +61,7 @@ function Editor({ title, code, onChange }: EditorProps) {
   const cls = valid ? 'valid' : 'invalid';
 
   return (
-    <div className='panel panel-default'>
+    <div className='panel panel-default' style={{ marginBottom: 0 }}>
       <div className='panel-heading'>
         <span className={`${cls} glyphicon glyphicon-${icon}`} />
         {' ' + title}
@@ -187,22 +188,27 @@ export default function Editors({
         </Grid>
       </AccordionSummary>
       <AccordionDetails sx={{ p: 0 }}>
-        <Grid container spacing={0.5}>
-          <Grid size={extraErrors ? 3 : 4}>
+        <Group orientation='horizontal'>
+          <Panel defaultSize={extraErrors ? '34%' : '25%'} minSize='10%'>
             <Editor title='JSONSchema' code={toJson(schema)} onChange={onSchemaEdited} />
-          </Grid>
-          <Grid size={extraErrors ? 3 : 4}>
+          </Panel>
+          <Separator style={{ width: '4px', cursor: 'col-resize' }} />
+          <Panel defaultSize={extraErrors ? '33%' : '25%'} minSize='10%'>
             <Editor title={uiSchemaTitle} code={toJson(uiSchema)} onChange={onUISchemaEdited} />
-          </Grid>
-          <Grid size={extraErrors ? 3 : 4}>
+          </Panel>
+          <Separator style={{ width: '4px', cursor: 'col-resize' }} />
+          <Panel defaultSize={extraErrors ? '33%' : '25%'} minSize='10%'>
             <Editor title='formData' code={toJson(formData)} onChange={onFormDataEdited} />
-          </Grid>
+          </Panel>
           {extraErrors && (
-            <Grid size={3}>
-              <Editor title='extraErrors' code={toJson(extraErrors || {})} onChange={onExtraErrorsEdited} />
-            </Grid>
+            <>
+              <Separator style={{ width: '4px', cursor: 'col-resize' }} />
+              <Panel defaultSize='25%' minSize='10%'>
+                <Editor title='extraErrors' code={toJson(extraErrors)} onChange={onExtraErrorsEdited} />
+              </Panel>
+            </>
           )}
-        </Grid>
+        </Group>
       </AccordionDetails>
     </Accordion>
   );