CollapsedEditor() — react Function Reference

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

Function tsx MonacoIntegration Options

Entity Profile

MonacoIntegration→ Options→ CollapsedEditor() — react Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

compiler/apps/playground/components/Editor/ConfigEditor.tsx lines 197–221

function CollapsedEditor({
  onToggle,
}: {
  onToggle: () => void;
}): React.ReactElement {
  return (
    <div
      className="w-4 !h-[calc(100vh_-_3.5rem)]"
      style={{position: 'relative'}}>
      <div
        className="absolute w-10 h-16 bg-blue-10 hover:translate-x-2 transition-transform rounded-r-full flex items-center justify-center z-[2] cursor-pointer border border-gray-300"
        title="Expand config editor"
        onClick={onToggle}
        style={{
          top: '50%',
          marginTop: '-32px',
          left: '-8px',
          borderTopLeftRadius: 0,
          borderBottomLeftRadius: 0,
        }}>
        <IconChevron displayDirection="right" className="text-blue-50" />
      </div>
    </div>
  );
}