Plots2: [Bug] Attach Rich-Text & Image Upload Events on FRESH, Newly Created Comment Forms

[noi5e]

Clicking on rich-text (bold, italic, etc.) buttons and image upload (both select & drag-and-drop) will not work on FRESH newly-created comment forms created by posting a comment. Image of comment form for more context:

Video of This Bug in Action!

This happens because the eventHandlers in editorToolbar.js that attach click and fileupload events are only attached at the moment that the document is loaded. So new elements that are created after document.load do not have these events attached:
https://github.com/publiclab/plots2/blob/38e37eb20602d799ab935e4e281f32782e856fda/app/assets/javascripts/editorToolbar.js#L41-L48

Working on a fix for this one!

---

(This issue is part of the larger Comment Editor Overhaul Project with Outreachy. Refer to Planning Issue #9069 for more context)

[noi5e]

The fix for this is described in the jQuery docs here _(scroll down to Delegated event handlers)_.

Basically, we have to attach the event not on .rich-text-button, but on the PARENT of .rich-text-button.

I need to do a little research on what's the best parent element. We could theoretically attach the event on anything all the way up to document itself, but I have a feeling it's probably best to attach on a parent that's as close to the .rich-text-button as possible.

editorToolbar.js is used in so many different contexts, so I'll probably have to attach a unique ID to parent elements in many different areas. Here is a list of all the places where editorToolbar.js is used, aka places that use the legacy editor.