@react-xray/plugin-open-editor

Open the currently selected component source in a local editor from the XRay action panel.

This plugin adds:

• an Open in Editor action for the selected source
• a settings control for choosing the default editor inside the widget

Installation

Install the plugin alongside its peer dependencies:

pnpm add --dev @react-xray/core @react-xray/ui-components @react-xray/plugin-open-editor

If you are already using react-xray, this plugin is included there by default.

Usage

import { XRay } from '@react-xray/core'
import { OpenEditorPlugin } from '@react-xray/plugin-open-editor'

import App from './App'

export function AppWithXRay() {
  return (
    <>
      <App />
      <XRay
        root={import.meta.env.VITE_ROOT}
        plugins={[OpenEditorPlugin({ editor: 'vscode' })]}
      />
    </>
  )
}

root should be the absolute project root passed to XRay so the plugin can resolve relative file paths for comments.

editor option

OpenEditorPlugin accepts a single option:

interface OpenEditorPluginOptions {
  editor?: EditorPreset
}

• Default: vscode
• If the user changes the editor in the widget settings, that's what's used instead.

The package also exports the EditorPreset type.

Supported editor presets

These are the currently implemented presets:

• vscode
• cursor
• windsurf
• webstorm
• intellij

Behavior

When a source location is selected, the plugin resolves the file path relative to the XRay root and opens the generated editor URL with window.open(...).