Forge UI Kit component Text does not respect newlines

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 &nbsp; to render an empty new line as follows:

<Text>&nbsp;</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