Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add resizable editor/layout to playground #2296

Merged
merged 4 commits into from
May 17, 2023
Merged

Add resizable editor/layout to playground #2296

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2072988
make playground layouts be resizeable
slorber May 4, 2023
0e059e0
scope CSS for resizeable frames only
slorber May 10, 2023
cbb5766
scope CSS for resizeable frames only
slorber May 10, 2023
f061096
scope CSS to playground editor code mirror wrapper div
slorber May 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 60 additions & 14 deletions docs/_asset/index.css
View file
Open in desktop
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;
Comment on lines +767 to +768
Copy link
Contributor Author

Choose a reason for hiding this comment

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

these 2 can now be more easily adjusted to define the initial height of the panels

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;
}
Copy link
Member

Choose a reason for hiding this comment

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

This selector applies to the options, making them rather big

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Oh yes, this is because margin collapsing only applies to block and not flex

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Fixed, also made them slightly smaller, will probably be better for introducing new options

CleanShot 2023-05-10 at 19 14 44@2x


.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
Open in desktop
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