feat: support upload and display jsonl file (#21)

* feat: support jsonl file

* chore: update pnpm-lock

* chore: format files

* chore: add pyproject rules

Author: myzxlin

.vscode/cspell.json

@@ -29,6 +29,8 @@
     "fdspawn",
     "getipython",
     "grpcio",
+    "highlightjs",
+    "hljs",
     "ifaddresses",
     "iloc",
     "INET",

packages/secretnote-ui/tsconfig.json

@@ -1,8 +1,8 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "outDir": "build"
+    "outDir": "build",
   },
   "include": ["./src/**/*", "./src/.openapi-stubs/**/*"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "references": [{ "path": "./tsconfig.node.json" }],
 }

packages/secretnote/package.json

@@ -61,6 +61,7 @@
     "classnames": "^2.3.2",
     "d3-dsv": "^3.0.1",
     "endent": "^2.1.0",
+    "highlight.js": "^11.9.0",
     "lodash-es": "^4.17.21",
     "lucide-react": "^0.284.0",
     "monaco-editor": "^0.45.0",

packages/secretnote/src/modules/file/jsonl-preview-contrib.tsx

@@ -0,0 +1,46 @@
+import { singleton } from '@difizen/mana-app';
+import hljs from 'highlight.js';
+import { useEffect } from 'react';
+
+import { FilePreviewContribution } from './protocol';
+import 'highlight.js/styles/xcode.css'; // 选择主题 https://highlightjs.org/demo
+
+const JsonlView = (props: { data: string }) => {
+  useEffect(() => {
+    hljs.highlightAll();
+  }, []);
+
+  // 创建行号
+  const lineNumber = props.data
+    .trim()
+    .split('\n')
+    .map((_, index) => `${index + 1}\n`)
+    .join('');
+
+  return (
+    <pre style={{ width: '100%', height: '100%', overflow: 'scroll', margin: 0 }}>
+      <span
+        style={{
+          float: 'left',
+          textAlign: 'right',
+          marginRight: 12,
+          color: '#bfbfbf',
+          userSelect: 'none',
+        }}
+      >
+        {lineNumber}
+      </span>
+      <code className="language-json" style={{ padding: '0 1em' }}>
+        {props.data}
+      </code>
+    </pre>
+  );
+};
+
+@singleton({ contrib: [FilePreviewContribution] })
+export class JsonlPreview implements FilePreviewContribution {
+  type = 'jsonl';
+  render = (data: string) => {
+    return <JsonlView data={data} />;
+  };
+}

packages/secretnote/src/modules/file/module.ts

@@ -6,6 +6,7 @@ import { SecretNoteServerModule } from '@/modules/server';
 
 import { CsvPreview } from './csv-preview-contrib';
 import { ExtraView } from './extra-view';
+import { JsonlPreview } from './jsonl-preview-contrib';
 import { LogPreview } from './log-preview-contrib';
 import { FilePreviewView } from './preview-view';
 import { FilePreviewContribution } from './protocol';
@@ -35,6 +36,7 @@ export const FilePreviewModule = ManaModule.create()
     FilePreviewView,
     CsvPreview,
     LogPreview,
+    JsonlPreview,
     createViewPreference({
       slot: PreviewLayoutArea.main,
       view: FilePreviewView,

packages/secretnote/src/modules/file/service.ts

@@ -8,7 +8,7 @@ import { downloadFileByUrl as download } from '@/utils';
 import { SecretNoteServerManager } from '../server';
 
 export const BASE_PATH = '/';
-export const FILE_EXTS = ['.csv', '.log', '.txt'];
+export const FILE_EXTS = ['.csv', '.log', '.txt', '.jsonl'];
 @singleton()
 export class FileService {
   protected readonly contentsManager: ContentsManager;

packages/secretnote/tsconfig.json

@@ -3,6 +3,6 @@
   "compilerOptions": {
     "experimentalDecorators": true,
     "emitDecoratorMetadata": true,
-    "importHelpers": false
-  }
+    "importHelpers": false,
+  },
 }