fix: clean up whitespace and add alt text to pasted images

Remove trailing whitespace throughout the Create.svelte component and add missing alt attribute to pasted image previews for better accessibility.
This commit is contained in:
Stefan Meinecke
2026-05-12 19:59:43 +02:00
parent 3e3d528d5a
commit f5823fb533
+15 -15
View File
@@ -29,7 +29,7 @@
let customPassword: string | null = $state(null) let customPassword: string | null = $state(null)
let description = $state('') let description = $state('')
let loading: string | null = $state(null) let loading: string | null = $state(null)
// Image paste functionality // Image paste functionality
let pastedImages: { preview: string; file: File }[] = $state([]) let pastedImages: { preview: string; file: File }[] = $state([])
let isPasting = $state(false) let isPasting = $state(false)
@@ -85,25 +85,25 @@
} }
} }
} }
try { try {
const results = await Promise.all(imagePromises) const results = await Promise.all(imagePromises)
const imageFiles = results.filter((file): file is File => file !== null) const imageFiles = results.filter((file): file is File => file !== null)
if (imageFiles.length > 0) { if (imageFiles.length > 0) {
// Switch to file mode if not already // Switch to file mode if not already
if (!isFile) { if (!isFile) {
isFile = true isFile = true
} }
// Process each image for preview and add to files // Process each image for preview and add to files
for (const imageFile of imageFiles) { for (const imageFile of imageFiles) {
// Create preview URL // Create preview URL
const previewURL = URL.createObjectURL(imageFile) const previewURL = URL.createObjectURL(imageFile)
// Add to pasted images for preview // Add to pasted images for preview
pastedImages = [...pastedImages, { preview: previewURL, file: imageFile }] pastedImages = [...pastedImages, { preview: previewURL, file: imageFile }]
// Convert to FileDTO and add to files array // Convert to FileDTO and add to files array
const arrayBuffer = await imageFile.arrayBuffer() const arrayBuffer = await imageFile.arrayBuffer()
const fileDTO: FileDTO = { const fileDTO: FileDTO = {
@@ -112,7 +112,7 @@
type: imageFile.type, type: imageFile.type,
contents: new Uint8Array(arrayBuffer) contents: new Uint8Array(arrayBuffer)
} }
// Add to files if not already present // Add to files if not already present
if (!files.some(f => f.name === imageFile.name && f.size === imageFile.size)) { if (!files.some(f => f.name === imageFile.name && f.size === imageFile.size)) {
files = [...files, fileDTO] files = [...files, fileDTO]
@@ -130,10 +130,10 @@
const removed = pastedImages.splice(index, 1)[0] const removed = pastedImages.splice(index, 1)[0]
// Revoke the object URL to free memory // Revoke the object URL to free memory
URL.revokeObjectURL(removed.preview) URL.revokeObjectURL(removed.preview)
// Also remove from files array // Also remove from files array
files = files.filter(file => !(file.name === removed.file.name && file.size === removed.file.size)) files = files.filter(file => !(file.name === removed.file.name && file.size === removed.file.size))
// If no more pasted images and no other files, switch back to text mode // If no more pasted images and no other files, switch back to text mode
if (pastedImages.length === 0 && files.length === 0) { if (pastedImages.length === 0 && files.length === 0) {
isFile = false isFile = false
@@ -212,17 +212,17 @@
placeholder="..." placeholder="..."
/> />
{/if} {/if}
{#if pastedImages.length > 0} {#if pastedImages.length > 0}
<div class="pasted-images-preview"> <div class="pasted-images-preview">
<h4>{$t('home.pasted_images')}</h4> <h4>{$t('home.pasted_images')}</h4>
<div class="images-grid"> <div class="images-grid">
{#each pastedImages as image, index} {#each pastedImages as image, index}
<div class="image-preview"> <div class="image-preview">
<img src={image.preview} class="preview-img" /> <img src={image.preview} class="preview-img" alt="Pasted image" />
<div class="image-actions"> <div class="image-actions">
<Button <Button
onclick={() => removePastedImage(index)} onclick={() => removePastedImage(index)}
> >
{$t('home.remove')} {$t('home.remove')}
</Button> </Button>
@@ -370,12 +370,12 @@
margin-top: 0.5rem; margin-top: 0.5rem;
padding: 0.5rem; padding: 0.5rem;
} }
.preview-img { .preview-img {
max-width: 120px; max-width: 120px;
max-height: 120px; max-height: 120px;
} }
.images-grid { .images-grid {
gap: 0.5rem; gap: 0.5rem;
} }