IMMEDIATE FIX NEEDED
Comprehensive guidelines for AI-assisted development within the Editor platform
🚨 IMMEDIATE FIX: Widget Reactivity Issue
🎯 THE REAL PROBLEM
We have the correct architecture, but widgets aren't re-rendering after property changes because:
- ✅ EditorService uses
autoFlashStatefor editor state (CORRECT) - ✅ Property changes update the flash state (CORRECT)
- ❌ Widget components don't receive updated widget objects (BROKEN)
🔍 WHY IT'S BROKEN
The Flow:
User changes backgroundColor → #ad56b3
↓
PropertyEditor.onValueChange()
↓
PropertiesPanel.queuePropertyChange()
↓
(50ms debounce)
↓
processPendingChanges()
↓
property.setValue(widget, value) → NEW widget object
↓
EditorService.updateWidget(newWidget)
↓
editorState.update() → Flash state updated ✅
↓
❌ WIDGETS DON'T RE-RENDER
↓
Widget still shows old color #3b82f6
Why Widgets Don't Update:
- Widgets receive
@Input() widgetfrom WidgetHostComponent - WidgetHostComponent needs to read from
editorService.editorState() - If it's not reactive to flash state changes, widgets stay stale
✅ THE FIX
Option 1: Make WidgetHostComponent Reactive (Recommended)
Update WidgetHostComponent to compute widget from editorState:
export class WidgetHostComponent {
private editorService = inject(EditorService);
// ❌ OLD: Static widget input
widget = input.required<Widget>();
// ✅ NEW: Computed from flash state
widget = computed(() => {
const widgetId = this.widgetId();
const state = this.editorService.editorState();
return state.widgets.find(w => w.id === widgetId) || null;
});
}
Option 2: Add Widget Update Signal (Alternative)
Add a signal in EditorService that emits when widgets change:
export class EditorService {
readonly widgetsUpdated = signal<number>(0);
updateWidget(widget: Widget): void {
this.editorState.update(...);
this.widgetsUpdated.update(n => n + 1); // Trigger change detection
}
}
🎪 CURRENT STATE
What Works:
✅ Property changes are saved to flash state
✅ Flash state persists across refreshes
✅ EditorService.updateWidget() is called correctly
✅ New widget object is created
What Doesn't Work:
❌ Widgets don't receive updated props
❌ UI shows stale values
❌ Refresh page shows correct values (proves flash state works)
🚀 IMMEDIATE ACTION
Need to:
- Check how WidgetHostComponent passes widget to child widgets
- Make it reactive to editorState changes
- Ensure widget components receive updated widget objects
- Test that changes reflect immediately
Priority: 🔴 CRITICAL
Impact: Users can't edit widgets
Root Cause: Reactivity chain broken between EditorService and Widget components