Multiple EditorJs in the DOM

[hasufell]

It seems I can only have one. I have virtual tabs where each of the sub-doms are hidden.

Only the first EditorJs shows.

[Jungwoo-An]

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

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

[hasufell]

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")
);

[Jungwoo-An]

@hasufell Thanks!

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

[hasufell]

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.

[Jungwoo-An]

@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!

[hasufell]

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

[Jungwoo-An]

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!

[hasufell]

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.

[Jungwoo-An]

@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)

[hasufell]

Sure, I'll try to write something up.

[jakekara]

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

[Jungwoo-An]

resolved (#76)