Duplicate initializations should be prevented

[ArtOfCode-]

This is an odd one. I've implemented SimpleMDE for a development website. On the page where it's used (http://stage.artofcode.co.uk:8800/recipes/new - requires sign in), when I reload the page, the editor duplicates.

We go from this on the first page load:

to this on the reload:

My initialization code is this:

$('.mde-field').each(() ->
  mde = new SimpleMDE({
    element: this,
    forceSync: true,
    indentWithTabs: false,
    tabSize: 4
  })
)

Am I doing something wrong, or is this a bug?

[WesCossick]

I have a feeling this is a bug not related to SimpleMDE, but rather, something related to your application code.

[borisrorsvort]

@WesCossick indeed but that is also a sign that simplemde instances are not indempotent. Is it something you can fix?

[WesCossick]

The instances should be idempotent. I'm relatively certain the bug has nothing to do with SimpleMDE's code. But, I'd be curious to see if a JSFiddle can be put together showing that this assumption is incorrect. Until, I'm going to mark this issue as closed.

[borisrorsvort]

@WesCossick Here you go http://jsbin.com/saxecumere/edit?html,js,output Expected behavior is that it does't get instanciated more than once per textarea. Here it does, hence it's not idempotent ;)

[ArtOfCode-]

Looks like the bug on my end is that the JS is running twice, for some reason which I have yet to work out. That said, @borisrorsvort is correct - it would make sense for SimpleMDE to reject initialization attempts on elements that have already had SimpleMDE initialized on them.

[borisrorsvort]

@ArtOfCode- It's probably because your using turbolinks and the init code get cached then re-executed again (https://github.com/turbolinks/turbolinks#responding-to-page-updates). But that is not a problem if the code is idempotent, hence my comment

[borisrorsvort]

@WesCossick :+1:

[ktrzeciaknubisa]

Well, there is another layer of this. If you call new SimpleMDE() (without target element) and then finally you call it again (with target element) it will duplicate the editor, too 😄

   new SimpleMDE()
   new SimpleMDE()
   new SimpleMDE({ element: document.getElementByid("MyId") })

We will get 3 editors on MyId 🤣