1
0
Fork 0

fix(components): Uniform handling of whitespace in text

This commit is contained in:
Joost De Cock 2022-01-16 17:34:51 +01:00
parent 3732f9ea50
commit d4ac7f5b32
2 changed files with 13 additions and 6 deletions

View file

@ -19,10 +19,18 @@ const TextOnPath = (props) => {
if (align && align.indexOf('center') > -1) textPathProps.startOffset = '50%'
else if (align && align.indexOf('right') > -1) textPathProps.startOffset = '100%'
/*
* We need dangerouslySetInnerHTML here to make sure we have a way to
* add whitespace that works both in the browser as in SVG.
* Whitespace =  
*/
return (
<text>
<textPath {...textPathProps}>
<tspan {...props.path.attributes.asPropsIfPrefixIs('data-text-')}>{translated}</tspan>
<tspan
{...props.path.attributes.asPropsIfPrefixIs('data-text-')}
dangerouslySetInnerHTML={{ __html: translated }}
/>
</textPath>
</text>
)