bug: A horizontal scroll bar appears with long white space before the text

[vihan85]

Describe the bug

A horizontal scroll bar appears with long white space before the text

To Reproduce

Steps to reproduce the behavior:

1. Go to: input

2. type:

                                                                                                                                           text
   

Expected behavior

Trim white space

Screenshots

If applicable, add screenshots to help explain your problem.

Package version

• stream-chat-react: v12.2.2
• stream-chat-css:
• stream-chat-js: v8.40.9

[MartinCupela]

hey @vihan85 , thank you for the report. Is this an issue for the UI of demo application?

[minhth1529]

Hi @MartinCupela, this issue occur on demo, I founded it on v11.23.6

[vihan85]

hey @vihan85 , thank you for the report. Is this an issue for the UI of demo application?
@MartinCupela
yes, I found it on your demo.

[minhth1529]

Hi @MartinCupela this issue confirmed?

[MartinCupela]

So the issue description confused me, as I was typing characters and spaces, but the actual thing to type is not shown correctly by the Github markdown parser. After setting the issue description to edit mode I have seen the below:

But if you take a look at how GH parses the markdown, it is the same as the message. I cannot therefore consider this a bug

[minhth1529]

@MartinCupela it just show example, you can test that on you demo page

[MartinCupela]

Yes, but it behaves as expected. See how it is rendered in this issue description

[MartinCupela]

You are quoting something, so the white spaces will not be trimmed

[minhth1529]

I just typing: test. do not quote

[MartinCupela]

Quoting in markdown is putting character > at the beginning of the line. That is what your issue description contains. Your last message is confusing.

[minhth1529]

oh That wasn't my intention, I just wanted it to appear similar to the demo

Screen.Recording.2024-11-14.at.9.25.28.PM.mov

[MartinCupela]

                                                                                                                                                                                                                                 test

The same thing happens in GitHub as you can see above in this message

[MartinCupela]

This is not a bug

[vihan85]

Hi @MartinCupela

You can watch the video below.

Why does a horizontal scroll bar appear instead of a line break?

Can you support line breaks like when entering a consecutive string that doesn't contain spaces?

Social.Messaging.Demo.-.Example.Messaging.App.mp4

[MartinCupela]

Hey @vihan85 , the whitespace is not trimmed, because that is how MD is interpreted by the parser. It is by design. If you would like to change the behavior, I encourage you to provide your custom remark plugins. The guide is available here:

https://getstream.io/chat/docs/sdk/react/components/message-components/render-text/#custom-remark-and-rehype-plugins

You can take an inspiration from an existing plugin in the SDK:

https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/renderText/remarkPlugins/keepLineBreaksPlugin.ts