EditorPane() — react Function Reference

Architecture documentation for the EditorPane() function in EditorPane.js from the react codebase.

Function javascript CompilerCore Suppression calls 1

Entity Profile

CompilerCore→ Suppression→ EditorPane() — react Function Reference

Dependency Diagram

graph TD
  a60a2c45_ff6e_5be4_0af6_8869ce458eee["EditorPane()"]
  b823b775_a271_db8e_f972_b82810be1fad["EditorPane.js"]
  a60a2c45_ff6e_5be4_0af6_8869ce458eee -->|defined in| b823b775_a271_db8e_f972_b82810be1fad
  b372408b_bd82_c5a7_0c2b_bf4189ceb51d["useEditorURL()"]
  a60a2c45_ff6e_5be4_0af6_8869ce458eee -->|calls| b372408b_bd82_c5a7_0c2b_bf4189ceb51d
  style a60a2c45_ff6e_5be4_0af6_8869ce458eee fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/Editor/EditorPane.js lines 37–117

function EditorPane({selectedSource}: Props) {
  const [showSettings, setShowSettings] = useState(false);
  const [showLinkInfo, setShowLinkInfo] = useState(false);

  const editorURL = useEditorURL();

  if (showLinkInfo) {
    return (
      <div className={styles.EditorPane}>
        <div className={styles.EditorToolbar}>
          <div style={{display: 'flex', flex: '1 1 auto'}}>
            To enable link handling in your browser's DevTools settings, look
            for the option Extension -> Link Handling. Select "React Developer
            Tools".
          </div>
          <div className={styles.VRule} />
          <Button
            onClick={() =>
              startTransition(() => {
                setShowLinkInfo(false);
                setShowSettings(false);
              })
            }>
            <ButtonIcon type="close" />
          </Button>
        </div>
      </div>
    );
  }

  let editorToolbar;
  if (showSettings) {
    editorToolbar = (
      <div className={styles.EditorToolbar}>
        <EditorSettings />
        <div className={styles.VRule} />
        <Button onClick={() => startTransition(() => setShowSettings(false))}>
          <ButtonIcon type="close" />
        </Button>
      </div>
    );
  } else {
    editorToolbar = (
      <div className={styles.EditorToolbar}>
        <OpenInEditorButton
          className={styles.WideButton}
          editorURL={editorURL}
          source={selectedSource}
        />
        <div className={styles.VRule} />
        <Button
          onClick={() => startTransition(() => setShowSettings(true))}
          // We don't use the title here because we don't have enough space to show it.
          // Once we expand this pane we can add it.
          // title="Configure code editor"
        >
          <ButtonIcon type="settings" />
        </Button>
      </div>
    );
  }

  return (
    <div className={styles.EditorPane}>
      {editorToolbar}
      <div className={styles.EditorInfo}>
        {editorURL ? (
          <CodeEditorByDefault
            onChange={alwaysOpenInEditor => {
              if (alwaysOpenInEditor) {
                startTransition(() => setShowLinkInfo(true));
              }
            }}
          />
        ) : (
          'Configure an external editor to open local files.'
        )}
      </div>
    </div>
  );
}