From 154804ee44dd6b62437a33056077db99c1bd9723 Mon Sep 17 00:00:00 2001
From: Julie Blanc <julieblanc@Julies-MacBook-Pro.local>
Date: Mon, 2 Mar 2026 17:29:49 +0100
Subject: [PATCH] add line-height possibility

---
 src/components/ElementPopup.vue   | 37 ++++++++++++++++++++++++++++++-
 src/components/ui/NumberInput.vue |  6 +++--
 2 files changed, 40 insertions(+), 3 deletions(-)

diff --git a/src/components/ElementPopup.vue b/src/components/ElementPopup.vue
index 1b7c329..96209ed 100644
--- a/src/components/ElementPopup.vue
+++ b/src/components/ElementPopup.vue
@@ -47,7 +47,7 @@
           <div class="input-with-unit">
             <NumberInput
               v-model="fontSize.value"
-              :min="0"
+              :min="6"
               :step="1"
               :disabled="inheritanceLocked"
             />
@@ -65,6 +65,33 @@
         </div>
       </div>
 
+
+      <!-- LineHeight -->
+      <div class="settings-subsection">
+        <div class="field" :class="{ 'field--view-only': inheritanceLocked }">
+          <label class="label-with-tooltip" data-css="line-height">Interlignage</label>
+          <div class="input-with-unit">
+            <NumberInput
+              v-model="lineHeight.value"
+              :min="0"
+              :step="1"
+              :disabled="inheritanceLocked"
+            />
+            <div class="unit-toggle">
+              <button
+                type="button"
+                :class="{ active: lineHeight.unit === 'px' }"
+                :disabled="inheritanceLocked"
+                @click="updateUnitPropUnit(lineHeight, 'px')"
+              >
+                px
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+
       <!-- Text Alignment -->
       <div class="settings-subsection">
         <div class="field" :class="{ 'field--view-only': inheritanceLocked }">
@@ -218,6 +245,7 @@ const textAlign = ref('left');
 const color = ref('rgb(0, 0, 0)');
 const background = ref('transparent');
 const fontSize = reactive({ value: 23, unit: 'px' });
+const lineHeight = reactive({ value: 28, unit: 'px' });
 const marginOuter = reactive({ value: 0, unit: 'mm' });
 const paddingInner = reactive({ value: 0, unit: 'mm' });
 
@@ -242,6 +270,7 @@ const styleProps = [
 
 const unitProps = [
   { css: 'font-size', ref: fontSize, debounce: true },
+  { css: 'line-height', ref: lineHeight, debounce: true },
   { css: 'margin', ref: marginOuter, debounce: true },
   { css: 'padding', ref: paddingInner, debounce: true },
 ];
@@ -478,6 +507,12 @@ const toggleInheritance = () => {
         fontSize.unit = fontSizeMatch[2];
       }
 
+      const lineHeightMatch = cs.lineHeight.match(/([\d.]+)(px|rem|em|pt)/);
+      if (lineHeightMatch) {
+        lineHeight.value = parseFloat(lineHeightMatch[1]);
+        lineHeight.unit = lineHeightMatch[2];
+      }
+
       textAlign.value = cs.textAlign;
       color.value = cs.color;
       background.value = cs.backgroundColor;
diff --git a/src/components/ui/NumberInput.vue b/src/components/ui/NumberInput.vue
index 58f99cc..4aeda87 100644
--- a/src/components/ui/NumberInput.vue
+++ b/src/components/ui/NumberInput.vue
@@ -89,15 +89,17 @@ const handleInput = (event) => {
   emit('update:modelValue', value);
 };
 
+const decimals = (props.step.toString().split('.')[1] || '').length;
+
 const increment = () => {
-  const newValue = props.modelValue + props.step;
+  const newValue = parseFloat((props.modelValue + props.step).toFixed(decimals));
   if (props.max === undefined || newValue <= props.max) {
     emit('update:modelValue', newValue);
   }
 };
 
 const decrement = () => {
-  const newValue = props.modelValue - props.step;
+  const newValue = parseFloat((props.modelValue - props.step).toFixed(decimals));
   if (props.min === undefined || newValue >= props.min) {
     emit('update:modelValue', newValue);
   }