Editor becomes unresponsive when content is long

[tnhu]

Try on https://uiwjs.github.io/react-markdown-editor/ with a very long document (Let's say you duplicate the content until it reaches 1000 lines), the editor becomes slower and slower. If you double or triple the lines, it becomes very unresponsive. Type something and it shows up after some seconds.

I tested the same contents on https://codemirror.net/try/?example=Markdown%20code%20block%20highlighting. It does not have the same problem. I guess the issue stays in this library's implementation.

Note that I tested with Preview OFF, plus under an incognito Chrome window.

[jaywcjlove]

react-markdown-editor/src/index.tsx

Lines 192 to 198 in 2d3f450

	<div className={clsPreview} ref={preview}>
	{renderPreview ? (
	renderPreview(previewProps, !!visible)
	) : (
	<MarkdownPreview {...previewProps} data-visible={!!visible} />
	)}
	</div>

@tnhu This is due to the rendering of long text by react-markdown. Use renderPreview to lazily load and display the markdown text.

[tnhu]

@jaywcjlove I pass renderPreview as an empty function. Test locally and the slowness is still there... Also FYI, I use 5.11.1.

[jaywcjlove]

https://codesandbox.io/embed/react-markdown-editor-https-github-com-uiwjs-react-markdown-editor-issues-200-zsdt58?fontsize=14&hidenavigation=1&theme=dark

@tnhu Quick speed boost if you render custom

<MarkdownEditor
  height={300}
  value={markdown}
+  renderPreview={() => <div />}
/>

[yusufozturk]

To improve performance, is it possible to disable renderPreview completely while preview section is not visible?
@jaywcjlove

[jaywcjlove]

@yusufozturk

import React from 'react';
import MarkdownEditor from '@uiw/react-markdown-editor';

const mdStr = `# This is a H1  \n## This is a H2  \n###### This is a H6`;

const Dome = () => {
  return (
    <MarkdownEditor
      value={mdStr}
+      renderPreview={() => null}
      onChange={(value, viewUpdate) => {

      }}
    />
  )
};

[yusufozturk]

🤦‍♂️ thanks 😄🙏