use new split-pane

src/containers/Editor/index.tsx

@@ -6,6 +6,8 @@ import { Loading } from "src/components/Loading";
 import { Incompatible } from "src/containers/Incompatible";
 import * as Styles from "src/containers/Editor/styles";
 import { useConfig } from "src/hocs/config";
+import { Allotment } from "allotment";
+import { useLoading } from "src/hooks/useLoading";
 
 const JsonEditor = dynamic(() => import("src/containers/JsonEditor"), {
   ssr: false,
@@ -13,25 +15,29 @@ const JsonEditor = dynamic(() => import("src/containers/JsonEditor"), {
 });
 
 export const Editor: React.FC = () => {
+  const loading = useLoading();
   const {
     states: { settings },
   } = useConfig();
 
+  if (loading) return null;
+
   return (
     <Styles.StyledPageWrapper>
       <Sidebar />
       <Styles.StyledEditorWrapper>
-        {/* @ts-ignore */}
-        <Styles.StyledEditor
-          maxSize={800}
-          minSize={300}
-          defaultSize={450}
-          split="vertical"
-          size={settings.hideEditor ? 0 : 450}
-          allowResize={!settings.hideEditor}
-        >
-          <JsonEditor />
-          <LiveEditor />
+        <Styles.StyledEditor>
+          <Allotment.Pane
+            preferredSize={450}
+            minSize={300}
+            maxSize={600}
+            visible={!settings.hideEditor}
+          >
+            <JsonEditor />
+          </Allotment.Pane>
+          <Allotment.Pane>
+            <LiveEditor />
+          </Allotment.Pane>
         </Styles.StyledEditor>
       </Styles.StyledEditorWrapper>
       <Incompatible />

src/containers/Editor/styles.tsx

@@ -1,5 +1,6 @@
-import SplitPane from "react-split-pane";
 import styled from "styled-components";
+import { Allotment } from "allotment";
+import "allotment/dist/style.css";
 
 export const StyledPageWrapper = styled.div`
   display: flex;
@@ -15,59 +16,8 @@ export const StyledEditorWrapper = styled.div`
   }
 `;
 
-export const StyledEditor = styled(SplitPane)`
+export const StyledEditor = styled(Allotment)`
   position: relative !important;
   display: flex;
   background: ${({ theme }) => theme.BACKGROUND_SECONDARY};
-
-  .Resizer {
-    background: ${({ theme }) => theme.BACKGROUND_MODIFIER_ACCENT};
-    box-sizing: border-box;
-    background-clip: padding-box;
-    z-index: 1;
-  }
-
-  .Resizer.disabled {
-    pointer-events: none;
-  }
-
-  .Resizer:hover {
-    transition: all 2s ease;
-  }
-
-  .Resizer.horizontal {
-    height: 11px;
-    margin: -5px 0;
-    border-top: 5px solid rgba(255, 255, 255, 0);
-    border-bottom: 5px solid rgba(255, 255, 255, 0);
-    cursor: row-resize;
-    width: 100%;
-  }
-
-  .Resizer.horizontal:hover {
-    border-top: 5px solid rgba(0, 0, 0, 0);
-    border-bottom: 5px solid rgba(0, 0, 0, 0);
-  }
-
-  .Resizer.vertical {
-    width: 14px;
-    margin: 0 -5px;
-    border-left: 5px solid rgba(255, 255, 255, 0);
-    border-right: 5px solid rgba(255, 255, 255, 0);
-    cursor: col-resize;
-    z-index: 1;
-  }
-
-  .Resizer.vertical:hover {
-    border-left: 5px solid rgba(0, 0, 0, 0);
-    border-right: 5px solid rgba(0, 0, 0, 0);
-  }
-
-  .Resizer.disabled {
-    cursor: not-allowed;
-  }
-
-  .Resizer.disabled:hover {
-    border-color: transparent;
-  }
 `;