Added bold tags to template

client/public/locales/en/common.json

@@ -102,7 +102,7 @@
             "button": "Print QR Codes",
             "title": "QR Code Printing",
             "template": "Template",
-            "templateHelp": "Use {} to insert values of the spool object as text. For example {id} will be replaced with the spool id, or {filament.material} will be replaced with the material of the spool. Click the button to view a list of all available tags.",
+            "templateHelp": "Use {} to insert values of the spool object as text. For example {id} will be replaced with the spool id, or {filament.material} will be replaced with the material of the spool. Enclose text with double asterix ** to make it bold. Click the button to view a list of all available tags.",
             "textSize": "Content Text Size",
             "showContent": "Print Label",
             "showSpoolmanIcon": "Show Spoolman Icon"

client/src/components/printing/printing.tsx

@@ -72,21 +72,32 @@ function getTagValue(tag: string, obj: GenericObject): any {
   return value;
 }
 
-export function renderLabelContents(template: string, spool: ISpool): ReactNode {
+function applyNewline(text: string): JSX.Element[] {
+  return text.split("\n").map((line, idx, arr) => (
+    <span key={idx}>
+      {line}
+      {idx < arr.length - 1 && <br />}
+    </span>
+  ));
+}
+
+function applyTextFormatting(text: string): JSX.Element[] {
+  const regex = /\*\*([\w\W]*?)\*\*/g;
+  const parts = text.split(regex);
+  // Map over the parts and wrap matched text with <b> tags
+  const elements = parts.map((part, index) => {
+    // Even index: outside asterisks, odd index: inside asterisks (to be bolded)
+    const node = applyNewline(part);
+    return index % 2 === 0 ? <span key={index}>{node}</span> : <b key={index}>{node}</b>;
+  });
+  return elements;
+}
+export function renderLabelContents(template: string, spool: ISpool): JSX.Element {
   // Find all {tags} in the template string and loop over them
   let result = template.replace(/\{(.*?)\}/g, function (_, tag) {
     return getTagValue(tag, spool);
   });
 
   // Split string on \n into individual lines
-  return (
+  return <>{applyTextFormatting(result)}</>;
-    <>
-      {result.split("\n").map((line, index) => (
-        <span key={index}>
-          {line}
-          <br />
-        </span>
-      ))}
-    </>
-  );
 }