feat: add className option to ReactRenderer, see #2166

ueberdosis · Nov 18, 2021 · c9dc1e1 · c9dc1e1
1 parent abe9323
commit c9dc1e1
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git 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
@@ -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()
   }