Feature: all editors support

packages/click-to-react-component/README.md

@@ -168,14 +168,28 @@ If [developing in container](https://github.com/ericclemmons/click-to-component/
 
 ### `editor`
 
-By default, clicking will default `editor` to [`vscode`](https://code.visualstudio.com/).
-
-If, like me, you use [`vscode-insiders`](https://code.visualstudio.com/insiders/), you can set `editor` explicitly:
+By default, the `editor` is set to [`vscode`](https://code.visualstudio.com/).
 
+But you can choose between `webstorm` and `vscode-insider` too.
 ```diff
 -<ClickToComponent />
 +<ClickToComponent editor="vscode-insiders" />
 ```
+If you are using another editor, you can use the `getEditorUrl` prop to define your own editor.
+
+### `getEditorUrl`
+
+If you want to define your own editor, you can use the `getEditorUrl` prop to define your own editor.
+This function will be called with the `path`, `line`, and `column` of the target file.
+
+```tsx
+    <ClickToComponent
+        getEditorUrl={(path, line, column) => {
+           return `my-editor://open?file=${path}&line=${line}&column=${column}`
+        }}
+    />
+```
+
 
 ## Run Locally
 

packages/click-to-react-component/src/ClickToComponent.js

@@ -21,7 +21,7 @@ export const State = /** @type {const} */ ({
 /**
  * @param {Props} props
  */
-export function ClickToComponent({ editor = 'vscode', pathModifier }) {
+export function ClickToComponent({ editor = 'vscode', pathModifier ,getEditorUrl  }) {
   const [state, setState] = React.useState(
     /** @type {State[keyof State]} */
     (State.IDLE)
@@ -41,10 +41,13 @@ export function ClickToComponent({ editor = 'vscode', pathModifier }) {
     ) {
       if (state === State.HOVER && target instanceof HTMLElement) {
         const source = getSourceForElement(target)
-        const path = getPathToSource(source, pathModifier)
+        const { path , column ,  line} = getPathToSource(source, pathModifier)
         const url = getUrl({
           editor,
-          pathToSource: path,
+          path ,
+          column ,
+          line,
+          getEditorUrl
         })
 
         event.preventDefault()
@@ -61,6 +64,7 @@ export function ClickToComponent({ editor = 'vscode', pathModifier }) {
       if (returnValue) {
         const url = getUrl({
           editor,
+          getEditorUrl,
           pathToSource: returnValue,
         })
 

packages/click-to-react-component/src/ContextMenu.js

@@ -327,7 +327,7 @@ export const ContextMenu = React.forwardRef(
                 ${instances.map((instance, i) => {
                   const name = getDisplayNameForInstance(instance)
                   const source = getSourceForInstance(instance)
-                  const path = getPathToSource(source, pathModifier)
+                  const {line , column , path} = getPathToSource(source, pathModifier)
                   const props = getPropsForInstance(instance)
 
                   return html`
@@ -344,7 +344,7 @@ export const ContextMenu = React.forwardRef(
                       key=${i}
                       name="path"
                       type="submit"
-                      value=${path}
+                      value=${path}:${line}:${column}
                     >
                       <code>
                         ${'<'}${name}

packages/click-to-react-component/src/getPathToSource.js

@@ -1,13 +1,11 @@
 /**
  * @typedef {import('react-reconciler').Source} Source
- * @typedef {import('./types').PathModifier} PathModifier
  */
 
 /**
  * @param {Source} source
- * @param {PathModifier} pathModifier
  */
-export function getPathToSource(source, pathModifier) {
+export function getPathToSource(source) {
   const {
     // It _does_ exist!
     // @ts-ignore Property 'columnNumber' does not exist on type 'Source'.ts(2339)
@@ -16,10 +14,10 @@ export function getPathToSource(source, pathModifier) {
     lineNumber = 1,
   } = source
 
-  let path = `${fileName}:${lineNumber}:${columnNumber}`
-  if (pathModifier) {
-    path = pathModifier(path)
+  return {
+    path:fileName,
+    line:lineNumber,
+    column:columnNumber
   }
 
-  return path
 }

packages/click-to-react-component/src/getSourceForElement.js

@@ -1,5 +1,5 @@
-import { getReactInstanceForElement } from './getReactInstanceForElement'
-import { getSourceForInstance } from './getSourceForInstance'
+import { getReactInstanceForElement } from './getReactInstanceForElement.js'
+import { getSourceForInstance } from './getSourceForInstance.js'
 
 /**
  * @typedef {import('react-reconciler').Fiber} Fiber

packages/click-to-react-component/src/getUrl.js

@@ -1,13 +1,27 @@
+const editorsPreset = {
+  vscode: ({ path, line, column }) => `vscode://file/${path}:${line}:${column}`,
+  'vscode-insider': ({ path, line, column }) => `vscode-insider://file/${path}:${line}:${column}`,
+  webstorm: ({ path, line }) => `webstorm://open?file=${path}&line=${line}`
+}
+
 /**
  * @param {Object} param
  * @param {string} param.editor
- * @param {string} param.pathToSource
+ * @param {string} param.path
+ * @param {number} param.line
+ * @param {number} param.column
+ * @param {string=} param.pathToSource
+ * @param {Function=} param.getEditorUrl
  */
-export function getUrl({ editor, pathToSource }) {
-  // Fix https://github.com/microsoft/vscode/issues/197319
-  if (pathToSource[0] === '/') {
-    return `${editor}://file${pathToSource}`
+export function getUrl({ editor, path ,line ,column,pathToSource,getEditorUrl }) {
+  const urlFactory = getEditorUrl ? getEditorUrl : (editorsPreset[editor] || editorsPreset["vscode"])
+  // support for the old method pathToSource
+  if (pathToSource){
+    const params = pathToSource.split(":")
+    const trimmedPath = params[0].startsWith("/") ? params[0].slice(1) : params[0]
+    return urlFactory({path:trimmedPath, line:params[1], column:params[2]})
   }
 
-  return `${editor}://file/${pathToSource}`
+  const trimmedPath = path.startsWith("/") ? path.slice(1) : path
+  return urlFactory({path:trimmedPath, line ,column})
 }

packages/click-to-react-component/src/types.d.ts

@@ -1,11 +1,12 @@
 export { ClickToComponent } from './ClickToComponent'
 
-export type Editor = 'vscode' | 'vscode-insiders'
+export type Editor = 'vscode' | 'vscode-insiders' | 'webstorm'
 
 export type PathModifier = (path: string) => string;
 
 export type ClickToComponentProps = {
   editor?: Editor;
+  getEditorUrl?: (params:{path:string , line:number , column:number}) => string
   pathModifier?: PathModifier;
 }
 
@@ -16,4 +17,4 @@ export type Target = HTMLElement
 export type ContextMenuProps = {
   onClose?: () => void;
   pathModifier?: PathModifier;
-}
+}