TDvorak/MyClub

Fork 0

mirror of https://github.com/Dvorinka/MyClubServer.git synced 2026-06-03 18:22:57 +00:00

Files

T

Tomas Dvorak 63700eedb2 dev day #67

2025-10-21 15:02:05 +02:00

6.8 KiB

Raw Blame History

Rich Text Editor Image Upload & Editing - FIXED

Problems Fixed

1. Blank Image Placeholders ✅

Before: Images would upload but show as blank placeholders
After: Images now preload before insertion and show immediately

What I did:

Added image preloading with new Image() before inserting
Convert relative URLs to absolute URLs (http://localhost:3000/uploads/...)
Verify image loads successfully before inserting into editor
Set proper attributes (draggable=false, max-width: 100%, display: block)
Added console logging to debug URL issues

// Preload image to ensure it exists
const img = new Image();
img.onload = () => {
  // Insert only after image successfully loads
  quill.insertEmbed(index, 'image', absoluteUrl, 'user');
};
img.onerror = () => {
  toast({ title: 'Obrázek nelze načíst', status: 'error' });
};
img.src = absoluteUrl;

2. Photoshop-Style Resize Handles ✅

Before: Small, barely visible blue handles
After: Large, bright blue handles with glow effects like Photoshop

Corner Handles:

Bright blue gradient (#0066ff → #0044cc)
16px circular dots with white border
Strong glow: box-shadow: 0 4px 16px rgba(0,102,255,0.8)
Hover: Scale 1.4x with cyan glow
Z-index 10001 for visibility

Edge Handles:

Bright blue bars (opacity 0.7)
2px solid border
Shadow for depth
Hover: Full opacity with enhanced glow

/* Corner Handle */
background: linear-gradient(135deg, #0066ff 0%, #0044cc 100%);
border: 3px solid white;
border-radius: 50%;
box-shadow: 0 4px 16px rgba(0,102,255,0.8), 
            0 0 0 2px rgba(0, 102, 255, 0.5), 
            inset 0 2px 4px rgba(255,255,255,0.3);

/* Hover Effect */
transform: scale(1.4);
box-shadow: 0 6px 20px rgba(0,102,255,1), 
            0 0 0 3px rgba(0, 255, 255, 0.8);

3. Image Duplication Prevention ✅

Before: Dragging would duplicate images
After: Multiple layers of drag prevention

What I added:

img.setAttribute('draggable', 'false');
img.style.userSelect = 'none';
img.style.webkitUserDrag = 'none';
(img as any).ondragstart = () => false;

Plus event listeners that prevent dragstart:

editor.root.addEventListener('dragstart', (e) => {
  if (e.target.tagName === 'IMG') {
    e.preventDefault();
    e.stopPropagation();
    return false;
  }
});

4. Immediate Image Preview ✅

Images now show immediately after upload with:

Proper sizing (max-width: 100%, height: auto)
Block display for proper layout
Line break after image for easier editing
Cursor positioned after the image

Features Still Available

✅ Click on Image to Edit

Dimensions: Manual width input + visual resize handles
Styles: Brightness, contrast, saturation, blur
Rotation: 90° left/right rotation
Filters: Grayscale, sepia, custom adjustments
Alignment: Left, center, right
Transforms: Flip horizontal/vertical

✅ Drag to Move (Not Duplicate!)

Drag left = align left
Drag right = align right
Requires 50px movement to prevent accidental changes
No duplication - multiple drag prevention layers

✅ Visual Resize

Corner handles: Proportional resize maintaining aspect ratio
Edge handles: Resize width/height independently
Real-time preview: See changes as you drag
Bright blue handles: Highly visible, Photoshop-style

✅ Delete Image

Press Delete or Backspace key when image selected
Or click trash icon in floating toolbar

Testing Checklist

1. Upload New Image

1. Click "Vložit obrázek" button
2. Select an image file
3. Crop if desired (optional)
4. Click "Oříznout a vložit"
5. ✅ Image appears immediately (not blank!)
6. ✅ Console shows: "Image loaded successfully, inserting into editor"

2. Resize Image

1. Click on the inserted image
2. ✅ Bright blue corner handles appear (highly visible)
3. ✅ Blue edge handles on all sides
4. Drag corner handle to resize
5. ✅ Image resizes smoothly
6. ✅ Maintains aspect ratio

3. Move Image (No Duplication!)

1. Click on image to select
2. Click and drag image left or right
3. ✅ Image moves (aligns left/right)
4. ✅ NO duplicate image created
5. ✅ Original image moves position

4. Edit Image Styles

1. Click on image
2. ✅ Floating toolbar appears
3. Adjust brightness/contrast/filters
4. ✅ Live preview shows changes
5. Click "Aplikovat všechny změny"
6. ✅ Changes saved to image

5. Delete Image

1. Click on image to select
2. Press Delete or Backspace key
3. ✅ Image removed from editor
4. Or click trash icon in toolbar

Console Debugging

When uploading an image, you'll see:

Inserting image with URL: http://localhost:3000/uploads/2025/10/filename.jpg
Image loaded successfully, inserting into editor
Image attributes set: <img src="...">

If image fails to load:

Failed to load image: http://localhost:3000/uploads/...
Toast: "Obrázek nelze načíst"

Common Issues & Fixes

Image Still Blank?

Check:

Console for URL - is it correct?
Network tab - does image load?
CORS issues - is upload endpoint accessible?

Fix: The image preloader will show error toast if image can't load

Resize Handles Not Visible?

Check: Are you in edit mode? (not read-only)
Note: Handles are now MUCH brighter - bright blue with glow

Image Duplicates When Dragging?

Check Console: Should show draggable="false" attribute
Note: Multiple prevention layers now active

Can't Edit Image?

Check: Click directly on the image (not whitespace)
Note: Floating toolbar should appear immediately

Files Modified

✅ frontend/src/components/common/CustomRichEditor.tsx
- Image preloading before insertion
- Absolute URL conversion
- Enhanced resize handles (Photoshop-style)
- Multiple drag prevention layers
- Better error handling and logging

Visual Comparison

Resize Handles - Before vs After

Before:

Small blue dots (hard to see)
Light blue color
Minimal shadow
16px size

After:

Large bright blue dots (#0066ff)
Strong glow and shadow effects
White border for contrast
Hover: Scale 1.4x with cyan glow
Looks like Photoshop selection handles!

Image Insertion - Before vs After