refactoring

packages/core/src/types.ts

@@ -112,6 +112,16 @@ export type ValuesOf<T> = T[keyof T];
 
 export type KeysWithTypeOf<T, Type> = ({[P in keyof T]: T[P] extends Type ? P : never })[keyof T]
 
+export type NodeViewProps = {
+  editor: Editor,
+  node: ProseMirrorNode,
+  decorations: Decoration[],
+  selected: boolean,
+  extension: Node,
+  getPos: () => number,
+  updateAttributes: (attributes: AnyObject) => void,
+}
+
 export type NodeViewRendererProps = {
   editor: Editor,
   node: ProseMirrorNode,

packages/react/src/ReactNodeViewRenderer.tsx

@@ -1,5 +1,10 @@
 import React, { useState, useEffect } from 'react'
-import { NodeView, NodeViewRenderer, NodeViewRendererProps } from '@tiptap/core'
+import {
+  NodeView,
+  NodeViewProps,
+  NodeViewRenderer,
+  NodeViewRendererProps,
+} from '@tiptap/core'
 import { Decoration, NodeView as ProseMirrorNodeView } from 'prosemirror-view'
 import { Node as ProseMirrorNode } from 'prosemirror-model'
 import { Editor } from './Editor'
@@ -16,7 +21,7 @@ class ReactNodeView extends NodeView<React.FunctionComponent, Editor> {
   renderer!: ReactRenderer
 
   mount() {
-    const props = {
+    const props: NodeViewProps = {
       editor: this.editor,
       node: this.node,
       decorations: this.decorations,
@@ -35,10 +40,11 @@ class ReactNodeView extends NodeView<React.FunctionComponent, Editor> {
       this.component.displayName = capitalizeFirstChar(this.extension.config.name)
     }
 
-    const ReactNodeView: React.FunctionComponent = (props) => {
+    const ReactNodeViewProvider: React.FunctionComponent = componentProps => {
       const [isEditable, setIsEditable] = useState(this.editor.isEditable)
       const onDragStart = this.onDragStart.bind(this)
       const onViewUpdate = () => setIsEditable(this.editor.isEditable)
+      const Component = this.component
 
       useEffect(() => {
         this.editor.on('viewUpdate', onViewUpdate)
@@ -50,12 +56,14 @@ class ReactNodeView extends NodeView<React.FunctionComponent, Editor> {
 
       return (
         <ReactNodeViewContext.Provider value={{ onDragStart, isEditable }}>
-          <this.component {...props} />
+          <Component {...componentProps} />
         </ReactNodeViewContext.Provider>
       )
     }
 
-    this.renderer = new ReactRenderer(ReactNodeView, {
+    ReactNodeViewProvider.displayName = 'ReactNodeView'
+
+    this.renderer = new ReactRenderer(ReactNodeViewProvider, {
       editor: this.editor,
       props,
     })

packages/react/src/ReactRenderer.tsx

@@ -46,7 +46,9 @@ export class ReactRenderer {
     const props = this.props
 
     if (isClassComponent(Component)) {
-      props.ref = (ref: React.Component) => this.ref = ref
+      props.ref = (ref: React.Component) => {
+        this.ref = ref
+      }
     }
 
     this.reactElement = <Component {...props } />

packages/vue-2/src/VueNodeViewRenderer.ts

@@ -1,4 +1,9 @@
-import { NodeView, NodeViewRenderer, NodeViewRendererProps } from '@tiptap/core'
+import {
+  NodeView,
+  NodeViewProps,
+  NodeViewRenderer,
+  NodeViewRendererProps,
+} from '@tiptap/core'
 import { Decoration, NodeView as ProseMirrorNodeView } from 'prosemirror-view'
 import { Node as ProseMirrorNode } from 'prosemirror-model'
 import Vue from 'vue'
@@ -16,7 +21,7 @@ class VueNodeView extends NodeView<(Vue | VueConstructor), Editor> {
   renderer!: VueRenderer
 
   mount() {
-    const props = {
+    const props: NodeViewProps = {
       editor: this.editor,
       node: this.node,
       decorations: this.decorations,

packages/vue-3/src/VueNodeViewRenderer.ts

@@ -1,4 +1,9 @@
-import { NodeView, NodeViewRenderer, NodeViewRendererProps } from '@tiptap/core'
+import {
+  NodeView,
+  NodeViewProps,
+  NodeViewRenderer,
+  NodeViewRendererProps,
+} from '@tiptap/core'
 import {
   ref,
   provide,
@@ -20,7 +25,7 @@ class VueNodeView extends NodeView<Component, Editor> {
   renderer!: VueRenderer
 
   mount() {
-    const props = {
+    const props: NodeViewProps = {
       editor: this.editor,
       node: this.node,
       decorations: this.decorations,