Looks like UI component Text
does not respect newlines in text.
I have this text:
Title\n\nNewline 1\nIt would be nice to have newline here.\n\nNewline 2
This is rendered as:
Title Newline 1 It would be nice to have newline here. Newline 2
whereas it should be rendered as:
Title
Newline 1
It would be nice to have newline here.
Newline 2
Hi @chhantyal ,
Forge UI used to support markdown as follows <Text content="example **markdown**"/>
, but this was removed.
I was, however, able to create multiline text as follows:
const someText = `Line 1
Line 2
Line 3`;
<Text content={someText} format="plaintext" />
The problem, however, is that the content
attribute is no longer documented at https://developer.atlassian.com/platform/forge/ui-kit-components/text/ so I wonder if this is still formatted. I’ll try to have the Forge team add their thoughts.
Regards,
Dugald
4 Likes
Hi @dmorrow thanks for the tip. It indeed seems to work. Since content
is not documented, is it going to be removed in the future?
1 Like
Hi @chhantyal,
Apologies for the delay.
The solution that @dmorrow has suggested is what we recommend if you want a block of text with empty lines in between the paragraphs.
One thing to note is that the Text
component in UI Kit is a block level element, so to put text in different lines the following code can be also used:
<Text>Title</Text>
<Text>Newline 1</Text>
<Text>It would be nice to have a newline here.</Text>
The previous code will result in:
Title
Newline 1
It would be nice to have a newline here.
The content
prop is not going to be removed. Thank you both for bringing this to our attention. We will add this prop onto the Text
UI Kit component documentation.
5 Likes
I am not sure if that’s the best solution, but you can use to render an empty new line as follows:
<Text> </Text>
2 Likes
At the time of reading this the solution proposed by @dmorrow is not available anymore…
I solved by formatting the text with a helper function:
const wrapMultiLineText = (text) => {
const lines = text.split('\n');
return (
<Fragment>
{lines.map(line => <Text content={line} />)}
</Fragment>
);
};
2 Likes