fix: restore TextSettings functionality after store refactoring
All checks were successful
Deploy / Build and Deploy to Production (push) Successful in 16s

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>
This commit is contained in:
isUnknown 2026-01-09 16:42:34 +01:00
parent e42eeab437
commit cb5d056b51
2 changed files with 10 additions and 5 deletions

View file

@ -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');

View file

@ -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}`;
};