Allow uploading and editing files

filamentphp · Feb 7, 2025 · 5df772b · 5df772b
1 parent 997e84c
commit 5df772b
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 4 deletions.
diff --git a/docs-assets/app/public/js/filament/forms/components/rich-editor.js b/docs-assets/app/public/js/filament/forms/components/rich-editor.js
diff --git a/packages/forms/dist/components/rich-editor.js b/packages/forms/dist/components/rich-editor.js
diff --git a/packages/forms/resources/js/components/rich-editor.js b/packages/forms/resources/js/components/rich-editor.js
@@ -8,7 +8,7 @@ export default function richEditorFormComponent({ key, livewireId, state, stateP
     return {
         state,
 
-        editorSelection: null,
+        editorSelection: { type: 'text', anchor: 1, head: 1 },
 
         isUploadingFile: false,
 

diff --git a/packages/forms/resources/views/components/rich-editor.blade.php b/packages/forms/resources/views/components/rich-editor.blade.php
@@ -276,6 +276,8 @@ class="h-5 w-5"
                     @if ($hasToolbarButton('attachFiles'))
                         <x-filament-forms::rich-editor.toolbar.group>
                             <x-filament-forms::rich-editor.toolbar.button
+                                type="image"
+                                :x-on:click="$getAction('attachFiles')->getAlpineClickHandler()"
                                 title="{{ __('filament-forms::components.rich_editor.toolbar_buttons.attach_files') }}"
                                 tabindex="-1"
                             >

diff --git a/packages/forms/src/Components/RichEditor.php b/packages/forms/src/Components/RichEditor.php
@@ -3,6 +3,7 @@
 namespace Filament\Forms\Components;
 
 use Closure;
+use Filament\Forms\Components\RichEditor\Actions\AttachFilesAction;
 use Filament\Forms\Components\RichEditor\Actions\LinkAction;
 use Filament\Forms\Components\RichEditor\EditorCommand;
 use Filament\Forms\Components\StateCasts\RichEditorStateCast;
@@ -52,6 +53,7 @@ protected function setUp(): void
         parent::setUp();
 
         $this->registerActions([
+            AttachFilesAction::make(),
             LinkAction::make(),
         ]);
     }

diff --git a/packages/forms/src/Components/RichEditor/Actions/AttachFilesAction.php b/packages/forms/src/Components/RichEditor/Actions/AttachFilesAction.php
@@ -0,0 +1,89 @@
+<?php
+
+namespace Filament\Forms\Components\RichEditor\Actions;
+
+use Filament\Actions\Action;
+use Filament\Forms\Components\Checkbox;
+use Filament\Forms\Components\FileUpload;
+use Filament\Forms\Components\RichEditor;
+use Filament\Forms\Components\RichEditor\EditorCommand;
+use Filament\Forms\Components\TextInput;
+use Filament\Support\Enums\Width;
+use Illuminate\Support\Js;
+use Illuminate\Support\Str;
+use Livewire\Component;
+
+class AttachFilesAction
+{
+    public static function make(): Action
+    {
+        return Action::make('attachFiles')
+            ->alpineClickHandler(fn (RichEditor $component): string => '$wire.mountAction(\'attachFiles\', { alt: getEditor().getAttributes(\'image\')?.alt, id: getEditor().getAttributes(\'image\')?.id, src: getEditor().getAttributes(\'image\')?.src, editorSelection }, ' . Js::from(['schemaComponent' => $component->getKey()]) . ')')
+            ->modalHeading('Upload file')
+            ->modalWidth(Width::Large)
+            ->fillForm(fn (array $arguments): array => [
+                'alt' => $arguments['alt'] ?? null,
+            ])
+            ->form(fn (array $arguments): array => [
+                FileUpload::make('file')
+                    ->label(filled($arguments['src'] ?? null) ? 'Replace file' : 'File')
+                    ->acceptedFileTypes(['image/png', 'image/jpeg', 'image/gif', 'image/webp'])
+                    ->storeFiles(false)
+                    ->required(blank($arguments['src'] ?? null))
+                    ->hiddenLabel(blank($arguments['src'] ?? null)),
+                TextInput::make('alt')
+                    ->label(filled($arguments['src'] ?? null) ? 'Change alt text' : 'Alt text'),
+            ])
+            ->action(function (array $arguments, array $data, RichEditor $component, Component $livewire) {
+                if ($data['file'] ?? null) {
+                    $id = (string) Str::orderedUuid();
+
+                    data_set($livewire, "componentFileAttachments.{$component->getStatePath()}.{$id}", $data['file']);
+                    $src = $component->saveUploadedFileAttachment($id);
+                }
+
+                if (filled($arguments['src'] ?? null)) {
+                    $id ??= $arguments['id'] ?? null;
+                    $src ??= $arguments['src'];
+
+                    $component->runCommands(
+                        [
+                            new EditorCommand(name: 'updateAttributes', arguments: [
+                                'image',
+                                [
+                                    'alt' => $data['alt'] ?? null,
+                                    'id' => $id,
+                                    'src' => $src,
+                                ],
+                            ]),
+                        ],
+                        editorSelection: $arguments['editorSelection'],
+                    );
+
+                    return;
+                }
+
+                if (blank($id ?? null)) {
+                    return;
+                }
+
+                if (blank($src ?? null)) {
+                    return;
+                }
+
+                $component->runCommands(
+                    [
+                        new EditorCommand(name: 'insertContent', arguments: [[
+                            'type' => 'image',
+                            'attrs' => [
+                                'alt' => $data['alt'] ?? null,
+                                'id' => $id,
+                                'src' => $src,
+                            ],
+                        ]]),
+                    ],
+                    editorSelection: $arguments['editorSelection'],
+                );
+            });
+    }
+}
diff --git a/packages/forms/src/Components/RichEditor/Actions/LinkAction.php b/packages/forms/src/Components/RichEditor/Actions/LinkAction.php
@@ -15,7 +15,7 @@ class LinkAction
     public static function make(): Action
     {
         return Action::make('link')
-            ->alpineClickHandler(fn (RichEditor $component): string => '$wire.mountAction(\'link\', { url: getEditor().getAttributes(\'link\').href, shouldOpenInNewTab: getEditor().getAttributes(\'link\').target === \'_blank\', editorSelection }, ' . Js::from(['schemaComponent' => $component->getKey()]) . ')')
+            ->alpineClickHandler(fn (RichEditor $component): string => '$wire.mountAction(\'link\', { url: getEditor().getAttributes(\'link\')?.href, shouldOpenInNewTab: getEditor().getAttributes(\'link\')?.target === \'_blank\', editorSelection }, ' . Js::from(['schemaComponent' => $component->getKey()]) . ')')
             ->modalHeading('Link')
             ->modalWidth(Width::Large)
             ->fillForm(fn (array $arguments): array => [