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) => ( + + {line} + {idx < arr.length - 1 &&
} +
+ )); +} + +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 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 ? {node} : {node}; + }); + 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) => ( - - {line} -
-
- ))} - - ); + return <>{applyTextFormatting(result)}; }