fix: ensure typography preset updates trigger live preview update

Author: eldomagan

resources/assets/editor/components/TypographyPresetEditor.vue

@@ -116,6 +116,41 @@ const fontPickerModel = computed({
   },
 });
 
+const fontStyleModel = computed({
+  get: () => model.value.fontStyle,
+  set: (value) => {
+    model.value = { ...model.value, fontStyle: value };
+  },
+});
+
+const fontSizeModel = computed({
+  get: () => model.value.fontSize,
+  set: (value) => {
+    model.value = { ...model.value, fontSize: value };
+  },
+});
+
+const lineHeightModel = computed({
+  get: () => model.value.lineHeight,
+  set: (value) => {
+    model.value = { ...model.value, lineHeight: value };
+  },
+});
+
+const letterSpacingModel = computed({
+  get: () => model.value.letterSpacing,
+  set: (value) => {
+    model.value = { ...model.value, letterSpacing: value };
+  },
+});
+
+const textTransformModel = computed({
+  get: () => model.value.textTransform,
+  set: (value) => {
+    model.value = { ...model.value, textTransform: value };
+  },
+});
+
 </script>
 
 <template>
@@ -129,31 +164,31 @@ const fontPickerModel = computed({
     <!-- Font Style -->
     <PropertyField
       :field="fontStyleField"
-      v-model="model.fontStyle"
+      v-model="fontStyleModel"
     />
 
     <!-- Font Size (Responsive via PropertyField) -->
     <PropertyField
       :field="fontSizeField"
-      v-model="model.fontSize"
+      v-model="fontSizeModel"
     />
 
     <!-- Line Height (Responsive via PropertyField) -->
     <PropertyField
       :field="lineHeightField"
-      v-model="model.lineHeight"
+      v-model="lineHeightModel"
     />
 
     <!-- Letter Spacing -->
     <PropertyField
       :field="letterSpacingField"
-      v-model="model.letterSpacing"
+      v-model="letterSpacingModel"
     />
 
     <!-- Text Transform -->
     <PropertyField
       :field="textTransformField"
-      v-model="model.textTransform"
+      v-model="textTransformModel"
     />
 
     <!-- Delete Preset Button -->

resources/assets/editor/components/TypographyPresets.vue

@@ -20,7 +20,6 @@ interface Props {
 
 const props = defineProps<Props>();
 const model = defineModel<Record<string, TypographyPresetData>>();
-const emit = defineEmits(['update:modelValue']);
 
 const { t } = useI18n();
 
@@ -40,7 +39,7 @@ const editingPresetValue = computed({
   },
   set(value: TypographyPresetData | null) {
     if (!editingPreset.value || !value) return;
-    model.value![editingPreset.value] = value;
+    model.value = { ...model.value, [editingPreset.value]: value };
   }
 });
 
@@ -49,17 +48,15 @@ function onEditPreset(id: string) {
   editModalOpen.value = true;
 }
 
-function onUpdate() {
-  emit('update:modelValue', model.value);
-}
-
 function onAddPreset() {
   const keys = Object.keys(model.value!);
   const id = `typography-${keys.length + 1}`;
 
-  model.value![id] = structuredClone(toRaw(model.value![keys[0]]));
+  model.value = {
+    ...model.value,
+    [id]: structuredClone(toRaw(model.value![keys[0]]))
+  };
 
-  onUpdate();
   onEditPreset(id);
 }
 
@@ -153,7 +150,6 @@ const canDeleteCurrentPreset = computed(() => {
               v-if="editingPreset && editingPresetValue"
               v-model="editingPresetValue"
               :can-delete="canDeleteCurrentPreset"
-              @update="onUpdate"
               @delete="handleEditorDelete"
             />
           </div>