Add resizer

Author: pomber

playground/package.json

@@ -14,7 +14,8 @@
     "lz-string": "^1.4.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-error-boundary": "^3.1.4"
+    "react-error-boundary": "^3.1.4",
+    "react-split-pane": "^0.1.92"
   },
   "devDependencies": {
     "@types/react": "^17.0.2",

playground/src/app.jsx

@@ -2,6 +2,8 @@ import React, { useState } from "react";
 import { Editor } from "./editor";
 import { readHash, writeHash } from "./hash";
 import { Preview } from "./preview";
+import SplitPane from "react-split-pane";
+import "./resizer.css";
 
 const defaultCode = `
 # Hello
@@ -40,6 +42,9 @@ function App() {
     writeHash(input);
   }, [input]);
 
+  // when the width changes we want to re-render the preview
+  const [refreshKey, setRefreshKey] = useState(0);
+
   return data.standalonePreview ? (
     <Preview input={input} standalone={true} />
   ) : (
@@ -54,8 +59,15 @@ function App() {
         </a>
       </header>
       <main>
-        <Editor setInput={setInput} input={input} />
-        <Preview input={input} />
+        <SplitPane
+          split="vertical"
+          minSize={200}
+          defaultSize="50%"
+          onDragFinished={(e) => setRefreshKey(e)}
+        >
+          <Editor setInput={setInput} input={input} />
+          <Preview input={input} refreshKey={refreshKey} />
+        </SplitPane>
       </main>
     </div>
   );

playground/src/index.css

@@ -60,16 +60,18 @@ header svg {
   color: rgb(96 165 250);
 }
 main {
-  display: flex;
+  /* display: flex; */
   flex: 1 1 auto;
   overflow: hidden;
+  position: relative;
 }
 
 .editor-side {
-  min-width: 400px;
+  min-width: 200px;
   display: flex;
   flex-direction: column;
   flex: 1;
+  height: 100%;
   /* background-color: #222;
   color: white; */
 }
@@ -135,14 +137,17 @@ main {
 }
 
 .preview {
-  min-width: 600px;
   flex: 1;
   min-height: 0;
+}
+
+.preview:not(.standalone) {
   overflow: auto;
+  position: absolute;
+  inset: 0;
 }
 
 .preview.standalone {
-  overflow: unset;
   padding: 0.1px;
 }
 
@@ -184,7 +189,7 @@ main {
   z-index: 3;
   background-color: #222;
   color: #fafafa;
-  border-radius: 4px;
+  border-radius: 8px;
   border: 1px solid #fafafa;
 }
 

playground/src/preview.jsx

@@ -29,7 +29,7 @@ function ErrorFallback({ error }) {
   );
 }
 
-function InnerPreview({ input, standalone }) {
+function InnerPreview({ input, standalone, refreshKey }) {
   const [Content, setContent] = useState(undefined);
   const [error, setError] = useState(undefined);
   useEffect(() => {
@@ -78,7 +78,7 @@ function InnerPreview({ input, standalone }) {
         </a>
       )}
       <div className={`preview-container ${error ? "with-error" : ""}`}>
-        {Content ? <Content components={{ CH }} /> : null}
+        {Content ? <Content components={{ CH }} key={refreshKey} /> : null}
       </div>
     </>
   );

playground/src/resizer.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;
+}

yarn.lock

@@ -13635,7 +13635,7 @@ promzard@^0.3.0:
   dependencies:
     read "1"
 
-prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.4, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -14008,6 +14008,22 @@ react-router@6.2.2:
   dependencies:
     history "^5.2.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"