@@ -7,19 +7,16 @@ import {
7
7
useSandpack ,
8
8
useActiveCode ,
9
9
SandpackCodeEditor ,
10
- SandpackThemeProvider ,
11
- SandpackReactDevTools ,
10
+ // SandpackReactDevTools ,
11
+ SandpackLayout ,
12
12
} from '@codesandbox/sandpack-react' ;
13
13
import cn from 'classnames' ;
14
14
15
15
import { IconChevron } from 'components/Icon/IconChevron' ;
16
16
import { NavigationBar } from './NavigationBar' ;
17
17
import { Preview } from './Preview' ;
18
- import { CustomTheme } from './Themes' ;
19
- import { useSandpackLint } from './useSandpackLint' ;
20
18
21
- // Workaround for https://github.com/reactjs/reactjs.org/issues/4686#issuecomment-1137402613.
22
- const emptyArray : Array < any > = [ ] ;
19
+ import { useSandpackLint } from './useSandpackLint' ;
23
20
24
21
export function CustomPreset ( {
25
22
showDevTools,
@@ -39,11 +36,11 @@ export function CustomPreset({
39
36
const { code} = useActiveCode ( ) ;
40
37
const [ isExpanded , setIsExpanded ] = React . useState ( false ) ;
41
38
42
- const { activePath } = sandpack ;
43
- if ( ! lineCountRef . current [ activePath ] ) {
44
- lineCountRef . current [ activePath ] = code . split ( '\n' ) . length ;
39
+ const { activeFile } = sandpack ;
40
+ if ( ! lineCountRef . current [ activeFile ] ) {
41
+ lineCountRef . current [ activeFile ] = code . split ( '\n' ) . length ;
45
42
}
46
- const lineCount = lineCountRef . current [ activePath ] ;
43
+ const lineCount = lineCountRef . current [ activeFile ] ;
47
44
const isExpandable = lineCount > 16 || isExpanded ;
48
45
49
46
return (
@@ -52,64 +49,61 @@ export function CustomPreset({
52
49
className = "shadow-lg dark:shadow-lg-dark rounded-lg"
53
50
ref = { containerRef } >
54
51
< NavigationBar providedFiles = { providedFiles } />
55
- < SandpackThemeProvider theme = { CustomTheme } >
56
- < div
57
- ref = { sandpack . lazyAnchorRef }
58
- className = { cn (
59
- 'sp-layout sp-custom-layout' ,
60
- showDevTools && devToolsLoaded && 'sp-layout-devtools' ,
61
- isExpanded && 'sp-layout-expanded'
62
- ) } >
63
- < SandpackCodeEditor
64
- showLineNumbers
65
- showInlineErrors
66
- showTabs = { false }
67
- showRunButton = { false }
68
- extensions = { lintExtensions }
69
- extensionsKeymap = { emptyArray }
70
- />
71
- < Preview
72
- className = "order-last xl:order-2"
73
- isExpanded = { isExpanded }
74
- lintErrors = { lintErrors }
75
- />
76
- { isExpandable && (
77
- < button
78
- translate = "yes"
79
- 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"
80
- onClick = { ( ) => {
81
- const nextIsExpanded = ! isExpanded ;
82
- flushSync ( ( ) => {
83
- setIsExpanded ( nextIsExpanded ) ;
84
- } ) ;
85
- if ( ! nextIsExpanded && containerRef . current !== null ) {
52
+ < SandpackLayout
53
+ className = { cn (
54
+ showDevTools && devToolsLoaded && 'sp-layout-devtools' ,
55
+ ! isExpandable && 'rounded-b-lg overflow-hidden' ,
56
+ isExpanded && 'sp-layout-expanded'
57
+ ) } >
58
+ < SandpackCodeEditor
59
+ showLineNumbers
60
+ showInlineErrors
61
+ showTabs = { false }
62
+ showRunButton = { false }
63
+ extensions = { lintExtensions }
64
+ />
65
+ < Preview
66
+ className = "order-last xl:order-2"
67
+ isExpanded = { isExpanded }
68
+ lintErrors = { lintErrors }
69
+ />
70
+ { isExpandable && (
71
+ < button
72
+ translate = "yes"
73
+ 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"
74
+ onClick = { ( ) => {
75
+ const nextIsExpanded = ! isExpanded ;
76
+ flushSync ( ( ) => {
77
+ setIsExpanded ( nextIsExpanded ) ;
78
+ } ) ;
79
+ if ( ! nextIsExpanded && containerRef . current !== null ) {
80
+ // @ts -ignore
81
+ if ( containerRef . current . scrollIntoViewIfNeeded ) {
86
82
// @ts -ignore
87
- if ( containerRef . current . scrollIntoViewIfNeeded ) {
88
- // @ts -ignore
89
- containerRef . current . scrollIntoViewIfNeeded ( ) ;
90
- } else {
91
- containerRef . current . scrollIntoView ( {
92
- block : 'nearest' ,
93
- inline : 'nearest' ,
94
- } ) ;
95
- }
83
+ containerRef . current . scrollIntoViewIfNeeded ( ) ;
84
+ } else {
85
+ containerRef . current . scrollIntoView ( {
86
+ block : 'nearest' ,
87
+ inline : 'nearest' ,
88
+ } ) ;
96
89
}
97
- } } >
98
- < span className = "flex p-2 focus:outline-none text-primary dark:text-primary-dark" >
99
- < IconChevron
100
- className = "inline mr-1.5 text-xl"
101
- displayDirection = { isExpanded ? 'up' : 'down' }
102
- />
103
- { isExpanded ? 'Show less' : 'Show more' }
104
- </ span >
105
- </ button >
106
- ) }
107
- </ div >
108
-
109
- { showDevTools && (
110
- < SandpackReactDevTools onLoadModule = { onDevToolsLoad } />
90
+ }
91
+ } } >
92
+ < span className = "flex p-2 focus:outline-none text-primary dark:text-primary-dark" >
93
+ < IconChevron
94
+ className = "inline mr-1.5 text-xl"
95
+ displayDirection = { isExpanded ? 'up' : 'down' }
96
+ />
97
+ { isExpanded ? 'Show less' : 'Show more' }
98
+ </ span >
99
+ </ button >
111
100
) }
112
- </ SandpackThemeProvider >
101
+ </ SandpackLayout >
102
+
103
+ { /* {showDevTools && (
104
+ // @ts -ignore TODO(@danilowoz): support devtools
105
+ <SandpackReactDevTools onLoadModule={onDevToolsLoad} />
106
+ )} */ }
113
107
</ div >
114
108
</ >
115
109
) ;
0 commit comments