Docs and markdown editor support

packages/forms/docs/10-rich-editor.md

@@ -225,6 +225,26 @@ RichContentRenderer::make($record->content)
     ->toHtml()
 ```
 
+### Validating uploaded images
+
+You may use the `fileAttachmentsAcceptedFileTypes()` method to control a list of accepted mime types for uploaded images. By default, `image/png`, `image/jpeg`, `image/gif`, and `image/webp` are accepted:
+
+```php
+use Filament\Forms\Components\RichEditor;
+
+RichEditor::make('content')
+    ->fileAttachmentsAcceptedFileTypes(['image/png', 'image/jpeg'])
+```
+
+You may use the `fileAttachmentsMaxSize()` method to control the maximum file size for uploaded images. The size is specified in kilobytes. By default, the maximum size is 12288 KB (12 MB):
+
+```php
+use Filament\Forms\Components\RichEditor;
+
+RichEditor::make('content')
+    ->fileAttachmentsMaxSize(5120) // 5 MB
+```
+
 ## Using custom blocks
 
 Custom blocks are elements that users can drag and drop into the rich editor. You can define custom blocks that user can insert into the rich editor using the `customBlocks()` method:

packages/forms/docs/11-markdown-editor.md

@@ -60,3 +60,23 @@ MarkdownEditor::make('content')
 ```
 
 <UtilityInjection set="formFields" version="4.x">As well as allowing static values, the `fileAttachmentsDisk()` and `fileAttachmentsDirectory()` methods also accept functions to dynamically calculate them. You can inject various utilities into the function as parameters.</UtilityInjection>
+
+### Validating uploaded images
+
+You may use the `fileAttachmentsAcceptedFileTypes()` method to control a list of accepted mime types for uploaded images. By default, `image/png`, `image/jpeg`, `image/gif`, and `image/webp` are accepted:
+
+```php
+use Filament\Forms\Components\MarkdownEditor;
+
+MarkdownEditor::make('content')
+    ->fileAttachmentsAcceptedFileTypes(['image/png', 'image/jpeg'])
+```
+
+You may use the `fileAttachmentsMaxSize()` method to control the maximum file size for uploaded images. The size is specified in kilobytes. By default, the maximum size is 12288 KB (12 MB):
+
+```php
+use Filament\Forms\Components\MarkdownEditor;
+
+MarkdownEditor::make('content')
+    ->fileAttachmentsMaxSize(5120) // 5 MB
+```

packages/forms/resources/js/components/rich-editor/extension-local-files.js

@@ -19,11 +19,11 @@ const validateFiles = ({
     maxSizeValidationMessage,
 }) => {
     for (const file of files) {
-        if (!acceptedTypes.includes(file.type)) {
+        if (acceptedTypes && acceptedTypesValidationMessage && (!acceptedTypes.includes(file.type))) {
             return acceptedTypesValidationMessage
         }
 
-        if (file.size > +maxSize * 1024) {
+        if (maxSize && maxSizeValidationMessage && (file.size > ((+maxSize) * 1024))) {
             return maxSizeValidationMessage
         }
     }

packages/forms/resources/lang/en/components.php

@@ -284,6 +284,10 @@ return [
 
     'markdown_editor' => [
 
+        'file_attachments_accepted_file_types_message' => 'Uploaded files must be of type: :values.',
+
+        'file_attachments_max_size_message' => 'Uploaded files must not be greater than :max kilobytes.',
+
         'tools' => [
             'attach_files' => 'Attach files',
             'blockquote' => 'Blockquote',

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

@@ -4,6 +4,8 @@
     $extraAttributeBag = $getExtraAttributeBag();
     $key = $getKey();
     $statePath = $getStatePath();
+    $fileAttachmentsMaxSize = $getFileAttachmentsMaxSize();
+    $fileAttachmentsAcceptedFileTypes = $getFileAttachmentsAcceptedFileTypes();
 @endphp
 
 <x-dynamic-component :component="$fieldWrapperView" :field="$field">
@@ -37,6 +39,20 @@
                             toolbarButtons: @js($getToolbarButtons()),
                             translations: @js(__('filament-forms::components.markdown_editor')),
                             uploadFileAttachmentUsing: async (file, onSuccess, onError) => {
+                                const acceptedTypes = @js($fileAttachmentsAcceptedFileTypes);
+                                const acceptedTypesValidationMessage = @js($fileAttachmentsAcceptedFileTypes ? __('filament-forms::components.markdown_editor.file_attachments_accepted_file_types_message', ['values' => implode(', ', $fileAttachmentsAcceptedFileTypes)]) : null)
+
+                                if (acceptedTypes && acceptedTypesValidationMessage && (!acceptedTypes.includes(file.type))) {
+                                    return onError(acceptedTypesValidationMessage)
+                                }
+
+                                const maxSize = @js($fileAttachmentsMaxSize);
+                                const maxSizeValidationMessage = @js($fileAttachmentsMaxSize ? trans_choice('filament-forms::components.markdown_editor.file_attachments_max_size_message', $fileAttachmentsMaxSize, ['max' => $fileAttachmentsMaxSize]) : null)
+
+                                if (maxSize && maxSizeValidationMessage && (file.size > ((+maxSize) * 1024))) {
+                                    return onError(maxSizeValidationMessage)
+                                }
+
                                 $wire.upload(`componentFileAttachments.{{ $statePath }}`, file, () => {
                                     $wire
                                         .callSchemaComponentMethod(

packages/forms/src/Components/Concerns/HasFileAttachments.php

@@ -32,7 +32,7 @@ trait HasFileAttachments
      */
     protected array | Arrayable | Closure | null $fileAttachmentsAcceptedFileTypes = ['image/png', 'image/jpeg', 'image/gif', 'image/webp'];
 
-    protected int | Closure | null $fileAttachmentsMaxSize = null;
+    protected int | Closure | null $fileAttachmentsMaxSize = 12288;
 
     public function fileAttachmentsDirectory(string | Closure | null $directory): static
     {