From b584a539fe7c4c8eab71a7693ea561b1947e3c69 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Fri, 5 Dec 2025 16:38:29 +0100
Subject: [PATCH] feat: add rem unit option to margins in PageSettings and
 TextSettings
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds 'rem' as an available unit for margin inputs in both components. Updates useCssSync composable to parse rem values from CSS.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/editor/PageSettings.vue | 28 ++++++++++++++++++++++++++
 src/components/editor/TextSettings.vue |  2 ++
 src/composables/useCssSync.js          |  2 +-
 3 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/components/editor/PageSettings.vue b/src/components/editor/PageSettings.vue
index 17cab6e..616775b 100644
--- a/src/components/editor/PageSettings.vue
+++ b/src/components/editor/PageSettings.vue
@@ -66,6 +66,13 @@
             >
               px
             </button>
+            <button
+              type="button"
+              :class="{ active: margins.top.unit === 'rem' }"
+              @click="margins.top.unit = 'rem'"
+            >
+              rem
+            </button>
           </div>
         </div>
       </div>
@@ -94,6 +101,13 @@
             >
               px
             </button>
+            <button
+              type="button"
+              :class="{ active: margins.bottom.unit === 'rem' }"
+              @click="margins.bottom.unit = 'rem'"
+            >
+              rem
+            </button>
           </div>
         </div>
       </div>
@@ -122,6 +136,13 @@
             >
               px
             </button>
+            <button
+              type="button"
+              :class="{ active: margins.left.unit === 'rem' }"
+              @click="margins.left.unit = 'rem'"
+            >
+              rem
+            </button>
           </div>
         </div>
       </div>
@@ -150,6 +171,13 @@
             >
               px
             </button>
+            <button
+              type="button"
+              :class="{ active: margins.right.unit === 'rem' }"
+              @click="margins.right.unit = 'rem'"
+            >
+              rem
+            </button>
           </div>
         </div>
       </div>
diff --git a/src/components/editor/TextSettings.vue b/src/components/editor/TextSettings.vue
index d8768ba..614b79d 100644
--- a/src/components/editor/TextSettings.vue
+++ b/src/components/editor/TextSettings.vue
@@ -92,6 +92,7 @@
         label="Marges extérieures"
         v-model:simple="marginOuter"
         v-model:detailed="marginOuterDetailed"
+        :units="['mm', 'px', 'rem']"
         @change="handleMarginOuterChange"
       />
     </div>
@@ -104,6 +105,7 @@
         label="Marges intérieures"
         v-model:simple="marginInner"
         v-model:detailed="marginInnerDetailed"
+        :units="['mm', 'px', 'rem']"
         @change="handleMarginInnerChange"
       />
     </div>
diff --git a/src/composables/useCssSync.js b/src/composables/useCssSync.js
index 96af721..3588635 100644
--- a/src/composables/useCssSync.js
+++ b/src/composables/useCssSync.js
@@ -38,7 +38,7 @@ export function useCssSync() {
    * Extract margin/padding shorthand (handles 1 or 4 values)
    * Returns { simple: { value, unit } } or { detailed: { top, right, bottom, left } }
    */
-  const extractSpacing = (selector, property, allowedUnits = ['mm', 'px']) => {
+  const extractSpacing = (selector, property, allowedUnits = ['mm', 'px', 'rem']) => {
     const block = store.extractBlock(selector);
     if (!block) return null;