From 9d36a22d0c5404317d06f02f9bb068392a9f36cd Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Fri, 5 Dec 2025 17:43:58 +0100
Subject: [PATCH] fix: implement functional controls in PagePopup
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add rem unit option to all margin controls
- Implement proper margin and background updates with debouncing
- Integrate Coloris properly like PageSettings
- Add highlight.js syntax highlighting for readonly CSS
- Add Prettier formatting when exiting edit mode
- Use global unit toggle styles instead of custom
- Sync isEditing state with stylesheet store

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/PagePopup.vue | 213 ++++++++++++++++++++++++++++-------
 1 file changed, 172 insertions(+), 41 deletions(-)

diff --git a/src/components/PagePopup.vue b/src/components/PagePopup.vue
index 2e4247e..5c7dd2a 100644
--- a/src/components/PagePopup.vue
+++ b/src/components/PagePopup.vue
@@ -43,6 +43,13 @@
                   >
                     px
                   </button>
+                  <button
+                    type="button"
+                    :class="{ active: margins.top.unit === 'rem' }"
+                    @click="margins.top.unit = 'rem'"
+                  >
+                    rem
+                  </button>
                 </div>
               </div>
             </div>
@@ -70,6 +77,13 @@
                   >
                     px
                   </button>
+                  <button
+                    type="button"
+                    :class="{ active: margins.bottom.unit === 'rem' }"
+                    @click="margins.bottom.unit = 'rem'"
+                  >
+                    rem
+                  </button>
                 </div>
               </div>
             </div>
@@ -97,6 +111,13 @@
                   >
                     px
                   </button>
+                  <button
+                    type="button"
+                    :class="{ active: margins.left.unit === 'rem' }"
+                    @click="margins.left.unit = 'rem'"
+                  >
+                    rem
+                  </button>
                 </div>
               </div>
             </div>
@@ -124,6 +145,13 @@
                   >
                     px
                   </button>
+                  <button
+                    type="button"
+                    :class="{ active: margins.right.unit === 'rem' }"
+                    @click="margins.right.unit = 'rem'"
+                  >
+                    rem
+                  </button>
                 </div>
               </div>
             </div>
@@ -135,8 +163,9 @@
           <label>Arrière-plan</label>
           <div class="input-with-color">
             <input
+              ref="backgroundColorInput"
               type="text"
-              v-model="background"
+              v-model="background.value"
               data-coloris
             />
           </div>
@@ -171,7 +200,7 @@
             <span class="toggle-switch"></span>
           </label>
         </div>
-        <pre v-if="!isEditable" class="readonly"><code>{{ pageCss }}</code></pre>
+        <pre v-if="!isEditable" class="readonly"><code class="hljs language-css" v-html="highlightedCss"></code></pre>
         <textarea
           v-else
           :value="pageCss"
@@ -187,6 +216,12 @@
 import { ref, computed, watch, onMounted } from 'vue';
 import { useStylesheetStore } from '../stores/stylesheet';
 import Coloris from '@melloware/coloris';
+import '@melloware/coloris/dist/coloris.css';
+import hljs from 'highlight.js/lib/core';
+import css from 'highlight.js/lib/languages/css';
+import 'highlight.js/styles/atom-one-dark.css';
+
+hljs.registerLanguage('css', css);
 
 const stylesheetStore = useStylesheetStore();
 
@@ -199,6 +234,10 @@ const position = ref({ x: 0, y: 0 });
 const selectedPageElement = ref(null);
 const isEditable = ref(false);
 const inheritanceUnlocked = ref(false);
+const backgroundColorInput = ref(null);
+
+let isUpdatingFromStore = false;
+let updateTimer = null;
 
 const margins = ref({
   top: { value: 6, unit: 'mm' },
@@ -207,9 +246,22 @@ const margins = ref({
   right: { value: 7, unit: 'mm' },
 });
 
-const background = ref('transparent');
+const background = ref({
+  value: '',
+  format: 'hex',
+});
+
 const pattern = ref('');
 
+const debouncedUpdate = (callback) => {
+  clearTimeout(updateTimer);
+  updateTimer = setTimeout(callback, 1000);
+};
+
+const immediateUpdate = (callback) => {
+  callback();
+};
+
 const calculatePosition = (pageElement) => {
   const rect = pageElement.getBoundingClientRect();
   const iframeRect = props.iframeRef.getBoundingClientRect();
@@ -219,6 +271,87 @@ const calculatePosition = (pageElement) => {
   };
 };
 
+const updateMargins = () => {
+  const marginValue = `${margins.value.top.value}${margins.value.top.unit} ${margins.value.right.value}${margins.value.right.unit} ${margins.value.bottom.value}${margins.value.bottom.unit} ${margins.value.left.value}${margins.value.left.unit}`;
+
+  const currentBlock = stylesheetStore.extractBlock('@page');
+  if (!currentBlock) return;
+
+  const updatedBlock = currentBlock.replace(
+    /(margin:\s*)[^;]+/,
+    `$1${marginValue}`
+  );
+
+  stylesheetStore.content = stylesheetStore.content.replace(
+    currentBlock,
+    updatedBlock
+  );
+};
+
+const updateBackground = () => {
+  if (!background.value.value) return;
+
+  const currentBlock = stylesheetStore.extractBlock('@page');
+  if (!currentBlock) return;
+
+  if (currentBlock.includes('background:')) {
+    const updatedBlock = currentBlock.replace(
+      /(background:\s*)[^;]+/,
+      `$1${background.value.value}`
+    );
+    stylesheetStore.content = stylesheetStore.content.replace(
+      currentBlock,
+      updatedBlock
+    );
+  } else {
+    const updatedBlock = currentBlock.replace(
+      /(\s*})$/,
+      `  background: ${background.value.value};\n$1`
+    );
+    stylesheetStore.content = stylesheetStore.content.replace(
+      currentBlock,
+      updatedBlock
+    );
+  }
+};
+
+// Watch margin values (number inputs) with debounce
+watch(
+  () => [
+    margins.value.top.value,
+    margins.value.bottom.value,
+    margins.value.left.value,
+    margins.value.right.value,
+  ],
+  () => {
+    if (isUpdatingFromStore) return;
+    debouncedUpdate(updateMargins);
+  }
+);
+
+// Watch margin units (button clicks) without debounce
+watch(
+  () => [
+    margins.value.top.unit,
+    margins.value.bottom.unit,
+    margins.value.left.unit,
+    margins.value.right.unit,
+  ],
+  () => {
+    if (isUpdatingFromStore) return;
+    immediateUpdate(updateMargins);
+  }
+);
+
+// Watch background value with debounce
+watch(
+  () => background.value.value,
+  () => {
+    if (isUpdatingFromStore) return;
+    debouncedUpdate(updateBackground);
+  }
+);
+
 const open = (pageElement) => {
   selectedPageElement.value = pageElement;
   position.value = calculatePosition(pageElement);
@@ -232,10 +365,30 @@ const open = (pageElement) => {
   setTimeout(() => {
     Coloris.init();
     Coloris({
-      themeMode: 'light',
-      alpha: true,
-      format: 'auto',
+      el: '[data-coloris]',
+      theme: 'pill',
+      themeMode: 'dark',
       formatToggle: true,
+      alpha: true,
+      closeButton: true,
+      closeLabel: 'Fermer',
+      clearButton: true,
+      clearLabel: 'Effacer',
+      swatchesOnly: false,
+      inline: false,
+      wrap: true,
+      swatches: [
+        '#264653',
+        '#2a9d8f',
+        '#e9c46a',
+        '#f4a261',
+        '#e76f51',
+        '#d62828',
+        '#023e8a',
+        '#0077b6',
+        '#ffffff',
+        '#000000',
+      ],
     });
   }, 0);
 };
@@ -259,6 +412,11 @@ const pageCss = computed(() => {
   return stylesheetStore.extractBlock('@page') || '';
 });
 
+const highlightedCss = computed(() => {
+  if (!pageCss.value) return '';
+  return hljs.highlight(pageCss.value, { language: 'css' }).value;
+});
+
 let cssDebounceTimer = null;
 
 const handleCssInput = (event) => {
@@ -276,18 +434,14 @@ const handleCssInput = (event) => {
   }, 500);
 };
 
-// Watch for margin changes
-watch(
-  margins,
-  (newMargins) => {
-    // TODO: Update @page margins in stylesheet
-  },
-  { deep: true }
-);
+// Watch isEditable to format when exiting edit mode
+watch(isEditable, async (newValue, oldValue) => {
+  stylesheetStore.isEditing = newValue;
 
-// Watch for background changes
-watch(background, (newBackground) => {
-  // TODO: Update @page background in stylesheet
+  // Format when exiting editing mode
+  if (oldValue && !newValue) {
+    await stylesheetStore.formatContent();
+  }
 });
 
 defineExpose({ open, close, visible });
@@ -426,30 +580,7 @@ defineExpose({ open, close, visible });
   font-size: 0.875rem;
 }
 
-.unit-toggle {
-  display: flex;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.unit-toggle button {
-  padding: 0.375rem 0.5rem;
-  border: none;
-  background: white;
-  cursor: pointer;
-  font-size: 0.75rem;
-  transition: background 0.2s;
-}
-
-.unit-toggle button:not(:last-child) {
-  border-right: 1px solid #ddd;
-}
-
-.unit-toggle button.active {
-  background: #007bff;
-  color: white;
-}
+/* Unit toggle styles are inherited from global styles */
 
 .unlock-btn {
   width: 100%;