RichTextField crashes with inline formsets | Unfold Admin

[EvelinaIo]

Description

We are experiencing a TypeError in the console when attempting to add an item to a stacked inline in the Django admin. The issue occurs because the model for the inline contains a RichTextField.

Steps to Reproduce

1. Navigate to the Django admin page for the model that contains the stacked inline.
2. Click on the button to add a new item to the inline.
3. Observe the console for the error message.

Expected Behavior

A new inline form should be added without any errors.

Actual Behavior

A TypeError is thrown in the console, and the new inline form is not added.

inlines.js:35 Uncaught TypeError: Cannot set property name of #<Pn> which has only a getter
    at updateElementIndex (inlines.js:35:25)
    at Pn.<anonymous> (inlines.js:73:17)
    at Function.each (jquery.js:383:19)
    at jQuery.fn.init.each (jquery.js:205:17)
    at HTMLAnchorElement.addInlineClickHandler (inlines.js:72:27)
    at HTMLAnchorElement.dispatch (jquery.js:5145:27)
    at elemData.handle (jquery.js:4949:28)

Environment

OS: macOS 14.2
Django Version: 5.0.6
Django Unfold: 0.20.5
Django Prose: 2.0.0

Additional Context

The specific project uses Django unfold admin to override the theme.
This issue appears to be related to the integration of the RichTextField within the stacked inline. The problem does not occur with inlines that do not contain a RichTextField.

It seems that the error occurs when the inlines.js script tries to update the name property for trix-editor, probably because it expects an input element, and fails because there is none.

[parisk]

A few insites here. This issue is caused by this particular line in Django¹:

row.find("*").each(function() {
    updateElementIndex(this, options.prefix, totalForms.val());
});

and consequently by attempting to update the name² of the returned elements:

if (el.name) {
  el.name = el.name.replace(id_regex, replacement);
}

The .find(...)³ jQuery function returns child elements across all depths, not just direct ones. As a result, it also returns the trix-editor elements, which are custom elements implemented by TrixEditorElement⁴. Now, TrixEditorElement does have indeed a name attribute, which is explicitly set as a getter⁵, so inlines.js attempts to change it, which is not possible because TrixEditorElement does not set a setter as well, for this property.

The way I suggest to approach this is go into the initializeEditors function:

django-prose/prose/static/prose/editor.js

Lines 49 to 58 in a851498

	function initializeEditors() {
	const editors = document.querySelectorAll(".django-prose-editor:not(.initialized)");
	editors.forEach((editor) => {
	editor.addEventListener("trix-attachment-add", function (event) {
	uploadAttachment(editor.dataset.uploadAttachmentUrl, event.attachment);
	});
	editor.classList.add("initialized");
	});
	}

and define a setter property⁶ for all trix-editor elements that have the django-prose-editor class.

Footnotes

1. https://github.com/django/django/blob/bcc327aa326093a39f01a9bc98198807444900f3/django/contrib/admin/static/admin/js/inlines.js#L72-L74 ↩

2. https://github.com/django/django/blob/bcc327aa326093a39f01a9bc98198807444900f3/django/contrib/admin/static/admin/js/inlines.js#L34-L36 ↩

3. https://api.jquery.com/find/ ↩

4. https://github.com/basecamp/trix/blob/0c79bcb854b8e8ee23e7bec571fe9d8dbfab9e5e/src/trix/elements/trix_editor_element.js#L163C22-L163C39 ↩

5. https://github.com/basecamp/trix/blob/0c79bcb854b8e8ee23e7bec571fe9d8dbfab9e5e/src/trix/elements/trix_editor_element.js#L228-L230 ↩

6. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set#defining_a_setter_on_existing_objects_using_defineproperty ↩

[parisk]

Closed in #104.