Xtykutl

I've used div with contentEditable=true in my react component like this:

interface ContentEditableProps {

    onChange: (evevt) => void;

    onRef: (ref) => void;

    html: any;

}



class ContentEditable extends React.Component<ContentEditableProps, {}>{

    myRef: HTMLDivElement

    lastHtml: string

    constructor(props) {

    super(props);

    this.emitChange = this.emitChange.bind(this);

    this.onRef = this.onRef.bind(this)

}



emitChange(event) {

    this.props.onChange(event.target.innterText);

}



onRef(ref) {

    this.myRef = ref;

    this.props.onRef(ref);

}



render() {

        return <div

            onInput={this.emitChange}

            contentEditable={true}

            ref={this.onRef}

            dangerouslySetInnerHTML={{ __html: this.props.html }}

        >

        </div >;

    }



}

on emitChange I've used the innterText to show in my Parent Component.

interface IndicatorInputState {

    html: any

}

class ParentComponent extends React.Component<{}, IndicatorInputState>{



    constructor(props) {

        super(props);

        this.onChange = this.onChange.bind(this);



        this.onRef = this.onRef.bind(this);



        this.state = {

            html:''

        }

    }



    onChange(value) {



         this.setState({html: `<span>${value}</span>`});



    }



    render() {

        return (

            <React.Fragment>



                <div className="indicator-input">

                    <ContentEditable onChange={this.onChange} html={this.state.html} onRef={this.onRef}   >



                    </ContentEditable>





                </div>

            </React.Fragment>

        )

    }

}

export default ParentComponent

in My parent Component I have a sate(html) and set the html by this value
in this situation I don't have problem but if I use span instead of just using value then my cursor have a freaky behavior and it goes to left of my div
does anybody know how can i set the cursor to right? Provided that whenever the user write any things or delete text with backspace then the cursor must be at right(by the way:i used css for example direction but it isn't use full because backspace doesn't work in right position)
the sample of my code is here:

https://codepen.io/saeedafroozi/pen/WYweeO?editors=1010

please help me