diff --git a/client/src/entrypoints/admin/telepath/widgets.js b/client/src/entrypoints/admin/telepath/widgets.js index 4dfe7fa504ea..2bd500654e73 100644 --- a/client/src/entrypoints/admin/telepath/widgets.js +++ b/client/src/entrypoints/admin/telepath/widgets.js @@ -2,11 +2,19 @@ import { gettext } from '../../../utils/gettext'; class BoundWidget { - constructor(element, name, idForLabel, initialState, parentCapabilities) { + constructor( + element, + name, + idForLabel, + initialState, + extraAttributes, + parentCapabilities, + ) { var selector = ':input[name="' + name + '"]'; this.input = element.find(selector).addBack(selector); // find, including element itself this.idForLabel = idForLabel; this.setState(initialState); + this.extraAttributes = extraAttributes; this.parentCapabilities = parentCapabilities || new Map(); } @@ -49,10 +57,24 @@ class Widget { boundWidgetClass = BoundWidget; - render(placeholder, name, id, initialState, parentCapabilities) { + render( + placeholder, + name, + id, + initialState, + extraAttributes, + parentCapabilities, + ) { var html = this.html.replace(/__NAME__/g, name).replace(/__ID__/g, id); var idForLabel = this.idPattern.replace(/__ID__/g, id); var dom = $(html); + + // Add any extra attributes we received to the HTML of the widget + if (typeof extraAttributes === 'object') { + Object.entries(extraAttributes).forEach(([key, value]) => { + dom.attr(key, value); + }); + } $(placeholder).replaceWith(dom); // eslint-disable-next-line new-cap return new this.boundWidgetClass( @@ -60,6 +82,7 @@ class Widget { name, idForLabel, initialState, + extraAttributes, parentCapabilities, ); } @@ -349,7 +372,14 @@ class DraftailRichTextArea { this.options = options; } - render(container, name, id, initialState, parentCapabilities) { + render( + container, + name, + id, + initialState, + extraAttributes, + parentCapabilities, + ) { const input = document.createElement('input'); input.type = 'hidden'; input.id = id;