feat: pkg link (#91)

* 🧶 产物预览 支持在 package.json 中直接跳转对应 npm 包版本页
* 🐞 产物预览 首屏渲染时语法高亮异常
* ⚙ monaco-editor 依赖升级，支持 `json` 语法渲染

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Enhanced functionality in the `CodeViewer` component with the upgraded
Monaco Editor.
- Introduced dynamic linking to npm packages based on JSON structure
through a new link provider.

- **Bug Fixes**
- Updated `usePathState` to remove trailing question marks from returned
values.

- **Documentation**
- Clarified changes in the `CodeViewer` and `usePathState` functions for
better understanding.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

src/components/CodeViewer.tsx

@@ -7,9 +7,11 @@ import { useThemeMode } from 'antd-style';
 import { useRef } from 'react';
 import { REGISTRY } from '@/config';
 
+const LinkField = ['devDependencies', 'dependencies', 'peerDependencies', 'optionalDependencies', 'bundleDependencies'];
+
 loader.config({
   paths: {
-    vs: `${REGISTRY}/monaco-editor/0.41.0/files/min/vs`,
+    vs: `${REGISTRY}/monaco-editor/0.52.0/files/min/vs`,
   },
 });
 
@@ -20,6 +22,41 @@ function highlightEditor(editor: any) {
   }
 }
 
+function registerLinkProvider(monaco: any) {
+  monaco.languages.registerLinkProvider('json', {
+    provideLinks: (model: any) => {
+      const links:any= [];
+      const lines = model.getLinesContent();
+      let startCatch = false;
+      lines.forEach((line: string, lineIndex: number) => {
+        if (LinkField.some( _ => line === `  "${_}": {`)) {
+          startCatch = true;
+          return;
+        }
+        if (line === '  },' && startCatch) {
+          startCatch = false;
+          return;
+        }
+        if (startCatch) {
+          const match = line.match(/"(.+?)": "(.+?)"/);
+          if (match?.[1] && match?.[2]) {
+            links.push({
+              range: new monaco.Range(
+                lineIndex + 1,
+                line.split('').findIndex((_) => _.trim()) + 1,
+                lineIndex + 1,
+                line.length,
+              ),
+              url: `https://npmmirror.com/package/${match[1]}/files?version=${match[2]}`,
+            });
+          }
+        }
+      });
+      return { links };
+    }
+  });
+}
+
 export const CodeViewer = ({
   selectedFile,
   pkgName,
@@ -65,6 +102,7 @@ export const CodeViewer = ({
         language={language}
         theme={`vs-${theme}`}
         options={{ readOnly: true, fontSize: 16 }}
+        beforeMount={registerLinkProvider}
         onMount={(editor) => {
           editorRef.current = editor;
           editor.onMouseUp(handleEditorMouseDown);

src/hooks/usePathState.ts

@@ -27,5 +27,5 @@ export function usePathState(pattern: string): [string, (newValue: string) => vo
     router.replace(newPath, newPath, { shallow: true });
   };
 
-  return [state?.split('#')[0], setPathState];
+  return [state?.split('#')[0].replace(/\?$/, ''), setPathState];
 }