From 1dd6dc36131745a1f58e65b7cd6ff5afb95e1740 Mon Sep 17 00:00:00 2001
From: "Storm B. Heg" <storm@stormbase.digital>
Date: Thu, 20 Jul 2023 14:59:12 +0200
Subject: [PATCH] Allow Telepath's widget rendering to take attributes

This will allow us supply attributes to be included in the widgets'
rendered html. Similar how to Django widgets can take a `attrs`
argument.
---
 client/src/entrypoints/admin/telepath/widgets.js | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/client/src/entrypoints/admin/telepath/widgets.js b/client/src/entrypoints/admin/telepath/widgets.js
index 4dfe7fa504ea..8ccab127ab45 100644
--- a/client/src/entrypoints/admin/telepath/widgets.js
+++ b/client/src/entrypoints/admin/telepath/widgets.js
@@ -2,11 +2,12 @@
 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 +50,17 @@ 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 +68,7 @@ class Widget {
       name,
       idForLabel,
       initialState,
+      extraAttributes,
       parentCapabilities,
     );
   }
@@ -349,7 +358,7 @@ 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;