can not get editor references when Multiple tinymce on the same page

[maneeshbhunwal123]

I need to get editor reference since i am trying to implement wordpress like image insert feature, where image insert code will be owned by me and I will use the command
editorRef.insertContent('<a href="${image_url}">document</a>');

But when I have multiple instances of tinymce i am not able to get editorRef correctly.
Here is my code

import React from 'react';
import { Editor } from '@tinymce/tinymce-react';

class CustomWisivigComponent extends React.Component {
    constructor(props) {
        super(props);
        this.putWisivigRef = this.putWisivigRef.bind(this);
        this.returnCmp = <Editor
            apiKey={"myKey"}
            init={{
                setup: (editor) => this.putWisivigRef(editor),
                height: 700,
                plugins: 'image table link code',
                selector: "textarea",  // change this value according to your HTML
                default_link_target: "_blank"

            }}
            initialValue={this.props.value}
            onEditorChange={(event) => {
                this.props.onChange(event)
            }}
        />
    }

    putWisivigRef(ref) {
        console.log("setting editorRef to "+ref.id + " in component with props="+JSON.stringify(this.props))
        this.setState({editorRef: ref})
    }

    onImageInsert(propd) {
        console.log(this.state.editorRef)
    }

    render() {

        return (
            <div>
                {this.returnCmp}
            </div>
        );

    }
}

export default CustomWisivigComponent;

And I am trying to render it like this

<CustomWisivigComponent id="1"/>
  <CustomWisivigComponent id="2"/>

The problem is when i execute the code putWisivigRef is called with two references but the context of this is missed and always the putWisivigRef of first component is called. And hence when I try to insert something in the first component, it gets inserted into second (since first one's reference gets overridden) and when I try to insert in 2nd it results into null pointer, since it was never called. I tried passing this from the setup: (editor) => this.putWisivigRef(editor) as well but that too did not work.

when we render the above form it logs

but ideally it should have been

setting editorRef to tiny-react_10038262721546162755458 in component with props={"id":"1"}
setting editorRef to tiny-react_19726510231546162755460 in component with props={"id":"2"}

[fyrkant]

Duplicate of #43