From 1615d7a9bb6007def3abc27b80aa68e826748b75 Mon Sep 17 00:00:00 2001
From: Dominik <6538827+bdbch@users.noreply.github.com>
Date: Fri, 3 Mar 2023 11:35:24 +0100
Subject: [PATCH] feat(react): allow react renderer to assign attributes to
 react renderer element (#3812)

---
 packages/react/src/ReactNodeViewRenderer.tsx | 2 ++
 packages/react/src/ReactRenderer.tsx         | 8 ++++++++
 2 files changed, 10 insertions(+)

diff --git a/packages/react/src/ReactNodeViewRenderer.tsx b/packages/react/src/ReactNodeViewRenderer.tsx
index a48b79d2fa9..514cb9b3f67 100644
--- a/packages/react/src/ReactNodeViewRenderer.tsx
+++ b/packages/react/src/ReactNodeViewRenderer.tsx
@@ -26,6 +26,7 @@ export interface ReactNodeViewRendererOptions extends NodeViewRendererOptions {
     | null
   as?: string
   className?: string
+  attrs?: Record<string, string>
 }
 
 class ReactNodeView extends NodeView<
@@ -103,6 +104,7 @@ class ReactNodeView extends NodeView<
       props,
       as,
       className: `node-${this.node.type.name} ${className}`.trim(),
+      attrs: this.options.attrs,
     })
   }
 
diff --git a/packages/react/src/ReactRenderer.tsx b/packages/react/src/ReactRenderer.tsx
index 493baa3b045..a47a93dea56 100644
--- a/packages/react/src/ReactRenderer.tsx
+++ b/packages/react/src/ReactRenderer.tsx
@@ -23,6 +23,7 @@ export interface ReactRendererOptions {
   props?: Record<string, any>,
   as?: string,
   className?: string,
+  attrs?: Record<string, string>,
 }
 
 type ComponentType<R, P> =
@@ -50,6 +51,7 @@ export class ReactRenderer<R = unknown, P = unknown> {
     props = {},
     as = 'div',
     className = '',
+    attrs,
   }: ReactRendererOptions) {
     this.id = Math.floor(Math.random() * 0xFFFFFFFF).toString()
     this.component = component
@@ -62,6 +64,12 @@ export class ReactRenderer<R = unknown, P = unknown> {
       this.element.classList.add(...className.split(' '))
     }
 
+    if (attrs) {
+      Object.keys(attrs).forEach(key => {
+        this.element.setAttribute(key, attrs[key])
+      })
+    }
+
     this.render()
   }