Feat(CodeEditor): Support add extra libs

src/renderer/src/components/Playground/CodeEditor/Editor/index.tsx

@@ -6,7 +6,11 @@ import { IEditorOptions, IFiles, ITheme, ITsconfig } from '@/components/Playgrou
 import { fileNameToLanguage, tsconfigJsonDiagnosticsOptions } from '@/components/Playground/files'
 import { useEditor, useTypesProgress } from '@/components/Playground/CodeEditor/Editor/hooks'
 import { MonacoEditorConfig } from '@/components/Playground/CodeEditor/Editor/monacoConfig'
-import nativeApiDTS from '@/components/Playground/CodeEditor/Editor/_NativeApi.d.ts?raw'
+
+export interface ExtraLib {
+    path: string
+    content: string
+}
 
 interface EditorProps {
     tsconfig?: ITsconfig
@@ -17,6 +21,7 @@ interface EditorProps {
     options?: IEditorOptions
     theme?: ITheme
     onJumpFile?: (fileName: string) => void
+    extraLibs?: ExtraLib[]
 }
 
 const Editor = ({
@@ -27,7 +32,8 @@ const Editor = ({
     theme,
     onChange,
     options,
-    onJumpFile
+    onJumpFile,
+    extraLibs = []
 }: EditorProps) => {
     const editorRef = useRef<editor.IStandaloneCodeEditor>()
     const monacoRef = useRef<Monaco>()
@@ -85,9 +91,8 @@ const Editor = ({
         }
 
         jsxSyntaxHighlightRef.current = loadJsxSyntaxHighlight(editor, monaco)
-        monaco.languages.typescript.typescriptDefaults.addExtraLib(
+        extraLibs.forEach((item) =>
-            nativeApiDTS,
+            monaco.languages.typescript.typescriptDefaults.addExtraLib(item.content, item.path)
-            'file:///node_modules/_NativeApi.d.ts'
         )
 
         void autoLoadExtraLib(editor, monaco, file.value, onWatch)

src/renderer/src/components/Playground/CodeEditor/index.tsx

@@ -9,7 +9,7 @@ import {
     TS_CONFIG_FILE_NAME
 } from '@/components/Playground/files'
 import FileSelector from '@/components/Playground/CodeEditor/FileSelector'
-import Editor from '@/components/Playground/CodeEditor/Editor'
+import Editor, { ExtraLib } from '@/components/Playground/CodeEditor/Editor'
 
 interface CodeEditorProps {
     theme?: ITheme
@@ -21,6 +21,7 @@ interface CodeEditorProps {
     notRemovable?: string[]
     selectedFileName?: string
     options?: IEditorOptions
+    extraLibs?: ExtraLib[]
     onSelectedFileChange?: (fileName: string) => void
     onAddFile?: (fileName: string, files: IFiles) => void
     onRemoveFile?: (fileName: string, files: IFiles) => void
@@ -44,6 +45,7 @@ const CodeEditor = ({
     onRenameFile,
     onChangeFileContent,
     onError,
+    extraLibs,
     ...props
 }: CodeEditorProps) => {
     const filteredFilesName = getFileNameList(files).filter(
@@ -153,6 +155,7 @@ const CodeEditor = ({
                     }
                     onChange={handleOnChangeFileContent}
                     onJumpFile={handleOnChangeSelectedFile}
+                    extraLibs={extraLibs}
                 />
                 {errorMsg && <div className={'playground-error-message'}>{errorMsg}</div>}
             </FlexBox>

src/renderer/src/pages/System/Tools/Base.tsx

@@ -10,6 +10,7 @@ import {
 } from '@/constants/common.constants'
 import { utcToLocalTime } from '@/util/datetime'
 import { hasPermission } from '@/util/auth'
+import editorExtraLibs from '@/util/editorExtraLibs'
 import {
     r_sys_tool_base_add,
     r_sys_tool_base_delete,
@@ -1107,6 +1108,7 @@ const Base = () => {
                                         baseDetailLoading[editingBaseId] ||
                                         !hasPermission('system:tool:modify:base')
                                     }
+                                    extraLibs={editorExtraLibs}
                                 />
                                 <div className={'close-editor-btn'} onClick={handleOnCloseBtnClick}>
                                     <Icon component={IconOxygenClose} />

src/renderer/src/pages/System/Tools/Code.tsx

@@ -4,6 +4,7 @@ import '@/assets/css/pages/system/tools/code.scss'
 import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
 import { checkDesktop } from '@/util/common'
 import { navigateToExecute, navigateToRepository } from '@/util/navigation'
+import editorExtraLibs from '@/util/editorExtraLibs'
 import { r_sys_tool_get_one } from '@/services/system'
 import { IFiles } from '@/components/Playground/shared'
 import { base64ToFiles } from '@/components/Playground/files'
@@ -87,6 +88,7 @@ const Code = () => {
                         files={files}
                         selectedFileName={selectedFileName}
                         onSelectedFileChange={setSelectedFileName}
+                        extraLibs={editorExtraLibs}
                     />
                 </Card>
 

src/renderer/src/pages/System/Tools/Template.tsx

@@ -10,6 +10,7 @@ import {
 } from '@/constants/common.constants'
 import { utcToLocalTime } from '@/util/datetime'
 import { hasPermission } from '@/util/auth'
+import editorExtraLibs from '@/util/editorExtraLibs'
 import {
     r_sys_tool_template_update,
     r_sys_tool_template_delete,
@@ -1051,6 +1052,7 @@ const Template = () => {
                                         templateDetailLoading[editingTemplateId] ||
                                         !hasPermission('system:tool:modify:template')
                                     }
+                                    extraLibs={editorExtraLibs}
                                 />
                                 <div className={'close-editor-btn'} onClick={handleOnCloseBtnClick}>
                                     <Icon component={IconOxygenClose} />

src/renderer/src/pages/Tools/Edit.tsx

@@ -9,6 +9,7 @@ import {
     TOOL_UNDER_REVIEW
 } from '@/constants/common.constants'
 import { navigateToRepository } from '@/util/navigation'
+import editorExtraLibs from '@/util/editorExtraLibs'
 import { r_tool_category_get, r_tool_detail, r_tool_update } from '@/services/tool'
 import { IFiles, IImportMap, ITsconfig } from '@/components/Playground/shared'
 import {
@@ -443,6 +444,7 @@ const Edit = () => {
                                 onRenameFile={(_, __, files) => setFiles(files)}
                                 onChangeFileContent={handleOnChangeFileContent}
                                 onSelectedFileChange={setSelectedFileName}
+                                extraLibs={editorExtraLibs}
                             />
                             <Playground.Output
                                 files={files}

src/renderer/src/pages/Tools/Source.tsx

@@ -2,6 +2,7 @@ import '@/assets/css/pages/tools/source.scss'
 import { DATABASE_NO_RECORD_FOUND, DATABASE_SELECT_SUCCESS } from '@/constants/common.constants'
 import { getLoginStatus } from '@/util/auth'
 import { navigateToRepository, navigateToSource } from '@/util/navigation'
+import editorExtraLibs from '@/util/editorExtraLibs'
 import { r_tool_detail } from '@/services/tool'
 import { IFiles } from '@/components/Playground/shared'
 import { base64ToFiles } from '@/components/Playground/files'
@@ -90,6 +91,7 @@ const Source = () => {
                     files={files}
                     selectedFileName={selectedFileName}
                     onSelectedFileChange={setSelectedFileName}
+                    extraLibs={editorExtraLibs}
                 />
             </Card>
         </FitFullscreen>

src/renderer/src/util/editorExtraLibs/_index.d.ts

@@ -0,0 +1,7 @@
+interface Window {
+    /**
+     * Initialization tool.\
+     * This method must be implemented to run the tool.
+     */
+    initOxygenTool: (id: string) => void
+}

src/renderer/src/util/editorExtraLibs/index.ts

@@ -0,0 +1,16 @@
+import { ExtraLib } from '@/components/Playground/CodeEditor/Editor'
+import indexDTS from '@/util/editorExtraLibs/_index.d.ts?raw'
+import nativeApiDTS from '@/util/editorExtraLibs/_NativeApi.d.ts?raw'
+
+const editorExtraLibs: ExtraLib[] = [
+    {
+        path: 'file:///node_modules/_index.d.ts',
+        content: indexDTS
+    },
+    {
+        path: 'file:///node_modules/_NativeApi.d.ts',
+        content: nativeApiDTS
+    }
+]
+
+export default editorExtraLibs