feat: render wrapper element for inline node views as span, fix #242

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'
     })
   }
 

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()
   }