From c9dc1e1ec3295fe3dce7ed7d314c5a7e4140af83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20K=C3=BChn?=
 <philippkuehn@MacBook-Pro-von-Philipp.fritz.box>
Date: Thu, 18 Nov 2021 09:58:38 +0100
Subject: [PATCH] feat: add className option to ReactRenderer, see #2166

---
 packages/react/src/ReactNodeViewRenderer.tsx |  1 +
 packages/react/src/ReactRenderer.tsx         | 13 ++++++++++++-
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/ReactNodeViewRenderer.tsx b/packages/react/src/ReactNodeViewRenderer.tsx
index 6d21e02c..fc12bc49 100644
--- a/packages/react/src/ReactNodeViewRenderer.tsx
+++ b/packages/react/src/ReactNodeViewRenderer.tsx
@@ -87,6 +87,7 @@ class ReactNodeView extends NodeView<React.FunctionComponent, Editor, ReactNodeV
       as: this.node.isInline
         ? 'span'
         : 'div',
+      className: `node-${this.node.type.name}`,
     })
   }
 
diff --git a/packages/react/src/ReactRenderer.tsx b/packages/react/src/ReactRenderer.tsx
index ddbc279a..d9c30a88 100644
--- a/packages/react/src/ReactRenderer.tsx
+++ b/packages/react/src/ReactRenderer.tsx
@@ -21,6 +21,7 @@ export interface ReactRendererOptions {
   editor: Editor,
   props?: Record<string, any>,
   as?: string,
+  className?: string,
 }
 
 type ComponentType<R> =
@@ -43,13 +44,23 @@ export class ReactRenderer<R = unknown> {
 
   ref: R | null = null
 
-  constructor(component: ComponentType<R>, { editor, props = {}, as = 'div' }: ReactRendererOptions) {
+  constructor(component: ComponentType<R>, {
+    editor,
+    props = {},
+    as = 'div',
+    className = '',
+  }: ReactRendererOptions) {
     this.id = Math.floor(Math.random() * 0xFFFFFFFF).toString()
     this.component = component
     this.editor = editor as ExtendedEditor
     this.props = props
     this.element = document.createElement(as)
     this.element.classList.add('react-renderer')
+
+    if (className) {
+      this.element.classList.add(...className.split(' '))
+    }
+
     this.render()
   }