Flickering issue happening.

[suhail-ak-2]

Angular 14.0.3
ngx markdown 15.0.0-next.0

Doing the streaming of text from server to angular application. I am using markdown to render as html.. For li tag flickering is happening. Large bold text is coming for few secs fading in and out

[jfcere]

Hi @suhail-ak-2,

Could you provide a reproduction example?

[suhail-ak-2]

<div class="intro" lineNumbers [innerHTML]="personalAssistant | markdown"></div> this.chatBotService.getRecommendations().subscribe((res) => { if (res !== 'DONE') { this.personalAssistant += res; })

[suhail-ak-2]

@jfcere pipe is using here

[RonakSoniEIC]

@suhail-ak-2 Have you resolved the issue? as I am facing the same issue

[jfcere]

Still waiting for a working reproduction sample (GitHub repo, stackblitz, code sandbox, etc), providing a code snippet is not enough.

[RonakSoniEIC]

Mainly, this is happening when data is rendering in streaming in the List format.

[suhail-ak-2]

@jfcere please check this below stackblitz url for reproduction

StackBlitz

[RonakSoniEIC]

Thank you @suhail-ak-2 , for provide sample code,

@jfcere , Did you got the chance to take a look?

[suhail-ak-2]

@RonakSoniEIC Yes issue still exist i tried with latest version as well.

[avelenivius]

Sorry to bother, but I found the issue interesting and wanted to take a short look. I think that the problem is the following:

I shortened the text a bit, to better see what was going on. Seems like the markdown string contains invalid markdown occasionally because of the .split(' '). Looks like ngx-markdown considers the trailing '-' for rendering into some HTML. It's up to the creator of the library to decide, whether it's a bug or not, but I believe that you can fix this problem on your own by improving the splitting algorithm and not adding trailing '-' without any text

[RonakSoniEIC]

@avelenivius , You mean we have to change in the markdown code itself.
Could you please provide, code snippet where are you suggest to change the code.

Thank you

[avelenivius]

@RonakSoniEIC no, what I meant is, that the algorithm of splitting words by using the whitespace character (.split(' ')) is not entirely correct, as it leads to situations like:

• rendering just a number of the ordered list, without any text to it
• trying to render an item from an unordered list without any content of the list item
• also processing multiple whitespace characters in the for loop, from the stackblitz example (because the markdown string contains indentation determined by multiple whitespace characters)

These situations are something, that You should rather avoid, as it leads to the side effects, which you consider to be a fault of the library - that's my opinion.

My suggestion is, that You invest a bit of time into debugging the algorithm in those cases and find a way to improve it. The markdown string itself may be alright (can't say however, as I don't want to invest my time into looking through it), it's the algorithm of rendering word by word, that works incorrectly

[the-dev-adonis]

@RonakSoniEIC you are right, this issue reproduce only at the time of streaming.

[lifront]

Hi, how did you handle this issue?

[kenchi-e]

@jfcere @avelenivius , the main issue is that whenever we update the data bound to Markdown, it recompiles everything into HTML instead of just recompiling the last inner HTML element. This inefficiency is becoming problematic for rendering real-time data and is also causing flickering issues. Take a look at this library; it only renders the last HTML element. here is the working codepen version inspect the rendering and see. Is there any way we can achieve similar functionality?

[kenchi-e]

@suhail-ak-2 Did you find any solution ??