ISSUE 1: IMAGE UPLOAD & DISPLAY

I am building The AEye cybersecurity platform. My blog CMS admin panel is built in React + TipTap editor + FastAPI backend. I need PERMANENT, BULLETPROOF solutions for these 2 critical issues. NO workarounds. NO temporary fixes. Production-ready code only.

═══════════════════════════════════════ ISSUE 1: IMAGE UPLOAD & DISPLAY ═══════════════════════════════════════

PROBLEM: Images in blog editor convert to base64/blob/data-URI hashes. They don't display in editor preview or published blog.

PERMANENT FIX REQUIREMENTS:

• IMAGE UPLOAD FLOW:
• - User drags/drops or clicks to select image
• - Image uploads to FastAPI backend via multipart/form-data
• - Backend saves to /uploads/blog-images/ with UUID filename
• - Backend returns permanent public URL: https://theaeye.co/uploads/blog-images/{uuid}.ext
• - Editor inserts image using that URL ONLY
• - NEVER store base64, blob, or data-URI in database

3. FASTAPI ENDPOINT: - POST /api/upload/image - Validate file type and size - Generate UUID filename - Save to persistent storage - Return {success: true, url: "permanent-url"} - Serve /uploads via StaticFiles

4. ERROR HANDLING: - Invalid file type → clear error message - File too large → clear error message - Upload failed → retry option - Network error → auto-retry 2 times

═══════════════════════════════════════ ISSUE 2: HYPERLINKS ON TEXT & IMAGES ═══════════════════════════════════════

PROBLEM: Cannot add clickable links to text or images. Links don't persist or render.

PERMANENT FIX REQUIREMENTS:

• TEXT LINKS:
• - Select any text → click link button → enter URL
• - Link wraps selected text in <a href="url" target="_blank" rel="noopener noreferrer">
• - Clicking linked text shows edit/remove popup
• - Internal links: /blog/slug format
• - External links: https:// format
• - Links persist after save and render in published blog

2. IMAGE LINKS: - Select image → click link button → enter URL - Image becomes wrapped in <a href="url">...<img>...</a> - Clicking linked image opens URL in new tab - Image link popup shows on click (edit/remove)

3. TIPTAP CONFIG: - Link extension with openOnClick: false - Auto-add target="_blank" and rel="noopener noreferrer" - Custom link popup component for add/edit/remove - Keyboard shortcut: Ctrl+K to add link

4. DATABASE STORAGE: - Links stored as clean HTML in blog content - No sanitization that strips anchor tags - Render HTML as-is in published blog

═══════════════════════════════════════ DELIVERABLES (NO PLACEHOLDERS — FULL CODE) ═══════════════════════════════════════

• FastAPI upload endpoint (complete, working)
• React image upload handler (complete, working)
• TipTap editor config with Image + Link extensions (complete, working)
• Link popup component (add/edit/remove) (complete, working)
• Toolbar buttons for image upload + link (complete, working)

═══════════════════════════════════════ RULES — FOREVER COMPLIANCE ═══════════════════════════════════════

• NO base64 images EVER
• NO blob URLs EVER
• NO data-URI images EVER
• Links must ALWAYS open in new tab
• Links must ALWAYS persist after save
• All code must be production-ready
• Include proper error handling
• Include loading states
• Include TypeScript types where applicable

If any of these rules are broken, the solution is INVALID. Build it once. Build it right. Forever. The AEye ESAM