From 342a6eccf11736e8e8bea1f49f19b24a320deca7 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Tue, 24 Feb 2026 14:02:33 +0100
Subject: [PATCH] fix: update Coloris color swatches in TextSettings after
 loading custom styles

Dispatch input events on color inputs after syncFromStore so Coloris
updates its ::before pseudo-element swatches with loaded values.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../5_test-avec-geoformat/narrative.txt             | 10 +++++-----
 src/components/editor/TextSettings.vue              | 13 +++++++++++++
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/narrative.txt b/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/narrative.txt
index b732d56..e070ad9 100644
--- a/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/narrative.txt
+++ b/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/narrative.txt
@@ -19,7 +19,7 @@ Customcss:
 @page {
   size: A4;
   margin: 50mm 15mm 26mm 15mm;
-  background: rgba(255, 255, 255, 1);
+  background: rgb(227, 33, 33);
 }
 
 body {
@@ -35,10 +35,10 @@ p {
   font-weight: 300;
   font-family: Arial;
   font-style: italic;
-  padding-top: 20mm;
-  padding-right: 20mm;
-  padding-bottom: 20mm;
-  padding-left: 20mm;
+  padding-top: 0mm;
+  padding-right: 0mm;
+  padding-bottom: 0mm;
+  padding-left: 0mm;
 }
 
 h1 {
diff --git a/src/components/editor/TextSettings.vue b/src/components/editor/TextSettings.vue
index de0152e..567c146 100644
--- a/src/components/editor/TextSettings.vue
+++ b/src/components/editor/TextSettings.vue
@@ -64,6 +64,7 @@
         <label for="text-color" class="label-with-tooltip" data-css="color">Couleur</label>
         <div class="input-with-color">
           <input
+            ref="colorInput"
             id="text-color"
             type="text"
             v-model="color"
@@ -80,6 +81,7 @@
         <label for="text-background" class="label-with-tooltip" data-css="background">Arrière-plan</label>
         <div class="input-with-color">
           <input
+            ref="backgroundInput"
             id="text-background"
             type="text"
             v-model="background"
@@ -400,6 +402,8 @@ const fontSize = ref({ value: 16, unit: 'px' });
 const alignment = ref('left');
 const color = ref('rgb(0, 0, 0)');
 const background = ref('transparent');
+const colorInput = ref(null);
+const backgroundInput = ref(null);
 
 const marginOuterDetailed = ref({
   top: { value: 0, unit: 'mm' },
@@ -739,6 +743,14 @@ const syncFromStore = () => {
   isUpdatingFromStore = false;
 };
 
+const updateColorisButtons = () => {
+  [colorInput.value, backgroundInput.value].forEach((input) => {
+    if (input) {
+      input.dispatchEvent(new Event('input', { bubbles: true }));
+    }
+  });
+};
+
 onMounted(() => {
   Coloris.init();
   Coloris({
@@ -749,6 +761,7 @@ onMounted(() => {
     swatches: ['#000000', '#FFFFFF', '#FF0000', '#00FF00', '#0000FF', 'transparent']
   });
   syncFromStore();
+  setTimeout(updateColorisButtons, 100);
 });
 </script>