From b692047ff2c511950f34052ca871a2c0d9972cf6 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Fri, 9 Jan 2026 14:35:23 +0100
Subject: [PATCH] fix: improve bidirectional sync between stylesheet and
 ElementPopup fields

Replace content watcher with customCss watcher and add isEditing watcher
to properly sync field values when CSS is edited in StylesheetViewer.

Changes:
- Watch customCss instead of content for real-time updates
- Watch isEditing to reload values when exiting edit mode
- Use isUpdatingFromStore + nextTick to prevent circular updates
- Ensure popup fields stay in sync with stylesheet changes

Now when editing CSS manually in the Code tab, ElementPopup fields
update automatically when exiting edit mode.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/components/ElementPopup.vue | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/ElementPopup.vue b/src/components/ElementPopup.vue
index 02e553d..72b17f8 100644
--- a/src/components/ElementPopup.vue
+++ b/src/components/ElementPopup.vue
@@ -598,10 +598,29 @@ watch(isEditable, async (newValue, oldValue) => {
 
 // Watch stylesheet changes to sync values
 watch(
-  () => stylesheetStore.content,
+  () => stylesheetStore.customCss,
   () => {
-    if (visible.value && !stylesheetStore.isEditing) {
+    if (visible.value && !isUpdatingFromStore) {
+      isUpdatingFromStore = true;
       loadValuesFromStylesheet();
+      nextTick(() => {
+        isUpdatingFromStore = false;
+      });
+    }
+  }
+);
+
+// Also watch when exiting edit mode
+watch(
+  () => stylesheetStore.isEditing,
+  (isEditing, wasEditing) => {
+    // When exiting edit mode, reload values
+    if (visible.value && wasEditing && !isEditing && !isUpdatingFromStore) {
+      isUpdatingFromStore = true;
+      loadValuesFromStylesheet();
+      nextTick(() => {
+        isUpdatingFromStore = false;
+      });
     }
   }
 );