ExpandedEditor() — react Function Reference

Architecture documentation for the ExpandedEditor() function in ConfigEditor.tsx from the react codebase.

Function tsx MonacoIntegration Options

Entity Profile

MonacoIntegration→ Options→ ExpandedEditor() — react Function Reference

Dependency Diagram

graph TD
  0bf10029_ac5b_db08_88e0_335a05360301["ExpandedEditor()"]
  84f17a2e_0d58_9d14_2c35_30f086f6e436["ConfigEditor.tsx"]
  0bf10029_ac5b_db08_88e0_335a05360301 -->|defined in| 84f17a2e_0d58_9d14_2c35_30f086f6e436
  style 0bf10029_ac5b_db08_88e0_335a05360301 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

compiler/apps/playground/components/Editor/ConfigEditor.tsx lines 74–195

function ExpandedEditor({
  onToggle,
  formattedAppliedConfig,
}: {
  onToggle: (expanded: boolean) => void;
  formattedAppliedConfig: string;
}): React.ReactElement {
  const store = useStore();
  const dispatchStore = useStoreDispatch();
  const debounceTimerRef = useRef<NodeJS.Timeout | null>(null);

  const handleChange: (value: string | undefined) => void = (
    value: string | undefined,
  ) => {
    if (value === undefined) return;

    if (debounceTimerRef.current) {
      clearTimeout(debounceTimerRef.current);
    }

    debounceTimerRef.current = setTimeout(() => {
      dispatchStore({
        type: 'updateConfig',
        payload: {
          config: value,
        },
      });
    }, 500); // 500ms debounce delay
  };

  const handleMount: (
    _: editor.IStandaloneCodeEditor,
    monaco: Monaco,
  ) => void = (_, monaco) => {
    // Add the babel-plugin-react-compiler type definitions to Monaco
    monaco.languages.typescript.typescriptDefaults.addExtraLib(
      //@ts-expect-error - compilerTypeDefs is a string
      compilerTypeDefs,
      'file:///node_modules/babel-plugin-react-compiler/dist/index.d.ts',
    );
    monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
      target: monaco.languages.typescript.ScriptTarget.Latest,
      allowNonTsExtensions: true,
      moduleResolution: monaco.languages.typescript.ModuleResolutionKind.NodeJs,
      module: monaco.languages.typescript.ModuleKind.ESNext,
      noEmit: true,
      strict: false,
      esModuleInterop: true,
      allowSyntheticDefaultImports: true,
      jsx: monaco.languages.typescript.JsxEmit.React,
    });
  };

  return (
    <ViewTransition
      update={{[CONFIG_PANEL_TRANSITION]: 'slide-in', default: 'none'}}>
      {/* enter={{[CONFIG_PANEL_TRANSITION]: 'slide-in', default: 'none'}}
      exit={{[CONFIG_PANEL_TRANSITION]: 'slide-out', default: 'none'}}> */}
      <Resizable
        minWidth={300}
        maxWidth={600}
        defaultSize={{width: 350}}
        enable={{right: true, bottom: false}}>
        <div className="bg-blue-10 relative h-full flex flex-col !h-[calc(100vh_-_3.5rem)] border border-gray-300">
          <div
            className="absolute w-8 h-16 bg-blue-10 rounded-r-full flex items-center justify-center z-[2] cursor-pointer border border-l-0 border-gray-300"
            title="Minimize config editor"
            onClick={onToggle}
            style={{
              top: '50%',
              marginTop: '-32px',
              right: '-32px',
              borderTopLeftRadius: 0,
              borderBottomLeftRadius: 0,
            }}>
            <IconChevron displayDirection="left" className="text-blue-50" />
          </div>

          <div className="flex-1 flex flex-col m-2 mb-2">
            <div className="pb-2">
              <h2 className="inline-block text-blue-50 py-1.5 px-1.5 xs:px-3 sm:px-4 text-sm">