feat(react): allow react renderer to assign attributes to react rende…

…rer element (ueberdosis#3812)
trybaseplate · Mar 3, 2023 · 6ce5aad · 6ce5aad
1 parent 3702277
commit 6ce5aad
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 0 deletions.
diff --git a/src/ReactNodeViewRenderer.tsx b/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/src/ReactRenderer.tsx b/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()
   }