dev day #67

2026-06-04 18:52:56 +00:00 · 2025-10-21 15:02:05 +02:00
parent 68e69e00cc
commit 63700eedb2
103 changed files with 12442 additions and 446 deletions
@@ -0,0 +1,139 @@
+# MyUIbrix Viewport and Style Changes Fix
+
+## Issues Identified
+
+### 1. Blank First Section
+**Problem:** The viewport wrapper was targeting `.chakra-container` which wraps both the navigation AND the page content. This caused:
+- Two viewport wrappers being created (one for nav, one for content)
+- Navigation elements appearing in a blank section
+- Page content appearing below in a separate wrapper
+
+**Root Cause:** MainLayout uses `<Container maxW="container.xl">` (Chakra component) which renders as `.chakra-container`. HomePage has its own `.container` div inside this Chakra Container. MyUIbrix was wrapping the Chakra Container's children instead of the specific `.container` div.
+
+**Solution:** Updated `MyUIbrixEditor.tsx` (lines 1154-1198) to:
+- Target `.container` specifically instead of `.chakra-container`
+- Move children from `.container` into the viewport wrapper
+- Keep the wrapper INSIDE `.container` instead of replacing it
+- Preserve the DOM structure that React expects
+
+### 2. Style Changes Not Working
+**Problem:** Style changes from VisualStylePanel weren't being applied to elements.
+
+**Root Cause:** The `applyDOMOrder` function in `usePageElementConfig.ts` was looking for elements in `.container`, but when MyUIbrix is active, elements are inside `.myuibrix-viewport-wrapper` which is inside `.container`.
+
+**Solution:** Updated `usePageElementConfig.ts` (lines 49-53) to:
+- Check for `.myuibrix-viewport-wrapper` first
+- Fall back to `.container` if wrapper doesn't exist
+- This ensures element queries work in both edit and non-edit modes
+
+## Files Modified
+
+### 1. `/frontend/src/components/editor/MyUIbrixEditor.tsx`
+**Lines 1154-1198:** Updated viewport wrapper creation
+- Changed from targeting `.chakra-container` to `.container`
+- Modified DOM manipulation to work within `.container`
+- Wrapper now stays inside `.container` parent
+
+**Lines 1200-1237:** Updated viewport wrapper removal
+- Added check for `wrapper.parentElement === pageContainer`
+- Proper restoration of original container structure
+- Fixed Chakra Container style restoration
+
+**Lines 1239-1275:** Updated cleanup function
+- Same improvements as removal logic
+- Ensures proper cleanup on unmount
+
+### 2. `/frontend/src/hooks/usePageElementConfig.ts`
+**Lines 49-69:** Updated `applyDOMOrder` function
+- Checks for `.myuibrix-viewport-wrapper` first
+- Falls back to `.container` when wrapper doesn't exist
+- Ensures element reordering works in edit mode
+
+## How It Works Now
+
+### Edit Mode Activation
+1. User clicks edit button
+2. MyUIbrix finds `.container` div (the homepage content container)
+3. Creates `.myuibrix-viewport-wrapper` div
+4. Moves all children from `.container` into wrapper
+5. Appends wrapper back into `.container`
+6. Expands Chakra Container to full width for proper preview
+
+### Style Changes
+1. User changes style in VisualStylePanel
+2. VisualStylePanel calls `onStyleChange(newStyles)`
+3. MyUIbrixEditor's `handleStyleChange` updates state
+4. After 100ms debounce, dispatches `myuibrix-style-change` event
+5. `usePageElementConfig` hook catches event, updates styles state
+6. Hook now correctly finds elements inside `.myuibrix-viewport-wrapper`
+7. HomePage re-renders with `...getStyles('elementName')`
+8. React applies new inline styles to elements
+
+### Structure Comparison
+
+**Before (broken):**
+```
+.chakra-container (targeted by MyUIbrix)
+  .myuibrix-viewport-wrapper
+    Navigation elements (wrong!)
+  .container
+    .myuibrix-viewport-wrapper  
+      Page content (separate wrapper!)
+```
+
+**After (fixed):**
+```
+.chakra-container (not touched by MyUIbrix)
+  Navigation (stays here)
+  .container (page content wrapper)
+    .myuibrix-viewport-wrapper
+      <all page sections>
+```
+
+## Testing Checklist
+
+- [ ] MyUIbrix editor activates without errors
+- [ ] No blank sections appear
+- [ ] All page content visible in editor
+- [ ] Viewport switching works (desktop/tablet/mobile)
+- [ ] Clicking on elements shows style panel
+- [ ] Style changes apply immediately (100ms debounce)
+- [ ] Typography changes work
+- [ ] Color changes work
+- [ ] Spacing changes work
+- [ ] Layout changes work
+- [ ] Element reordering works
+- [ ] Element visibility toggle works
+- [ ] Exiting editor restores original layout
+- [ ] No console errors during edit or exit
+
+## Style Flow Verification
+
+To verify styles are working:
+
+1. Activate MyUIbrix editor
+2. Click on any section (e.g., "hero")
+3. Open VisualStylePanel (should appear automatically)
+4. Change background color
+5. **Expected:** Color changes immediately with 100ms delay
+6. Change padding/margin
+7. **Expected:** Spacing updates immediately
+8. Exit editor
+9. **Expected:** Changes not saved (preview only)
+10. Re-activate editor, make change, click "Publikovat"
+11. **Expected:** Changes saved to database
+
+## Known Limitations
+
+1. Direct DOM manipulation still used (necessary for viewport wrapper)
+2. React must re-render to apply styles (happens automatically via state)
+3. 100ms debounce on style changes to prevent lag
+4. Wrapper only works with `.container` div (homepage specific)
+
+## Future Improvements
+
+1. Consider using React portal instead of direct DOM manipulation
+2. Add transition animations when styles change
+3. Implement undo/redo for style changes
+4. Add keyboard shortcuts for common style adjustments
+5. Support for other page types beyond homepage