[Discussion] Add Unique HTML IDs to Comment Forms to Fix Image Upload Cross-Wiring Issues

[noi5e]

Description

Creating a fresh issue page for this complex bug that appears in many forms. See #8670 and #8478 for two examples of this bug in action. Also see current PR #8897 (awaiting review) that fixes a small piece of this bug.

Comment editor functions are cross-wired:

• Click on a main comment form, and upload an image.
• Open an edit comment form and upload an image.
• Expected Behavior: The image link should go into the edit comment form.
• Actual Behavior: Instead, the image link ends up in the main comment form (see image). The image upload was 'cross-wired' into the main comment form.

Why This Happens

The JS scripts in /views/comments/_edit.html.erb and /app/assets/dragdrop.js have variables like $D.selected and $E.textarea that point toward the comment form that the user last interacted with. However, these are often pointing to the wrong form. They need to be updated every time the user takes particular actions: (toggling a form open, entering text, uploading an image).

Comment Forms: Uploading Images

• A: This div.dropzone wraps an input#fileinput.
  • The user can drag-and-drop (yes, on this tiny area) an image to upload it to the comment, triggering this 'drop' eventListener in dragdrop.js, then running this start upload listener here.
  • The user can also just click the button, skipping the 'drop' listener, and going straight to the 'start'.
• B: This entire section is wrapped in a div#c1234div.
  • The user can drag-and-drop images for upload here.
    • On edit comment forms, this triggers embedded JS here to handle the upload.
    • On main comment forms (at the bottom of the page), and reply forms, this will trigger the code in dragdrop.js mentioned above.
• C: There's another input#fileinput here, similar to the one above but distinct.
  • The user can click here to select an image for upload, which like the one above skips 'drop' event handlers, and goes straight to jQuery's fileupload handlers.

Why This Matters

Ideally, we could write code that sets $D.selected to the appropriate textarea whenever the user takes one of the actions above. To reiterate, $D.selected is a kind of place marker for the editor to know where to put the user's changes (an image link, bold text, etc.)

In practice, $D.selected would rely on e.target from a click or drop event handler. However, logging e.target shows that it's often inaccurate. In the example below, I upload an image in comment 22, and e.target (and the image upload) points toward comment 7!

Potential causes for this:

• multiple inputs and div class='dropzone's with the same IDs and classes running around.
• in my other experiments, multiple e.targets will be logged to the console sometimes. so it could also have something to do with the way the event handlers are being written, and how the click event bubbles up through the DOM.

Next Steps

• I committed some changes in Add Unique HTML IDs to .dropzones, #fileinputs #8927 setting unique IDs on all of the elements diagrammed above. I have a feeling that this will solve the problem of e.target being inaccurate. Another fix could potentially be rewriting the event handlers so that they're only searching for click or drop events within certain parts of the DOM tree.
• Once unique IDs are set up, I should be able to write the eventHandlers to set $D.selected whenever a user clicks to upload images. [PR open: Fix CLICK-to-Upload Image Cross-Wiring Issues #8987]

---

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