Issue on long text

[BenchBadr]

Hello, firstly I want to thank all the contributors of this project because of it's high quality. I would like to draw your attention about an issue :

https://arltools.xyz/create

When the content is too long, (empirical) mostly when it exceeds 30,000 chars, it gets really slower to type, each character take 0.5 to 1 sec to be added which can be really disturbing.

I thought of making the useState text value update being done separately from the typing action but this is simply impossible using react-md-editor. The whole variable is rewritten for each added character, therefore, how can we make this work separately ? Like, chars would be added instantly when typed but may be slower to be displayed on preview.

Thank you for your answers.

[jaywcjlove]

@BenchBadr This is caused by code highlighting, which is re-rendered every time without lazy loading.

[BenchBadr]

I'm sorry, I can't find it by myself, how can I enable the lazy loading ?
(And tysm for the info)

[jaywcjlove]

@BenchBadr Oh, there is currently no support, you need to implement it yourself

react-md-editor/core/src/Types.ts

Lines 97 to 106 in dabf155

	components?: {
	/** Use div to replace TextArea or re-render TextArea */
	textarea?: ITextAreaProps['renderTextarea'];
	/**
	* Override the default command element
	* _`toolbar`_ < _`command[].render`_
	*/
	toolbar?: ICommand['render'];
	/** Custom markdown preview */
	preview?: (source: string, state: ContextStore, dispath: React.Dispatch<ContextStore>) => JSX.Element;

[BenchBadr]

I see, I'll need to have my own copy of everything.
Not that bad actually because I'll be able to do more stuff.
Thank you!

[ilkkakuivanen]

@BenchBadr did that help in your case? I have a similar problem and custom preview does not help in my case.

[BenchBadr]

Honestly I didn't dig this that much since then.
I never edited a npm package before, if someone has a tutorial or something please send it to me.
I will be happy to inform you here once this will be done.