Optimize CodeEditor

src/components/ReactPlayground/CodeEditor/FileSelector/index.tsx

@@ -120,14 +120,15 @@ const FileSelector: React.FC<FileSelectorProps> = ({
     }
 
     useEffect(() => {
-        Object.keys(files).length &&
+        Object.keys(files).length
-            setTabs(
+            ? setTabs(
                   Object.keys(files).filter(
                       (item) =>
                           ![IMPORT_MAP_FILE_NAME, ENTRY_FILE_NAME].includes(item) &&
                           !files[item].hidden
                   )
               )
+            : setTabs([])
     }, [files])
 
     return (
@@ -166,6 +167,7 @@ const FileSelector: React.FC<FileSelectorProps> = ({
                         </FlexBox>
                     </HideScrollbar>
                 </div>
+                {files[IMPORT_MAP_FILE_NAME] && (
                     <div className={'sticky'}>
                         <Item
                             value={'Import Map'}
@@ -174,6 +176,7 @@ const FileSelector: React.FC<FileSelectorProps> = ({
                             readonly
                         />
                     </div>
+                )}
             </div>
         </>
     )

src/components/ReactPlayground/CodeEditor/index.tsx

@@ -83,6 +83,9 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
     }
 
     const handleOnChangeFileContent = (code = '') => {
+        if (!files[onSelectedFileChange ? props.selectedFileName : selectedFileName]) {
+            return
+        }
         const clone = _.cloneDeep(files)
         clone[onSelectedFileChange ? props.selectedFileName : selectedFileName].value = code ?? ''
         onChangeFileContent?.(
@@ -119,7 +122,8 @@ const CodeEditor: React.FC<CodeEditorProps> = ({
                             readonly ||
                             readonlyFiles?.includes(
                                 onSelectedFileChange ? props.selectedFileName : selectedFileName
-                            )
+                            ) ||
+                            !files[onSelectedFileChange ? props.selectedFileName : selectedFileName]
                         }
                         onChange={handleOnChangeFileContent}
                     />

src/pages/OnlineEditor.tsx

@@ -1,54 +1,16 @@
 import React from 'react'
 import CodeEditor from '@/components/ReactPlayground/CodeEditor'
-import { fileNameToLanguage } from '@/components/ReactPlayground/files'
+import { initFiles } from '@/components/ReactPlayground/files'
 import { IFiles } from '@/components/ReactPlayground/shared'
 
 const OnlineEditor: React.FC = () => {
-    const [files, setFiles] = useState<IFiles>({
+    const [files, setFiles] = useState<IFiles>(initFiles)
-        ['App.tsx']: {
-            name: 'App.tsx',
-            language: fileNameToLanguage('App.tsx'),
-            value: 'const a = () => {}'
-        },
-        ['App.css']: {
-            name: 'App.css',
-            language: fileNameToLanguage('App.css'),
-            value: '.title {}'
-        },
-        cde: {
-            name: 'App.css',
-            language: fileNameToLanguage('App.css'),
-            value: '.title {}'
-        },
-        def: {
-            name: 'App.css',
-            language: fileNameToLanguage('App.css'),
-            value: '.title {}'
-        },
-        efg: {
-            name: 'App.css',
-            language: fileNameToLanguage('App.css'),
-            value: '.title {}'
-        },
-        fgh: {
-            name: 'App.css',
-            language: fileNameToLanguage('App.css'),
-            value: '.title {}'
-        },
-        ghi: {
-            name: 'App.css',
-            language: fileNameToLanguage('App.css'),
-            value: '.title {}'
-        }
-    })
 
     return (
         <>
             <CodeEditor
                 files={files}
                 selectedFileName={'App.css'}
-                notRemovable={['App.css', 'fgh']}
-                readonlyFiles={['App.tsx']}
                 onAddFile={(_, files) => setFiles(files)}
                 onRemoveFile={(_, files) => setFiles(files)}
                 onRenameFile={(_, __, files) => setFiles(files)}