title: Replace a selected text in contentEditable div with html-React
body: <p>I have a <code>contectEditable</code> div and button, and want when I select a text in the div like this (<a href="https://codesandbox.io/s/vibrant-keller-42iu2?file=/src/App.js" rel="nofollow noreferrer">CodeSandbox</a>)
  <a href="https://i.stack.imgur.com/1XIAk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1XIAk.png" alt="enter image description here" /></a></p>
  <p>and then press the button, to replace the selected text with a span html element with the selected text as content. For example, I have this React component</p>
  <pre><code>import {useState} from 'react';
  
  const EdiatbelContent = () =&gt; {
  
      const onClickhandler () =&gt; {};
      
      const [html, setHtml] = useState(&quot;&lt;p&gt;Hello World!&lt;/p&gt;&quot;);
      
      return &lt;&gt;
         &lt;div contentEditable=&quot;true&quot; dangerouslySetInnerHTML={{ __html: html }}&gt;&lt;/div&gt;
         &lt;button onClick={onClickHandler}&gt;Bold&lt;/button&gt;
      &lt;/&gt;
  
  }
  
  export default EditableContent;
  
  </code></pre>
  <p>I want when I press the button, to replace the selected text (if any is selected), say the word <code>Hello</code> in the example above, with the span html element <code>&lt;span className=&quot;text-bold&quot;&gt;Hello&lt;/span&gt;</code> so that the html state variable becomes</p>
  <pre><code>&lt;p&gt;&lt;span className=&quot;text-bold&quot;&gt;Hello&lt;/span&gt; World!&lt;/p&gt;
  </code></pre>
  <p>How can I achieve this?</p>