Optimize Playground

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

@@ -110,6 +110,10 @@ const FileSelector = ({
     }
 
     const handleOnValidateTab = (newFileName: string, oldFileName: string) => {
+        if (newFileName.length > 40) {
+            onError?.('File name is too long, maximum 40 characters.')
+        }
+
         if (!/\.(jsx|tsx|js|ts|css|json)$/.test(newFileName)) {
             onError?.('Playground only supports *.jsx, *.tsx, *.js, *.ts, *.css, *.json files.')
 
@@ -219,4 +223,6 @@ const FileSelector = ({
     )
 }
 
+FileSelector.Item = Item
+
 export default FileSelector

src/components/Playground/CodeEditor/index.tsx

@@ -160,4 +160,7 @@ const CodeEditor = ({
     )
 }
 
+CodeEditor.Editor = Editor
+CodeEditor.FileSelector = FileSelector
+
 export default CodeEditor