TextTabContent() — react Function Reference

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

Function tsx MonacoIntegration Diagnostics

Entity Profile

MonacoIntegration→ Diagnostics→ TextTabContent() — react Function Reference

Dependency Diagram

graph TD
  d97f23ea_c794_bce2_de89_06f5e9245bb7["TextTabContent()"]
  034b2d8c_7261_f40f_c380_2b5db8fde033["Output.tsx"]
  d97f23ea_c794_bce2_de89_06f5e9245bb7 -->|defined in| 034b2d8c_7261_f40f_c380_2b5db8fde033
  style d97f23ea_c794_bce2_de89_06f5e9245bb7 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

compiler/apps/playground/components/Editor/Output.tsx lines 338–422

function TextTabContent({
  output,
  diff,
  showInfoPanel,
  language,
}: {
  output: string;
  diff: string | null;
  showInfoPanel: boolean;
  language: string;
}): JSX.Element {
  const [diffMode, setDiffMode] = useState(false);
  return (
    /**
     * Restrict MonacoEditor's height, since the config autoLayout:true
     * will grow the editor to fit within parent element
     */
    <div className="w-full h-monaco_small sm:h-monaco">
      {showInfoPanel ? (
        <div className="flex items-center gap-1 bg-amber-50 p-2">
          {diff != null && output !== diff ? (
            <button
              className="flex items-center gap-1 transition-colors duration-150 ease-in text-secondary hover:text-link"
              onClick={() => setDiffMode(diffMode => !diffMode)}>
              {!diffMode ? (
                <>
                  <DocumentAddIcon className="w-5 h-5" /> Show Diff
                </>
              ) : (
                <>
                  <CodeIcon className="w-5 h-5" /> Show Output
                </>
              )}
            </button>
          ) : (
            <>
              <span className="flex items-center gap-1">
                <InformationCircleIcon className="w-5 h-5" /> No changes from
                previous pass
              </span>
            </>
          )}
        </div>
      ) : null}
      {diff != null && diffMode ? (
        <DiffEditor
          original={diff}
          modified={output}
          loading={''}
          options={{
            ...monacoOptions,
            scrollbar: {
              vertical: 'hidden',
            },
            dimension: {
              width: 0,
              height: 0,
            },
            readOnly: true,
            lineNumbers: 'off',
            glyphMargin: false,
            // Undocumented see https://github.com/Microsoft/vscode/issues/30795#issuecomment-410998882
            overviewRulerLanes: 0,
          }}
        />
      ) : (
        <MonacoEditor
          language={language ?? 'javascript'}
          value={output}
          loading={''}
          className="monaco-editor-output"
          options={{
            ...monacoOptions,
            readOnly: true,
            lineNumbers: 'off',
            glyphMargin: false,
            // Undocumented see https://github.com/Microsoft/vscode/issues/30795#issuecomment-410998882
            lineDecorationsWidth: 0,
            lineNumbersMinChars: 0,
          }}
        />