diff --git a/compiler/apps/playground/components/Editor/ConfigEditor.tsx b/compiler/apps/playground/components/Editor/ConfigEditor.tsx index e78ff35666b0..87db6d535db2 100644 --- a/compiler/apps/playground/components/Editor/ConfigEditor.tsx +++ b/compiler/apps/playground/components/Editor/ConfigEditor.tsx @@ -5,8 +5,8 @@ * LICENSE file in the root directory of this source tree. */ -import MonacoEditor, {loader, type Monaco} from '@monaco-editor/react'; -import type {editor} from 'monaco-editor'; +import MonacoEditor, { loader, type Monaco } from '@monaco-editor/react'; +import type { editor } from 'monaco-editor'; import * as monaco from 'monaco-editor'; import React, { useState, @@ -15,16 +15,16 @@ import React, { unstable_addTransitionType as addTransitionType, startTransition, } from 'react'; -import {Resizable} from 're-resizable'; -import {useStore, useStoreDispatch} from '../StoreContext'; -import {monacoConfigOptions} from './monacoOptions'; -import {IconChevron} from '../Icons/IconChevron'; -import {CONFIG_PANEL_TRANSITION} from '../../lib/transitionTypes'; +import { Resizable } from 're-resizable'; +import { useStore, useStoreDispatch } from '../StoreContext'; +import { monacoConfigOptions } from './monacoOptions'; +import { IconChevron } from '../Icons/IconChevron'; +import { CONFIG_PANEL_TRANSITION } from '../../lib/transitionTypes'; // @ts-expect-error - webpack asset/source loader handles .d.ts files as strings import compilerTypeDefs from 'babel-plugin-react-compiler/dist/index.d.ts'; -loader.config({monaco}); +loader.config({ monaco }); export default function ConfigEditor({ formattedAppliedConfig, @@ -33,7 +33,7 @@ export default function ConfigEditor({ }): React.ReactElement { const [isExpanded, setIsExpanded] = useState(false); - // TODO: Add back after upgrading next.js + // TODO: Addhbn back after upgrading next.js return ( <>
(null); + // const debounceTimerRef = useRef(null); + const debounceTimerRef = useRef | null>(null); const handleChange: (value: string | undefined) => void = ( value: string | undefined, @@ -126,14 +127,14 @@ function ExpandedEditor({ return ( + update={{ [CONFIG_PANEL_TRANSITION]: 'slide-in', default: 'none' }}> {/* enter={{[CONFIG_PANEL_TRANSITION]: 'slide-in', default: 'none'}} exit={{[CONFIG_PANEL_TRANSITION]: 'slide-out', default: 'none'}}> */} + defaultSize={{ width: 350 }} + enable={{ right: true, bottom: false }}>
+ style={{ position: 'relative' }}>
)['source'] === 'string' && + (!('config' in raw) || + typeof (raw as Record)['config'] === 'string') && + (!('showInternals' in raw) || + typeof (raw as Record)['showInternals'] === 'boolean') ); } @@ -64,10 +81,16 @@ export function initStoreFromUrlOrLocalStorage(): Store { */ if (!encodedSource) return defaultStore; - const raw: any = decodeStore(encodedSource); - + // const raw: any = decodeStore(encodedSource); + const raw = decodeStore(encodedSource); invariant(isValidStore(raw), 'Invalid Store'); + // If the decoded data is invalid, treat it as if there was no saved store. + // This avoids breaking the playground when someone shares a malformed URL. + if (!isValidStore(raw)) { + return defaultStore; + } + // Make sure all properties are populated return { source: raw.source,