react-monaco-editor go to definition in JSON schema

235 Views Asked by At

I'm using the react-monaco-editor (https://www.npmjs.com/package/react-monaco-editor?activeTab=readme) in my create-react-app project.

I have a json schema:

...
"some-property": {
      "properties": {
        "nested-property": {
          "$ref": "#/definitions/nested-property"
        },
...
"definitions": {
    "nested-property": {
      "type": "object",
      "properties": {
        "mime": {
          "prop1": "string",
          "prop2": "number"
        },
...

I want to have a possibility to navigate to the definition of the 'nested-property' by clicking (CTRL + Left Mouse Button) on its ref property: "#/definitions/nested-property". Go to definition works out of the box for JavaScript and some other languages but not for JSON for some reason. Is there a way to add this functionality?

Here is my package.json:

...
"dependencies": {
  "react-monaco-editor": "^0.33.0",
  "monaco-editor": "^0.19.3",
},
"devDependencies": {
  "monaco-editor-webpack-plugin": "^1.8.2",
}
...

Here is my config-overrides.js:

...
if (!config.plugins) config.plugins = [];

  config.plugins.push(
    new MonacoWebpackPlugin({
      languages: ['json'],
    })
  );
...

I tried to use another monaco-editor package: https://www.npmjs.com/package/@monaco-editor/react?activeTab=readme, but it also doesn't have the go to definition functionality out of the box.

0

There are 0 best solutions below