Add resizable editor/layout to playground

Author: slorber

docs/_asset/index.css

@@ -301,11 +301,6 @@ pre code,
   background-color: #fafafa !important; /* Color from one-light */
 }
 
-.frame-body-box-fixed-height {
-  height: 20rem;
-  overflow-y: auto;
-}
-
 .frame-body-box {
   padding: calc(1em + 1ex);
 }
@@ -764,8 +759,21 @@ button.success {
   border-radius: 10px;
 }
 
+.frame-resizeable {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+
+  min-height: 10rem;
+  height: 24rem;
+  resize: vertical;
+}
+
 .frame-tab-bar {
+  flex-shrink: 0;
   display: flex;
+  flex-direction: row;
+  align-items: stretch;
   margin-block-start: calc(1em + 1ex);
   list-style-type: none;
   margin: 0;
@@ -776,10 +784,6 @@ button.success {
 .frame-tab-bar-scroll {
   overflow-x: auto;
   overflow-y: hidden;
-  flex: 1;
-  flex-direction: row;
-  align-items: stretch;
-  flex-grow: 1;
   mask-image: linear-gradient(
     to right,
     hsl(0deg 0% 100% / 30%),
@@ -789,11 +793,54 @@ button.success {
   );
 }
 
+.react-tabs__tab-panel {
+}
+
+.react-tabs__tab-panel--selected {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+/* Preview / Options */
+.react-tabs__tab-panel--selected.tab-panel-scrollable {
+  overflow: auto;
+}
+
 .frame-body {
   border-bottom-left-radius: 3px;
   border-bottom-right-radius: 3px;
 }
 
+.react-tabs__tab-panel--selected > .frame-body {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.react-tabs__tab-panel--selected:not(.tab-panel-scrollable) > .frame-body {
+  overflow: hidden;
+}
+
+.frame-body > .playground-editor-code-mirror,
+.frame-body > pre {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.frame-body > div > div.cm-editor {
+  flex-grow: 1;
+  overflow: hidden;
+}
+
+.frame-body > pre > code {
+  overflow-x: auto;
+  overflow-y: auto;
+}
+
 .frame-tab-bar + pre {
   margin-block-start: 0;
 }
@@ -893,6 +940,10 @@ button.success {
   background-color: var(--fg);
 }
 
+.playground-editor-options-tab-panel label {
+  margin-block: 0.5em;
+}
+
 .playground-result-badge::after {
   content: attr(data-count);
   display: inline-block;
@@ -923,11 +974,6 @@ button.success {
   font-size: 1rem;
 }
 
-.ͼ1 .cm-scroller,
-.ͼ1 .cm-content {
-  min-height: 20rem;
-}
-
 .ͼo {
   border-bottom-left-radius: 2px;
   border-bottom-right-radius: 2px;

docs/_component/editor.client.js

@@ -86,7 +86,10 @@ function ErrorFallback({error, resetErrorBoundary}) {
 
 const MemoizedCodeMirror = memo((props) => (
   <ErrorBoundary FallbackComponent={ErrorFallback}>
-    <CodeMirror {...props} />
+    <CodeMirror
+      {...props}
+      elementProps={{className: 'playground-editor-code-mirror'}}
+    />
   </ErrorBoundary>
 ))
 
@@ -130,7 +133,7 @@ export function Editor({children}) {
 
   return (
     <div>
-      <Tabs className="frame">
+      <Tabs className="frame frame-resizeable">
         <TabList className="frame-tab-bar frame-tab-bar-scroll">
           <Tab
             className="frame-tab-item frame-tab-item-dark"
@@ -146,7 +149,7 @@ export function Editor({children}) {
           </Tab>
         </TabList>
         <TabPanel>
-          <div className="frame-body frame-body-box-fixed-height">
+          <div className="frame-body">
             <noscript>
               <pre>
                 <code className="hljs language-md">
@@ -161,8 +164,8 @@ export function Editor({children}) {
             />
           </div>
         </TabPanel>
-        <TabPanel>
-          <form className="frame-body frame-body-box frame-body-box-fixed-height">
+        <TabPanel className="tab-panel-scrollable playground-editor-options-tab-panel">
+          <form className="frame-body frame-body-box">
             <label>
               <input
                 checked={state.gfm}
@@ -202,7 +205,7 @@ export function Editor({children}) {
         </TabPanel>
       </Tabs>
 
-      <Tabs className="frame">
+      <Tabs className="frame frame-resizeable">
         <TabList className="frame-tab-bar frame-tab-bar-scroll">
           {[
             'Run',
@@ -238,16 +241,16 @@ export function Editor({children}) {
           })}
         </TabList>
 
-        <TabPanel>
+        <TabPanel className="tab-panel-scrollable">
           <noscript>Enable JavaScript for the rendered result.</noscript>
-          <div className="frame-body frame-body-box-fixed-height frame-body-box">
+          <div className="frame-body frame-body-box">
             <ErrorBoundary FallbackComponent={ErrorFallback}>
               {state.file && state.file.result ? <Preview /> : null}
             </ErrorBoundary>
           </div>
         </TabPanel>
         <TabPanel>
-          <div className="frame-body frame-body-box-fixed-height">
+          <div className="frame-body">
             {state.file ? (
               stats.fatal ? (
                 <pre>
@@ -267,7 +270,7 @@ export function Editor({children}) {
           </div>
         </TabPanel>
         <TabPanel>
-          <div className="frame-body frame-body-box-fixed-height">
+          <div className="frame-body">
             {state.file && state.file.data.mdast ? (
               <pre>
                 <code className="hljs language-js">
@@ -284,7 +287,7 @@ export function Editor({children}) {
           </div>
         </TabPanel>
         <TabPanel>
-          <div className="frame-body frame-body-box-fixed-height">
+          <div className="frame-body">
             {state.file && state.file.data.hast ? (
               <pre>
                 <code className="hljs language-js">
@@ -301,7 +304,7 @@ export function Editor({children}) {
           </div>
         </TabPanel>
         <TabPanel>
-          <div className="frame-body frame-body-box-fixed-height">
+          <div className="frame-body">
             {state.file && state.file.data.esast ? (
               <pre>
                 <code className="hljs language-js">