# 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