Skip to content

Commit

Permalink
Added bold tags to template
Browse files Browse the repository at this point in the history
  • Loading branch information
Donkie committed Jun 19, 2024
1 parent 515aafa commit 20923de
Show file tree
Hide file tree
Showing 2 changed files with 23 additions and 12 deletions.
2 changes: 1 addition & 1 deletion client/public/locales/en/common.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
33 changes: 22 additions & 11 deletions client/src/components/printing/printing.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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)}</>;
}

0 comments on commit 20923de

Please sign in to comment.