Merge branch 'main' into sanitize-text

aguingand · aguingand · commit 74ecb8aba356 · 2025-08-22T15:12:16.000+02:00
# Conflicts:
#	demo/composer.lock
#	tests-e2e/site/composer.lock
diff --git a/composer.json b/composer.json
@@ -19,6 +19,7 @@
         "ext-mbstring": "*",
         "blade-ui-kit/blade-icons": "^1.6",
         "code16/laravel-content-renderer": "^1.1",
+        "enshrined/svg-sanitize": "^0.21.0",
         "inertiajs/inertia-laravel": "^2.0",
         "intervention/image": "^3.4",
         "laravel/framework": "^11.0|^12.0",
diff --git a/demo/composer.json b/demo/composer.json
@@ -6,6 +6,7 @@
         "bacon/bacon-qr-code": "~2.0",
         "blade-ui-kit/blade-icons": "^1.6",
         "code16/laravel-content-renderer": "^1.2",
+        "enshrined/svg-sanitize": "^0.21.0",
         "guzzlehttp/guzzle": "^7.2",
         "inertiajs/inertia-laravel": "^2.0",
         "intervention/image": "^3.4",
diff --git a/demo/composer.lock b/demo/composer.lock
diff --git a/resources/js/form/components/fields/editor/Editor.vue b/resources/js/form/components/fields/editor/Editor.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
     import { __ } from "@/utils/i18n";
     import { FormEditorFieldData } from "@/types";
-    import { provide, ref, watch } from "vue";
+    import { computed, provide, ref, watch } from "vue";
     import { Editor, BubbleMenu, isActive } from "@tiptap/vue-3";
     import debounce from 'lodash/debounce';
     import { EditorContent } from '@tiptap/vue-3';
@@ -150,6 +150,11 @@
             return editor;
         }
     );
+
+    const dropdownEmbeds = computed(() =>
+        Object.values(props.field.embeds ?? {})
+            .filter(embed => !props.field.toolbar?.includes(`embed:${embed.key}`))
+    );
 </script>
 
 <template>
@@ -198,15 +203,15 @@
                                 </Toggle>
                             </template>
                         </template>
-                        <template v-if="Object.values(props.field.embeds ?? {}).length > 0">
+                        <template v-if="dropdownEmbeds.length > 0">
                             <DropdownMenu :modal="false">
                                 <DropdownMenuTrigger as-child>
                                     <Button class="px-3" variant="ghost" size="sm" :disabled="props.field.readOnly">
                                         {{ __('sharp::form.editor.dropdown.embeds') }}
                                     </Button>
                                 </DropdownMenuTrigger>
                                 <DropdownMenuContent>
-                                    <template v-for="embed in props.field.embeds">
+                                    <template v-for="embed in dropdownEmbeds">
                                         <DropdownMenuItem @click="embedModal.open({ embed })">
                                             {{ embed.label }}
                                         </DropdownMenuItem>
diff --git a/resources/js/form/components/fields/upload/Upload.vue b/resources/js/form/components/fields/upload/Upload.vue
@@ -393,8 +393,8 @@
                 <div :class="{ 'bg-background border rounded-md p-4': !asEditorEmbed }">
                     <div class="flex gap-4">
                         <template v-if="transformedImg ?? value?.thumbnail ?? uppyFile?.preview">
-                            <div class="self-center group/img relative flex flex-col justify-center rounded-md overflow-hidden">
-                                <img class="rounded-md max-h-[150px] max-w-[150px]"
+                            <div class="self-center group/img relative rounded-md overflow-hidden">
+                                <img class="rounded-md min-w-[50px] max-h-[150px] max-w-[150px] object-contain"
                                     :class="uppyFile && !transformedImg && field.imageCropRatio ? 'object-cover aspect-(--ratio)' : ''"
                                     :style="{
                                         '--ratio': field.imageCropRatio ? `${field.imageCropRatio[0]} / ${field.imageCropRatio[1]}` : null
diff --git a/resources/js/show/components/fields/File.vue b/resources/js/show/components/fields/File.vue
@@ -23,13 +23,15 @@
 
 <template>
     <ShowFieldLayout v-bind="props">
-        <div class="flex gap-4 p-4 border rounded-md max-w-[500px]">
+        <div class="flex gap-4 p-4 border rounded-md max-w-[600px]">
             <template v-if="value">
                 <template v-if="value.thumbnail">
-                    <img class="self-center rounded-sm max-w-[100px] max-h-[100px]"
-                        :src="value.thumbnail"
-                        :alt="field.label"
-                    >
+                    <div class="self-center">
+                        <img class="rounded-sm min-w-[40px] max-w-[100px] max-h-[100px] object-contain"
+                            :src="value.thumbnail"
+                            :alt="field.label"
+                        >
+                    </div>
                 </template>
                 <template v-else>
                     <FileIcon class="self-center size-4" :mime-type="value.mime_type" />
diff --git a/resources/js/show/components/fields/text/nodes/Embed.vue b/resources/js/show/components/fields/text/nodes/Embed.vue
@@ -13,7 +13,7 @@
 </script>
 
 <template>
-    <component :is="embed.tag" class="block my-4 first:mt-0 last:mb-0 bg-background border rounded-md p-4">
+    <component :is="embed.tag" class="block my-4 first:mt-0 last:mb-0 bg-background border rounded-md p-4 max-w-[600px]">
         <template v-if="embed.displayEmbedHeader">
             <EmbedHeader :embed="embed" />
         </template>
diff --git a/resources/js/types/generated.d.ts b/resources/js/types/generated.d.ts
@@ -369,7 +369,7 @@ export type FormEditorFieldData = {
   showCharacterCount: boolean;
   uploads: FormEditorFieldUploadData | null;
   embeds: { [embedKey: string]: EmbedData };
-  toolbar: Array<FormEditorToolbarButton>;
+  toolbar: Array<FormEditorToolbarButton | `embed:${string}`>;
   maxHeight: number | null;
   maxLength: number | null;
   placeholder: string | null;
diff --git a/src/Data/Form/Fields/FormEditorFieldData.php b/src/Data/Form/Fields/FormEditorFieldData.php
@@ -35,7 +35,7 @@ public function __construct(
         public ?array $uploads = null,
         #[LiteralTypeScriptType('{ [embedKey:string]:EmbedData }')]
         public ?array $embeds = null,
-        #[LiteralTypeScriptType('Array<FormEditorToolbarButton>')]
+        #[LiteralTypeScriptType('Array<FormEditorToolbarButton | `embed:${string}`>')]
         public ?array $toolbar = null,
         public ?int $maxHeight = null,
         public ?int $maxLength = null,
diff --git a/src/Form/Fields/Formatters/UploadFormatter.php b/src/Form/Fields/Formatters/UploadFormatter.php
@@ -55,6 +55,7 @@ public function fromFront(SharpFormField $field, string $attribute, $value): ?ar
                         disk: $field->storageDisk(),
                         filePath: $formatted['file_name'],
                         shouldOptimizeImage: $field->isImageOptimize(),
+                        shouldSanitizeSvg: $field->isImageSanitizeSvg(),
                         transformFilters: $field->isImageTransformOriginal()
                             ? ($value['filters'] ?? null)
                             : null,
diff --git a/src/Form/Fields/SharpFormUploadField.php b/src/Form/Fields/SharpFormUploadField.php
@@ -23,6 +23,7 @@ class SharpFormUploadField extends SharpFormField
     protected ?Dimensions $imageDimensionConstraints = null;
     protected bool $imageCompactThumbnail = false;
     protected bool $imageOptimize = false;
+    protected bool $imageSanitizeSvg = true;
     protected ?array $imageCropRatio = null;
     protected ?array $imageTransformableFileTypes = null;
 
@@ -93,6 +94,18 @@ public function isImageOptimize(): bool
         return $this->imageOptimize;
     }
 
+    public function setImageSanitizeSvg(bool $imageSanitizeSvg = true): self
+    {
+        $this->imageSanitizeSvg = $imageSanitizeSvg;
+
+        return $this;
+    }
+
+    public function isImageSanitizeSvg(): bool
+    {
+        return $this->imageSanitizeSvg;
+    }
+
     public function setImageCompactThumbnail(bool $compactThumbnail = true): self
     {
         $this->imageCompactThumbnail = $compactThumbnail;
diff --git a/src/Http/Jobs/HandleUploadedFileJob.php b/src/Http/Jobs/HandleUploadedFileJob.php
@@ -21,6 +21,7 @@ public function __construct(
         public string $disk,
         public string $filePath,
         public bool $shouldOptimizeImage = true,
+        public bool $shouldSanitizeSvg = true,
         public ?array $transformFilters = null,
         public ?string $instanceId = null,
     ) {}
@@ -45,9 +46,16 @@ public function handle(): void
         if ($this->transformFilters) {
             // There are transformation and field was configured to handle transformation on the source image
             HandleTransformedFileJob::dispatchSync(
-                $tmpDisk,
-                $tmpFilePath,
-                $this->transformFilters
+                disk: $tmpDisk,
+                filePath: $tmpFilePath,
+                transformFilters: $this->transformFilters
+            );
+        }
+
+        if ($this->shouldSanitizeSvg && Storage::disk($tmpDisk)->mimeType($tmpFilePath) === 'image/svg+xml') {
+            SanitizeSvgJob::dispatchSync(
+                disk: $tmpDisk,
+                filePath: $tmpFilePath
             );
         }
 
diff --git a/src/Http/Jobs/SanitizeSvgJob.php b/src/Http/Jobs/SanitizeSvgJob.php
@@ -0,0 +1,35 @@
+<?php
+
+namespace Code16\Sharp\Http\Jobs;
+
+use enshrined\svgSanitize\Sanitizer;
+use Illuminate\Bus\Queueable;
+use Illuminate\Contracts\Queue\ShouldQueue;
+use Illuminate\Foundation\Bus\Dispatchable;
+use Illuminate\Queue\InteractsWithQueue;
+use Illuminate\Support\Facades\Storage;
+
+class SanitizeSvgJob implements ShouldQueue
+{
+    use Dispatchable;
+    use InteractsWithQueue;
+    use Queueable;
+
+    public function __construct(
+        public string $disk,
+        public string $filePath,
+    ) {}
+
+    public function handle(): void
+    {
+        $sanitizer = new Sanitizer();
+        $sanitizer->minify(true);
+        $sanitizer->removeXMLTag(true);
+        $sanitizedSvg = $sanitizer->sanitize(
+            Storage::disk($this->disk)->get($this->filePath)
+        );
+
+        Storage::disk($this->disk)
+            ->put($this->filePath, $sanitizedSvg);
+    }
+}
diff --git a/src/Utils/Uploads/SharpUploadManager.php b/src/Utils/Uploads/SharpUploadManager.php
@@ -30,13 +30,15 @@ public function queueHandleUploadedFile(
         string $disk,
         string $filePath,
         bool $shouldOptimizeImage = true,
+        bool $shouldSanitizeSvg = true,
         ?array $transformFilters = null,
     ): void {
         $this->uploadedFileQueue[] = compact(
             'uploadedFileName',
             'disk',
             'filePath',
             'shouldOptimizeImage',
+            'shouldSanitizeSvg',
             'transformFilters',
         );
     }
diff --git a/tests-e2e/site/composer.json b/tests-e2e/site/composer.json
@@ -10,6 +10,7 @@
         "ext-json": "*",
         "blade-ui-kit/blade-icons": "^1.7",
         "code16/laravel-content-renderer": "^1.2",
+        "enshrined/svg-sanitize": "^0.21.0",
         "inertiajs/inertia-laravel": "^2.0",
         "intervention/image": "^3.9",
         "intervention/image-laravel": "^1.3",
diff --git a/tests-e2e/site/composer.lock b/tests-e2e/site/composer.lock
diff --git a/tests/Http/Jobs/HandleUploadedFileJobTest.php b/tests/Http/Jobs/HandleUploadedFileJobTest.php
