Initiating Viper on programmatically added elements


How can I initiate Viper on a contenteditable div that is programmatically inserted via JS?

I’m building a feature that lets users add multiple contenteditable elements (similar to ‘add another’ actions). I’d like to trigger Viper on some of the added divs.

I am currently wrapping the section in <div class="with-viper"> to trigger the editor on load. This works, and every added set of elements has access to the WYSIWYG editor.
I can’t figure how to launch Viper on specific elements added via JS, to prevent users from inadvertently deleting wrapping elements.

I had a look at squizlabs/Viper: Viper inline WYSIWYG editor ( and could only get the popup editor working, not the larger toolbar.

Matrix v6.9.1