Update CodeEditor docs

docs-assets/app/app/Livewire/Forms/FieldsDemo.php

@@ -9,6 +9,7 @@ use Filament\Forms\Components\Builder;
 use Filament\Forms\Components\Checkbox;
 use Filament\Forms\Components\CheckboxList;
 use Filament\Forms\Components\CodeEditor;
+use Filament\Forms\Components\CodeEditor\Enums\Language;
 use Filament\Forms\Components\ColorPicker;
 use Filament\Forms\Components\DatePicker;
 use Filament\Forms\Components\DateTimePicker;
@@ -1975,6 +1976,23 @@ class FieldsDemo extends Component implements HasActions, HasSchemas
                                 }
                                 PHP),
                     ]),
+                Group::make()
+                    ->id('codeEditorLanguage')
+                    ->extraAttributes([
+                        'class' => 'p-16 max-w-xl',
+                    ])
+                    ->schema([
+                        CodeEditor::make('code')
+                            ->language(Language::JavaScript)
+                            ->default(<<<'JS'
+                                function calculateArea(width, height) {
+                                    return width * height;
+                                }
+
+                                const area = calculateArea(10, 5);
+                                console.log('Area:', area);
+                                JS),
+                    ]),
             ]);
     }
 

docs-assets/screenshots/schema.js

@@ -1461,6 +1461,20 @@ export default {
             await new Promise((resolve) => setTimeout(resolve, 500))
         },
     },
+    'forms/fields/code-editor/language': {
+        url: 'forms/fields',
+        selector: '#codeEditorLanguage',
+        viewport: {
+            width: 1920,
+            height: 640,
+            deviceScaleFactor: 3,
+        },
+        before: async (page) => {
+            await page.waitForNetworkIdle()
+
+            await new Promise((resolve) => setTimeout(resolve, 500))
+        },
+    },
     'forms/fields/actions/suffix': {
         url: 'forms/fields',
         selector: '#suffixAction',

packages/forms/docs/20-code-editor.md

@@ -28,4 +28,6 @@ CodeEditor::make('code')
     ->language(Language::JavaScript)
 ```
 
+<AutoScreenshot name="forms/fields/code-editor/language" alt="Code editor" version="4.x" />
+
 <UtilityInjection set="formFields" version="4.x">As well as allowing a static value, the language() method also accepts a function to dynamically calculate it. You can inject various utilities into the function as parameters.</UtilityInjection>