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

Question

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

Closed this issue 18 days ago · 15 comments

vihan85 commented a month ago

Describe the bug

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

To Reproduce

Steps to reproduce the behavior:

Go to: input

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

Answer 1 · 2024-10-21T11:14:00.000Z

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

Answer 2 · 2024-10-21T11:17:24.000Z

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

Answer 3 · 2024-10-23T10:17:58.000Z

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.

Answer 4 · 2024-11-14T10:42:48.000Z

Hi @MartinCupela this issue confirmed?

Answer 5 · 2024-11-14T10:48:38.000Z

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

Answer 6 · 2024-11-14T10:55:11.000Z

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

Answer 7 · 2024-11-14T10:56:54.000Z

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

Answer 8 · 2024-11-14T10:57:59.000Z

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

Answer 9 · 2024-11-14T11:06:10.000Z

I just typing: test. do not quote

Answer 10 · 2024-11-14T11:23:24.000Z

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

Answer 11 · 2024-11-14T14:27:35.000Z

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

Answer 12 · 2024-11-15T08:49:58.000Z

                                                                                                                                                                                                                                 test

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

Answer 13 · 2024-11-15T08:50:14.000Z

This is not a bug

Answer 14 · 2024-11-15T09:23:30.000Z

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

Answer 15 · 2024-11-15T10:01:25.000Z

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