Skip to content

Commit

Permalink
Add resizable editor/layout to playground
Browse files Browse the repository at this point in the history
  • Loading branch information
@slorber
slorber authored May 17, 2023
1 parent 7fd1d9a commit 57301df
Show file tree
Hide file tree
Showing 2 changed files with 75 additions and 26 deletions.
74 changes: 60 additions & 14 deletions docs/_asset/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down Expand Up @@ -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;
Expand All @@ -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%),
Expand All @@ -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;
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
27 changes: 15 additions & 12 deletions docs/_component/editor.client.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
))

Expand Down Expand Up @@ -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"
Expand All @@ -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">
Expand All @@ -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}
Expand Down Expand Up @@ -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',
Expand Down Expand Up @@ -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>
Expand All @@ -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">
Expand All @@ -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">
Expand All @@ -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">
Expand Down

1 comment on commit 57301df

@vercel
Copy link

@vercel vercel bot commented on 57301df May 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

mdx – ./

v2.mdxjs.com
mdx-mdx.vercel.app
mdx-git-main-mdx.vercel.app
mdxjs.com

Please sign in to comment.