Add support for Redactor styling in Comments

[inconsiderate]

What are you trying to do?

Adding Redactor to Comments is currently quite straight-forward, but the "reply" forms do not work, because the initialized comment form is duplicated and unable to be submitted.

First, to get Redactor working, you need to:

1. Install the Redactor plugin
2. Include the Redactor JS/CSS on the frontend page (sample code below)

    {% js '/assets/redactor/redactor.js' %}
    {% js '/assets/redactor/video.js' %}
    {% js '/assets/redactor/widget.js' %}
    {% css '/assets/redactor/redactor.css' %}

3. Add the redactor-area class to the <textarea> in _comments/form-fields/elements/comment.twig
4. Add the redactor-wrapper class to the <article> in _comments/_include/form.twig
5. Initialize redactor any number of different ways. Example:

   $R(".redactor-area", {
       buttonsAdd: ["image"],
       buttonsHide: ['html'],
       plugins: ['widget', "video"]
   });

This works fine for the standard comment input:

But since the reply forms are duplicates of the standard new comment form, there is a name/id collision. The entire form (including any text typed into it) is duplicated:

Clicking "submit" on the reply form shows a console error:

What's your proposed solution?

A solution would be great. I don't know how you would like to modify the plugin to handle different form names.

Please refer to conversation with Josh on the CraftCMS discord:
https://discord.com/channels/456442477667418113/456442477667418115/1126657712734879914

Additional context

No response

[Josh Crawford]

We've gone ahead and added some events in Comments 3, but a full front-end rewrite is planned for Comments 4, which would cover this sort of thing and a lot more.

A complete solution can now be achieved with:

{{ craft.comments.render(entry.id) }}

{% js '/assets/redactor/redactor.js' %}
{% css '/assets/redactor/redactor.css' %}

{% js %}

document.addEventListener('comments:init', function(e) {
    var editor = e.detail.comments.$baseForm.querySelector('textarea');

    $R(editor);
});

document.addEventListener('comments:submit', function(e) {
    var editor = e.detail.comments.$baseForm.querySelector('textarea');

    $R(editor, 'destroy');
    $R(editor);
});

document.addEventListener('comments:reply-open', function(e) {
    var editor = e.detail.comment.$element.querySelector('textarea');

    $R(editor);
});

document.addEventListener('comments:edit-open', function(e) {
    var editor = e.detail.comment.$element.querySelector('textarea');

    $R(editor);
});

{% endjs %}

Note that we're initializing Redactor on the init event for Comments (when it itself is ready), and we're initializing things on reply/edit. We've refactored how cloning the comment form happens, and it's now before you do anything in the init event. This means you don't need to be around with destroying and re-binding the form for the reply/edit functionality.

To get this early, run composer require verbb/comments:"dev-craft-5 as 3.0.0".