ConfigEditor() — react Function Reference

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

Function tsx MonacoIntegration Options

Entity Profile

MonacoIntegration→ Options→ ConfigEditor() — react Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

compiler/apps/playground/components/Editor/ConfigEditor.tsx lines 29–72

export default function ConfigEditor({
  formattedAppliedConfig,
}: {
  formattedAppliedConfig: string;
}): React.ReactElement {
  const [isExpanded, setIsExpanded] = useState(false);

  // TODO: Add back <Activity> after upgrading next.js
  return (
    <>
      <div
        style={{
          display: isExpanded ? 'block' : 'none',
        }}>
        {/* <Activity mode={isExpanded ? 'visible' : 'hidden'}> */}
        <ExpandedEditor
          onToggle={() => {
            startTransition(() => {
              addTransitionType(CONFIG_PANEL_TRANSITION);
              setIsExpanded(false);
            });
          }}
          formattedAppliedConfig={formattedAppliedConfig}
        />
      </div>
      <div
        style={{
          display: !isExpanded ? 'block' : 'none',
        }}>
        {/* </Activity>
        <Activity mode={isExpanded ? 'hidden' : 'visible'}></Activity> */}
        <CollapsedEditor
          onToggle={() => {
            startTransition(() => {
              addTransitionType(CONFIG_PANEL_TRANSITION);
              setIsExpanded(true);
            });
          }}
        />
      </div>
      {/* </Activity> */}
    </>
  );
}