public function editTableAction(): Action { return Action::make('edit') ->label('Edit') ->requiresConfirmation() ->icon('heroicon-o-pencil') ->modalHeading('Edit Document') ->modalDescription('Edit the document details. Content will be auto-saved.') ->modalIcon('heroicon-o-document-text') ->modalWidth(Width::FiveExtraLarge) ->closeModalByClickingAway(true) ->modalCloseButton(false) ->modalSubmitActionLabel('Save') ->fillForm(function (Model $record) { return [ 'name' => $record->name, 'content' => $record->content, ]; }) ->schema([ TextInput::make('name') ->required() ->maxLength(255), RichEditor::make('content') ->required() ->maxLength(65535) ->disableToolbarButtons([ 'attachFiles', 'blockquote', 'codeBlock', 'h2', 'h3' ]) ->columnSpanFull() // ->live(debounce: 2500) ->hint(fn(Model $record) => $this->showSavedHint && $this->savedRecordId == $record->id ? 'Document autosaved' : null) ->hintIcon(fn(Model $record) => $this->showSavedHint && $this->savedRecordId == $record->id ? 'heroicon-o-check-circle' : null) ->hintColor(fn(Model $record) => $this->showSavedHint && $this->savedRecordId == $record->id ? 'success' : null) ->afterStateUpdated(function (?string $state, ?string $old, Model $record) { if ($state !== $old) { $record->content = $state; $record->saveQuietly(); // Show the hint and track which record was saved $this->showSavedHint = true; $this->savedRecordId = $record->id; // Dispatch client-side event $this->js(<< { \$wire.set('showSavedHint', false); }, 1500); JS); } }) ])