Code Editor

PandaPanel\Forms\Components\CodeEditor menyimpan source code sebagai teks dan mengeditnya melalui control monospace yang mempertahankan Tab sebagai indentasi. Gunakan field ini ketika sebuah column menyimpan sesuatu yang memang ditulis sebagai kode — misalnya konfigurasi JSON, potongan CSS, atau fragment SQL — bukan prose, yang lebih tepat menggunakan Markdown Editor atau rich editor.

Contoh minimal

use PandaPanel\Forms\Components\CodeEditor;
use PandaPanel\Forms\Enums\CodeLanguage;
use PandaPanel\Forms\FormSchema;

FormSchema::make()->schema([
    CodeEditor::make('settings')
        ->language(CodeLanguage::Json)
        ->rows(16)
        ->columnSpanFull(),
]);

Method

public function language(CodeLanguage $language): self   // default: CodeLanguage::Plain
public function rows(int $rows): self                    // default: 12, clamped to >= 1
public function maxLength(int $length): self             // default: null, clamped to >= 1

Method	Default	Dampak pada rules	Dampak pada control
language()	CodeLanguage::Plain	hanya menambahkan json untuk Json	menampilkan nama bahasa pada header strip
rows()	12	tidak ada	nilai rows pada textarea
maxLength()	null	menambahkan max:n	maxlength pada textarea

use PandaPanel\Forms\Components\CodeEditor;
use PandaPanel\Forms\Enums\CodeLanguage;

CodeEditor::make('stylesheet')
    ->language(CodeLanguage::Css)
    ->rows(24)
    ->maxLength(20_000)
    ->helperText('Injected into the storefront head, unchanged.');

Bahasa yang didukung

PandaPanel\Forms\Enums\CodeLanguage merupakan closed set karena setiap case dipetakan ke sesuatu yang sudah diketahui saat build. String bebas dapat meminta grammar yang tidak tersedia di bundle dan gagal secara diam-diam sebagai teks biasa tanpa formatting.

Case	Nilai pada wire	Label header
CodeLanguage::Plain	plain	Plain text
CodeLanguage::Json	json	JSON
CodeLanguage::Html	html	HTML
CodeLanguage::Css	css	CSS
CodeLanguage::JavaScript	javascript	JavaScript
CodeLanguage::Php	php	PHP
CodeLanguage::Sql	sql	SQL
CodeLanguage::Yaml	yaml	YAML
CodeLanguage::Markdown	markdown	Markdown

Hanya Json yang mengubah behavior selain label: field menambahkan rule Laravel json, sehingga dokumen yang tidak dapat di-parse ditolak sebelum mencapai column.

use PandaPanel\Forms\Components\CodeEditor;
use PandaPanel\Forms\Enums\CodeLanguage;
use PandaPanel\Forms\FormSchema;

FormSchema::make()
    ->schema([CodeEditor::make('settings')->language(CodeLanguage::Json)->maxLength(5000)])
    ->validationRules();

// ['settings' => ['nullable', 'string', 'json', 'max:5000']]

Bentuk nilai

Field menyimpan string, baik saat masuk maupun keluar.

castForForm() memberikan satu kemudahan: array — seperti yang dikembalikan attribute dengan cast array atau json — di-encode untuk tampilan menggunakan JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES. Nilai selain array atau string menjadi null.

use PandaPanel\Forms\Components\CodeEditor;
use PandaPanel\Forms\Enums\CodeLanguage;

// $record->settings is cast to 'array' and holds ['theme' => 'dark']
CodeEditor::make('settings')->language(CodeLanguage::Json)->formValue($record);

// "{\n    \"theme\": \"dark\"\n}"

Tidak ada decode otomatis saat nilai keluar dari form. Jika Code Editor JSON digunakan di atas column yang di-cast menjadi array, tambahkan konversi sendiri:

use Illuminate\Database\Eloquent\Model;
use PandaPanel\Forms\Components\CodeEditor;
use PandaPanel\Forms\Enums\CodeLanguage;

CodeEditor::make('settings')
    ->language(CodeLanguage::Json)
    ->mutateUsing(static fn (mixed $value, ?Model $record): array => is_string($value)
        ? (array) json_decode($value, associative: true)
        : []);

Rule json sudah dijalankan sebelum hook tersebut, sehingga decoder tidak menerima string yang tidak dapat di-parse.

Behavior control

resources/js/panel/forms/fields/CodeEditorField.vue sengaja menggunakan textarea dengan beberapa behavior penting untuk editing code:

• font fixed-width dan header strip yang menampilkan bahasa serta jumlah baris secara live;
• spellcheck, autocorrect, autocapitalize, dan autocomplete dimatikan agar identifier tidak diubah otomatis saat diketik;
• Tab memasukkan empat spasi, bukan memindahkan fokus. Gunakan Escape lalu Tab untuk keluar dari editor, mengikuti convention umum code editor di web.

Tidak ada syntax highlighting. Menambahkannya berarti menambah dependency highlighter ke setiap bundle Panel, dan package tidak mengambil keputusan tersebut atas nama application. Jika dibutuhkan, gunakan custom field dengan editor pilihan Anda terhadap value yang sama.

Data yang dikirim ke frontend

interface CodeEditorFieldDefinition extends BaseFieldDefinition {
    type: 'code_editor';
    language: CodeLanguage;
    rows: number;
    maxLength: number | null;
}

Hal yang perlu diperhatikan

maxLength() menghitung karakter, bukan baris. Rule menjadi max:n pada string, yang diukur Laravel berdasarkan karakter, dan browser menggunakan angka yang sama sebagai maxlength. Dokumen JSON besar dapat mencapai limit lebih cepat daripada yang terlihat.

language(CodeLanguage::Json) tidak mengubah value menjadi array. Rule hanya memastikan string dapat di-parse sebagai JSON; yang disimpan tetap teks persis seperti yang diketik user, termasuk whitespace. Decode melalui mutateUsing() jika column mengharapkan struktur.

Rule json menolak editor kosong. Textarea yang dikosongkan mengirim '', sedangkan nullable hanya mengabaikan null asli. Akibatnya field JSON optional dapat gagal ketika dikosongkan. Gunakan default('{}'), atau normalisasi string kosong menjadi null sebelum validation melalui hook beforeValidate() pada page:

/**
 * @param  array<string, mixed>  $input
 * @return array<string, mixed>
 */
protected function beforeValidate(array $input): array
{
    if (($input['settings'] ?? null) === '') {
        $input['settings'] = null;
    }

    return $input;
}

Indentasi selalu empat spasi. Handler Tab memasukkan empat spasi secara fixed; tidak configurable dan tidak mendeteksi indentasi di sekitarnya.

Bahasa di luar enum tidak dapat ditambahkan dari userland. CodeLanguage adalah PHP enum; menambah case berarti mengubah package dan union TypeScript sekaligus. Gunakan Plain untuk bahasa yang tidak tercantum.

Lihat juga

• Markdown Editor — prose dengan toolbar dan preview
• Key Value — settings terstruktur tanpa format teks
• Custom Fields — menggunakan component editor sendiri
• Validation
• Forms and Schemas