title: How to enable Ctrl + Z when you change an input text dynamically with React?
body: <p>I'm trying to create a simple <a href="https://github.com/andrerpena/react-mde" rel="noreferrer">React markdown editor</a>. </p>
  
  <p><img src="https://i.imgur.com/ExwIV3R.png" alt="editor"></p>
  
  <p>The component is completely controlled. The problem is: If the user selects <code>abc</code> in the textarea and clicks the <strong>B</strong> button, I need to call <code>onchange()</code> with <code>**abc**</code>. I need to surround the text with these asterisks.</p>
  
  <p>This difference between what I pass on the <code>onchange()</code> and what the user has actually typed causes the textarea history to become inconsistent. Ctrl + Z doesn't work anymore.</p>
  
  <p><a href="https://andrerpena.github.io/react-mde/" rel="noreferrer">Demo</a>. [EDIT: This demo has the fix implemented. It's not as it was when I asked the question]</p>
  
  <p>How can I trigger <code>onchange()</code> on React with an arbitrary text and keep the Ctrl  + Z consistent?</p>