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

@@ -120,14 +120,15 @@ const FileSelector: React.FC<FileSelectorProps> = ({
     }
 
     useEffect(() => {
-        Object.keys(files).length &&
-            setTabs(
-                Object.keys(files).filter(
-                    (item) =>
-                        ![IMPORT_MAP_FILE_NAME, ENTRY_FILE_NAME].includes(item) &&
-                        !files[item].hidden
-                )
-            )
+        Object.keys(files).length
+            ? setTabs(
+                  Object.keys(files).filter(
+                      (item) =>
+                          ![IMPORT_MAP_FILE_NAME, ENTRY_FILE_NAME].includes(item) &&
+                          !files[item].hidden
+                  )
+              )
+            : setTabs([])
     }, [files])
 
     return (
@@ -166,14 +167,16 @@ const FileSelector: React.FC<FileSelectorProps> = ({
                         </FlexBox>
                     </HideScrollbar>
                 </div>
-                <div className={'sticky'}>
-                    <Item
-                        value={'Import Map'}
-                        active={selectedFileName === IMPORT_MAP_FILE_NAME}
-                        onClick={editImportMap}
-                        readonly
-                    />
-                </div>
+                {files[IMPORT_MAP_FILE_NAME] && (
+                    <div className={'sticky'}>
+                        <Item
+                            value={'Import Map'}
+                            active={selectedFileName === IMPORT_MAP_FILE_NAME}
+                            onClick={editImportMap}
+                            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>({
-        ['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 {}'
-        }
-    })
+    const [files, setFiles] = useState<IFiles>(initFiles)
 
     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)}