dev day #67

2026-06-05 11:12:56 +00:00 · 2025-10-21 15:02:05 +02:00
parent 68e69e00cc
commit 63700eedb2
103 changed files with 12442 additions and 446 deletions
@@ -0,0 +1,65 @@
+# Bugfix: Rich Text Editor Image Upload Display Issue
+
+## Problem
+When uploading images through the rich text editor's crop modal, the images would upload successfully but appear as broken/unknown images in the editor. However, clicking on the image would show the controls, indicating the image element existed but the URL was incorrect.
+
+## Root Cause
+The backend image processing endpoints (`/api/v1/image-processing/crop-upload` and `/api/v1/image-processing/quick-edit`) return relative URLs like `/uploads/processed_12345.jpg`.
+
+In development, these relative URLs need to be transformed to absolute URLs pointing to the backend server (e.g., `http://localhost:8080/uploads/processed_12345.jpg`) so the frontend running on port 3000 can properly load them.
+
+The `RichTextEditor.tsx` wrapper component properly handled this URL transformation using the `assetUrl()` utility function when using the `onImageUpload` prop. However, the `CustomRichEditor.tsx` component's crop modal directly called `cropAndUpload()` and `quickEditImage()` without applying the URL transformation, causing the images to have incorrect paths.
+
+## Solution
+Applied URL transformation in `CustomRichEditor.tsx` after receiving responses from image processing endpoints:
+
+### Changes Made
+
+1. **Imported assetUrl utility** (line 39)
+   ```typescript
+   import { assetUrl } from '../../utils/url';
+   ```
+
+2. **Applied transformation in confirmCropAndInsert function** (lines 275-276)
+   ```typescript
+   // Transform URL to absolute path
+   const absoluteUrl = assetUrl(res.url) || res.url;
+   
+   // Insert the image with absolute URL
+   quill.insertEmbed(index, 'image', absoluteUrl, 'api');
+   ```
+
+3. **Applied transformation in applyFiltersToBackend function** (lines 849-851)
+   ```typescript
+   // Transform URL to absolute path and replace image src
+   const absoluteUrl = assetUrl(res.url) || res.url;
+   selectedImageElement.src = absoluteUrl;
+   ```
+
+## Technical Details
+
+The `assetUrl()` utility function (in `frontend/src/utils/url.ts`):
+- Detects relative paths starting with `/uploads` or `/dist`
+- Converts them to absolute URLs using `REACT_APP_API_BASE_URL` or `REACT_APP_API_URL` environment variable
+- Leaves absolute URLs and data URLs unchanged
+
+Example transformation:
+- Input: `/uploads/processed_1729500000.jpg`
+- Output: `http://localhost:8080/uploads/processed_1729500000.jpg` (development)
+- Output: `https://yoursite.com/uploads/processed_1729500000.jpg` (production)
+
+## Files Modified
+- `frontend/src/components/common/CustomRichEditor.tsx`
+
+## Testing
+1. Navigate to Articles admin page
+2. Create or edit an article
+3. Click "Vložit obrázek" (Insert Image) button
+4. Upload an image and adjust crop settings
+5. Click confirm
+6. **Expected Result**: Image displays correctly in the editor
+7. Apply filters to the image and confirm
+8. **Expected Result**: Filtered image displays correctly
+
+## Status
+✅ Fixed - Changes will hot-reload automatically if dev server is running