Function ConfigEditor

compiler/apps/playground/components/Editor/ConfigEditor.tsx:31–70

({
  appliedOptions,
}: {
  appliedOptions: PluginOptions | null;
})

loader.config({monaco});

export default function ConfigEditor({
  appliedOptions,
}: {
  appliedOptions: PluginOptions | null;
}): React.ReactElement {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    // TODO: Use <Activity> when it is compatible with Monaco: https://github.com/suren-atoyan/monaco-react/issues/753
    <>
      <div
        style={{
          display: isExpanded ? 'block' : 'none',
        }}>
        <ExpandedEditor
          onToggle={() => {
            startTransition(() => {
              addTransitionType(CONFIG_PANEL_TRANSITION);
              setIsExpanded(false);
            });
          }}
          appliedOptions={appliedOptions}
        />
      </div>
      <div
        style={{
          display: !isExpanded ? 'block' : 'none',
        }}>
        <CollapsedEditor
          onToggle={() => {
            startTransition(() => {
              addTransitionType(CONFIG_PANEL_TRANSITION);
              setIsExpanded(true);
            });
          }}
        />
      </div>
    </>
  );
}

function ExpandedEditor({
  onToggle,