Multiple EditorJs in the DOM about react-editor-js HOT 12 CLOSED

Check out this: https://codesandbox.io/s/react-editor-js-elilp

It seems it has something to do with the hidden attribute:

ReactDOM.render(
  <div>
    <div hidden={true}>
      <ReactEditor />
    </div>
    <div>
      <ReactEditor />
    </div>
  </div>,
  document.getElementById("root")
);

from react-editor-js.

I thought maybe it's the <div id="editor-js" />, but appears it isn't: https://codesandbox.io/s/react-typescript-te1ky

It appears there must be some instance-sharing going on.

from react-editor-js.

Sure, I'll try to write something up.

from react-editor-js.

Not sure if this in line with the overall code base, as I haven't looked at this project's code prior to fiddling with this, but here's one approach.

This adds a constructor to add a holderID property that gets populated wherever the hard-coded "editor-js" had appeared.

jakekara@122a032

from react-editor-js.

@hasufell Hi! First of all, thanks for your interest! 😍

It's difficult to understand. can you reproduce on codesandbox or others?

from react-editor-js.

@hasufell Thanks!

I'll check it. sorry. (feel free to submit pr whenever you want)

from react-editor-js.

@hasufell Hi!

You may need to set different holder property between editors. (Check Ref)

ex)

render() {
  return (
    <div>
      <ReactEditorJs holder="holder">
        <div id="holder" />
      </ReactEditorJs>
      <ReactEditorJs holder="holder2">
        <div id="holder2" />
      </ReactEditorJs>
    </div>
  );
}

Thanks!

from react-editor-js.

IMO, this should be done automatically and the ids be randomized by default. Only className should be set to something like editor-js.

from react-editor-js.

I don't think so.
by default, react-editor-js use div#holder.
However, in some cases, i think can use a different tag or id.

Thanks!

from react-editor-js.

I don't think so.

Why not? API-wise this is neither documented properly, nor intuitive, nor what you would expect from most react libraries.

from react-editor-js.

@hasufell

Thanks for your good opinion. on second thought, you are right.

I'll change id to random value by default. (If you don't mind, feel free to submit pull request)

from react-editor-js.

resolved (#76)

from react-editor-js.