From 5938b7fcd8ed8edbe443e625499bd3afcad41730 Mon Sep 17 00:00:00 2001
From: Jim Su <jimsu@protonmail.com>
Date: Fri, 16 Sep 2022 22:52:36 -0400
Subject: [PATCH 1/5] Make editor horizontally resizable

---
 .../src/components/Playground.module.css      |  20 +++-
 .../website/src/components/Playground.tsx     | 109 +++++++++++++-----
 .../src/components/editor/LoadedEditor.tsx    |   3 +-
 .../website/src/components/editor/types.ts    |   1 +
 4 files changed, 97 insertions(+), 36 deletions(-)

diff --git a/packages/website/src/components/Playground.module.css b/packages/website/src/components/Playground.module.css
index 982899552094..338dd2db4ea9 100644
--- a/packages/website/src/components/Playground.module.css
+++ b/packages/website/src/components/Playground.module.css
@@ -11,12 +11,25 @@
 
 .sourceCode {
   height: 100%;
-  width: 50%;
   border: 1px solid var(--playground-secondary-color);
 }
 
+.sourceCodeContainer {
+  display: flex;
+}
+
+.sourceCode__rightResizeHandle {
+  cursor: ew-resize;
+  width: 10px;
+  padding-left: -10px;
+  margin-left: auto;
+}
+
 .codeBlocks {
   display: flex;
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: 0;
   flex-direction: row;
   height: 100%;
   width: calc(100vw - 20rem);
@@ -24,13 +37,14 @@
 
 .astViewer {
   height: 100%;
-  width: 50%;
+  width: 100%;
   border: 1px solid var(--playground-secondary-color);
   padding: 0;
   overflow: auto;
   word-wrap: initial;
   white-space: nowrap;
   background: var(--code-editor-bg);
+  z-index: var(--ifm-z-index-fixed);
 }
 
 .codeContainer {
@@ -96,7 +110,7 @@
   }
 
   .astViewer,
-  .sourceCode {
+  .sourceCodeContainer {
     height: 30rem;
     width: 100%;
   }
diff --git a/packages/website/src/components/Playground.tsx b/packages/website/src/components/Playground.tsx
index 4626a7504664..e5919d36e18f 100644
--- a/packages/website/src/components/Playground.tsx
+++ b/packages/website/src/components/Playground.tsx
@@ -11,7 +11,7 @@ import ErrorsViewer from '@site/src/components/ErrorsViewer';
 import type { TSESTree } from '@typescript-eslint/utils';
 import clsx from 'clsx';
 import type Monaco from 'monaco-editor';
-import React, { useCallback, useReducer, useState } from 'react';
+import React, { useCallback, useEffect, useReducer, useState } from 'react';
 import type { SourceFile } from 'typescript';
 
 import ASTViewerESTree from './ASTViewerESTree';
@@ -70,6 +70,34 @@ function Playground(): JSX.Element {
   const [position, setPosition] = useState<Monaco.Position | null>(null);
   const [activeTab, setTab] = useState<TabType>('code');
   const [showModal, setShowModal] = useState<TabType | false>(false);
+  const [editorWidth, setEditorWidth] = useState<number | undefined>();
+  const [dragging, setDragging] = useState<boolean>(false);
+  const [editorLeftEdge, setEditorLeftEdge] = useState<number | undefined>();
+  const sourceCodeContainerRef = React.createRef<HTMLDivElement>();
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent): void => {
+      if (dragging && editorLeftEdge) {
+        setEditorWidth(e.clientX - editorLeftEdge);
+      }
+    };
+    const handleMouseUp = (): void => {
+      setDragging(false);
+    };
+
+    const boundingRect =
+      sourceCodeContainerRef.current?.getBoundingClientRect();
+    setEditorLeftEdge(boundingRect?.x);
+    setEditorWidth(boundingRect?.width);
+
+    window.addEventListener('mousemove', handleMouseMove);
+    window.addEventListener('mouseup', handleMouseUp);
+
+    return (): void => {
+      window.removeEventListener('mousemove', handleMouseMove);
+      window.removeEventListener('mouseup', handleMouseUp);
+    };
+  }, [sourceCodeContainerRef]);
 
   const updateModal = useCallback(
     (config?: Partial<ConfigModel>) => {
@@ -105,39 +133,56 @@ function Playground(): JSX.Element {
         />
       </div>
       <div className={styles.codeBlocks}>
-        <div className={clsx(styles.sourceCode)}>
-          {isLoading && <Loader />}
-          <EditorTabs
-            tabs={['code', 'tsconfig', 'eslintrc']}
-            activeTab={activeTab}
-            change={setTab}
-            showModal={(): void => setShowModal(activeTab)}
-          />
-          <div className={styles.tabCode}>
-            <EditorEmbed />
+        <div
+          className={styles.sourceCodeContainer}
+          ref={sourceCodeContainerRef}
+          style={editorWidth ? { width: editorWidth } : {}}
+        >
+          <div
+            className={clsx(styles.sourceCode)}
+            style={editorWidth ? { width: editorWidth - 10 } : {}}
+          >
+            {isLoading && <Loader />}
+            <EditorTabs
+              tabs={['code', 'tsconfig', 'eslintrc']}
+              activeTab={activeTab}
+              change={setTab}
+              showModal={(): void => setShowModal(activeTab)}
+            />
+            <div className={styles.tabCode}>
+              <EditorEmbed />
+            </div>
+            <LoadingEditor
+              ts={state.ts}
+              jsx={state.jsx}
+              activeTab={activeTab}
+              code={state.code}
+              tsconfig={state.tsconfig}
+              eslintrc={state.eslintrc}
+              darkTheme={colorMode === 'dark'}
+              sourceType={state.sourceType}
+              showAST={state.showAST}
+              onEsASTChange={setEsAst}
+              onTsASTChange={setTsAST}
+              onScopeChange={setScope}
+              onMarkersChange={setMarkers}
+              sizeChanged={dragging}
+              decoration={selectedRange}
+              onChange={setState}
+              onLoaded={(ruleNames, tsVersions): void => {
+                setRuleNames(ruleNames);
+                setTSVersion(tsVersions);
+                setIsLoading(false);
+              }}
+              onSelect={setPosition}
+            />
           </div>
-          <LoadingEditor
-            ts={state.ts}
-            jsx={state.jsx}
-            activeTab={activeTab}
-            code={state.code}
-            tsconfig={state.tsconfig}
-            eslintrc={state.eslintrc}
-            darkTheme={colorMode === 'dark'}
-            sourceType={state.sourceType}
-            showAST={state.showAST}
-            onEsASTChange={setEsAst}
-            onTsASTChange={setTsAST}
-            onScopeChange={setScope}
-            onMarkersChange={setMarkers}
-            decoration={selectedRange}
-            onChange={setState}
-            onLoaded={(ruleNames, tsVersions): void => {
-              setRuleNames(ruleNames);
-              setTSVersion(tsVersions);
-              setIsLoading(false);
+          <div
+            className={styles.sourceCode__rightResizeHandle}
+            onMouseDown={(): void => {
+              setDragging(true);
             }}
-            onSelect={setPosition}
+            role="presentation"
           />
         </div>
         <div className={styles.astViewer}>
diff --git a/packages/website/src/components/editor/LoadedEditor.tsx b/packages/website/src/components/editor/LoadedEditor.tsx
index c65e6343cb21..02981bb25b88 100644
--- a/packages/website/src/components/editor/LoadedEditor.tsx
+++ b/packages/website/src/components/editor/LoadedEditor.tsx
@@ -41,6 +41,7 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({
   onMarkersChange,
   onChange,
   onSelect,
+  sizeChanged,
   sandboxInstance,
   showAST,
   sourceType,
@@ -230,7 +231,7 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({
 
   useEffect(() => {
     resize();
-  }, [resize, showAST]);
+  }, [resize, showAST, sizeChanged]);
 
   useEffect(() => {
     window.addEventListener('resize', resize);
diff --git a/packages/website/src/components/editor/types.ts b/packages/website/src/components/editor/types.ts
index 22bb1f4a7fda..6cd65064357c 100644
--- a/packages/website/src/components/editor/types.ts
+++ b/packages/website/src/components/editor/types.ts
@@ -13,5 +13,6 @@ export interface CommonEditorProps extends ConfigModel {
   readonly onEsASTChange: (value: undefined | TSESTree.Program) => void;
   readonly onScopeChange: (value: undefined | Record<string, unknown>) => void;
   readonly onMarkersChange: (value: ErrorGroup[] | Error) => void;
+  readonly sizeChanged: boolean;
   readonly onSelect: (position: Monaco.Position | null) => void;
 }

From d47778b0ad9c3d230eae1f502fe3ab2f9b17ced7 Mon Sep 17 00:00:00 2001
From: Jim Su <jimsu@protonmail.com>
Date: Sat, 17 Sep 2022 07:32:06 -0400
Subject: [PATCH 2/5] Fix panels width split

---
 packages/website/src/components/Playground.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/website/src/components/Playground.module.css b/packages/website/src/components/Playground.module.css
index 338dd2db4ea9..d2686751cfce 100644
--- a/packages/website/src/components/Playground.module.css
+++ b/packages/website/src/components/Playground.module.css
@@ -16,6 +16,7 @@
 
 .sourceCodeContainer {
   display: flex;
+  width: 100%;
 }
 
 .sourceCode__rightResizeHandle {
@@ -112,7 +113,6 @@
   .astViewer,
   .sourceCodeContainer {
     height: 30rem;
-    width: 100%;
   }
 
   .astViewer {

From 046b0c50e9280fea922f5628947ea2efa33415f7 Mon Sep 17 00:00:00 2001
From: Jim Su <jimsu@protonmail.com>
Date: Sat, 17 Sep 2022 17:45:54 -0400
Subject: [PATCH 3/5] Switch to react-split-pane

---
 packages/website/package.json                 |   4 +
 .../src/components/Playground.module.css      |  15 +-
 .../website/src/components/Playground.tsx     | 180 +++++++++---------
 .../src/components/SplitPaneResize.css        |  49 +++++
 patches/react-split-pane+0.1.92.patch         |  12 ++
 yarn.lock                                     |  18 +-
 6 files changed, 169 insertions(+), 109 deletions(-)
 create mode 100644 packages/website/src/components/SplitPaneResize.css
 create mode 100644 patches/react-split-pane+0.1.92.patch

diff --git a/packages/website/package.json b/packages/website/package.json
index e31cb6ec32a3..ba42be04bf5f 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -33,9 +33,13 @@
     "prism-react-renderer": "^1.3.3",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-split-pane": "^0.1.92",
     "remark-docusaurus-tabs": "^0.2.0",
     "typescript": "*"
   },
+  "resolutions": {
+    "react": "^18.0.0"
+  },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "~2.0.1",
     "@types/react": "^18.0.9",
diff --git a/packages/website/src/components/Playground.module.css b/packages/website/src/components/Playground.module.css
index d2686751cfce..34088d7c20f6 100644
--- a/packages/website/src/components/Playground.module.css
+++ b/packages/website/src/components/Playground.module.css
@@ -7,6 +7,7 @@
   width: 20rem;
   background: var(--playground-main-color);
   overflow: auto;
+  z-index: 1;
 }
 
 .sourceCode {
@@ -14,18 +15,6 @@
   border: 1px solid var(--playground-secondary-color);
 }
 
-.sourceCodeContainer {
-  display: flex;
-  width: 100%;
-}
-
-.sourceCode__rightResizeHandle {
-  cursor: ew-resize;
-  width: 10px;
-  padding-left: -10px;
-  margin-left: auto;
-}
-
 .codeBlocks {
   display: flex;
   flex-grow: 1;
@@ -111,7 +100,7 @@
   }
 
   .astViewer,
-  .sourceCodeContainer {
+  .sourceCode {
     height: 30rem;
   }
 
diff --git a/packages/website/src/components/Playground.tsx b/packages/website/src/components/Playground.tsx
index e5919d36e18f..bfa1b059ac3a 100644
--- a/packages/website/src/components/Playground.tsx
+++ b/packages/website/src/components/Playground.tsx
@@ -1,3 +1,5 @@
+import './SplitPaneResize.css';
+
 import { useColorMode } from '@docusaurus/theme-common';
 import ASTViewerScope from '@site/src/components/ASTViewerScope';
 import ConfigEslint from '@site/src/components/config/ConfigEslint';
@@ -12,6 +14,7 @@ import type { TSESTree } from '@typescript-eslint/utils';
 import clsx from 'clsx';
 import type Monaco from 'monaco-editor';
 import React, { useCallback, useEffect, useReducer, useState } from 'react';
+import SplitPane from 'react-split-pane';
 import type { SourceFile } from 'typescript';
 
 import ASTViewerESTree from './ASTViewerESTree';
@@ -70,34 +73,19 @@ function Playground(): JSX.Element {
   const [position, setPosition] = useState<Monaco.Position | null>(null);
   const [activeTab, setTab] = useState<TabType>('code');
   const [showModal, setShowModal] = useState<TabType | false>(false);
-  const [editorWidth, setEditorWidth] = useState<number | undefined>();
-  const [dragging, setDragging] = useState<boolean>(false);
-  const [editorLeftEdge, setEditorLeftEdge] = useState<number | undefined>();
-  const sourceCodeContainerRef = React.createRef<HTMLDivElement>();
+  const [editorDragging, setEditorDragging] = useState<boolean>(false);
 
   useEffect(() => {
-    const handleMouseMove = (e: MouseEvent): void => {
-      if (dragging && editorLeftEdge) {
-        setEditorWidth(e.clientX - editorLeftEdge);
-      }
-    };
     const handleMouseUp = (): void => {
-      setDragging(false);
+      setEditorDragging(false);
     };
 
-    const boundingRect =
-      sourceCodeContainerRef.current?.getBoundingClientRect();
-    setEditorLeftEdge(boundingRect?.x);
-    setEditorWidth(boundingRect?.width);
-
-    window.addEventListener('mousemove', handleMouseMove);
     window.addEventListener('mouseup', handleMouseUp);
 
     return (): void => {
-      window.removeEventListener('mousemove', handleMouseMove);
       window.removeEventListener('mouseup', handleMouseUp);
     };
-  }, [sourceCodeContainerRef]);
+  }, []);
 
   const updateModal = useCallback(
     (config?: Partial<ConfigModel>) => {
@@ -124,90 +112,92 @@ function Playground(): JSX.Element {
         config={state.tsconfig}
         onClose={updateModal}
       />
-      <div className={clsx(styles.options, 'thin-scrollbar')}>
-        <OptionsSelector
-          isLoading={isLoading}
-          state={state}
-          tsVersions={tsVersions}
-          setState={setState}
-        />
-      </div>
       <div className={styles.codeBlocks}>
-        <div
-          className={styles.sourceCodeContainer}
-          ref={sourceCodeContainerRef}
-          style={editorWidth ? { width: editorWidth } : {}}
+        <SplitPane
+          split="vertical"
+          minSize="10%"
+          defaultSize="20rem"
+          maxSize={
+            20 * parseFloat(getComputedStyle(document.documentElement).fontSize)
+          }
         >
-          <div
-            className={clsx(styles.sourceCode)}
-            style={editorWidth ? { width: editorWidth - 10 } : {}}
-          >
-            {isLoading && <Loader />}
-            <EditorTabs
-              tabs={['code', 'tsconfig', 'eslintrc']}
-              activeTab={activeTab}
-              change={setTab}
-              showModal={(): void => setShowModal(activeTab)}
-            />
-            <div className={styles.tabCode}>
-              <EditorEmbed />
-            </div>
-            <LoadingEditor
-              ts={state.ts}
-              jsx={state.jsx}
-              activeTab={activeTab}
-              code={state.code}
-              tsconfig={state.tsconfig}
-              eslintrc={state.eslintrc}
-              darkTheme={colorMode === 'dark'}
-              sourceType={state.sourceType}
-              showAST={state.showAST}
-              onEsASTChange={setEsAst}
-              onTsASTChange={setTsAST}
-              onScopeChange={setScope}
-              onMarkersChange={setMarkers}
-              sizeChanged={dragging}
-              decoration={selectedRange}
-              onChange={setState}
-              onLoaded={(ruleNames, tsVersions): void => {
-                setRuleNames(ruleNames);
-                setTSVersion(tsVersions);
-                setIsLoading(false);
-              }}
-              onSelect={setPosition}
+          <div className={clsx(styles.options, 'thin-scrollbar')}>
+            <OptionsSelector
+              isLoading={isLoading}
+              state={state}
+              tsVersions={tsVersions}
+              setState={setState}
             />
           </div>
-          <div
-            className={styles.sourceCode__rightResizeHandle}
-            onMouseDown={(): void => {
-              setDragging(true);
+          <SplitPane
+            split="vertical"
+            minSize="10%"
+            defaultSize="50%"
+            onDragStarted={(): void => {
+              setEditorDragging(true);
             }}
-            role="presentation"
-          />
-        </div>
-        <div className={styles.astViewer}>
-          {(state.showAST === 'ts' && tsAst && (
-            <ASTViewerTS
-              value={tsAst}
-              position={position}
-              onSelectNode={setSelectedRange}
-            />
-          )) ||
-            (state.showAST === 'scope' && scope && (
-              <ASTViewerScope
-                value={scope}
-                position={position}
-                onSelectNode={setSelectedRange}
+          >
+            <div className={clsx(styles.sourceCode)}>
+              {isLoading && <Loader />}
+              <EditorTabs
+                tabs={['code', 'tsconfig', 'eslintrc']}
+                activeTab={activeTab}
+                change={setTab}
+                showModal={(): void => setShowModal(activeTab)}
               />
-            )) ||
-            (state.showAST === 'es' && esAst && (
-              <ASTViewerESTree
-                value={esAst}
-                position={position}
-                onSelectNode={setSelectedRange}
+              <div className={styles.tabCode}>
+                <EditorEmbed />
+              </div>
+              <LoadingEditor
+                ts={state.ts}
+                jsx={state.jsx}
+                activeTab={activeTab}
+                code={state.code}
+                tsconfig={state.tsconfig}
+                eslintrc={state.eslintrc}
+                darkTheme={colorMode === 'dark'}
+                sourceType={state.sourceType}
+                showAST={state.showAST}
+                onEsASTChange={setEsAst}
+                onTsASTChange={setTsAST}
+                onScopeChange={setScope}
+                onMarkersChange={setMarkers}
+                sizeChanged={editorDragging}
+                decoration={selectedRange}
+                onChange={setState}
+                onLoaded={(ruleNames, tsVersions): void => {
+                  setRuleNames(ruleNames);
+                  setTSVersion(tsVersions);
+                  setIsLoading(false);
+                }}
+                onSelect={setPosition}
               />
-            )) || <ErrorsViewer value={markers} />}
-        </div>
+            </div>
+            <div className={styles.astViewer}>
+              {(state.showAST === 'ts' && tsAst && (
+                <ASTViewerTS
+                  value={tsAst}
+                  position={position}
+                  onSelectNode={setSelectedRange}
+                />
+              )) ||
+                (state.showAST === 'scope' && scope && (
+                  <ASTViewerScope
+                    value={scope}
+                    position={position}
+                    onSelectNode={setSelectedRange}
+                  />
+                )) ||
+                (state.showAST === 'es' && esAst && (
+                  <ASTViewerESTree
+                    value={esAst}
+                    position={position}
+                    onSelectNode={setSelectedRange}
+                  />
+                )) || <ErrorsViewer value={markers} />}
+            </div>
+          </SplitPane>
+        </SplitPane>
       </div>
     </div>
   );
diff --git a/packages/website/src/components/SplitPaneResize.css b/packages/website/src/components/SplitPaneResize.css
new file mode 100644
index 000000000000..bf69d4836dec
--- /dev/null
+++ b/packages/website/src/components/SplitPaneResize.css
@@ -0,0 +1,49 @@
+.Resizer {
+  background: #000;
+  opacity: 0.2;
+  z-index: 1;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding;
+  background-clip: padding-box;
+}
+
+.Resizer:hover {
+  -webkit-transition: all 2s ease;
+  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.5);
+  border-bottom: 5px solid rgba(0, 0, 0, 0.5);
+}
+
+.Resizer.vertical {
+  width: 11px;
+  margin: 0 -5px;
+  border-left: 5px solid rgba(255, 255, 255, 0);
+  border-right: 5px solid rgba(255, 255, 255, 0);
+  cursor: col-resize;
+}
+
+.Resizer.vertical:hover {
+  border-left: 5px solid rgba(0, 0, 0, 0.5);
+  border-right: 5px solid rgba(0, 0, 0, 0.5);
+}
+.Resizer.disabled {
+  cursor: not-allowed;
+}
+.Resizer.disabled:hover {
+  border-color: transparent;
+}
diff --git a/patches/react-split-pane+0.1.92.patch b/patches/react-split-pane+0.1.92.patch
new file mode 100644
index 000000000000..b00ff2919e7c
--- /dev/null
+++ b/patches/react-split-pane+0.1.92.patch
@@ -0,0 +1,12 @@
+diff --git a/node_modules/react-split-pane/index.d.ts b/node_modules/react-split-pane/index.d.ts
+index d116f54..9329094 100644
+--- a/node_modules/react-split-pane/index.d.ts
++++ b/node_modules/react-split-pane/index.d.ts
+@@ -25,6 +25,7 @@ export type SplitPaneProps = {
+   pane2Style?: React.CSSProperties;
+   resizerClassName?: string;
+   step?: number;
++  children?: React.ReactNode;
+ };
+ 
+ export type SplitPaneState = {
diff --git a/yarn.lock b/yarn.lock
index fa20615fdf68..358df0e37241 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12330,7 +12330,7 @@ promzard@^0.3.0:
   dependencies:
     read "1"
 
-prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.5.4, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -12622,6 +12622,22 @@ react-router@5.3.3, react-router@^5.3.3:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
+react-split-pane@^0.1.92:
+  version "0.1.92"
+  resolved "https://registry.yarnpkg.com/react-split-pane/-/react-split-pane-0.1.92.tgz#68242f72138aed95dd5910eeb9d99822c4fc3a41"
+  integrity sha512-GfXP1xSzLMcLJI5BM36Vh7GgZBpy+U/X0no+VM3fxayv+p1Jly5HpMofZJraeaMl73b3hvlr+N9zJKvLB/uz9w==
+  dependencies:
+    prop-types "^15.7.2"
+    react-lifecycles-compat "^3.0.4"
+    react-style-proptype "^3.2.2"
+
+react-style-proptype@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/react-style-proptype/-/react-style-proptype-3.2.2.tgz#d8e998e62ce79ec35b087252b90f19f1c33968a0"
+  integrity sha512-ywYLSjNkxKHiZOqNlso9PZByNEY+FTyh3C+7uuziK0xFXu9xzdyfHwg4S9iyiRRoPCR4k2LqaBBsWVmSBwCWYQ==
+  dependencies:
+    prop-types "^15.5.4"
+
 react-textarea-autosize@^8.3.2:
   version "8.3.3"
   resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.3.3.tgz#f70913945369da453fd554c168f6baacd1fa04d8"

From 95d27d7bb2db01c3e9ceee4b0b0ffc63f3202e94 Mon Sep 17 00:00:00 2001
From: Jim Su <jimsu@protonmail.com>
Date: Tue, 20 Sep 2022 20:36:04 -0400
Subject: [PATCH 4/5] Fix bugs and refactor

---
 .../src/components/Playground.module.css      |  2 -
 .../website/src/components/Playground.tsx     | 19 ++++---
 .../SplitPane/ConditionalSplitPane.tsx        | 28 +++++++++++
 .../components/SplitPane/SplitPane.module.css | 24 +++++++++
 .../src/components/SplitPaneResize.css        | 49 -------------------
 packages/website/src/hooks/useMediaQuery.ts   | 46 +++++++++++++++++
 6 files changed, 110 insertions(+), 58 deletions(-)
 create mode 100644 packages/website/src/components/SplitPane/ConditionalSplitPane.tsx
 create mode 100644 packages/website/src/components/SplitPane/SplitPane.module.css
 delete mode 100644 packages/website/src/components/SplitPaneResize.css
 create mode 100644 packages/website/src/hooks/useMediaQuery.ts

diff --git a/packages/website/src/components/Playground.module.css b/packages/website/src/components/Playground.module.css
index 34088d7c20f6..d6189b238f55 100644
--- a/packages/website/src/components/Playground.module.css
+++ b/packages/website/src/components/Playground.module.css
@@ -4,7 +4,6 @@
 }
 
 .options {
-  width: 20rem;
   background: var(--playground-main-color);
   overflow: auto;
   z-index: 1;
@@ -34,7 +33,6 @@
   word-wrap: initial;
   white-space: nowrap;
   background: var(--code-editor-bg);
-  z-index: var(--ifm-z-index-fixed);
 }
 
 .codeContainer {
diff --git a/packages/website/src/components/Playground.tsx b/packages/website/src/components/Playground.tsx
index bfa1b059ac3a..4da48ea4b074 100644
--- a/packages/website/src/components/Playground.tsx
+++ b/packages/website/src/components/Playground.tsx
@@ -1,5 +1,3 @@
-import './SplitPaneResize.css';
-
 import { useColorMode } from '@docusaurus/theme-common';
 import ASTViewerScope from '@site/src/components/ASTViewerScope';
 import ConfigEslint from '@site/src/components/config/ConfigEslint';
@@ -14,9 +12,9 @@ import type { TSESTree } from '@typescript-eslint/utils';
 import clsx from 'clsx';
 import type Monaco from 'monaco-editor';
 import React, { useCallback, useEffect, useReducer, useState } from 'react';
-import SplitPane from 'react-split-pane';
 import type { SourceFile } from 'typescript';
 
+import { useMediaQuery } from '../hooks/useMediaQuery';
 import ASTViewerESTree from './ASTViewerESTree';
 import ASTViewerTS from './ASTViewerTS';
 import { EditorEmbed } from './editor/EditorEmbed';
@@ -26,6 +24,7 @@ import Loader from './layout/Loader';
 import { shallowEqual } from './lib/shallowEqual';
 import OptionsSelector from './OptionsSelector';
 import styles from './Playground.module.css';
+import ConditionalSplitPane from './SplitPane/ConditionalSplitPane';
 import type {
   ConfigModel,
   ErrorGroup,
@@ -74,6 +73,7 @@ function Playground(): JSX.Element {
   const [activeTab, setTab] = useState<TabType>('code');
   const [showModal, setShowModal] = useState<TabType | false>(false);
   const [editorDragging, setEditorDragging] = useState<boolean>(false);
+  const enableSplitPanes = useMediaQuery('(min-width: 996px)');
 
   useEffect(() => {
     const handleMouseUp = (): void => {
@@ -113,13 +113,17 @@ function Playground(): JSX.Element {
         onClose={updateModal}
       />
       <div className={styles.codeBlocks}>
-        <SplitPane
+        <ConditionalSplitPane
+          render={enableSplitPanes}
           split="vertical"
           minSize="10%"
           defaultSize="20rem"
           maxSize={
             20 * parseFloat(getComputedStyle(document.documentElement).fontSize)
           }
+          onDragStarted={(): void => {
+            setEditorDragging(true);
+          }}
         >
           <div className={clsx(styles.options, 'thin-scrollbar')}>
             <OptionsSelector
@@ -129,7 +133,8 @@ function Playground(): JSX.Element {
               setState={setState}
             />
           </div>
-          <SplitPane
+          <ConditionalSplitPane
+            render={enableSplitPanes}
             split="vertical"
             minSize="10%"
             defaultSize="50%"
@@ -196,8 +201,8 @@ function Playground(): JSX.Element {
                   />
                 )) || <ErrorsViewer value={markers} />}
             </div>
-          </SplitPane>
-        </SplitPane>
+          </ConditionalSplitPane>
+        </ConditionalSplitPane>
       </div>
     </div>
   );
diff --git a/packages/website/src/components/SplitPane/ConditionalSplitPane.tsx b/packages/website/src/components/SplitPane/ConditionalSplitPane.tsx
new file mode 100644
index 000000000000..22c9aa14b5d6
--- /dev/null
+++ b/packages/website/src/components/SplitPane/ConditionalSplitPane.tsx
@@ -0,0 +1,28 @@
+import clsx from 'clsx';
+import React from 'react';
+import SplitPane, { type SplitPaneProps } from 'react-split-pane';
+
+import splitPaneStyles from './SplitPane.module.css';
+
+export interface ConditionalSplitPaneProps {
+  render: boolean;
+}
+
+function ConditionalSplitPane({
+  render,
+  children,
+  ...props
+}: ConditionalSplitPaneProps & SplitPaneProps): JSX.Element {
+  return render ? (
+    <SplitPane
+      resizerClassName={clsx(splitPaneStyles.resizer, splitPaneStyles.vertical)}
+      {...props}
+    >
+      {children}
+    </SplitPane>
+  ) : (
+    <>{children}</>
+  );
+}
+
+export default ConditionalSplitPane;
diff --git a/packages/website/src/components/SplitPane/SplitPane.module.css b/packages/website/src/components/SplitPane/SplitPane.module.css
new file mode 100644
index 000000000000..09537f1b1b5b
--- /dev/null
+++ b/packages/website/src/components/SplitPane/SplitPane.module.css
@@ -0,0 +1,24 @@
+.resizer {
+  background: var(--ifm-color-emphasis-700);
+  opacity: 0.2;
+  z-index: 1;
+  box-sizing: border-box;
+  background-clip: padding-box;
+}
+
+.resizer:hover {
+  transition: all 2s ease;
+}
+
+.resizer.vertical {
+  width: 11px;
+  margin: 0 -5px;
+  border-left: 5px solid rgba(255, 255, 255, 0);
+  border-right: 5px solid rgba(255, 255, 255, 0);
+  cursor: col-resize;
+}
+
+.resizer.vertical:hover {
+  border-left: 5px solid var(--ifm-color-emphasis-700);
+  border-right: 5px solid var(--ifm-color-emphasis-700);
+}
diff --git a/packages/website/src/components/SplitPaneResize.css b/packages/website/src/components/SplitPaneResize.css
deleted file mode 100644
index bf69d4836dec..000000000000
--- a/packages/website/src/components/SplitPaneResize.css
+++ /dev/null
@@ -1,49 +0,0 @@
-.Resizer {
-  background: #000;
-  opacity: 0.2;
-  z-index: 1;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  -moz-background-clip: padding;
-  -webkit-background-clip: padding;
-  background-clip: padding-box;
-}
-
-.Resizer:hover {
-  -webkit-transition: all 2s ease;
-  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.5);
-  border-bottom: 5px solid rgba(0, 0, 0, 0.5);
-}
-
-.Resizer.vertical {
-  width: 11px;
-  margin: 0 -5px;
-  border-left: 5px solid rgba(255, 255, 255, 0);
-  border-right: 5px solid rgba(255, 255, 255, 0);
-  cursor: col-resize;
-}
-
-.Resizer.vertical:hover {
-  border-left: 5px solid rgba(0, 0, 0, 0.5);
-  border-right: 5px solid rgba(0, 0, 0, 0.5);
-}
-.Resizer.disabled {
-  cursor: not-allowed;
-}
-.Resizer.disabled:hover {
-  border-color: transparent;
-}
diff --git a/packages/website/src/hooks/useMediaQuery.ts b/packages/website/src/hooks/useMediaQuery.ts
new file mode 100644
index 000000000000..1bd928c4a4b2
--- /dev/null
+++ b/packages/website/src/hooks/useMediaQuery.ts
@@ -0,0 +1,46 @@
+// Modified from https://github.com/antonioru/beautiful-react-hooks/blob/master/src/useMediaQuery.ts
+
+import { useEffect, useState } from 'react';
+
+/**
+ * Accepts a media query string then uses the
+ * [window.matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) API to determine if it
+ * matches with the current document.<br />
+ * It also monitor the document changes to detect when it matches or stops matching the media query.<br />
+ * Returns the validity state of the given media query.
+ *
+ */
+const useMediaQuery = (mediaQuery: string): boolean => {
+  const [isVerified, setIsVerified] = useState<boolean>(
+    !!window.matchMedia(mediaQuery).matches,
+  );
+
+  useEffect(() => {
+    const mediaQueryList = window.matchMedia(mediaQuery);
+    const documentChangeHandler = (): void =>
+      setIsVerified(!!mediaQueryList.matches);
+
+    try {
+      mediaQueryList.addEventListener('change', documentChangeHandler);
+    } catch (e) {
+      // Safari isn't supporting mediaQueryList.addEventListener
+      // eslint-disable-next-line deprecation/deprecation
+      mediaQueryList.addListener(documentChangeHandler);
+    }
+
+    documentChangeHandler();
+    return () => {
+      try {
+        mediaQueryList.removeEventListener('change', documentChangeHandler);
+      } catch (e) {
+        // Safari isn't supporting mediaQueryList.removeEventListener
+        // eslint-disable-next-line deprecation/deprecation
+        mediaQueryList.removeListener(documentChangeHandler);
+      }
+    };
+  }, [mediaQuery]);
+
+  return isVerified;
+};
+
+export { useMediaQuery };

From ecbb47ead3c0d01e4e895dbeba477ca5228b1d38 Mon Sep 17 00:00:00 2001
From: Jim Su <jimsu@protonmail.com>
Date: Tue, 20 Sep 2022 21:16:10 -0400
Subject: [PATCH 5/5] Switch to ResizeObserver for handling editor resize

---
 .../website/src/components/Playground.tsx     | 22 +------------------
 .../src/components/editor/LoadedEditor.tsx    | 19 ++++++++++++++--
 .../website/src/components/editor/types.ts    |  1 -
 3 files changed, 18 insertions(+), 24 deletions(-)

diff --git a/packages/website/src/components/Playground.tsx b/packages/website/src/components/Playground.tsx
index 4da48ea4b074..3330e4998617 100644
--- a/packages/website/src/components/Playground.tsx
+++ b/packages/website/src/components/Playground.tsx
@@ -11,7 +11,7 @@ import ErrorsViewer from '@site/src/components/ErrorsViewer';
 import type { TSESTree } from '@typescript-eslint/utils';
 import clsx from 'clsx';
 import type Monaco from 'monaco-editor';
-import React, { useCallback, useEffect, useReducer, useState } from 'react';
+import React, { useCallback, useReducer, useState } from 'react';
 import type { SourceFile } from 'typescript';
 
 import { useMediaQuery } from '../hooks/useMediaQuery';
@@ -72,21 +72,8 @@ function Playground(): JSX.Element {
   const [position, setPosition] = useState<Monaco.Position | null>(null);
   const [activeTab, setTab] = useState<TabType>('code');
   const [showModal, setShowModal] = useState<TabType | false>(false);
-  const [editorDragging, setEditorDragging] = useState<boolean>(false);
   const enableSplitPanes = useMediaQuery('(min-width: 996px)');
 
-  useEffect(() => {
-    const handleMouseUp = (): void => {
-      setEditorDragging(false);
-    };
-
-    window.addEventListener('mouseup', handleMouseUp);
-
-    return (): void => {
-      window.removeEventListener('mouseup', handleMouseUp);
-    };
-  }, []);
-
   const updateModal = useCallback(
     (config?: Partial<ConfigModel>) => {
       if (config) {
@@ -121,9 +108,6 @@ function Playground(): JSX.Element {
           maxSize={
             20 * parseFloat(getComputedStyle(document.documentElement).fontSize)
           }
-          onDragStarted={(): void => {
-            setEditorDragging(true);
-          }}
         >
           <div className={clsx(styles.options, 'thin-scrollbar')}>
             <OptionsSelector
@@ -138,9 +122,6 @@ function Playground(): JSX.Element {
             split="vertical"
             minSize="10%"
             defaultSize="50%"
-            onDragStarted={(): void => {
-              setEditorDragging(true);
-            }}
           >
             <div className={clsx(styles.sourceCode)}>
               {isLoading && <Loader />}
@@ -167,7 +148,6 @@ function Playground(): JSX.Element {
                 onTsASTChange={setTsAST}
                 onScopeChange={setScope}
                 onMarkersChange={setMarkers}
-                sizeChanged={editorDragging}
                 decoration={selectedRange}
                 onChange={setState}
                 onLoaded={(ruleNames, tsVersions): void => {
diff --git a/packages/website/src/components/editor/LoadedEditor.tsx b/packages/website/src/components/editor/LoadedEditor.tsx
index 02981bb25b88..3b959580193d 100644
--- a/packages/website/src/components/editor/LoadedEditor.tsx
+++ b/packages/website/src/components/editor/LoadedEditor.tsx
@@ -41,7 +41,6 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({
   onMarkersChange,
   onChange,
   onSelect,
-  sizeChanged,
   sandboxInstance,
   showAST,
   sourceType,
@@ -231,7 +230,23 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({
 
   useEffect(() => {
     resize();
-  }, [resize, showAST, sizeChanged]);
+  }, [resize, showAST]);
+
+  const domNode = sandboxInstance.editor.getContainerDomNode();
+  const resizeObserver = useMemo(() => {
+    return new ResizeObserver(() => {
+      resize();
+    });
+  }, []);
+
+  useEffect(() => {
+    if (domNode) {
+      resizeObserver.observe(domNode);
+
+      return (): void => resizeObserver.unobserve(domNode);
+    }
+    return (): void => {};
+  }, [domNode]);
 
   useEffect(() => {
     window.addEventListener('resize', resize);
diff --git a/packages/website/src/components/editor/types.ts b/packages/website/src/components/editor/types.ts
index 6cd65064357c..22bb1f4a7fda 100644
--- a/packages/website/src/components/editor/types.ts
+++ b/packages/website/src/components/editor/types.ts
@@ -13,6 +13,5 @@ export interface CommonEditorProps extends ConfigModel {
   readonly onEsASTChange: (value: undefined | TSESTree.Program) => void;
   readonly onScopeChange: (value: undefined | Record<string, unknown>) => void;
   readonly onMarkersChange: (value: ErrorGroup[] | Error) => void;
-  readonly sizeChanged: boolean;
   readonly onSelect: (position: Monaco.Position | null) => void;
 }