fix(components): Uniform handling of whitespace in text
This commit is contained in:
parent
3732f9ea50
commit
d4ac7f5b32
2 changed files with 13 additions and 6 deletions
|
@ -15,7 +15,7 @@ const Text = (props) => {
|
|||
if (translated.indexOf('\n') !== -1) {
|
||||
let key = 0
|
||||
let lines = translated.split('\n')
|
||||
text.push(<tspan key={'tspan-' + key}>{lines.shift()}</tspan>)
|
||||
text.push(<tspan key={'tspan-' + key} dangerouslySetInnerHTML={{ __html: lines.shift()}} />)
|
||||
let lineHeight = (props.point.attributes.get('data-text-lineheight') || 12) * (props.scale || 1)
|
||||
for (let line of lines) {
|
||||
key++
|
||||
|
@ -24,12 +24,11 @@ const Text = (props) => {
|
|||
key={'tspan-' + key}
|
||||
x={props.point.x}
|
||||
dy={lineHeight}
|
||||
>
|
||||
{line.toString().replace(/"/g, '"')}
|
||||
</tspan>
|
||||
dangerouslySetInnerHTML={{ __html: line.toString().replace(/"/g, '"')}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
} else text.push(<tspan key="tspan-1">{translated}</tspan>)
|
||||
} else text.push(<tspan key="tspan-1" dangerouslySetInnerHTML={{ __html: translated}} />)
|
||||
|
||||
return (
|
||||
<text
|
||||
|
|
|
@ -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>
|
||||
)
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue