refactor: add FluxEditorRule and used it in chat

Author: lukas-staab

app/Livewire/ChatPanel.php

@@ -4,6 +4,7 @@
 
 use App\Models\Enums\ChatMessageType;
 use App\Models\Legacy\ChatMessage;
+use App\Rules\FluxEditorRule;
 use Illuminate\Support\Collection;
 use Livewire\Component;
 
@@ -33,9 +34,7 @@ public function render()
     public function save()
     {
 
-        $this->validate(['content' => 'required|min:1']);
-
-        $cleanContent = strip_tags((string) $this->content, '<p><br><strong><em><ul><ol><li><a><h1><h2><h3>');
+        $cleanContent = $this->validate(['content' => ['required', 'min:1', new FluxEditorRule()]])['content'];
 
         ChatMessage::create([
             'text' => $cleanContent,

app/Rules/FluxEditorRule.php

@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Rules;
+
+use Closure;
+use Illuminate\Contracts\Validation\ValidationRule;
+use Illuminate\Translation\PotentiallyTranslatedString;
+
+class FluxEditorRule implements ValidationRule
+{
+    /**
+     * Run the validation rule.
+     *
+     * @param  \Closure(string, ?string=): PotentiallyTranslatedString  $fail
+     */
+    public function validate(string $attribute, mixed $value, Closure $fail): void
+    {
+        $cleanContent = strip_tags((string) $value, '<p><s><br><strong><em><ul><ol><li><a><h1><h2><h3>');
+        if($cleanContent !== $value) {
+            $fail(__('errors.flux-editor-malicious-html'));
+        }
+    }
+}

resources/views/livewire/chat-panel.blade.php

@@ -47,20 +47,22 @@ class="font-medium text-gray-900">{{ $message->user->name ?? $message->creator_a
 
     <!-- New comment form -->
     <div class="mt-6 flex gap-x-3">
-
         <div class="-ml-1 mt-3">
             <x-profile-pic/>
         </div>
-        <form action="#" class="relative flex-auto">
+        <div class="relative flex-auto">
             <div class="overflow-hidden">
                 <flux:editor wire:model="content"/>
-            </div>
 
+            </div>
             <div class="py-2 pr-2 pl-3 bottom-0 absolute right-0">
                 <flux:button wire:click="save" variant="primary" color="indigo" icon="paper-airplane"></flux:button>
             </div>
-        </form>
+        </div>
     </div>
+    @error('content')
+    <div class="ml-14 mt-2 text-sm text-red-600">{{ $message }}</div>
+    @enderror
 
 
 </div>