named imports highlight

ui/shared/monaco/CodeEditor.tsx

@@ -136,7 +136,15 @@ const CodeEditor = ({ data }: Props) => {
     const target = event.target as HTMLSpanElement;
     const isImportLink = target.classList.contains('import-link');
     if (isImportLink) {
-      const path = target.innerText;
+      const path = [
+        target.previousElementSibling as HTMLSpanElement,
+        target,
+        target.nextElementSibling as HTMLSpanElement,
+      ]
+        .filter((element) => element?.classList.contains('import-link'))
+        .map((element: HTMLSpanElement) => element.innerText)
+        .join('');
+
       const fullPath = getFullPathOfImportedFile(data[index].file_path, path);
       const fileIndex = data.findIndex((file) => file.file_path === fullPath);
       if (fileIndex > -1) {
@@ -165,12 +173,10 @@ const CodeEditor = ({ data }: Props) => {
     '.highlight': {
       backgroundColor: themeColors['custom.findMatchHighlightBackground'],
     },
-    '&&.meta-pressed .import-link': {
-      _hover: {
-        color: themeColors['custom.fileLink.hoverForeground'],
-        textDecoration: 'underline',
-        cursor: 'pointer',
-      },
+    '&&.meta-pressed .import-link:hover, &&.meta-pressed .import-link:hover + .import-link': {
+      color: themeColors['custom.fileLink.hoverForeground'],
+      textDecoration: 'underline',
+      cursor: 'pointer',
     },
   }), [ editorWidth, themeColors ]);
 

ui/shared/monaco/utils/addFileImportDecorations.ts

 import type * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
 
 export default function addFileImportDecorations(model: monaco.editor.ITextModel) {
-  const matches = model.findMatches('^import (\'|")((\\/|\\.)(\\w|\\.|\\/|-)+)(\'|")', false, true, false, null, true);
-  const decorations: Array<monaco.editor.IModelDeltaDecoration> = matches.map(({ range }) => ({
+  const options: monaco.editor.IModelDecorationOptions = {
+    inlineClassName: 'import-link',
+    hoverMessage: {
+      value: 'Cmd/Win + click to open file',
+    },
+  };
+
+  const regularImportMatches = model.findMatches('^import (\'|")((\\/|\\.).+)(\'|")', false, true, false, null, true);
+  const regularImportDecorations: Array<monaco.editor.IModelDeltaDecoration> = regularImportMatches.map(({ range }) => ({
     range: {
       ...range,
       startColumn: range.startColumn + 8,
       endColumn: range.endColumn - 1,
     },
-    options: {
-      inlineClassName: 'import-link',
-      hoverMessage: {
-        value: 'Cmd/Win + click to open file',
-      },
+    options,
+  }));
+
+  const namedImportMatches = model.findMatches('(^import \\{.+\\} from )(\'|")((\\/|\\.).+)(\'|")', false, true, false, null, true);
+  const namedImportDecorations: Array<monaco.editor.IModelDeltaDecoration> = namedImportMatches.map(({ range, matches }) => ({
+    range: {
+      ...range,
+      startColumn: range.startColumn + (Array.isArray(matches) ? matches?.[1]?.length + 1 : 0),
+      endColumn: range.endColumn - 1,
     },
+    options,
   }));
-  model.deltaDecorations([], decorations);
+
+  model.deltaDecorations([], regularImportDecorations.concat(namedImportDecorations));
 }