Updated editor now keep persisted changes on all visible files + Fix …

…tabs overflowing
pixijs · Jan 24, 2024 · 50e3d01 · 50e3d01
1 parent b45d2bd
commit 50e3d01
Show file tree

Hide file tree

Showing 7 changed files with 193 additions and 147 deletions.
diff --git a/src/components/Example/index.tsx b/src/components/Example/index.tsx
@@ -4,13 +4,13 @@ import type { IVersion } from '@site/src/components/Playground/PixiPlayground/us
 import styles from './index.module.scss';
 import BrowserOnly from '@docusaurus/BrowserOnly';
 import { getExampleEntry } from '@site/src/examples';
-import { useCodeSource } from '../Playground/PixiPlayground/useEditorCode';
+import { extractSource } from '../Playground/PixiPlayground/useEditorCode';
 
 export default function Example({ id, pixiVersion }: { id: string; pixiVersion: IVersion })
 {
     const entry = getExampleEntry(pixiVersion.version, id);
     const source = (entry?.source ?? entry) as string | Record<string, string>;
-    const { indexCode, extraFiles } = useCodeSource(source);
+    const { indexCode, extraFiles } = extractSource(source);
 
     return (
         <div className={styles.wrapper}>

diff --git a/src/components/Playground/PixiPlayground/MonacoEditor.tsx b/src/components/Playground/PixiPlayground/MonacoEditor.tsx
@@ -2,9 +2,10 @@ import { useCallback, useEffect, useRef } from 'react';
 import type { editor } from 'monaco-editor';
 import { useColorMode } from '@docusaurus/theme-common';
 import Editor from '@monaco-editor/react';
+import type { SandpackState } from '@codesandbox/sandpack-react';
 import { FileTabs, SandpackStack, useActiveCode, useSandpack } from '@codesandbox/sandpack-react';
 
-export type CodeChangeCallbackType = (code: string | undefined) => void;
+export type CodeChangeCallbackType = (code: string | undefined, state: SandpackState) => void;
 
 type MonacoEditorProps = {
     useTabs: boolean;
@@ -96,7 +97,7 @@ export default function MonacoEditor({ useTabs, onChange }: MonacoEditorProps)
                 onChange={(value) =>
                 {
                     updateCode(value || '');
-                    onChange?.(value);
+                    onChange?.(value, sandpack);
                 }}
                 theme={colorMode === 'dark' ? 'vs-dark' : 'light'}
             />

diff --git a/src/components/Playground/PixiPlayground/index.module.scss b/src/components/Playground/PixiPlayground/index.module.scss
@@ -1,114 +1,116 @@
 .spWrapper {
     display: flex !important;
     flex: 1 0 100% !important;
-}
-.tpWrapper {
-    display: flex !important;
-    flex: 1 0 100%;
-}
 
-.spLayout {
-    display: flex;
-    width: 100%;
-    flex: 1 0 100%;
+    .spLayout {
+        display: flex;
+        width: 100%;
+        flex: 1 0 100%;
+
+        & > button {
+            display: none;
+            height: 3rem;
+            color: #fff;
+            background: var(--ifm-color-primary);
+            border: none;
+            border-radius: 0.5rem;
+            text-transform: uppercase;
+            font-weight: 700;
+            font-family: var(--ifm-font-family-base);
+            transition: background-color 0.12s ease-out;
+
+            &:hover {
+                background: #e96e97;
+            }
 
-    & > button {
-        display: none;
-        height: 3rem;
-        color: #fff;
-        background: var(--ifm-color-primary);
-        border: none;
-        border-radius: 0.5rem;
-        text-transform: uppercase;
-        font-weight: 700;
-        font-family: var(--ifm-font-family-base);
-        transition: background-color 0.12s ease-out;
-
-        &:hover {
-            background: #e96e97;
+            &:active {
+                background: #c52359;
+            }
         }
 
-        &:active {
-            background: #c52359;
+        .editorWrapper {
+            flex: 1 1 !important;
+            width: 100%;
+            overflow: auto;
         }
-    }
-
-    &.tutorial {
-        @media only screen and (max-width: 920px), (max-aspect-ratio: 5/4) {
-            button {
-                display: unset;
-            }
 
-            .editorWrapper {
-                display: unset;
-            }
+        .previewWrapper {
+            position: relative;
+            display: flex;
+            flex: 1 1 !important;
+        }
 
-            .previewWrapper {
-                display: none;
-            }
+        &.tutorial {
+            @media only screen and (max-width: 920px), (max-aspect-ratio: 5/4) {
+                button {
+                    display: unset;
+                }
 
-            &.showOutput {
                 .editorWrapper {
-                    display: none;
+                    display: unset;
                 }
 
                 .previewWrapper {
-                    display: flex;
+                    display: none;
                 }
-            }
-        }
 
-        @media only screen and (max-width: 1440px) {
-            flex-direction: column;
-        }
-    }
+                &.showOutput {
+                    .editorWrapper {
+                        display: none;
+                    }
 
-    &.fullscreen {
-        @media only screen and (max-width: 375px) {
-            button {
-                display: unset;
+                    .previewWrapper {
+                        display: flex;
+                    }
+                }
             }
 
-            .editorWrapper {
-                display: unset;
+            @media only screen and (max-width: 1440px) {
+                flex-direction: column;
             }
+        }
 
-            .previewWrapper {
-                display: none;
-            }
+        &.fullscreen {
+            @media only screen and (max-width: 375px) {
+                button {
+                    display: unset;
+                }
 
-            &.showOutput {
                 .editorWrapper {
-                    display: none;
+                    display: unset;
                 }
 
                 .previewWrapper {
-                    display: flex;
+                    display: none;
+                }
+
+                &.showOutput {
+                    .editorWrapper {
+                        display: none;
+                    }
+
+                    .previewWrapper {
+                        display: flex;
+                    }
                 }
             }
-        }
 
-        @media only screen and (max-aspect-ratio: 1/1) {
-            flex-direction: column;
+            @media only screen and (max-aspect-ratio: 1/1) {
+                flex-direction: column;
+            }
         }
-    }
 
-    &.example {
-        @media only screen and (max-width: 1280px) {
-            flex-direction: column;
+        &.example {
+            @media only screen and (max-width: 1280px) {
+                flex-direction: column;
+            }
         }
     }
 }
 
-.editorWrapper {
-    flex: 1 1 !important;
-    width: 100%;
-}
-
-.previewWrapper {
-    position: relative;
-    display: flex;
-    flex: 1 1 !important;
+.tpWrapper {
+    display: flex !important;
+    flex: 1 0 100%;
 }
 
 .sandpackLoadingOverlay {

diff --git a/src/components/Playground/PixiPlayground/index.tsx b/src/components/Playground/PixiPlayground/index.tsx
@@ -50,6 +50,7 @@ type PixiPlaygroundProps = {
     code: string;
     extraFiles?: Record<string, string>;
     extraPackages?: Record<string, string>;
+    activeFile?: string;
     isPixiWebWorkerVersion?: boolean;
     isPixiDevVersion?: boolean;
     pixiVersion?: string;
@@ -61,6 +62,7 @@ export default function PixiPlayground({
     code,
     extraFiles,
     extraPackages,
+    activeFile,
     isPixiWebWorkerVersion = false,
     isPixiDevVersion = false,
     pixiVersion = latestVersion,
@@ -80,12 +82,18 @@ export default function PixiPlayground({
     });
 
     // We will show the passed in extra files on the editor tabs by default
-    // and will hide any of them that has a key (file name) end with an '*'.
-    const visibleExtraFiles = Object.keys(extraFiles ?? {}).filter((fileName) => !fileName.endsWith('!')) as any[];
+    // and will hide any of them that has a key (file name) end with an '!'.
+    const visibleExtraFiles = Object.keys(extraFiles ?? {})
+        .filter((fileName) => !fileName.endsWith('!'))
+        .map((fileName) => fileName.replace('*', '')) as any[];
 
-    // We will initially show 'index.js' by default, unless if there is an extra file that ends with an '$'
+    // If there is no activeFile paramater passed in, we will initially show 'index.js' by default
+    // unless if there is an extra file that ends with an '*'
     // in which case we will show that file instead.
-    const activeFile = (Object.keys(extraFiles ?? {}).find((fileName) => fileName.endsWith('*')) as any) ?? 'src/index.js';
+    const active
+        = activeFile
+        ?? (Object.keys(extraFiles ?? {}).find((fileName) => fileName.endsWith('*')) as any)?.replace('*', '')
+        ?? 'src/index.js';
 
     // Hack to make the examples pages full width on wide screens
     useContainerClassNameModifier('example', mode === 'example');
@@ -106,7 +114,7 @@ export default function PixiPlayground({
                     'sp-layout': styles.spLayout,
                 },
                 visibleFiles: ['src/index.js', ...visibleExtraFiles],
-                activeFile,
+                activeFile: active,
             }}
         >
             <BasePlayground useTabs={!!extraFiles} mode={mode} onCodeChanged={onCodeChanged} />