From ca78fd6e626030ac9c4183ef45337c0388182fc6 Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Fri, 5 Sep 2025 23:29:28 +0100
Subject: [PATCH] Enhance template manager with additional style attributes

- Added support for color, background, and scale attributes in getNodeStyles function.
- Updated transformCustomElements function to apply dynamic styles to Text, Bold, and Barcode elements.
- Changed Barcode element to use a div container for better structure and styling.
---
 src/templates/templatemanager.js | 37 +++++++++++++++++++++++++-------
 1 file changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/templates/templatemanager.js b/src/templates/templatemanager.js
index 8d4fbdc..d047a0d 100644
--- a/src/templates/templatemanager.js
+++ b/src/templates/templatemanager.js
@@ -87,6 +87,15 @@ function getNodeStyles(attributes) {
   if (attributes?.shrink) {
     styles += `flex-shrink: ${attributes.shrink};`;
   }
+  if (attributes?.color) {
+    styles += `color: ${attributes.color};`;
+  }
+  if (attributes?.background) {
+    styles += `background: ${attributes.background};`;
+  }
+  if (attributes?.scale) {
+    styles += `transform: scale(${attributes.scale});`;
+  }
   return styles;
 }
 
@@ -120,24 +129,36 @@ async function transformCustomElements(content) {
       tree.match({ tag: 'Text' }, node => ({
         ...node,
         tag: 'p',
-        attrs: { class: 'documentText' }
+        attrs: { class: 'documentText', style: getNodeStyles(node.attrs) }
       })),
     tree =>
       tree.match({ tag: 'Bold' }, node => ({
         ...node,
         tag: 'strong',
-        attrs: { style: 'font-weight: bold;', class: 'documentBoldText' }
+        attrs: {
+          style: 'font-weight: bold;',
+          class: 'documentBoldText',
+          style: getNodeStyles(node.attrs)
+        }
       })),
     tree =>
       tree.match({ tag: 'Barcode' }, node => {
         return {
-          tag: 'svg',
+          tag: 'div',
+          content: [
+            {
+              tag: 'svg',
+              attrs: {
+                class: 'documentBarcode',
+                'jsbarcode-displayValue': 'false',
+                'jsbarcode-value': node.content[0],
+                'jsbarcode-format': node.attrs.format
+              }
+            }
+          ],
           attrs: {
-            class: 'documentBarcode',
-            'jsbarcode-width': node.attrs?.width,
-            'jsbarcode-height': node.attrs?.height,
-            'jsbarcode-value': node.content[0],
-            'jsbarcode-format': node.attrs.format
+            class: 'documentBarcodeContainer',
+            style: getNodeStyles(node.attrs)
           }
         };
       }),