# Test MyUIbrix Editor - Quick Guide

**After applying the DOM manipulation fix**

## 🔄 First: Rebuild Frontend

The changes are in TypeScript/React, so you need to rebuild:

```bash
cd /home/tdvorak/Desktop/PROG+HTML/Fotbal/fotbal-club/frontend
npm run build
```

Or for development:
```bash
npm start
```

Then **hard refresh** your browser: `Ctrl + Shift + R` (Linux/Windows) or `Cmd + Shift + R` (Mac)

---

## ✅ Test Checklist

### 1. **Delete Button Test**
1. Open homepage as admin
2. Click edit mode (MyUIbrix toolbar appears)
3. Hover over ANY section (hero, matches, gallery, videos, etc.)
4. Click the 🗑️ delete button
5. **Expected:** Section disappears immediately, NO console errors
6. **Old behavior:** Crash with "removeChild: not a child" error

---

### 2. **Style Changes Test**
1. In edit mode, click the ⚙️ button on ANY section
2. Change padding, margin, or background color
3. **Expected:** Styles apply instantly to that section
4. **Old behavior:** Only worked on hero section, others didn't change

Try these sections specifically:
- ✅ Hero section
- ✅ Matches section
- ✅ Gallery section  
- ✅ Videos section
- ✅ Merch section
- ✅ Newsletter section
- ✅ Sponsors section

---

### 3. **Reordering Test**
1. Drag a section (hold and drag the overlay)
2. Drop it on another section
3. **Expected:** Sections reorder smoothly, NO console errors
4. **Old behavior:** Console errors, sections jump around

Or use the arrow buttons:
- Click ⬆️ to move section up
- Click ⬇️ to move section down

---

### 4. **Console Check**
Open browser DevTools (F12) → Console tab

**Good signs:**
```
Visual reorder applied via CSS order
```

**Bad signs (should NOT see):**
```
❌ DOMException: Node.removeChild
❌ Failed to execute 'removeChild'
❌ Node.insertBefore: The node to be inserted is not a child
```

---

## 🎯 What Should Work Now

| Feature | Status | Notes |
|---------|--------|-------|
| Delete any section | ✅ Working | Uses React state |
| Style any section | ✅ Working | All have position:relative |
| Reorder sections | ✅ Working | CSS order property |
| Move up/down | ✅ Working | CSS order property |
| Drag & drop | ✅ Working | No DOM manipulation |
| Multiple edits | ✅ Working | No race conditions |
| Save changes | ✅ Working | State persisted to DB |

---

## 🐛 Troubleshooting

### Still seeing "removeChild" errors?
1. **Hard refresh:** `Ctrl + Shift + R`
2. **Clear cache:** Browser settings → Clear site data
3. **Check build:** Ensure `npm run build` completed successfully
4. **Check file timestamps:** Modified files should be recent

### Styles not applying to some sections?
1. **Verify data-element:** Section must have `data-element="name"` attribute
2. **Check position:** Section should have `style={{ position: 'relative', ... }}`
3. **Console errors:** Look for overlay attachment errors

### Overlays not showing?
1. **Hover test:** Move mouse slowly over sections
2. **Z-index:** Check toolbar is visible (z-index: 9999)
3. **Container:** Verify viewport wrapper is created

---

## 📊 Expected Console Output

When working correctly, you should see:

```javascript
// On reorder
Visual reorder applied via CSS order

// On style change (from hook)
Style change event received for: hero

// On delete (no errors!)
(nothing - silence is golden!)
```

---

## 🎉 Success Criteria

All these should work WITHOUT errors:

1. ✅ Delete 3 different sections
2. ✅ Change styles on 5 different sections
3. ✅ Reorder sections by dragging
4. ✅ Move sections with ⬆️⬇️ buttons
5. ✅ Close editor (X button)
6. ✅ Reopen editor - changes persisted
7. ✅ No console errors throughout

---

## 🔬 Advanced Testing

### Test React DevTools
1. Install React DevTools extension
2. Open DevTools → Components tab
3. Find `HomePage` component
4. Check state:
   - `visibleElements` Set should reflect deleted items
   - `elementOrder` array should reflect reordering

### Test Error Boundary
1. Artificially cause an error (if you want)
2. ErrorBoundary should catch it
3. Should show error message
4. Auto-recovery in 3 seconds

### Test Persistence
1. Make changes in editor
2. Click "Publikovat" (Publish) button
3. Close editor
4. Refresh page
5. Changes should be visible in normal view

---

## 📝 Report Results

If everything works:
```
✅ WORKING - No removeChild errors
✅ Delete, style, reorder all functional
✅ All sections editable
```

If issues persist:
```
❌ ERROR: [paste console error here]
❌ SECTION: [which section has problem]
❌ ACTION: [what you were doing]
```

---

## 🚀 What Changed

**Technical summary:**
- ❌ Removed: Direct DOM manipulation (`removeChild`, `appendChild`)
- ✅ Added: React state-driven updates
- ✅ Added: CSS `order` property for reordering
- ✅ Added: `position: relative` to all sections
- ✅ Fixed: Style propagation to all elements

**Result:** MyUIbrix now works WITH React instead of fighting it.