FatttSnake/oxygen-ui
1
0
Fork 0
Code Pull Requests Activity

Feat(CodeEditor): Support add extra libs

Browse Source
This commit is contained in:
Fat Snake
2024-10-16 18:14:18 +08:00
parent b353ab07e2
commit 47dac4c9c7
10 changed files with 47 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/Playground/CodeEditor/Editor/index.tsx
View File

@@ -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(
nativeApiDTS,
'file:///node_modules/_NativeApi.d.ts'
extraLibs.forEach((item) =>
monaco.languages.typescript.typescriptDefaults.addExtraLib(item.content, item.path)
)
void autoLoadExtraLib(editor, monaco, file.value, onWatch)

5
src/components/Playground/CodeEditor/index.tsx
View File

@@ -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>

2
src/pages/System/Tools/Base.tsx
View File

@@ -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} />

2
src/pages/System/Tools/Code.tsx
View File

@@ -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>

2
src/pages/System/Tools/Template.tsx
View File

@@ -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} />

2
src/pages/Tools/Edit.tsx
View File

@@ -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}

2
src/pages/Tools/Source.tsx
View File

@@ -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>

0
src/components/Playground/CodeEditor/Editor/_NativeApi.d.ts → src/util/editorExtraLibs/_NativeApi.d.ts vendored
View File

7
src/util/editorExtraLibs/_index.d.ts vendored Normal file
View File

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

16
src/util/editorExtraLibs/index.ts Normal file
View File

@@ -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