src/features/SetupFont/model/state/manager.svelte.ts

@@ -19,7 +19,9 @@ import {
     MIN_LINE_HEIGHT,
 } from '../const/const';
 
-const controlData: ControlModel[] = [
+export type ControlId = 'font_size' | 'font_weight' | 'line_height' | 'letter_spacing';
+
+const controlData: ControlModel<ControlId>[] = [
     {
         id: 'font_size',
         value: DEFAULT_FONT_SIZE,

src/shared/lib/helpers/createTypographyControl/createTypographyControl.svelte.ts

@@ -22,11 +22,11 @@ export interface ControlDataModel {
     step: number;
 }
 
-export interface ControlModel extends ControlDataModel {
+export interface ControlModel<T extends string = string> extends ControlDataModel {
     /**
      * Control identifier
      */
-    id: string;
+    id: T;
     /**
      * Area label for increase button
      */
@@ -59,10 +59,10 @@ export function createTypographyControl<T extends ControlDataModel>(
             return value;
         },
         set value(newValue) {
-            value = roundToStepPrecision(
-                clampNumber(newValue, min, max),
-                step,
-            );
+            const rounded = roundToStepPrecision(clampNumber(newValue, min, max), step);
+            if (value !== rounded) {
+                value = rounded;
+            }
         },
         get max() {
             return max;