From bdb5d724956c0c757e29be38fb2c9dd85d8fd36b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Sun, 4 Apr 2021 21:43:48 +0200
Subject: [PATCH] feat: render wrapper element for inline node views as span,
 fix #242

---
 packages/react/src/ReactNodeViewRenderer.tsx | 3 +++
 packages/react/src/ReactRenderer.tsx         | 6 +++---
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/ReactNodeViewRenderer.tsx b/packages/react/src/ReactNodeViewRenderer.tsx
index 60406795..13b2d922 100644
--- a/packages/react/src/ReactNodeViewRenderer.tsx
+++ b/packages/react/src/ReactNodeViewRenderer.tsx
@@ -66,6 +66,9 @@ class ReactNodeView extends NodeView<React.FunctionComponent, Editor> {
     this.renderer = new ReactRenderer(ReactNodeViewProvider, {
       editor: this.editor,
       props,
+      as: this.node.isInline
+        ? 'span'
+        : 'div'
     })
   }
 
diff --git a/packages/react/src/ReactRenderer.tsx b/packages/react/src/ReactRenderer.tsx
index db1011a6..b151f2eb 100644
--- a/packages/react/src/ReactRenderer.tsx
+++ b/packages/react/src/ReactRenderer.tsx
@@ -11,9 +11,9 @@ function isClassComponent(Component: any) {
 }
 
 export interface ReactRendererOptions {
-  as?: string,
   editor: Editor,
   props?: AnyObject,
+  as?: string,
 }
 
 export class ReactRenderer {
@@ -31,12 +31,12 @@ export class ReactRenderer {
 
   ref: React.Component | null = null
 
-  constructor(component: React.Component | React.FunctionComponent, { props = {}, editor }: ReactRendererOptions) {
+  constructor(component: React.Component | React.FunctionComponent, { editor, props = {}, as = 'div' }: ReactRendererOptions) {
     this.id = Math.floor(Math.random() * 0xFFFFFFFF).toString()
     this.component = component
     this.editor = editor
     this.props = props
-    this.element = document.createElement('div')
+    this.element = document.createElement(as)
     this.element.classList.add('react-renderer')
     this.render()
   }