Editor() — react Function Reference

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

Function tsx MonacoIntegration Options calls 1

Entity Profile

MonacoIntegration→ Options→ Editor() — react Function Reference

Dependency Diagram

graph TD
  d650dd8a_ed84_070b_b673_b427fbcb5f8d["Editor()"]
  6c4ddf93_cf1a_7b66_fd69_69c7c8032b25["EditorImpl.tsx"]
  d650dd8a_ed84_070b_b673_b427fbcb5f8d -->|defined in| 6c4ddf93_cf1a_7b66_fd69_69c7c8032b25
  01f84d19_40f4_ddcb_bf42_a422f8d05d88["compile()"]
  d650dd8a_ed84_070b_b673_b427fbcb5f8d -->|calls| 01f84d19_40f4_ddcb_bf42_a422f8d05d88
  style d650dd8a_ed84_070b_b673_b427fbcb5f8d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

compiler/apps/playground/components/Editor/EditorImpl.tsx lines 20–69

export default function Editor(): JSX.Element {
  const store = useStore();
  const deferredStore = useDeferredValue(store);
  const [compilerOutput, language, appliedOptions] = useMemo(
    () => compile(deferredStore.source, 'compiler', deferredStore.config),
    [deferredStore.source, deferredStore.config],
  );
  const [linterOutput] = useMemo(
    () => compile(deferredStore.source, 'linter', deferredStore.config),
    [deferredStore.source, deferredStore.config],
  );
  const [formattedAppliedConfig, setFormattedAppliedConfig] = useState('');

  let mergedOutput: CompilerOutput;
  let errors: Array<CompilerErrorDetail | CompilerDiagnostic>;
  if (compilerOutput.kind === 'ok') {
    errors = linterOutput.kind === 'ok' ? [] : linterOutput.error.details;
    mergedOutput = {
      ...compilerOutput,
      errors,
    };
  } else {
    mergedOutput = compilerOutput;
    errors = compilerOutput.error.details;
  }

  if (appliedOptions) {
    const formatted = prettyFormat(appliedOptions, {
      printFunctionName: false,
      printBasicPrototype: false,
    });
    if (formatted !== formattedAppliedConfig) {
      setFormattedAppliedConfig(formatted);
    }
  }

  return (
    <>
      <div className="relative flex top-14">
        <div className="flex-shrink-0">
          <ConfigEditor formattedAppliedConfig={formattedAppliedConfig} />
        </div>
        <div className="flex flex-1 min-w-0">
          <Input language={language} errors={errors} />
          <Output store={deferredStore} compilerOutput={mergedOutput} />
        </div>
      </div>
    </>
  );
}