Cannot pass Quill.js editor content through Symfony 5 Form - symfony

Question

I have a simple form with title and content field, however, the content from the Quill editor is not being sent through the form so I used their form-submit example(https://quilljs.com/playground/#form-submit). I'm trying to get the content via $request->request->get() in my Controller but when I dump it, it's null. Here is my code:
FormType:
class MenuType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options)
{
$builder
->add('title', TextType::class, [
'label' => 'Title',
])
->add('content', TextareaType::class, [
'label' => false,
'attr' => [
'class' => 'editor'
]
]);
}
public function configureOptions(OptionsResolver $resolver)
{
$resolver->setDefaults([
'data_class' => Menu::class,
]);
}
}
Form rendering in twig:
{% extends 'admin/shared/layout.html.twig' %}
{% block body %}
<div class="row">
<div class="col-lg-12">
<div class="row">
<h1 class="page-header">{% if item.id %}Edit{% else %}Add{% endif %} menu</h1>
</div>
{{ form_start(form) }}
{{ form_row(form.title) }}
<label>Content</label>
<input name="about" type="hidden">
<div id="editor">
{{ form_row(form.content) }}
</div>
<br>
<button class="btn btn-success" type="submit"><i class="fa fa-save"></i> Save</button>
{{ form_end(form) }}
</div>
</div>
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script src="{{ asset('admin/quill/quill.min.js') }}"></script>
<script>
var editor = new Quill('#editor', {
theme: 'snow',
modules: {
toolbar: toolbarOptions
},
});
var form = document.querySelector('form');
form.onsubmit = function() {
// Populate hidden form on submit
var about = document.querySelector('input[name=about]');
about.value = JSON.stringify(editor.getContents());
};
</script>
{% endblock %}

Answer 1

Not the most beautiful solution, but it works - found it in another similar question about Django (QuillJS doesn't work with textarea)
$('.editor').each(function(i, el) {
var el = $(this), id = 'quilleditor-' + i, val = el.val(), editor_height = 200;
var div = $('<div/>').attr('id', id).css('height', editor_height + 'px').html(val);
el.addClass('d-none');
el.parent().append(div);
var quill = new Quill('#' + id, {
modules: { toolbar: toolbarOptions },
theme: 'snow'
});
quill.on('text-change', function() {
el.val(quill.root.innerHTML);
});
})