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.
This commit is contained in:
parent
7ccc4bb993
commit
ca78fd6e62
@ -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)
|
||||
}
|
||||
};
|
||||
}),
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user