From cb5d056b51403bdce6943afc95e37692a380072f Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Fri, 9 Jan 2026 16:42:34 +0100
Subject: [PATCH] fix: restore TextSettings functionality after store
 refactoring

Fixed TextSettings fields not updating the stylesheet and preview after
the store refactoring that made content a computed property.

- Add missing font watcher in TextSettings.vue
- Update useCssUpdater.js to use store.replaceBlock() instead of
  writing to readonly store.content
- Update createRule() to append to store.customCss instead of store.content

All TextSettings fields (font, size, margins, padding, alignment) now
correctly update the stylesheet and preview.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 src/components/editor/TextSettings.vue |  5 +++++
 src/composables/useCssUpdater.js       | 10 +++++-----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/editor/TextSettings.vue b/src/components/editor/TextSettings.vue
index 8169702..de0152e 100644
--- a/src/components/editor/TextSettings.vue
+++ b/src/components/editor/TextSettings.vue
@@ -452,6 +452,11 @@ const updateMarginInnerUnit = (unit) => {
 };
 
 // Watchers for body styles
+watch(font, (val) => {
+  if (isUpdatingFromStore) return;
+  updateStyle('body', 'font-family', `"${val}"`);
+});
+
 watch(italic, (val) => {
   if (isUpdatingFromStore) return;
   updateStyle('body', 'font-style', val ? 'italic' : 'normal');
diff --git a/src/composables/useCssUpdater.js b/src/composables/useCssUpdater.js
index 2eb6018..10f071f 100644
--- a/src/composables/useCssUpdater.js
+++ b/src/composables/useCssUpdater.js
@@ -14,13 +14,13 @@ export function useCssUpdater() {
         new RegExp(`(${property}:\\s*)[^;]+`, 'i'),
         `$1${value}`
       );
-      store.content = store.content.replace(currentBlock, updatedBlock);
+      store.replaceBlock(currentBlock, updatedBlock);
     } else {
       const updatedBlock = currentBlock.replace(
         /(\s*})$/,
         `  ${property}: ${value};\n$1`
       );
-      store.content = store.content.replace(currentBlock, updatedBlock);
+      store.replaceBlock(currentBlock, updatedBlock);
     }
   };
 
@@ -37,7 +37,7 @@ export function useCssUpdater() {
     );
 
     if (updatedBlock !== currentBlock) {
-      store.content = store.content.replace(currentBlock, updatedBlock);
+      store.replaceBlock(currentBlock, updatedBlock);
     }
   };
 
@@ -57,7 +57,7 @@ export function useCssUpdater() {
     }
 
     if (updatedBlock !== currentBlock) {
-      store.content = store.content.replace(currentBlock, updatedBlock);
+      store.replaceBlock(currentBlock, updatedBlock);
     }
   };
 
@@ -65,7 +65,7 @@ export function useCssUpdater() {
    * Create a new CSS rule for a selector
    */
   const createRule = (selector) => {
-    store.content += `\n\n${selector} {\n}\n`;
+    store.customCss += `\n\n${selector} {\n}\n`;
     return `${selector} {\n}`;
   };