Python Sandbox (#4380)

* Python3 Sandbox (#3944) * update python box (#4251) * update python box * Adjust the height of the NodeCode border. * update python sandbox and add test systemcall bash * update sandbox * add VERSION_RELEASE (#4376) * save empty docx * fix pythonbox log error * fix: js template --------- Co-authored-by: dogfar <37035781+dogfar@users.noreply.github.com> Co-authored-by: gggaaallleee <91131304+gggaaallleee@users.noreply.github.com> Co-authored-by: gggaaallleee <1293587368@qq.com>
2025-07-24 22:03:54 +00:00 · 2025-03-28 13:45:09 +08:00
parent 8323c2d27e
commit 565a966d19
23 changed files with 777 additions and 92 deletions
--- a/packages/web/components/common/Textarea/CodeEditor/Editor.tsx
+++ b/packages/web/components/common/Textarea/CodeEditor/Editor.tsx
@@ -1,9 +1,9 @@
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useRef, useState, useEffect } from 'react';
 import Editor, { Monaco, loader } from '@monaco-editor/react';
 import { Box, BoxProps } from '@chakra-ui/react';
 import MyIcon from '../../Icon';
 import { getWebReqUrl } from '../../../../common/system/utils';
-
+import usePythonCompletion from './usePythonCompletion';
 loader.config({
  paths: { vs: getWebReqUrl('/js/monaco-editor.0.45.0/vs') }
 });
@@ -21,6 +21,7 @@ export type Props = Omit<BoxProps, 'resize' | 'onChange'> & {
  onOpenModal?: () => void;
  variables?: EditorVariablePickerType[];
  defaultHeight?: number;
+  language?: string;
 };

 const options = {
@@ -53,11 +54,14 @@ const MyEditor = ({
  variables = [],
  defaultHeight = 200,
  onOpenModal,
+  language = 'typescript',
  ...props
 }: Props) => {
  const [height, setHeight] = useState(defaultHeight);
  const initialY = useRef(0);

+  const registerPythonCompletion = usePythonCompletion();
+
  const handleMouseDown = useCallback((e: React.MouseEvent) => {
    initialY.current = e.clientY;

@@ -76,35 +80,47 @@ const MyEditor = ({
    document.addEventListener('mouseup', handleMouseUp);
  }, []);

-  const beforeMount = useCallback((monaco: Monaco) => {
-    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
-      validate: false,
-      allowComments: false,
-      schemas: [
-        {
-          uri: 'http://myserver/foo-schema.json', // 一个假设的 URI
-          fileMatch: ['*'], // 匹配所有文件
-          schema: {} // 空的 Schema
-        }
-      ]
-    });
+  const editorRef = useRef<any>(null);
+  const monacoRef = useRef<Monaco | null>(null);

-    monaco.editor.defineTheme('JSONEditorTheme', {
-      base: 'vs', // 可以基于已有的主题进行定制
-      inherit: true, // 继承基础主题的设置
-      rules: [{ token: 'variable', foreground: '2B5FD9' }],
-      colors: {
-        'editor.background': '#ffffff00',
-        'editorLineNumber.foreground': '#aaa',
-        'editorOverviewRuler.border': '#ffffff00',
-        'editor.lineHighlightBackground': '#F7F8FA',
-        'scrollbarSlider.background': '#E8EAEC',
-        'editorIndentGuide.activeBackground': '#ddd',
-        'editorIndentGuide.background': '#eee'
-      }
-    });
+  const handleEditorDidMount = useCallback((editor: any, monaco: Monaco) => {
+    editorRef.current = editor;
+    monacoRef.current = monaco;
  }, []);

+  const beforeMount = useCallback(
+    (monaco: Monaco) => {
+      monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
+        validate: false,
+        allowComments: false,
+        schemas: [
+          {
+            uri: 'http://myserver/foo-schema.json', // 一个假设的 URI
+            fileMatch: ['*'], // 匹配所有文件
+            schema: {} // 空的 Schema
+          }
+        ]
+      });
+
+      monaco.editor.defineTheme('JSONEditorTheme', {
+        base: 'vs', // 可以基于已有的主题进行定制
+        inherit: true, // 继承基础主题的设置
+        rules: [{ token: 'variable', foreground: '2B5FD9' }],
+        colors: {
+          'editor.background': '#ffffff00',
+          'editorLineNumber.foreground': '#aaa',
+          'editorOverviewRuler.border': '#ffffff00',
+          'editor.lineHighlightBackground': '#F7F8FA',
+          'scrollbarSlider.background': '#E8EAEC',
+          'editorIndentGuide.activeBackground': '#ddd',
+          'editorIndentGuide.background': '#eee'
+        }
+      });
+      registerPythonCompletion(monaco);
+    },
+    [registerPythonCompletion]
+  );
+
  return (
    <Box
      borderWidth={'1px'}
@@ -118,7 +134,7 @@ const MyEditor = ({
    >
      <Editor
        height={'100%'}
-        defaultLanguage="typescript"
+        language={language}
        options={options as any}
        theme="JSONEditorTheme"
        beforeMount={beforeMount}
@@ -127,6 +143,7 @@ const MyEditor = ({
        onChange={(e) => {
          onChange?.(e || '');
        }}
+        onMount={handleEditorDidMount}
      />
      {resize && (
        <Box
--- a/packages/web/components/common/Textarea/CodeEditor/index.tsx
+++ b/packages/web/components/common/Textarea/CodeEditor/index.tsx
@@ -4,15 +4,31 @@ import { Button, ModalBody, ModalFooter, useDisclosure } from '@chakra-ui/react'
 import MyModal from '../../MyModal';
 import { useTranslation } from 'next-i18next';

-type Props = Omit<EditorProps, 'resize'> & {};
+type Props = Omit<EditorProps, 'resize'> & { language?: string };
+function getLanguage(language: string | undefined): string {
+  let fullName: string;
+  switch (language) {
+    case 'py':
+      fullName = 'python';
+      break;
+    case 'js':
+      fullName = 'typescript';
+      break;
+    default:
+      fullName = `typescript`;
+      break;
+  }
+  return fullName;
+}

 const CodeEditor = (props: Props) => {
  const { t } = useTranslation();
  const { isOpen, onOpen, onClose } = useDisclosure();
-
+  const { language, ...otherProps } = props;
+  const fullName = getLanguage(language);
  return (
    <>
-      <MyEditor {...props} resize onOpenModal={onOpen} />
+      <MyEditor {...props} resize onOpenModal={onOpen} language={fullName} />
      <MyModal
        isOpen={isOpen}
        onClose={onClose}
@@ -23,7 +39,7 @@ const CodeEditor = (props: Props) => {
        isCentered
      >
        <ModalBody flex={'1 0 0'} overflow={'auto'}>
-          <MyEditor {...props} bg={'myGray.50'} height={'100%'} />
+          <MyEditor {...props} bg={'myGray.50'} height={'100%'} language={fullName} />
        </ModalBody>
        <ModalFooter>
          <Button mr={2} onClick={onClose} px={6}>
--- a/packages/web/components/common/Textarea/CodeEditor/usePythonCompletion.ts
+++ b/packages/web/components/common/Textarea/CodeEditor/usePythonCompletion.ts
@@ -0,0 +1,83 @@
+import { Monaco } from '@monaco-editor/react';
+import { useCallback } from 'react';
+let monacoInstance: Monaco | null = null;
+const usePythonCompletion = () => {
+  return useCallback((monaco: Monaco) => {
+    if (monacoInstance === monaco) return;
+    monacoInstance = monaco;
+
+    monaco.languages.registerCompletionItemProvider('python', {
+      provideCompletionItems: (model, position) => {
+        const wordInfo = model.getWordUntilPosition(position);
+        const currentWordPrefix = wordInfo.word;
+
+        const lineContent = model.getLineContent(position.lineNumber);
+
+        const range = {
+          startLineNumber: position.lineNumber,
+          endLineNumber: position.lineNumber,
+          startColumn: wordInfo.startColumn,
+          endColumn: wordInfo.endColumn
+        };
+
+        const baseSuggestions = [
+          {
+            label: 'len',
+            kind: monaco.languages.CompletionItemKind.Function,
+            insertText: 'len()',
+            documentation: 'get length of object',
+            range,
+            sortText: 'a'
+          }
+        ];
+
+        const filtered = baseSuggestions.filter((item) =>
+          item.label.toLowerCase().startsWith(currentWordPrefix.toLowerCase())
+        );
+
+        if (lineContent.startsWith('import')) {
+          const importLength = 'import'.length;
+          const afterImport = lineContent.slice(importLength);
+          const spaceMatch = afterImport.match(/^\s*/);
+          const spaceLength = spaceMatch ? spaceMatch[0].length : 0;
+
+          const startReplaceCol = importLength + spaceLength + 1;
+          const currentCol = position.column;
+
+          const replaceRange = new monaco.Range(
+            position.lineNumber,
+            startReplaceCol,
+            position.lineNumber,
+            currentCol
+          );
+
+          const needsSpace = spaceLength === 0;
+          return {
+            suggestions: [
+              {
+                label: 'numpy',
+                kind: monaco.languages.CompletionItemKind.Module,
+                insertText: `${needsSpace ? ' ' : ''}numpy as np`,
+                documentation: 'numerical computing library',
+                range: replaceRange,
+                sortText: 'a'
+              },
+              {
+                label: 'pandas',
+                kind: monaco.languages.CompletionItemKind.Module,
+                insertText: `${needsSpace ? ' ' : ''}pandas as pd`,
+                documentation: 'data analysis library',
+                range: replaceRange
+              }
+            ]
+          };
+        }
+
+        return { suggestions: filtered };
+      },
+      triggerCharacters: ['.', '_']
+    });
+  }, []);
+};
+
+export default usePythonCompletion;