Feat(CodeEditor): Support add extra libs

src/components/Playground/CodeEditor/Editor/_NativeApi.d.ts

@@ -1,33 +0,0 @@
-interface NativeApi {
-    /**
-     * Copy text to clipboard
-     *
-     * @param {string} text Text to be copied to clipboard
-     * @returns {boolean} Result
-     */
-    copyToClipboard: (text: string) => boolean
-
-    /**
-     * Read text from clipboard
-     *
-     * @returns {string} Result
-     */
-    readClipboard: () => string
-
-    /**
-     * Save file to download directory
-     *
-     * @param {string} dataBase64 Base64 encoded data
-     * @param {string} fileName File name to be saved
-     * @returns {boolean} Result
-     *
-     * @example
-     * // From Unit8Array:
-     * NativeApi.saveToDownloads(btoa(String.fromCharCode(...data)))
-     * // From string:
-     * NativeApi.saveToDownloads(btoa(String.fromCharCode(...new TextEncoder().encode(text))))
-     */
-    saveToDownloads: (dataBase64: string, fileName: string) => boolean
-}
-
-declare const NativeApi: NativeApi

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(
-            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)

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>