Text is overlapping the preview, when value of editor is reset

[wimmers]

I use MarkdownEditor like this:

<MarkdownEditor
  value={this.state.note}
  onBlur={this.updateMarkdown}
  visible={false}
  height={500}
  ref={this.markdownEditor}
/>

When this.state.note is changed (transitioning to undefined and then to a new string value), the editor text and the preview are updated correctly but longer lines of the editor text will overlap with the preview.

[jaywcjlove]

@wimmers Can you give an example of your project?

[wimmers]

@jaywcjlove

This would be a small example:

import React, { Component } from 'react'
import MarkdownEditor from '@uiw/react-markdown-editor';

const testText = "This is a test. "

const longLine = `${testText}${testText}${testText}${testText}${testText}${testText}`

class App extends Component {

  state = {
    markdown: '# This is a H1  \n## This is a H2  \n###### This is a H6',
  }

  updateMarkdown = (editor) => {
    var value = editor.getValue()
    value = value + "\n" + longLine
    this.setState({ ...this.state, markdown: value })
  }

  render() {
    return (
      <div>
        <MarkdownEditor
          value={this.state.markdown}
          onBlur={this.updateMarkdown}
          height={500}
        />
      </div>
    );
  }
}

export default App;

[jaywcjlove]

@wimmers The broadband calculation comes from within codemirror.

<MarkdownEditor
  value={markdown}
  onBlur={(editor) => {
    let value = editor.getValue();
    value = value + "\n" + longLine;
+    editor.setValue(value);
-    setMarkdown(value);
  }}
  height={500}
/>

[wimmers]

Thanks, that works for me!