Resolve JSON pointers as links

README.md

@@ -15,6 +15,7 @@ files:
 - Formatting using Prettier
 - Document Symbols
 - Automatically load remote schema files (by enabling DiagnosticsOptions.enableSchemaRequest)
+- Links from JSON references.
 
 Schemas can also be provided by configuration. See
 [here](https://github.com/remcohaszing/monaco-yaml/blob/main/index.d.ts) for the API that the plugin

examples/webpack/src/index.ts

@@ -125,6 +125,11 @@ array:
     enum: Mewtwo
 
 
+# JSON referenses can be clicked for navigation
+pointer:
+  $ref: '#/array'
+
+
 formatting:       Formatting is supported too! Under the hood this is powered by Prettier. Just press Ctrl+Shift+I or right click and press Format to format this document.
 
 

src/languageFeatures.ts

@@ -425,3 +425,26 @@ export function createDocumentFormattingEditProvider(
     },
   };
 }
+
+function toLink(link: ls.DocumentLink): languages.ILink {
+  return {
+    range: toRange(link.range),
+    tooltip: link.tooltip,
+    url: link.target,
+  };
+}
+
+export function createLinkProvider(getWorker: WorkerAccessor): languages.LinkProvider {
+  return {
+    async provideLinks(model) {
+      const resource = model.uri;
+
+      const worker = await getWorker(resource);
+      const links = await worker.findLinks(String(resource));
+
+      return {
+        links: links.map(toLink),
+      };
+    },
+  };
+}

src/yamlMode.ts

@@ -6,6 +6,7 @@ import {
   createDocumentFormattingEditProvider,
   createDocumentSymbolProvider,
   createHoverProvider,
+  createLinkProvider,
   WorkerAccessor,
 } from './languageFeatures';
 import { createWorkerManager } from './workerManager';
@@ -62,6 +63,7 @@ export function setupMode(defaults: languages.yaml.LanguageServiceDefaults): voi
       languageId,
       createDocumentFormattingEditProvider(worker),
     ),
+    languages.registerLinkProvider(languageId, createLinkProvider(worker)),
     createDiagnosticsAdapter(languageId, worker, defaults),
     languages.setLanguageConfiguration(languageId, richEditConfiguration),
   );

src/yamlWorker.ts

@@ -25,6 +25,8 @@ export interface YAMLWorker {
   resetSchema: (uri: string) => PromiseLike<boolean>;
 
   findDocumentSymbols: (uri: string) => PromiseLike<ls.DocumentSymbol[]>;
+
+  findLinks: (uri: string) => PromiseLike<ls.DocumentLink[]>;
 }
 
 export function createYAMLWorker(
@@ -89,6 +91,11 @@ export function createYAMLWorker(
       const symbols = languageService.findDocumentSymbols2(document, {});
       return Promise.resolve(symbols);
     },
+
+    findLinks(uri) {
+      const document = getTextDocument(uri);
+      return Promise.resolve(languageService.findLinks(document));
+    },
   };
 }