How to handle child elements inside contentEditable parent?

I am trying to build custom rich text editor in react. I have few questions regarding how to handle child html element inside contentEditable div element -

1. How to get current focused element (which has cursor currently) inside contentEditable element
2. get previous sibling to that element.

below is html, something which I want to get inside editable section_content :

      <div className={css.section_content} contentEditable={true} onChange={handleChange} onKeyDown={handleKeyDown} ref={contentRef}>
         <h3 className={`${css['h4']} ${css['h3--leading']}`}> Title </h3>
         <p className={`${css['p']} ${css['after--h4']} ${css['is-selected']}`}> 
           paragraph1
         </p>
         <p className={`${css['p']} ${css['after--p']} ${css['p-trailing']}`}> 
           paragraph2
         </p>
      </div>