feat: update editor

.gitignore

@@ -14,7 +14,6 @@
 !/docs/examples/index.md
 /versioned_docs/version-*/tutorials/*
 !/versioned_docs/version-*/tutorials/index.md
-/versioned_docs/version-*/examples/*
 !/versioned_docs/version-*/examples/index.md
 
 # Misc

package.json

@@ -20,8 +20,7 @@
         "types": "tsc --noEmit",
         "write-heading-ids": "docusaurus write-heading-ids",
         "write-translations": "docusaurus write-translations",
-        "generate-content": "",
-        "generate-tutorial-docs": "node ./scripts/generate-tutorial-docs.js",
+        "generate-content": "node ./scripts/generate-tutorial-docs.js",
         "update-version": "node ./scripts/update-version.js",
         "prepare": "husky install"
     },

src/components/Editor/Editor.tsx

@@ -8,10 +8,8 @@ import { githubLight } from '@codesandbox/sandpack-themes';
 import { useColorMode } from '@docusaurus/theme-common';
 
 export interface EditorProps {
-    showCode?: boolean;
-    showPreview?: boolean;
+    viewType?: 'both' | 'editor' | 'preview';
     showConsole?: boolean;
-    fullSizePreview?: boolean;
     width?: number | string;
     height?: number | string;
     dependencies?: Record<string, string>;
@@ -21,10 +19,8 @@ export interface EditorProps {
 }
 
 export function Editor({
-    showCode = true,
-    showPreview = true,
+    viewType = 'both',
     showConsole = false,
-    fullSizePreview = false,
     width = '100%',
     height = '100%',
     dependencies = { 'pixi.js': 'latest' },
@@ -63,11 +59,9 @@ export function Editor({
             <EditorLayout
                 {...{
                     handleEditorCodeChanged,
-                    showCode,
-                    showPreview,
+                    viewType,
                     showConsole,
                     fontSize,
-                    fullSizePreview,
                     pixiVersion: dependencies['pixi.js'],
                 }}
             />

src/components/Editor/EmbeddedEditor.tsx

@@ -2,5 +2,5 @@ import { type EditorProps, Editor } from './Editor';
 
 export function EmbeddedEditor(props: EditorProps)
 {
-    return <Editor height={400} width={700} showCode={false} fullSizePreview={true} {...props} />;
+    return <Editor height={400} width={700} viewType="preview" {...props} />;
 }

src/components/Editor/Monaco/MonacoView.tsx

@@ -25,7 +25,7 @@ export function MonacoView({ fontSize = 12, style, pixiVersion, handleEditorCode
     return (
         <SandpackStack style={{ height: '100%', margin: 0, ...style }}>
             <FileTabs />
-            <div style={{ flex: 1, paddingTop: 8, background: '#1e1e1e' }}>
+            <div style={{ flex: 1, paddingTop: 8, background: colorMode === 'dark' ? '#1e1e1e' : '#FFFFFE' }}>
                 <Editor
                     width="100%"
                     height="100%"

src/components/Editor/Sandpack/Layout.tsx

@@ -1,54 +1,67 @@
 import { useState } from 'react';
 import { MonacoView } from '../Monaco/MonacoView';
 import { ConsoleCounterButton } from './ConsoleCounterButton';
-import { ToggleCodeButton } from './ToggleCodeButton';
+import { ToggleGroup } from './ToggleGroup';
 import { SandpackConsole, SandpackLayout, SandpackPreview, SandpackStack } from '@codesandbox/sandpack-react';
 
 import type { EditorProps } from '../Editor';
 
 export function EditorLayout(
-    props: Required<Pick<EditorProps, 'showCode' | 'showPreview' | 'showConsole' | 'fontSize' | 'fullSizePreview'>> & {
+    props: Required<Pick<EditorProps, 'viewType' | 'showConsole' | 'fontSize'>> & {
         pixiVersion: string;
         handleEditorCodeChanged?: (nextSourceCode: string | undefined) => void;
     },
 )
 {
-    const { showCode, showPreview, showConsole, fontSize, fullSizePreview, pixiVersion } = props;
+    const { viewType, showConsole, fontSize, pixiVersion } = props;
     const [consoleVisibility, setConsoleVisibility] = useState(showConsole);
-    const [codeVisibility, setCodeVisibility] = useState(showCode);
+    const [viewSelection, setViewSelection] = useState<string>(viewType);
 
     const actionsChildren = (
         <>
-            <ToggleCodeButton onClick={() => setCodeVisibility((prev) => !prev)} visible={codeVisibility} />
+            {/* <ToggleCodeButton onClick={() => setCodeVisibility((prev) => !prev)} visible={codeVisibility} /> */}
             <ConsoleCounterButton onClick={() => setConsoleVisibility((prev) => !prev)} />
         </>
     );
 
-    console.log(showPreview);
+    const handleSelectionChange = (selected: string) =>
+    {
+        setViewSelection(selected);
+    };
+
+    console.log('viewSelection', viewSelection);
 
     return (
-        <SandpackLayout style={{ height: '100%', overflow: 'auto' }}>
-            <MonacoView
-                fontSize={fontSize}
+        <div style={{ height: '100%', width: '100%', display: 'flex', flexDirection: 'column' }}>
+            <SandpackLayout
                 style={{
-                    // eslint-disable-next-line no-nested-ternary
-                    flexGrow: codeVisibility ? (fullSizePreview ? 4 : 1) : 0,
-                    // eslint-disable-next-line no-nested-ternary
-                    flexShrink: codeVisibility ? (fullSizePreview ? 4 : 1) : 0,
-                    flexBasis: 0,
-                    width: '100%',
+                    height: '100%',
                     overflow: 'hidden',
+                    borderBottomLeftRadius: 0,
+                    borderBottomRightRadius: 0,
+                    flexWrap: 'nowrap',
+                    // TODO: change to column when screen is small
+                    // flexDirection: 'column'
                 }}
-                pixiVersion={pixiVersion}
-                handleEditorCodeChanged={props.handleEditorCodeChanged}
-            />
-            {showPreview && (
+            >
+                <MonacoView
+                    fontSize={fontSize}
+                    style={{
+                        flexGrow: viewSelection !== 'preview' ? 1 : 0,
+                        flexShrink: viewSelection !== 'preview' ? 1 : 0,
+                        flexBasis: viewSelection === 'editor' ? '100%' : 0,
+                        width: '100%',
+                        overflow: 'hidden',
+                    }}
+                    pixiVersion={pixiVersion}
+                    handleEditorCodeChanged={props.handleEditorCodeChanged}
+                />
                 <SandpackStack style={{ height: '100%', width: '100%' }}>
                     <SandpackPreview
                         style={{
-                            flexGrow: 100,
-                            flexShrink: 100,
-                            flexBasis: 0,
+                            flexGrow: viewSelection !== 'editor' ? 100 : 0,
+                            flexShrink: viewSelection !== 'editor' ? 100 : 0,
+                            flexBasis: viewSelection !== 'editor' ? '100%' : 0,
                             overflow: 'hidden',
                         }}
                         showOpenInCodeSandbox={false}
@@ -59,7 +72,7 @@ export function EditorLayout(
                             style={{
                                 flexGrow: consoleVisibility ? 35 : 0,
                                 flexShrink: consoleVisibility ? 35 : 0,
-                                flexBasis: 0,
+                                flexBasis: consoleVisibility ? '35%' : 0,
                                 width: '100%',
                                 overflow: 'hidden',
                             }}
@@ -68,7 +81,8 @@ export function EditorLayout(
                         </div>
                     )}
                 </SandpackStack>
-            )}
-        </SandpackLayout>
+            </SandpackLayout>
+            <ToggleGroup onSelectionChange={handleSelectionChange} defaultSelection={viewSelection} />
+        </div>
     );
 }

src/components/Editor/Sandpack/ToggleGroup.tsx

@@ -0,0 +1,67 @@
+import { type FC, useState } from 'react';
+import { useColorMode } from '@docusaurus/theme-common';
+
+interface ToggleGroupProps {
+    onSelectionChange: (selected: 'editor' | 'preview' | 'both') => void;
+    defaultSelection?: string;
+}
+
+export const ToggleGroup: FC<ToggleGroupProps> = ({ onSelectionChange, defaultSelection = 'both' }) =>
+{
+    const [selected, setSelected] = useState<string>(defaultSelection);
+    const { colorMode } = useColorMode();
+
+    const handleClick = (button: 'editor' | 'preview' | 'both') =>
+    {
+        setSelected(button);
+        onSelectionChange(button);
+    };
+
+    const buttonStyle = {
+        height: '100%',
+        width: 'max-content',
+        padding: '0 16px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        cursor: 'pointer',
+        color: colorMode === 'dark' ? '#F6F8FA' : '#2E3138',
+        border: 'none',
+    };
+
+    const selectedBackgroundColor = colorMode === 'dark' ? '#22232A' : '#e2e2e2';
+
+    return (
+        <div
+            style={{
+                height: 32,
+                width: '100%',
+                overflow: 'hidden',
+                backgroundColor: colorMode === 'dark' ? '#2E3138' : '#F6F8FA',
+                display: 'flex',
+                justifyContent: 'right',
+                borderBottomLeftRadius: 4,
+                borderBottomRightRadius: 4,
+            }}
+        >
+            <button
+                onClick={() => handleClick('editor')}
+                style={{ backgroundColor: selected === 'editor' ? selectedBackgroundColor : 'transparent', ...buttonStyle }}
+            >
+                Editor
+            </button>
+            <button
+                onClick={() => handleClick('preview')}
+                style={{ backgroundColor: selected === 'preview' ? selectedBackgroundColor : 'transparent', ...buttonStyle }}
+            >
+                Preview
+            </button>
+            <button
+                onClick={() => handleClick('both')}
+                style={{ backgroundColor: selected === 'both' ? selectedBackgroundColor : 'transparent', ...buttonStyle }}
+            >
+                Both
+            </button>
+        </div>
+    );
+};