Feat/wrapping code editor

bin/setup-playground.sh

@@ -7,7 +7,7 @@ fi
 
 echo "Cloning repository..."
 
-git clone [email protected]:filamentphp/demo.git -b 3.x playground &> /dev/null
+git clone [email protected]:filamentphp/demo.git -b 4.x playground &> /dev/null
 
 echo "Configuring application..."
 

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

@@ -47,3 +47,14 @@ CodeEditor::make('code')
 <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>
 
 <AutoScreenshot name="forms/fields/code-editor/language" alt="Code editor with syntax highlighting" version="4.x" />
+
+## Allowing lines to wrap
+
+By default, long lines in the code editor will create a horizontal scrollbar. If you would like to allow long lines to wrap instead, you may use the `wrap()` method:
+
+```php
+use Filament\Forms\Components\CodeEditor;
+
+CodeEditor::make('code')
+    ->wrap()
+```

packages/forms/resources/js/components/code-editor.js

@@ -19,6 +19,7 @@ import { xml } from '@codemirror/lang-xml'
 import { yaml } from '@codemirror/lang-yaml'
 
 export default function codeEditorFormComponent({
+    canWrap,
     isDisabled,
     isLive,
     isLiveDebounced,
@@ -48,6 +49,7 @@ export default function codeEditorFormComponent({
                     extensions: [
                         basicSetup,
                         keymap.of([indentWithTab]),
+                        ...(canWrap ? [EditorView.lineWrapping] : []),
                         EditorState.readOnly.of(isDisabled),
                         EditorView.editable.of(!isDisabled),
                         EditorView.updateListener.of((viewUpdate) => {

packages/forms/resources/views/components/code-editor.blade.php

@@ -25,6 +25,7 @@
             x-load
             x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('code-editor', 'filament/forms') }}"
             x-data="codeEditorFormComponent({
+                        canWrap: @js($canWrap()),
                         isDisabled: @js($isDisabled),
                         isLive: @js($isLive),
                         isLiveDebounced: @js($isLiveDebounced),

packages/forms/src/Components/CodeEditor.php

@@ -4,10 +4,12 @@
 
 use Closure;
 use Filament\Forms\Components\CodeEditor\Enums\Language;
+use Filament\Support\Concerns\CanWrap;
 use Filament\Support\Concerns\HasExtraAlpineAttributes;
 
 class CodeEditor extends Field
 {
+    use CanWrap;
     use HasExtraAlpineAttributes;
 
     /**