From 20923deebd22be494b9e0a276abe9c0c1c721b01 Mon Sep 17 00:00:00 2001
From: Donkie <daniel.cf.hultgren@gmail.com>
Date: Wed, 19 Jun 2024 21:13:18 +0200
Subject: [PATCH] Added bold tags to template

---
 client/public/locales/en/common.json        |  2 +-
 client/src/components/printing/printing.tsx | 33 ++++++++++++++-------
 2 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/client/public/locales/en/common.json b/client/public/locales/en/common.json
index 75c15509b..2fba4199e 100644
--- a/client/public/locales/en/common.json
+++ b/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"
diff --git a/client/src/components/printing/printing.tsx b/client/src/components/printing/printing.tsx
index 3b834d421..33ff40dfe 100644
--- a/client/src/components/printing/printing.tsx
+++ b/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 (
-    <>
-      {result.split("\n").map((line, index) => (
-        <span key={index}>
-          {line}
-          <br />
-        </span>
-      ))}
-    </>
-  );
+  return <>{applyTextFormatting(result)}</>;
 }