Editor Integration

/**
 * Checks if a file path exists within project roots
 * @param maybeRelativePath - Absolute or relative file path to check
 * @param absoluteProjectRoots - Array of absolute project root directory paths
 * @returns True if file exists within project roots, false otherwise
 */
function doesFilePathExist(maybeRelativePath: string, absoluteProjectRoots: string[]): boolean;

import { doesFilePathExist } from "react-devtools-core/src/editor";

const projectRoots = ['/path/to/project', '/path/to/shared'];

// Check absolute path
const exists1 = doesFilePathExist('/path/to/project/src/App.js', projectRoots);
// returns: true (if file exists)

// Check relative path
const exists2 = doesFilePathExist('src/components/Button.js', projectRoots);
// returns: true (if file exists in any project root)

// Non-existent file
const exists3 = doesFilePathExist('nonexistent.js', projectRoots);
// returns: false

/**
 * Opens a file in the user's preferred editor at a specific line
 * @param maybeRelativePath - Path to the file to open (absolute or relative)
 * @param lineNumber - Line number to navigate to (1-based)
 * @param absoluteProjectRoots - Array of absolute project root directories for path resolution
 */
function launchEditor(
  maybeRelativePath: string,
  lineNumber: number,
  absoluteProjectRoots: string[]
): void;

import { launchEditor } from "react-devtools-core/src/editor";

const projectRoots = ['/path/to/project'];

// Open file at specific line
launchEditor('src/App.js', 25, projectRoots);

// Open file at beginning (line 1)
launchEditor('src/components/Button.js', 1, projectRoots);

// Absolute path
launchEditor('/path/to/project/src/utils/helper.js', 42, projectRoots);

// Opens in VS Code with line navigation
launchEditor('src/App.js', 25, projectRoots);
// Executes: code --goto src/App.js:25

// Detected via process name and launched appropriately
launchEditor('src/App.js', 25, projectRoots);
// May execute: webstorm --line 25 src/App.js

// Opens in Atom with line navigation
launchEditor('src/App.js', 25, projectRoots);
// Executes: atom src/App.js:25

// Opens in Sublime Text
launchEditor('src/App.js', 25, projectRoots);
// Executes: subl src/App.js:25

// Opens in Vim (if configured as terminal editor)
launchEditor('src/App.js', 25, projectRoots);
// Executes: vim +25 src/App.js

// Opens in Emacs
launchEditor('src/App.js', 25, projectRoots);
// Executes: emacs +25 src/App.js

const COMMON_EDITORS = {
  // macOS Applications
  '/Applications/Visual Studio Code.app/Contents/MacOS/Electron': 'code',
  '/Applications/Atom.app/Contents/MacOS/Atom': 'atom',
  '/Applications/Sublime Text.app/Contents/MacOS/Sublime Text': '/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl',
  
  // Command line editors
  'vim': 'vim',
  'nvim': 'nvim',
  'emacs': 'emacs',
  'nano': 'nano'
};

# Set preferred editor
export EDITOR=code
export VISUAL=code

# Or set React DevTools specific editor
export REACT_EDITOR=code

# Bash/Zsh
export REACT_EDITOR=code

# Fish
set -x REACT_EDITOR code

# Windows Command Prompt
set REACT_EDITOR=code

# Windows PowerShell
$env:REACT_EDITOR = "code"

/**
 * Editor-specific argument patterns for line navigation
 */
const editorLineArgs = {
  'vim': ['+{line}', '{file}'],
  'nvim': ['+{line}', '{file}'],
  'emacs': ['+{line}', '{file}'],
  'code': ['--goto', '{file}:{line}'],
  'atom': ['{file}:{line}'],
  'subl': ['{file}:{line}'],
  'webstorm': ['--line', '{line}', '{file}']
};

const projectRoots = ['/frontend', '/backend', '/shared'];
const filePath = 'src/components/Button.js';

// Resolution order:
// 1. /frontend/src/components/Button.js
// 2. /backend/src/components/Button.js  
// 3. /shared/src/components/Button.js
// 4. Use /frontend/src/components/Button.js (first root fallback)

import DevtoolsUI from "react-devtools-core/standalone";

// Configure for monorepo structure
DevtoolsUI.setProjectRoots([
  '/monorepo/packages/frontend',
  '/monorepo/packages/backend',
  '/monorepo/packages/shared',
  '/monorepo/apps/mobile'
]);

// DevTools will resolve files across all roots
// Click on component -> opens correct file in appropriate package

# Single project
react-devtools /path/to/project

# Multiple projects (monorepo)
react-devtools /path/to/frontend /path/to/backend /path/to/shared

import DevtoolsUI from "react-devtools-core/standalone";

// Setup editor integration
DevtoolsUI.setProjectRoots([
  process.cwd(),
  path.join(process.cwd(), '..', 'shared')
]);

// Start server with editor support
const server = DevtoolsUI.startServer();

import { connectToDevTools } from "react-devtools-core/backend";

// Connect with project root information
connectToDevTools({
  // Project roots passed from CLI or configuration
  // Enables click-to-open functionality in React Native
});

# Verify editor command is available
which code
which atom
which subl

# Add to PATH if needed (VS Code example)
export PATH="$PATH:/Applications/Visual Studio Code.app/Contents/Resources/app/bin"

# Override automatic detection
export REACT_EDITOR=code
export REACT_EDITOR="/Applications/Visual Studio Code.app/Contents/Resources/app/bin/code"

// Check project roots are correct
console.log('Project roots:', projectRoots);

// Verify file exists
import fs from 'fs';
const fullPath = path.join(projectRoot, filePath);
console.log('File exists:', fs.existsSync(fullPath));

import { doesFilePathExist } from "react-devtools-core/src/editor";

const filePath = 'src/App.js';
const projectRoots = ['/path/to/project'];

console.log('File exists:', doesFilePathExist(filePath, projectRoots));

// Manual check
projectRoots.forEach(root => {
  const fullPath = path.join(root, filePath);
  console.log(`${root}: ${fs.existsSync(fullPath)}`);
});

# Grant permissions to editor if needed
xattr -d com.apple.quarantine /Applications/Visual\ Studio\ Code.app

# Ensure editor executable has proper permissions
chmod +x /usr/local/bin/code

# Add VS Code to PATH
setx PATH "%PATH%;%LOCALAPPDATA%\Programs\Microsoft VS Code\bin"