mirror of
https://github.com/reactjs/react.dev.git
synced 2026-02-23 20:23:08 +00:00
[Beta] Upgrade Sandpack (#5033)
* Revert "Revert "[beta] upgrade sandpack and refactor sandpack.css (#4843)" (#4959)"
This reverts commit da6a06e54b.
* Fix tabbing
* Fixes
* More bump
* Bump bundler
* Fix overflows
This commit is contained in:
dan
@@ -22,7 +22,7 @@
|
||||
"check-all": "npm-run-all prettier lint:fix tsc"
|
||||
},
|
||||
"dependencies": {
|
||||
"@codesandbox/sandpack-react": "v0.19.8-experimental.7",
|
||||
"@codesandbox/sandpack-react": "1.7.2",
|
||||
"@docsearch/css": "3.0.0-alpha.41",
|
||||
"@docsearch/react": "3.0.0-alpha.41",
|
||||
"@headlessui/react": "^1.7.0",
|
||||
|
||||
@@ -1,37 +0,0 @@
|
||||
diff --git a/node_modules/@codesandbox/sandpack-react/dist/esm/index.js b/node_modules/@codesandbox/sandpack-react/dist/esm/index.js
|
||||
index ced9bd3..7e5e366 100644
|
||||
--- a/node_modules/@codesandbox/sandpack-react/dist/esm/index.js
|
||||
+++ b/node_modules/@codesandbox/sandpack-react/dist/esm/index.js
|
||||
@@ -566,17 +566,16 @@ var REACT_TEMPLATE = {
|
||||
},
|
||||
"/index.js": {
|
||||
code: `import React, { StrictMode } from "react";
|
||||
-import ReactDOM from "react-dom";
|
||||
+import { createRoot } from "react-dom/client";
|
||||
import "./styles.css";
|
||||
|
||||
import App from "./App";
|
||||
|
||||
-const rootElement = document.getElementById("root");
|
||||
-ReactDOM.render(
|
||||
+const root = createRoot(document.getElementById("root"));
|
||||
+root.render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
- </StrictMode>,
|
||||
- rootElement
|
||||
+ </StrictMode>
|
||||
);`
|
||||
},
|
||||
"/styles.css": {
|
||||
@@ -611,8 +610,8 @@ h1 {
|
||||
}
|
||||
},
|
||||
dependencies: {
|
||||
- react: "^17.0.0",
|
||||
- "react-dom": "^17.0.0",
|
||||
+ react: "^18.0.0",
|
||||
+ "react-dom": "^18.0.0",
|
||||
"react-scripts": "^4.0.0"
|
||||
},
|
||||
entry: "/index.js",
|
||||
@@ -6,7 +6,6 @@ import cn from 'classnames';
|
||||
import {
|
||||
SandpackCodeViewer,
|
||||
SandpackProvider,
|
||||
SandpackThemeProvider,
|
||||
} from '@codesandbox/sandpack-react';
|
||||
import rangeParser from 'parse-numeric-range';
|
||||
import {CustomTheme} from '../Sandpack/Themes';
|
||||
@@ -68,27 +67,34 @@ const CodeBlock = function CodeBlock({
|
||||
const decorators = getDecoratedLineInfo();
|
||||
return (
|
||||
<div
|
||||
translate="no"
|
||||
key={
|
||||
// HACK: There seems to be a bug where the rendered result
|
||||
// "lags behind" the edits to it. For now, force it to reset.
|
||||
process.env.NODE_ENV === 'development' ? children : ''
|
||||
}
|
||||
className={cn(
|
||||
'sandpack sandpack--codeblock',
|
||||
'rounded-lg h-full w-full overflow-x-auto flex items-center bg-wash dark:bg-gray-95 shadow-lg',
|
||||
!noMargin && 'my-8'
|
||||
)}>
|
||||
<SandpackProvider
|
||||
files={{
|
||||
[filename]: {
|
||||
code: children.trimEnd(),
|
||||
},
|
||||
}}
|
||||
customSetup={{
|
||||
entry: filename,
|
||||
files: {
|
||||
[filename]: {
|
||||
code: children.trimEnd(),
|
||||
},
|
||||
},
|
||||
}}>
|
||||
<SandpackThemeProvider theme={CustomTheme}>
|
||||
<SandpackCodeViewer
|
||||
key={children.trimEnd()}
|
||||
showLineNumbers={false}
|
||||
decorators={decorators}
|
||||
/>
|
||||
</SandpackThemeProvider>
|
||||
}}
|
||||
options={{
|
||||
initMode: 'immediate',
|
||||
}}
|
||||
theme={CustomTheme}>
|
||||
<SandpackCodeViewer
|
||||
key={children.trimEnd()}
|
||||
showLineNumbers={false}
|
||||
decorators={decorators}
|
||||
/>
|
||||
</SandpackProvider>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -7,19 +7,16 @@ import {
|
||||
useSandpack,
|
||||
useActiveCode,
|
||||
SandpackCodeEditor,
|
||||
SandpackThemeProvider,
|
||||
SandpackReactDevTools,
|
||||
// SandpackReactDevTools,
|
||||
SandpackLayout,
|
||||
} from '@codesandbox/sandpack-react';
|
||||
import cn from 'classnames';
|
||||
|
||||
import {IconChevron} from 'components/Icon/IconChevron';
|
||||
import {NavigationBar} from './NavigationBar';
|
||||
import {Preview} from './Preview';
|
||||
import {CustomTheme} from './Themes';
|
||||
import {useSandpackLint} from './useSandpackLint';
|
||||
|
||||
// Workaround for https://github.com/reactjs/reactjs.org/issues/4686#issuecomment-1137402613.
|
||||
const emptyArray: Array<any> = [];
|
||||
import {useSandpackLint} from './useSandpackLint';
|
||||
|
||||
export function CustomPreset({
|
||||
showDevTools,
|
||||
@@ -39,11 +36,11 @@ export function CustomPreset({
|
||||
const {code} = useActiveCode();
|
||||
const [isExpanded, setIsExpanded] = React.useState(false);
|
||||
|
||||
const {activePath} = sandpack;
|
||||
if (!lineCountRef.current[activePath]) {
|
||||
lineCountRef.current[activePath] = code.split('\n').length;
|
||||
const {activeFile} = sandpack;
|
||||
if (!lineCountRef.current[activeFile]) {
|
||||
lineCountRef.current[activeFile] = code.split('\n').length;
|
||||
}
|
||||
const lineCount = lineCountRef.current[activePath];
|
||||
const lineCount = lineCountRef.current[activeFile];
|
||||
const isExpandable = lineCount > 16 || isExpanded;
|
||||
|
||||
return (
|
||||
@@ -52,64 +49,61 @@ export function CustomPreset({
|
||||
className="shadow-lg dark:shadow-lg-dark rounded-lg"
|
||||
ref={containerRef}>
|
||||
<NavigationBar providedFiles={providedFiles} />
|
||||
<SandpackThemeProvider theme={CustomTheme}>
|
||||
<div
|
||||
ref={sandpack.lazyAnchorRef}
|
||||
className={cn(
|
||||
'sp-layout sp-custom-layout',
|
||||
showDevTools && devToolsLoaded && 'sp-layout-devtools',
|
||||
isExpanded && 'sp-layout-expanded'
|
||||
)}>
|
||||
<SandpackCodeEditor
|
||||
showLineNumbers
|
||||
showInlineErrors
|
||||
showTabs={false}
|
||||
showRunButton={false}
|
||||
extensions={lintExtensions}
|
||||
extensionsKeymap={emptyArray}
|
||||
/>
|
||||
<Preview
|
||||
className="order-last xl:order-2"
|
||||
isExpanded={isExpanded}
|
||||
lintErrors={lintErrors}
|
||||
/>
|
||||
{isExpandable && (
|
||||
<button
|
||||
translate="yes"
|
||||
className="flex text-base justify-between dark:border-card-dark bg-wash dark:bg-card-dark items-center z-10 rounded-t-none p-1 w-full order-2 xl:order-last border-b-1 relative top-0"
|
||||
onClick={() => {
|
||||
const nextIsExpanded = !isExpanded;
|
||||
flushSync(() => {
|
||||
setIsExpanded(nextIsExpanded);
|
||||
});
|
||||
if (!nextIsExpanded && containerRef.current !== null) {
|
||||
<SandpackLayout
|
||||
className={cn(
|
||||
showDevTools && devToolsLoaded && 'sp-layout-devtools',
|
||||
!isExpandable && 'rounded-b-lg overflow-hidden',
|
||||
isExpanded && 'sp-layout-expanded'
|
||||
)}>
|
||||
<SandpackCodeEditor
|
||||
showLineNumbers
|
||||
showInlineErrors
|
||||
showTabs={false}
|
||||
showRunButton={false}
|
||||
extensions={lintExtensions}
|
||||
/>
|
||||
<Preview
|
||||
className="order-last xl:order-2"
|
||||
isExpanded={isExpanded}
|
||||
lintErrors={lintErrors}
|
||||
/>
|
||||
{isExpandable && (
|
||||
<button
|
||||
translate="yes"
|
||||
className="sandpack-expand flex text-base justify-between dark:border-card-dark bg-wash dark:bg-card-dark items-center z-10 p-1 w-full order-2 xl:order-last border-b-1 relative top-0"
|
||||
onClick={() => {
|
||||
const nextIsExpanded = !isExpanded;
|
||||
flushSync(() => {
|
||||
setIsExpanded(nextIsExpanded);
|
||||
});
|
||||
if (!nextIsExpanded && containerRef.current !== null) {
|
||||
// @ts-ignore
|
||||
if (containerRef.current.scrollIntoViewIfNeeded) {
|
||||
// @ts-ignore
|
||||
if (containerRef.current.scrollIntoViewIfNeeded) {
|
||||
// @ts-ignore
|
||||
containerRef.current.scrollIntoViewIfNeeded();
|
||||
} else {
|
||||
containerRef.current.scrollIntoView({
|
||||
block: 'nearest',
|
||||
inline: 'nearest',
|
||||
});
|
||||
}
|
||||
containerRef.current.scrollIntoViewIfNeeded();
|
||||
} else {
|
||||
containerRef.current.scrollIntoView({
|
||||
block: 'nearest',
|
||||
inline: 'nearest',
|
||||
});
|
||||
}
|
||||
}}>
|
||||
<span className="flex p-2 focus:outline-none text-primary dark:text-primary-dark">
|
||||
<IconChevron
|
||||
className="inline mr-1.5 text-xl"
|
||||
displayDirection={isExpanded ? 'up' : 'down'}
|
||||
/>
|
||||
{isExpanded ? 'Show less' : 'Show more'}
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{showDevTools && (
|
||||
<SandpackReactDevTools onLoadModule={onDevToolsLoad} />
|
||||
}
|
||||
}}>
|
||||
<span className="flex p-2 focus:outline-none text-primary dark:text-primary-dark">
|
||||
<IconChevron
|
||||
className="inline mr-1.5 text-xl"
|
||||
displayDirection={isExpanded ? 'up' : 'down'}
|
||||
/>
|
||||
{isExpanded ? 'Show less' : 'Show more'}
|
||||
</span>
|
||||
</button>
|
||||
)}
|
||||
</SandpackThemeProvider>
|
||||
</SandpackLayout>
|
||||
|
||||
{/* {showDevTools && (
|
||||
// @ts-ignore TODO(@danilowoz): support devtools
|
||||
<SandpackReactDevTools onLoadModule={onDevToolsLoad} />
|
||||
)} */}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -40,10 +40,10 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
|
||||
// By default, show the dropdown because all tabs may not fit.
|
||||
// We don't know whether they'll fit or not until after hydration:
|
||||
const [showDropdown, setShowDropdown] = React.useState(true);
|
||||
const {openPaths, clients, setActiveFile, activePath} = sandpack;
|
||||
const {activeFile, setActiveFile, visibleFiles, clients} = sandpack;
|
||||
const clientId = Object.keys(clients)[0];
|
||||
const {refresh} = useSandpackNavigation(clientId);
|
||||
const isMultiFile = openPaths.length > 1;
|
||||
const isMultiFile = visibleFiles.length > 1;
|
||||
const hasJustToggledDropdown = React.useRef(false);
|
||||
|
||||
// Keep track of whether we can show all tabs or just the dropdown.
|
||||
@@ -88,9 +88,9 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-wash dark:bg-card-dark flex justify-between items-center relative z-10 border-b border-border dark:border-border-dark rounded-t-lg rounded-b-none">
|
||||
<div className="bg-wash dark:bg-card-dark flex justify-between items-center relative z-10 border-b border-border dark:border-border-dark rounded-t-lg text-lg">
|
||||
<div className="flex-1 grow min-w-0 px-4 lg:px-6">
|
||||
<Listbox value={activePath} onChange={setActiveFile}>
|
||||
<Listbox value={activeFile} onChange={setActiveFile}>
|
||||
<div ref={containerRef}>
|
||||
<div className="relative overflow-hidden">
|
||||
<div
|
||||
@@ -105,12 +105,12 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
|
||||
)}>
|
||||
<FileTabs />
|
||||
</div>
|
||||
<Listbox.Button className="contents">
|
||||
<Listbox.Button as={React.Fragment}>
|
||||
{({open}) => (
|
||||
// If tabs don't fit, display the dropdown instead.
|
||||
// The dropdown is absolutely positioned inside the
|
||||
// space that's taken by the (invisible) tab list.
|
||||
<div
|
||||
<button
|
||||
className={cn(
|
||||
'absolute top-0 left-0',
|
||||
!showDropdown && 'invisible'
|
||||
@@ -120,7 +120,7 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
|
||||
'h-full py-2 px-1 mt-px -mb-px flex border-b text-link dark:text-link-dark border-link dark:border-link-dark items-center text-md leading-tight truncate'
|
||||
)}
|
||||
style={{maxWidth: '160px'}}>
|
||||
{getFileName(activePath)}
|
||||
{getFileName(activeFile)}
|
||||
{isMultiFile && (
|
||||
<span className="ml-2">
|
||||
<IconChevron
|
||||
@@ -129,22 +129,27 @@ export function NavigationBar({providedFiles}: {providedFiles: Array<string>}) {
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
)}
|
||||
</Listbox.Button>
|
||||
</div>
|
||||
</div>
|
||||
{isMultiFile && showDropdown && (
|
||||
<Listbox.Options className="absolute mt-0.5 bg-card dark:bg-card-dark px-2 left-0 right-0 mx-0 rounded-b-lg border-1 border-border dark:border-border-dark rounded-sm shadow-md">
|
||||
{openPaths.map((filePath: string) => (
|
||||
{visibleFiles.map((filePath: string) => (
|
||||
<Listbox.Option
|
||||
key={filePath}
|
||||
value={filePath}
|
||||
className={cn(
|
||||
'text-md mx-2 my-4 cursor-pointer',
|
||||
filePath === activePath && 'text-link dark:text-link-dark'
|
||||
)}>
|
||||
{getFileName(filePath)}
|
||||
as={React.Fragment}>
|
||||
{({active}) => (
|
||||
<li
|
||||
className={cn(
|
||||
'text-md mx-2 my-4 cursor-pointer',
|
||||
active && 'text-link dark:text-link-dark'
|
||||
)}>
|
||||
{getFileName(filePath)}
|
||||
</li>
|
||||
)}
|
||||
</Listbox.Option>
|
||||
))}
|
||||
</Listbox.Options>
|
||||
|
||||
@@ -4,12 +4,19 @@
|
||||
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
import * as React from 'react';
|
||||
import {useSandpack, LoadingOverlay} from '@codesandbox/sandpack-react';
|
||||
import {
|
||||
useSandpack,
|
||||
LoadingOverlay,
|
||||
SandpackStack,
|
||||
} from '@codesandbox/sandpack-react';
|
||||
import cn from 'classnames';
|
||||
import {Error} from './Error';
|
||||
import {SandpackConsole} from './Console';
|
||||
import type {LintDiagnostic} from './useSandpackLint';
|
||||
|
||||
/**
|
||||
* TODO: can we use React.useId?
|
||||
*/
|
||||
const generateRandomId = (): string =>
|
||||
Math.floor(Math.random() * 10000).toString();
|
||||
|
||||
@@ -149,8 +156,8 @@ export function Preview({
|
||||
// The best way to test it is to actually go through some challenges.
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn('sp-stack', className)}
|
||||
<SandpackStack
|
||||
className={className}
|
||||
style={{
|
||||
// TODO: clean up this mess.
|
||||
...customStyle,
|
||||
@@ -158,7 +165,7 @@ export function Preview({
|
||||
}}>
|
||||
<div
|
||||
className={cn(
|
||||
'p-0 sm:p-2 md:p-4 lg:p-8 md:bg-card md:dark:bg-wash-dark h-full relative md:rounded-b-lg lg:rounded-b-none',
|
||||
'p-0 sm:p-2 md:p-4 lg:p-8 bg-card dark:bg-wash-dark h-full relative md:rounded-b-lg lg:rounded-b-none',
|
||||
// Allow content to be scrolled if it's too high to fit.
|
||||
// Note we don't want this in the expanded state
|
||||
// because it breaks position: sticky (and isn't needed anyway).
|
||||
@@ -172,7 +179,7 @@ export function Preview({
|
||||
: isExpanded
|
||||
? 'sticky'
|
||||
: undefined,
|
||||
top: isExpanded ? '2rem' : undefined,
|
||||
top: isExpanded ? '4rem' : undefined,
|
||||
}}>
|
||||
<iframe
|
||||
ref={iframeRef}
|
||||
@@ -206,11 +213,12 @@ export function Preview({
|
||||
</div>
|
||||
)}
|
||||
<LoadingOverlay
|
||||
showOpenInCodeSandbox
|
||||
clientId={clientId.current}
|
||||
loading={!isReady && iframeComputedHeight === null}
|
||||
/>
|
||||
</div>
|
||||
{!error && <SandpackConsole />}
|
||||
</div>
|
||||
</SandpackStack>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -7,7 +7,7 @@ import {SandpackProvider} from '@codesandbox/sandpack-react';
|
||||
import {SandpackLogLevel} from '@codesandbox/sandpack-client';
|
||||
import {CustomPreset} from './CustomPreset';
|
||||
import {createFileMap} from './createFileMap';
|
||||
|
||||
import {CustomTheme} from './Themes';
|
||||
import type {SandpackSetup} from '@codesandbox/sandpack-react';
|
||||
|
||||
type SandpackProps = {
|
||||
@@ -75,15 +75,19 @@ function SandpackRoot(props: SandpackProps) {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="sandpack-container my-8" translate="no">
|
||||
<div className="sandpack sandpack--playground sandbox my-8">
|
||||
<SandpackProvider
|
||||
template="react"
|
||||
customSetup={{...setup, files: files}}
|
||||
autorun={autorun}
|
||||
initMode="user-visible"
|
||||
initModeObserverOptions={{rootMargin: '1400px 0px'}}
|
||||
bundlerURL="https://6b760a26.sandpack-bundler.pages.dev"
|
||||
logLevel={SandpackLogLevel.None}>
|
||||
files={files}
|
||||
customSetup={setup}
|
||||
theme={CustomTheme}
|
||||
options={{
|
||||
autorun,
|
||||
initMode: 'user-visible',
|
||||
initModeObserverOptions: {rootMargin: '1400px 0px'},
|
||||
bundlerURL: 'https://ac83f2d6.sandpack-bundler.pages.dev',
|
||||
logLevel: SandpackLogLevel.None,
|
||||
}}>
|
||||
<CustomPreset
|
||||
showDevTools={showDevTools}
|
||||
onDevToolsLoad={() => setDevToolsLoaded(true)}
|
||||
|
||||
@@ -5,32 +5,39 @@
|
||||
import tailwindConfig from '../../../../tailwind.config';
|
||||
|
||||
export const CustomTheme = {
|
||||
palette: {
|
||||
activeText: 'inherit',
|
||||
defaultText: 'inherit',
|
||||
inactiveText: 'inherit',
|
||||
activeBackground: 'inherit',
|
||||
defaultBackground: 'inherit',
|
||||
inputBackground: 'inherit',
|
||||
colors: {
|
||||
accent: 'inherit',
|
||||
errorBackground: 'inherit',
|
||||
errorForeground: 'inherit',
|
||||
base: 'inherit',
|
||||
clickable: 'inherit',
|
||||
disabled: 'inherit',
|
||||
error: 'inherit',
|
||||
errorSurface: 'inherit',
|
||||
hover: 'inherit',
|
||||
surface1: 'inherit',
|
||||
surface2: 'inherit',
|
||||
surface3: 'inherit',
|
||||
warning: 'inherit',
|
||||
warningSurface: 'inherit',
|
||||
},
|
||||
syntax: {
|
||||
plain: 'var(--theme-plain)',
|
||||
comment: 'var(--theme-comment)',
|
||||
keyword: 'var(--theme-keyword)',
|
||||
tag: 'var(--theme-tag)',
|
||||
punctuation: 'var(--theme-punctuation)',
|
||||
definition: 'var(--theme-definition)',
|
||||
property: 'var(--theme-property)',
|
||||
static: 'var(--theme-static)',
|
||||
string: 'var(--theme-string)',
|
||||
plain: 'inherit',
|
||||
comment: 'inherit',
|
||||
keyword: 'inherit',
|
||||
tag: 'inherit',
|
||||
punctuation: 'inherit',
|
||||
definition: 'inherit',
|
||||
property: 'inherit',
|
||||
static: 'inherit',
|
||||
string: 'inherit',
|
||||
},
|
||||
typography: {
|
||||
bodyFont: tailwindConfig.theme.extend.fontFamily.sans.join(', '),
|
||||
monoFont: tailwindConfig.theme.extend.fontFamily.mono.join(', '),
|
||||
fontSize: tailwindConfig.theme.extend.fontSize.code,
|
||||
font: {
|
||||
body: tailwindConfig.theme.extend.fontFamily.sans
|
||||
.join(', ')
|
||||
.replace(/"/gm, ''),
|
||||
mono: tailwindConfig.theme.extend.fontFamily.mono
|
||||
.join(', ')
|
||||
.replace(/"/gm, ''),
|
||||
size: tailwindConfig.theme.extend.fontSize.code,
|
||||
lineHeight: '24px',
|
||||
},
|
||||
};
|
||||
|
||||
@@ -8,7 +8,7 @@ import {createFileMap} from './createFileMap';
|
||||
const SandpackRoot = React.lazy(() => import('./SandpackRoot'));
|
||||
|
||||
const SandpackGlimmer = ({code}: {code: string}) => (
|
||||
<div className="sandpack-container my-8">
|
||||
<div className="sandpack my-8">
|
||||
<div className="shadow-lg dark:shadow-lg-dark rounded-lg">
|
||||
<div className="bg-wash h-10 dark:bg-card-dark flex justify-between items-center relative z-10 border-b border-border dark:border-border-dark rounded-t-lg rounded-b-none">
|
||||
<div className="px-4 lg:px-6">
|
||||
|
||||
@@ -11,7 +11,6 @@ import '@docsearch/css';
|
||||
import '../styles/algolia.css';
|
||||
import '../styles/index.css';
|
||||
import '../styles/sandpack.css';
|
||||
import '@codesandbox/sandpack-react/dist/index.css';
|
||||
|
||||
if (typeof window !== 'undefined') {
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
|
||||
import * as React from 'react';
|
||||
import {Html, Head, Main, NextScript} from 'next/document';
|
||||
import {getSandpackCssText} from '@codesandbox/sandpack-react';
|
||||
|
||||
const MyDocument = () => {
|
||||
// @todo specify language in HTML?
|
||||
@@ -11,6 +12,7 @@ const MyDocument = () => {
|
||||
<Html lang="en">
|
||||
<Head />
|
||||
<body className="font-sans antialiased text-lg bg-wash dark:bg-wash-dark text-secondary dark:text-secondary-dark leading-base">
|
||||
<style id="sandpack">{getSandpackCssText()}</style>
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
|
||||
@@ -2,196 +2,137 @@
|
||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Theme
|
||||
*/
|
||||
html .sp-wrapper {
|
||||
color-scheme: inherit;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
|
||||
/* palette */
|
||||
--sp-colors-fg-active: #24292e !important;
|
||||
--sp-colors-fg-default: #959da5 !important;
|
||||
--sp-colors-fg-inactive: #e4e7eb !important;
|
||||
--sp-colors-bg-active: #e4e7eb !important;
|
||||
--sp-colors-bg-default: #ffffff !important;
|
||||
--sp-colors-bg-default-overlay: #ffffff !important;
|
||||
--sp-colors-bg-input: #ffffff !important;
|
||||
--sp-colors-accent: #c8c8fa !important;
|
||||
--sp-colors-bg-error: #ffcdca !important;
|
||||
--sp-colors-fg-error: #811e18 !important;
|
||||
/* syntax */
|
||||
--theme-plain: #24292e;
|
||||
--theme-comment: #6a737d;
|
||||
--theme-keyword: #d73a49;
|
||||
--theme-tag: #22863a;
|
||||
--theme-punctuation: #24292e;
|
||||
--theme-definition: #6f42c1;
|
||||
--theme-property: #005cc5;
|
||||
--theme-static: #032f62;
|
||||
--theme-string: #032f62;
|
||||
--sp-colors-accent: #087ea4;
|
||||
--sp-colors-clickable: #959da5;
|
||||
--sp-colors-disabled: #24292e;
|
||||
--sp-colors-error: #811e18;
|
||||
--sp-colors-error-surface: #ffcdca;
|
||||
--sp-colors-surface1: #fff;
|
||||
--sp-colors-surface2: #e4e7eb;
|
||||
|
||||
--sp-syntax-color-plain: #24292e;
|
||||
--sp-syntax-color-comment: #6a737d;
|
||||
--sp-syntax-color-keyword: #d73a49;
|
||||
--sp-syntax-color-tag: #22863a;
|
||||
--sp-syntax-color-punctuation: #24292e;
|
||||
--sp-syntax-color-definition: #6f42c1;
|
||||
--sp-syntax-color-property: #005cc5;
|
||||
--sp-syntax-color-static: #032f62;
|
||||
--sp-syntax-color-string: #032f62;
|
||||
}
|
||||
|
||||
html.dark .sp-wrapper {
|
||||
--sp-colors-fg-active: #ffffff !important;
|
||||
--sp-colors-fg-default: #999999 !important;
|
||||
--sp-colors-fg-inactive: #343434 !important;
|
||||
--sp-colors-bg-active: #343434 !important;
|
||||
--sp-colors-bg-default: #16181d !important;
|
||||
--sp-colors-bg-default-overlay: #16181d !important;
|
||||
--sp-colors-bg-input: #242424 !important;
|
||||
--sp-colors-accent: #6caedd !important;
|
||||
--sp-colors-bg-error: #ffcdca !important;
|
||||
--sp-colors-fg-error: #811e18 !important;
|
||||
/* syntax */
|
||||
--theme-plain: #ffffff;
|
||||
--theme-comment: #757575;
|
||||
--theme-keyword: #77b7d7;
|
||||
--theme-tag: #dfab5c;
|
||||
--theme-punctuation: #ffffff;
|
||||
--theme-definition: #86d9ca;
|
||||
--theme-property: #77b7d7;
|
||||
--theme-static: #c64640;
|
||||
--theme-string: #977cdc;
|
||||
--sp-colors-accent: #149eca;
|
||||
--sp-colors-clickable: #999;
|
||||
--sp-colors-disabled: #fff;
|
||||
--sp-colors-error: #811e18;
|
||||
--sp-colors-error-surface: #ffcdca;
|
||||
--sp-colors-surface1: #16181d;
|
||||
--sp-colors-surface2: #343a46;
|
||||
|
||||
--sp-syntax-color-plain: #ffffff;
|
||||
--sp-syntax-color-comment: #757575;
|
||||
--sp-syntax-color-keyword: #77b7d7;
|
||||
--sp-syntax-color-tag: #dfab5c;
|
||||
--sp-syntax-color-punctuation: #ffffff;
|
||||
--sp-syntax-color-definition: #86d9ca;
|
||||
--sp-syntax-color-property: #77b7d7;
|
||||
--sp-syntax-color-static: #c64640;
|
||||
--sp-syntax-color-string: #977cdc;
|
||||
}
|
||||
|
||||
.sp-tabs,
|
||||
.sp-tab-button:hover {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.sp-tabs .sp-tab-button {
|
||||
color: #087ea4;
|
||||
padding: 0 6px;
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
|
||||
html.dark .sp-tabs .sp-tab-button {
|
||||
color: #149eca;
|
||||
}
|
||||
|
||||
.sp-tabs .sp-tab-button:hover {
|
||||
color: #087ea4;
|
||||
}
|
||||
|
||||
html.dark .sp-tabs .sp-tab-button:hover {
|
||||
color: #149eca;
|
||||
}
|
||||
|
||||
.sp-tabs .sp-tab-button[data-active='true'] {
|
||||
color: #087ea4;
|
||||
border-bottom: 2px solid #087ea4;
|
||||
}
|
||||
|
||||
html.dark .sp-tabs .sp-tab-button[data-active='true'] {
|
||||
color: #149eca;
|
||||
border-bottom: 2px solid #149eca;
|
||||
}
|
||||
|
||||
.sp-stack .sp-code-editor,
|
||||
.sp-tabs .sp-tabs-scrollable-container {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sp-code-editor .cm-errorLine {
|
||||
background-color: rgba(255, 107, 99, 0.1);
|
||||
position: relative;
|
||||
padding-right: 2em !important;
|
||||
display: inline-block;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.sp-code-editor .cm-errorLine:after {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 0;
|
||||
content: '\26A0';
|
||||
font-size: 22px;
|
||||
line-height: 20px;
|
||||
color: #ff3d3d;
|
||||
}
|
||||
.sp-code-editor .cm-tooltip {
|
||||
border: 0;
|
||||
max-width: 200px;
|
||||
}
|
||||
html.dark .sp-code-editor .cm-diagnostic {
|
||||
color: var(--sp-colors-bg-default);
|
||||
}
|
||||
.sp-code-editor .cm-diagnostic-error {
|
||||
@apply border-red-40;
|
||||
}
|
||||
.sp-code-editor .cm-diagnostic-warning {
|
||||
border-left: 5px solid orange;
|
||||
}
|
||||
|
||||
/*
|
||||
* These are manually adjusted to match the final
|
||||
* rendered version without any layout shifts.
|
||||
* Note this affects both sandboxes and code blocks.
|
||||
*
|
||||
* There are probably more maintainable ways to do this.
|
||||
* However, as long as there are kind people paying close
|
||||
* attention to these subtler details, I shall sleep in peace.
|
||||
*
|
||||
* If you know a better way to keep them from diverging, send a PR.
|
||||
/**
|
||||
* Reset
|
||||
*/
|
||||
.sp-cm {
|
||||
-webkit-text-size-adjust: none !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
.cm-wrap {
|
||||
background: transparent !important;
|
||||
}
|
||||
.sp-pre-placeholder {
|
||||
display: block !important;
|
||||
margin-top: 0px !important;
|
||||
margin-bottom: 0px !important;
|
||||
padding: 18px var(--sp-space-3) !important;
|
||||
@apply font-mono !important;
|
||||
font-size: 13.6px !important;
|
||||
line-height: 24px !important;
|
||||
height: 100%;
|
||||
}
|
||||
.text-xl .sp-pre-placeholder {
|
||||
font-size: 16px !important;
|
||||
line-height: 24px !important;
|
||||
}
|
||||
.sp-cm .cm-scroller {
|
||||
overflow: auto !important;
|
||||
padding: 18px 0 !important;
|
||||
.sandpack--playground .sp-layout,
|
||||
.sandpack--playground .sp-tabs,
|
||||
.sandpack--playground .cm-activeLine,
|
||||
.sandpack .cm-editor,
|
||||
.sandpack--playground .cm-editor .cm-matchingBracket {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.console .sp-cm,
|
||||
.console .sp-cm .cm-scroller,
|
||||
.console .sp-cm .cm-line {
|
||||
padding: 0px !important;
|
||||
.sandpack--playground .cm-content {
|
||||
caret-color: initial;
|
||||
}
|
||||
|
||||
.sp-cm .cm-gutters {
|
||||
background-color: var(--sp-colors-bg-default);
|
||||
z-index: 1;
|
||||
/**
|
||||
* Layout
|
||||
*/
|
||||
.sandpack .sp-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
.sp-wrapper {
|
||||
width: 100% !important;
|
||||
}
|
||||
.sp-wrapper .sp-custom-layout {
|
||||
overflow: initial;
|
||||
border: 0px solid transparent;
|
||||
border-top-left-radius: 0px;
|
||||
border-top-right-radius: 0px;
|
||||
|
||||
.sandpack .sp-layout {
|
||||
-webkit-mask-image: -webkit-radial-gradient(
|
||||
var(--sp-colors-surface1),
|
||||
var(--sp-colors-surface1)
|
||||
); /* safest way to make all corner rounded */
|
||||
|
||||
border-bottom-left-radius: 0.5rem;
|
||||
border-bottom-right-radius: 0.5rem;
|
||||
}
|
||||
.sp-wrapper .sp-layout-devtools {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
@media screen and (max-width: 768px) {
|
||||
.sp-layout > .sp-stack {
|
||||
height: auto;
|
||||
min-width: 100% !important;
|
||||
}
|
||||
}
|
||||
html.dark .sp-layout > :not(:first-child) {
|
||||
border-color: #343a46;
|
||||
.sandpack .sp-layout > .sp-stack {
|
||||
flex: 1 1 0px;
|
||||
height: var(--sp-layout-height);
|
||||
}
|
||||
html.dark .sp-layout {
|
||||
background-color: #343a46;
|
||||
|
||||
.sandpack .sp-layout > :not(:first-child) {
|
||||
border-left: 1px solid var(--sp-colors-surface2);
|
||||
border-top: 1px solid var(--sp-colors-surface2);
|
||||
margin-left: -1px;
|
||||
margin-top: -1px;
|
||||
position: relative;
|
||||
}
|
||||
html .sp-loading {
|
||||
background-color: transparent;
|
||||
|
||||
.sandpack .sp-cm {
|
||||
padding-left: 8px;
|
||||
}
|
||||
html.dark .sp-loading {
|
||||
background-color: #23272f;
|
||||
|
||||
/**
|
||||
* Focus ring
|
||||
*/
|
||||
.sandpack--playground .sp-tab-button {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.sandpack--playground .sp-tab-button:focus {
|
||||
outline: revert;
|
||||
}
|
||||
|
||||
.sandpack--playground .sp-tab-button:focus-visible {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.sandpack .sp-cm:focus-visible {
|
||||
box-shadow: inset 0 0 0 4px rgba(20, 158, 202, 0.4);
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
/**
|
||||
* Navigation
|
||||
*/
|
||||
.sandpack--playground .sp-tabs-scrollable-container {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sp-tabs .sp-tab-button {
|
||||
padding: 0 6px;
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
@@ -200,84 +141,126 @@ html.dark .sp-loading {
|
||||
}
|
||||
}
|
||||
|
||||
/* Devtools */
|
||||
.sp-devtools {
|
||||
border-bottom-left-radius: 0.5rem;
|
||||
border-bottom-right-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
.sp-devtools > div {
|
||||
--color-background: var(--sp-colors-bg-default) !important;
|
||||
--color-background-inactive: var(--sp-colors-fg-inactive) !important;
|
||||
--color-background-selected: #087ea4 !important;
|
||||
--color-background-hover: transparent !important;
|
||||
--color-modal-background: #ffffffd2 !important;
|
||||
|
||||
--color-tab-selected-border: #087ea4 !important;
|
||||
|
||||
--color-component-name: var(--theme-definition) !important;
|
||||
--color-attribute-name: var(--theme-property) !important;
|
||||
--color-attribute-value: var(--theme-string) !important;
|
||||
--color-attribute-editable-value: var(--theme-property) !important;
|
||||
--color-attribute-name-not-editable: var(--sp-colors-fg-default) !important;
|
||||
--color-button-background-focus: var(--sp-colors-fg-inactive) !important;
|
||||
|
||||
--color-button-active: #087ea4 !important;
|
||||
--color-button-background: transparent !important;
|
||||
--color-button: var(--sp-colors-fg-default) !important;
|
||||
--color-button-hover: var(--sp-colors-fg-active) !important;
|
||||
|
||||
--color-border: var(--sp-colors-fg-inactive) !important;
|
||||
--color-text: rgb(35, 39, 47) !important;
|
||||
}
|
||||
html.dark .sp-devtools > div {
|
||||
--color-text: var(--sp-colors-fg-default) !important;
|
||||
--color-modal-background: #16181de0 !important;
|
||||
.sp-tabs .sp-tab-button,
|
||||
.sp-tabs .sp-tab-button:hover:not(:disabled, [data-active='true']),
|
||||
.sp-tabs .sp-tab-button[data-active='true'] {
|
||||
color: var(--sp-colors-accent);
|
||||
}
|
||||
|
||||
.sp-devtools table td {
|
||||
border: 1px solid var(--sp-colors-fg-inactive);
|
||||
.sp-tabs .sp-tab-button[data-active='true'] {
|
||||
border-bottom: 2px solid var(--sp-colors-accent);
|
||||
}
|
||||
|
||||
/* Make focus rings work */
|
||||
.sp-tab-button {
|
||||
transition: none !important;
|
||||
}
|
||||
.sp-tab-button:focus {
|
||||
outline: revert !important;
|
||||
}
|
||||
.sp-tab-button:focus-visible {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
.sp-cm:focus-visible {
|
||||
box-shadow: inset 0 0 0 4px rgba(20, 158, 202, 0.4) !important;
|
||||
}
|
||||
.cm-line {
|
||||
padding: 0 var(--sp-space-3) !important;
|
||||
}
|
||||
.cm-lineNumbers {
|
||||
padding-left: var(--sp-space-1) !important;
|
||||
padding-right: var(--sp-space-1) !important;
|
||||
/**
|
||||
* Editor
|
||||
*/
|
||||
.sandpack .sp-code-editor .cm-content,
|
||||
.sandpack .sp-code-editor .cm-gutters,
|
||||
.sandpack .sp-code-editor .cm-gutterElement {
|
||||
padding: 0;
|
||||
-webkit-font-smoothing: auto; /* Improve the legibility */
|
||||
}
|
||||
|
||||
/* For iOS: prevent browser zoom when clicking on sandbox. */
|
||||
@media screen and (max-width: 768px) {
|
||||
@supports (-webkit-overflow-scrolling: touch) {
|
||||
.cm-content {
|
||||
font-size: initial;
|
||||
}
|
||||
.DocSearch-Input {
|
||||
font-size: initial;
|
||||
}
|
||||
}
|
||||
.sandpack--playground .sp-code-editor .cm-line {
|
||||
padding: 0 var(--sp-space-3);
|
||||
}
|
||||
|
||||
.sp-cm {
|
||||
padding-left: 8px !important;
|
||||
.sandpack--playground .sp-code-editor .cm-lineNumbers {
|
||||
padding-left: var(--sp-space-1);
|
||||
padding-right: var(--sp-space-1);
|
||||
font-size: 13.6px;
|
||||
}
|
||||
|
||||
.sandpack--playground .sp-code-editor .cm-line.cm-errorLine {
|
||||
@apply bg-red-400;
|
||||
--tw-bg-opacity: 0.1; /* Background tweak: base color + opacity */
|
||||
position: relative;
|
||||
padding-right: 2em;
|
||||
display: inline-block;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.sp-code-editor .cm-errorLine:after {
|
||||
@apply text-red-500;
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 0;
|
||||
content: '\26A0';
|
||||
font-size: 22px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.sp-code-editor .cm-tooltip {
|
||||
border: 0;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.sp-code-editor .cm-diagnostic-error {
|
||||
@apply border-red-40;
|
||||
}
|
||||
|
||||
.sp-code-editor .sp-cm .cm-scroller {
|
||||
overflow: auto;
|
||||
padding: 18px 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Loading component
|
||||
*/
|
||||
.sandpack--playground .sp-cube-wrapper {
|
||||
background-color: var(--sp-colors-surface1);
|
||||
}
|
||||
|
||||
.sandpack--playground .sp-overlay {
|
||||
@apply bg-card;
|
||||
}
|
||||
|
||||
html.dark .sandpack--playground .sp-overlay {
|
||||
@apply bg-wash-dark;
|
||||
}
|
||||
|
||||
/**
|
||||
* CodeBlock
|
||||
*/
|
||||
.sandpack--codeblock .cm-content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.sandpack--codeblock .cm-content.cm-readonly .cm-line {
|
||||
padding: 0 var(--sp-space-3);
|
||||
}
|
||||
|
||||
/**
|
||||
* Placeholder
|
||||
*/
|
||||
.sandpack .sp-code-editor .sp-pre-placeholder {
|
||||
@apply font-mono;
|
||||
font-size: 13.6px;
|
||||
line-height: 24px;
|
||||
padding: 18px 0;
|
||||
}
|
||||
|
||||
.sandpack--codeblock .sp-code-editor .sp-pre-placeholder {
|
||||
margin-left: var(--sp-space-3) !important; /* override inline style */
|
||||
}
|
||||
|
||||
.sandpack--playground .sp-code-editor .sp-pre-placeholder {
|
||||
margin-left: var(--sp-space-10) !important; /* override inline style */
|
||||
}
|
||||
|
||||
.text-xl .sp-pre-placeholder {
|
||||
font-size: 16px !important;
|
||||
line-height: 24px !important;
|
||||
}
|
||||
|
||||
/**
|
||||
* Expand button
|
||||
*/
|
||||
|
||||
.sp-layout {
|
||||
min-height: 216px;
|
||||
}
|
||||
|
||||
.sp-layout > .sp-stack:nth-child(1) {
|
||||
/* Force vertical if there isn't enough space. */
|
||||
min-width: 431px;
|
||||
@@ -285,6 +268,7 @@ html.dark .sp-devtools > div {
|
||||
/* Max height is needed to avoid too long files. */
|
||||
max-height: 40vh;
|
||||
}
|
||||
|
||||
.sp-layout > .sp-stack:nth-child(2) {
|
||||
/* Force vertical if there isn't enough space. */
|
||||
min-width: 431px;
|
||||
@@ -298,11 +282,13 @@ html.dark .sp-devtools > div {
|
||||
max-height: unset;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.sp-layout.sp-layout-expanded > .sp-stack:nth-child(2) {
|
||||
/* Clicking "show more" lets mobile preview go full height. */
|
||||
max-height: unset;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.sp-layout > .sp-stack:nth-child(1) {
|
||||
/* On desktop, clamp height by pixels instead. */
|
||||
@@ -324,8 +310,106 @@ html.dark .sp-devtools > div {
|
||||
}
|
||||
}
|
||||
|
||||
.sandpack--playground .sp-layout .sandpack-expand {
|
||||
border-left: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.expandable-callout .sp-stack:nth-child(2) {
|
||||
min-width: 431px;
|
||||
min-height: 40vh;
|
||||
max-height: 40vh;
|
||||
}
|
||||
|
||||
/**
|
||||
* Integrations: console
|
||||
*/
|
||||
.console .sp-cm,
|
||||
.console .sp-cm .cm-scroller,
|
||||
.console .sp-cm .cm-line {
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
/**
|
||||
* Integrations: eslint
|
||||
*/
|
||||
.sp-code-editor .cm-diagnostic {
|
||||
@apply text-secondary;
|
||||
}
|
||||
|
||||
/**
|
||||
* Integrations: React devtools inline
|
||||
*/
|
||||
.sp-devtools {
|
||||
border-bottom-left-radius: 0.5rem;
|
||||
border-bottom-right-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sp-wrapper .sp-layout-devtools {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Overwrite inline sty
|
||||
*/
|
||||
.sp-devtools > div {
|
||||
--color-background: var(--sp-colors-surface1) !important;
|
||||
--color-background-inactive: var(--sp-colors-surface2) !important;
|
||||
--color-background-selected: var(--sp-colors-accent) !important;
|
||||
--color-background-hover: transparent !important;
|
||||
--color-modal-background: #ffffffd2 !important;
|
||||
|
||||
--color-tab-selected-border: #087ea4 !important;
|
||||
|
||||
--color-component-name: var(--sp-syntax-color-definition) !important;
|
||||
--color-attribute-name: var(--sp-syntax-color-property) !important;
|
||||
--color-attribute-value: var(--sp-syntax-color-string) !important;
|
||||
--color-attribute-editable-value: var(--sp-syntax-color-property) !important;
|
||||
--color-attribute-name-not-editable: var(--sp-colors-clickable) !important;
|
||||
--color-button-background-focus: var(--sp-colors-surface2) !important;
|
||||
|
||||
--color-button-active: var(--sp-colors-accent) !important;
|
||||
--color-button-background: transparent !important;
|
||||
--color-button: var(--sp-colors-clickable) !important;
|
||||
--color-button-hover: var(--sp-colors-disabled) !important;
|
||||
|
||||
--color-border: var(--sp-colors-surface2) !important;
|
||||
--color-text: rgb(35, 39, 47) !important;
|
||||
}
|
||||
|
||||
html.dark .sp-devtools > div {
|
||||
--color-text: var(--sp-colors-clickable) !important;
|
||||
--color-modal-background: #16181de0 !important;
|
||||
}
|
||||
|
||||
.sp-devtools table td {
|
||||
border: 1px solid var(--sp-colors-surface2);
|
||||
}
|
||||
|
||||
/**
|
||||
* Hard fixes
|
||||
*/
|
||||
|
||||
/**
|
||||
* The text-size-adjust CSS property controls the text inflation
|
||||
* algorithm used on some smartphones and tablets
|
||||
*/
|
||||
.sandpack .sp-cm {
|
||||
-webkit-text-size-adjust: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* For iOS: prevent browser zoom when clicking on sandbox
|
||||
*/
|
||||
@media screen and (max-width: 768px) {
|
||||
@supports (-webkit-overflow-scrolling: touch) {
|
||||
.cm-content {
|
||||
font-size: initial;
|
||||
}
|
||||
.DocSearch-Input {
|
||||
font-size: initial;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
155
beta/yarn.lock
155
beta/yarn.lock
@@ -670,6 +670,18 @@
|
||||
"@codemirror/state" "^0.19.0"
|
||||
"@codemirror/view" "^0.19.23"
|
||||
|
||||
"@codemirror/highlight@^0.19.0":
|
||||
version "0.19.8"
|
||||
resolved "https://registry.yarnpkg.com/@codemirror/highlight/-/highlight-0.19.8.tgz#a95aee8ae4389b01f820aa79c48f7b4388087d92"
|
||||
integrity sha512-v/lzuHjrYR8MN2mEJcUD6fHSTXXli9C1XGYpr+ElV6fLBIUhMTNKR3qThp611xuWfXfwDxeL7ppcbkM/MzPV3A==
|
||||
dependencies:
|
||||
"@codemirror/language" "^0.19.0"
|
||||
"@codemirror/rangeset" "^0.19.0"
|
||||
"@codemirror/state" "^0.19.3"
|
||||
"@codemirror/view" "^0.19.39"
|
||||
"@lezer/common" "^0.15.0"
|
||||
style-mod "^4.0.0"
|
||||
|
||||
"@codemirror/highlight@^0.19.6", "@codemirror/highlight@^0.19.7":
|
||||
version "0.19.7"
|
||||
resolved "https://registry.yarnpkg.com/@codemirror/highlight/-/highlight-0.19.7.tgz#91a0c9994c759f5f153861e3aae74ff9e7c7c35b"
|
||||
@@ -701,7 +713,7 @@
|
||||
"@codemirror/state" "^0.19.0"
|
||||
"@lezer/css" "^0.15.2"
|
||||
|
||||
"@codemirror/lang-html@^0.19.4":
|
||||
"@codemirror/lang-html@^0.19.0", "@codemirror/lang-html@^0.19.4":
|
||||
version "0.19.4"
|
||||
resolved "https://registry.yarnpkg.com/@codemirror/lang-html/-/lang-html-0.19.4.tgz#e6eec28462f18842a0e108732a214a7416b5e333"
|
||||
integrity sha512-GpiEikNuCBeFnS+/TJSeanwqaOfNm8Kkp9WpVNEPZCLyW1mAMCuFJu/3xlWYeWc778Hc3vJqGn3bn+cLNubgCA==
|
||||
@@ -728,6 +740,19 @@
|
||||
"@codemirror/view" "^0.19.0"
|
||||
"@lezer/javascript" "^0.15.1"
|
||||
|
||||
"@codemirror/lang-markdown@^0.19.3":
|
||||
version "0.19.6"
|
||||
resolved "https://registry.yarnpkg.com/@codemirror/lang-markdown/-/lang-markdown-0.19.6.tgz#761301d276fcfbdf88440f0333785efd71c2a4f5"
|
||||
integrity sha512-ojoHeLgv1Rfu0GNGsU0bCtXAIp5dy4VKjndHScITQdlCkS/+SAIfuoeowEx+nMAQwTxI+/9fQZ3xdZVznGFYug==
|
||||
dependencies:
|
||||
"@codemirror/highlight" "^0.19.0"
|
||||
"@codemirror/lang-html" "^0.19.0"
|
||||
"@codemirror/language" "^0.19.0"
|
||||
"@codemirror/state" "^0.19.3"
|
||||
"@codemirror/view" "^0.19.0"
|
||||
"@lezer/common" "^0.15.0"
|
||||
"@lezer/markdown" "^0.15.0"
|
||||
|
||||
"@codemirror/language@^0.19.0", "@codemirror/language@^0.19.7":
|
||||
version "0.19.7"
|
||||
resolved "https://registry.yarnpkg.com/@codemirror/language/-/language-0.19.7.tgz#9eef8e827692d93a701b18db9d46a42be34ecca6"
|
||||
@@ -808,18 +833,29 @@
|
||||
style-mod "^4.0.0"
|
||||
w3c-keyname "^2.2.4"
|
||||
|
||||
"@codesandbox/sandpack-client@^0.19.8-experimental.2":
|
||||
version "0.19.9"
|
||||
resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-client/-/sandpack-client-0.19.9.tgz#29fded94a3087de155035634d596651268e27797"
|
||||
integrity sha512-/PPFqAJ8NSlP1jpWjQtwvmVS5o1xLRVqdbzXF7Num7zVUdYLZAbpzT7KijneZSmdcJHOvCCAYGLKJg+TcgmLjw==
|
||||
"@codemirror/view@^0.19.39":
|
||||
version "0.19.48"
|
||||
resolved "https://registry.yarnpkg.com/@codemirror/view/-/view-0.19.48.tgz#1c657e2b0f8ed896ac6448d6e2215ab115e2a0fc"
|
||||
integrity sha512-0eg7D2Nz4S8/caetCTz61rK0tkHI17V/d15Jy0kLOT8dTLGGNJUponDnW28h2B6bERmPlVHKh8MJIr5OCp1nGw==
|
||||
dependencies:
|
||||
"@codemirror/rangeset" "^0.19.5"
|
||||
"@codemirror/state" "^0.19.3"
|
||||
"@codemirror/text" "^0.19.0"
|
||||
style-mod "^4.0.0"
|
||||
w3c-keyname "^2.2.4"
|
||||
|
||||
"@codesandbox/sandpack-client@^1.7.0":
|
||||
version "1.7.0"
|
||||
resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-client/-/sandpack-client-1.7.0.tgz#cae07db91da3ef2893f20c0d11d58641e7af2a33"
|
||||
integrity sha512-13nL7+OX7iefVXeO+cvEntZD/hBuXLPjv72e5tiCjwuq/oor8jR2NGxzJ0pozUfZmJhvDIAxw5isJvhiIdgcWA==
|
||||
dependencies:
|
||||
codesandbox-import-utils "^1.2.3"
|
||||
lodash.isequal "^4.5.0"
|
||||
|
||||
"@codesandbox/sandpack-react@v0.19.8-experimental.7":
|
||||
version "0.19.8-experimental.7"
|
||||
resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-react/-/sandpack-react-0.19.8-experimental.7.tgz#44724fc0cce5d470eae9d6bc757ae237b699c019"
|
||||
integrity sha512-+zT07s7LYxWq4bQYEStZszpfQAbbqP7PukF0TlJxYbjDVDXDhikdBkxuD1hXvVA6FOPdgLuF2fdnDR5NViktwA==
|
||||
"@codesandbox/sandpack-react@1.7.2":
|
||||
version "1.7.2"
|
||||
resolved "https://registry.yarnpkg.com/@codesandbox/sandpack-react/-/sandpack-react-1.7.2.tgz#5559797f2d405a7fb59577d92097c88628f79d20"
|
||||
integrity sha512-oOaGzzqcFcDgoHMZ1cuQKYGTdQPgtmMHNgingSbzxcxTCIsA0hkwm+2ilVH1d1AZSgbIPoLqbYVjrdtsO4lJJg==
|
||||
dependencies:
|
||||
"@code-hike/classer" "^0.0.0-aa6efee"
|
||||
"@codemirror/closebrackets" "^0.19.0"
|
||||
@@ -831,16 +867,19 @@
|
||||
"@codemirror/lang-css" "^0.19.3"
|
||||
"@codemirror/lang-html" "^0.19.4"
|
||||
"@codemirror/lang-javascript" "^0.19.3"
|
||||
"@codemirror/lang-markdown" "^0.19.3"
|
||||
"@codemirror/language" "^0.19.7"
|
||||
"@codemirror/matchbrackets" "^0.19.3"
|
||||
"@codemirror/state" "^0.19.6"
|
||||
"@codemirror/view" "^0.19.32"
|
||||
"@codesandbox/sandpack-client" "^0.19.8-experimental.2"
|
||||
"@codesandbox/sandpack-client" "^1.7.0"
|
||||
"@react-hook/intersection-observer" "^3.1.1"
|
||||
"@stitches/core" "^1.2.6"
|
||||
clean-set "^1.1.2"
|
||||
codesandbox-import-util-types "^2.2.3"
|
||||
lodash.isequal "^4.5.0"
|
||||
lz-string "^1.4.4"
|
||||
react-devtools-inline "4.22.1"
|
||||
react-devtools-inline "4.4.0"
|
||||
react-is "^17.0.2"
|
||||
|
||||
"@csstools/convert-colors@^1.4.0":
|
||||
@@ -970,6 +1009,13 @@
|
||||
dependencies:
|
||||
"@lezer/common" "^0.15.0"
|
||||
|
||||
"@lezer/markdown@^0.15.0":
|
||||
version "0.15.6"
|
||||
resolved "https://registry.yarnpkg.com/@lezer/markdown/-/markdown-0.15.6.tgz#2a826a507399b32176efdc35554397f05227d2aa"
|
||||
integrity sha512-1XXLa4q0ZthryUEfO47ipvZHxNb+sCKoQIMM9dKs5vXZOBbgF2Vah/GL3g26BFIAEc2uCv4VQnI+lSrv58BT3g==
|
||||
dependencies:
|
||||
"@lezer/common" "^0.15.0"
|
||||
|
||||
"@mdx-js/mdx@^1.6.22":
|
||||
version "1.6.22"
|
||||
resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-1.6.22.tgz#8a723157bf90e78f17dc0f27995398e6c731f1ba"
|
||||
@@ -1121,6 +1167,11 @@
|
||||
resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.1.0.tgz#7f698254aadf921e48dda8c0a6b304026b8a9323"
|
||||
integrity sha512-JLo+Y592QzIE+q7Dl2pMUtt4q8SKYI5jDrZxrozEQxnGVOyYE+GWK9eLkwTaeN9DDctlaRAQ3TBmzZ1qdLE30A==
|
||||
|
||||
"@stitches/core@^1.2.6":
|
||||
version "1.2.8"
|
||||
resolved "https://registry.yarnpkg.com/@stitches/core/-/core-1.2.8.tgz#dce3b8fdc764fbc6dbea30c83b73bfb52cf96173"
|
||||
integrity sha512-Gfkvwk9o9kE9r9XNBmJRfV8zONvXThnm1tcuojL04Uy5uRyqg93DC83lDebl0rocZCfKSjUv+fWYtMQmEDJldg==
|
||||
|
||||
"@types/body-scroll-lock@^2.6.1":
|
||||
version "2.6.2"
|
||||
resolved "https://registry.yarnpkg.com/@types/body-scroll-lock/-/body-scroll-lock-2.6.2.tgz#ce56d17e1bf8383c08a074733c4e9e536a59ae61"
|
||||
@@ -1855,6 +1906,11 @@ classnames@*, classnames@^2.2.6:
|
||||
resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
|
||||
integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
|
||||
|
||||
clean-set@^1.1.2:
|
||||
version "1.1.2"
|
||||
resolved "https://registry.yarnpkg.com/clean-set/-/clean-set-1.1.2.tgz#76d8bf238c3e27827bfa73073ecdfdc767187070"
|
||||
integrity sha512-cA8uCj0qSoG9e0kevyOWXwPaELRPVg5Pxp6WskLMwerx257Zfnh8Nl0JBH59d7wQzij2CK7qEfJQK3RjuKKIug==
|
||||
|
||||
clean-stack@^2.0.0:
|
||||
version "2.2.0"
|
||||
resolved "https://registry.yarnpkg.com/clean-stack/-/clean-stack-2.2.0.tgz#ee8472dbb129e727b31e8a10a427dee9dfe4008b"
|
||||
@@ -2078,6 +2134,14 @@ csstype@^3.0.2:
|
||||
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.10.tgz#2ad3a7bed70f35b965707c092e5f30b327c290e5"
|
||||
integrity sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==
|
||||
|
||||
d@1, d@^1.0.1:
|
||||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/d/-/d-1.0.1.tgz#8698095372d58dbee346ffd0c7093f99f8f9eb5a"
|
||||
integrity sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==
|
||||
dependencies:
|
||||
es5-ext "^0.10.50"
|
||||
type "^1.0.1"
|
||||
|
||||
damerau-levenshtein@^1.0.7:
|
||||
version "1.0.8"
|
||||
resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
|
||||
@@ -2297,6 +2361,32 @@ es-to-primitive@^1.2.1:
|
||||
is-date-object "^1.0.1"
|
||||
is-symbol "^1.0.2"
|
||||
|
||||
es5-ext@^0.10.35, es5-ext@^0.10.50:
|
||||
version "0.10.62"
|
||||
resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.62.tgz#5e6adc19a6da524bf3d1e02bbc8960e5eb49a9a5"
|
||||
integrity sha512-BHLqn0klhEpnOKSrzn/Xsz2UIW8j+cGmo9JLzr8BiUapV8hPL9+FliFqjwr9ngW7jWdnxv6eO+/LqyhJVqgrjA==
|
||||
dependencies:
|
||||
es6-iterator "^2.0.3"
|
||||
es6-symbol "^3.1.3"
|
||||
next-tick "^1.1.0"
|
||||
|
||||
es6-iterator@^2.0.3:
|
||||
version "2.0.3"
|
||||
resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.3.tgz#a7de889141a05a94b0854403b2d0a0fbfa98f3b7"
|
||||
integrity sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==
|
||||
dependencies:
|
||||
d "1"
|
||||
es5-ext "^0.10.35"
|
||||
es6-symbol "^3.1.1"
|
||||
|
||||
es6-symbol@^3, es6-symbol@^3.1.1, es6-symbol@^3.1.3:
|
||||
version "3.1.3"
|
||||
resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.3.tgz#bad5d3c1bcdac28269f4cb331e431c78ac705d18"
|
||||
integrity sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==
|
||||
dependencies:
|
||||
d "^1.0.1"
|
||||
ext "^1.1.2"
|
||||
|
||||
escalade@^3.1.1:
|
||||
version "3.1.1"
|
||||
resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
|
||||
@@ -2623,6 +2713,13 @@ express@^4.17.1:
|
||||
utils-merge "1.0.1"
|
||||
vary "~1.1.2"
|
||||
|
||||
ext@^1.1.2:
|
||||
version "1.7.0"
|
||||
resolved "https://registry.yarnpkg.com/ext/-/ext-1.7.0.tgz#0ea4383c0103d60e70be99e9a7f11027a33c4f5f"
|
||||
integrity sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==
|
||||
dependencies:
|
||||
type "^2.7.2"
|
||||
|
||||
extend-shallow@^2.0.1:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
|
||||
@@ -3873,6 +3970,11 @@ next-remote-watch@^1.0.0:
|
||||
commander "^5.0.0"
|
||||
express "^4.17.1"
|
||||
|
||||
next-tick@^1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.1.0.tgz#1836ee30ad56d67ef281b22bd199f709449b35eb"
|
||||
integrity sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==
|
||||
|
||||
next@12.1.7-canary.11:
|
||||
version "12.1.7-canary.11"
|
||||
resolved "https://registry.yarnpkg.com/next/-/next-12.1.7-canary.11.tgz#5b732cc630801db651a0a81199fe94d215e3da1c"
|
||||
@@ -4712,13 +4814,12 @@ raw-body@2.5.1:
|
||||
raf "^3.4.1"
|
||||
tiny-warning "^1.0.3"
|
||||
|
||||
react-devtools-inline@4.22.1:
|
||||
version "4.22.1"
|
||||
resolved "https://registry.yarnpkg.com/react-devtools-inline/-/react-devtools-inline-4.22.1.tgz#339ef44279317de10ebafcf12e3e48b9f0c24481"
|
||||
integrity sha512-nYLfc5ZwXZN8ooQ2PNxS2LdLjQeRYYhJoDs6dMVQ8vsNx1m3qjaKBp4baLr4Cv+uv7LWSv2on7Rd2QpkYMLOeQ==
|
||||
react-devtools-inline@4.4.0:
|
||||
version "4.4.0"
|
||||
resolved "https://registry.yarnpkg.com/react-devtools-inline/-/react-devtools-inline-4.4.0.tgz#e032a6eb17a9977b682306f84b46e683adf4bf68"
|
||||
integrity sha512-ES0GolSrKO8wsKbsEkVeiR/ZAaHQTY4zDh1UW8DImVmm8oaGLl3ijJDvSGe+qDRKPZdPRnDtWWnSvvrgxXdThQ==
|
||||
dependencies:
|
||||
source-map-js "^0.6.2"
|
||||
sourcemap-codec "^1.4.8"
|
||||
es6-symbol "^3"
|
||||
|
||||
react-dom@0.0.0-experimental-82c64e1a4-20220520:
|
||||
version "0.0.0-experimental-82c64e1a4-20220520"
|
||||
@@ -5205,11 +5306,6 @@ slice-ansi@^5.0.0:
|
||||
ansi-styles "^6.0.0"
|
||||
is-fullwidth-code-point "^4.0.0"
|
||||
|
||||
source-map-js@^0.6.2:
|
||||
version "0.6.2"
|
||||
resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e"
|
||||
integrity sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==
|
||||
|
||||
source-map-js@^1.0.1, source-map-js@^1.0.2:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
|
||||
@@ -5225,11 +5321,6 @@ source-map@^0.6.1:
|
||||
resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
|
||||
integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
|
||||
|
||||
sourcemap-codec@^1.4.8:
|
||||
version "1.4.8"
|
||||
resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
|
||||
integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
|
||||
|
||||
space-separated-tokens@^1.0.0:
|
||||
version "1.1.5"
|
||||
resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz#85f32c3d10d9682007e917414ddc5c26d1aa6899"
|
||||
@@ -5581,6 +5672,16 @@ type-is@~1.6.18:
|
||||
media-typer "0.3.0"
|
||||
mime-types "~2.1.24"
|
||||
|
||||
type@^1.0.1:
|
||||
version "1.2.0"
|
||||
resolved "https://registry.yarnpkg.com/type/-/type-1.2.0.tgz#848dd7698dafa3e54a6c479e759c4bc3f18847a0"
|
||||
integrity sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==
|
||||
|
||||
type@^2.7.2:
|
||||
version "2.7.2"
|
||||
resolved "https://registry.yarnpkg.com/type/-/type-2.7.2.tgz#2376a15a3a28b1efa0f5350dcf72d24df6ef98d0"
|
||||
integrity sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw==
|
||||
|
||||
typescript@^4.0.2:
|
||||
version "4.5.5"
|
||||
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.5.tgz#d8c953832d28924a9e3d37c73d729c846c5896f3"
|
||||
|
||||
Reference in New Issue
Block a user