Duplicate element IDs

[allan-farrell]

I have a page with 12 textareas - when the editor replaces them with divs I'm seeing duplicate ids on those divs - this causes problems with editing as the wrong content gets synced to the wrong textarea.

The ids are generated with +new Date() in the source - could that be the problem? Or am I doing something wrong.

[nmielnik]

If you see multiple <div contenteditable="true"> elements on the page who all have the exact same id attribute, then you're probably right, it might be using +new Date().

If you can modify the code, you could try checking if an element with that id already exists, and if it does, instead making the unique ID be id += 1 until you get a unique one. If that fixes your issue, it would be a great bug-fix and a somewhat simple pull request 😄

[allan-farrell]

Right now I'm just doing

Date.now() + '-' + Math.floor((Math.random() * 100000000000) + 1)

as a workaround. You want a PR for that? :)

[daviferreira]

Still can give us duplicates, I think we can just append the element index on the elements array?

[nmielnik]

I was thinking, we already have a guaranteed unique id for the editor itself, so we should be able to use that combined with the index of the elements array (like what @daviferreira suggested).

So you could just do something like id = 'medium-editor-textarea-' + this.id + '-' + this.elements.length.

And yes @allan-farrell, we would live a PR for that, especially if it has a test or 2 to make sure this doesn't break for someone else in the future :)

[allan-farrell]

Took a look at the source - unique editor id is not available in createContentEditable() (which is where it's needed) - it's assigned later.

Could we just use 'medium-editor-div-' + element-index

We'll have to pass in the element-index - so we'd have createContentEditable(textarea,index)

[nmielnik]

Yeah, so since we're not using this unique identifier as an actual id attribute of the <div> and <textarea>, you're right, we can just use the index.

I would probably change the signature of createContentEditable(textarea) to be createContentEditable(textarea, id) since we are just using it as an id and don't care whether it's the actual index or not.

Also, we might consider getting rid of this line since it won't be unique if more than one instance of MediumEditor is instantiated on the page. I believe this is used whenever .serialize() is called on MediumEditor though.

[nmielnik]

Actually, the more I think about it, the more I think we should probably still use the Date.now() to generate a timestamp, and then append - + index/id to the end of it. We want to make sure the id is unique on the page, even if there are multiple instances of MediumEditor.