editor docs

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

@@ -8,6 +8,7 @@ use Filament\Actions\Contracts\HasActions;
 use Filament\Forms\Components\Builder;
 use Filament\Forms\Components\Checkbox;
 use Filament\Forms\Components\CheckboxList;
+use Filament\Forms\Components\CodeEditor;
 use Filament\Forms\Components\ColorPicker;
 use Filament\Forms\Components\DatePicker;
 use Filament\Forms\Components\DateTimePicker;
@@ -1853,6 +1854,26 @@ class FieldsDemo extends Component implements HasActions, HasSchemas
                             ->pips()
                             ->default(50),
                     ]),
+                Group::make()
+                    ->id('codeEditor')
+                    ->extraAttributes([
+                        'class' => 'p-16 max-w-xl',
+                    ])
+                    ->schema([
+                        CodeEditor::make('code')
+                            ->default(<<<PHP
+                                <?php
+
+                                namespace App\Models;
+
+                                use Illuminate\Database\Eloquent\Model;
+
+                                class Post extends Model
+                                {
+                                    // ...
+                                }
+                                PHP),
+                    ]),
             ]);
     }
 

docs-assets/screenshots/schema.js

@@ -1402,6 +1402,20 @@ export default {
             deviceScaleFactor: 3,
         },
     },
+    'forms/fields/code-editor/simple': {
+        url: 'forms/fields',
+        selector: '#codeEditor',
+        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/01-overview.md

@@ -29,6 +29,7 @@ Form field classes can be found in the `Filament\Form\Components` namespace. The
 - [Color picker](color-picker)
 - [Toggle buttons](toggle-buttons)
 - [Slider](slider)
+- [Code editor](code-editor)
 - [Hidden](hidden)
 
 You may also [create your own custom fields](custom-fields) to edit data however you wish.

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

@@ -0,0 +1,16 @@
+---
+title: Code editor
+---
+import AutoScreenshot from "@components/AutoScreenshot.astro"
+
+## Introduction
+
+The code editor component allows you to write code in a set of common programming languages: HTML, CSS, JavaScript, PHP and JSON.
+
+```php
+use Filament\Forms\Components\CodeEditor;
+
+CodeEditor::make('code')
+```
+
+<AutoScreenshot name="forms/fields/code-editor/simple" alt="Code editor" version="4.x" />

packages/schemas/docs/01-overview.md

@@ -43,6 +43,7 @@ For building [forms](../forms), Filament includes a set of fields for different
 - [Color picker](../forms/color-picker)
 - [Toggle buttons](../forms/toggle-buttons)
 - [Slider](../forms/slider)
+- [Code editor](../forms/code-editor)
 - [Hidden](../forms/hidden)
 - Or, build your own [custom form field](../forms/custom-fields)