MyClub/DOCS/BUGFIX_RICH_TEXT_EDITOR_IMAGE_UPLOAD.md

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)

   import { assetUrl } from '../../utils/url';
   

2. Applied transformation in confirmCropAndInsert function (lines 275-276)

   // 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)

   // 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