refactoring

.eslintrc.js

@@ -11,7 +11,9 @@ module.exports = {
     {
       files: [
         './**/*.ts',
+        './**/*.tsx',
         './**/*.js',
+        './**/*.jsx',
         './**/*.vue',
       ],
       plugins: [
@@ -27,6 +29,7 @@ module.exports = {
         window: false,
       },
       extends: [
+        'plugin:@typescript-eslint/eslint-recommended',
         'plugin:@typescript-eslint/recommended',
         'plugin:vue/strongly-recommended',
         'airbnb-base',

docs/src/demos/Examples/Community/React/MentionList.jsx

@@ -13,7 +13,7 @@ export class MentionList extends React.Component {
   componentDidUpdate(oldProps) {
     if (this.props.items !== oldProps.items) {
       this.setState({
-        selectedIndex: 0
+        selectedIndex: 0,
       })
     }
   }
@@ -39,13 +39,13 @@ export class MentionList extends React.Component {
 
   upHandler() {
     this.setState({
-      selectedIndex: ((this.state.selectedIndex + this.props.items.length) - 1) % this.props.items.length
+      selectedIndex: ((this.state.selectedIndex + this.props.items.length) - 1) % this.props.items.length,
     })
   }
 
   downHandler() {
     this.setState({
-      selectedIndex: (this.state.selectedIndex + 1) % this.props.items.length
+      selectedIndex: (this.state.selectedIndex + 1) % this.props.items.length,
     })
   }
 

docs/src/demos/Examples/Community/React/index.jsx

@@ -66,9 +66,9 @@ export default () => {
                 reactRenderer.destroy()
               },
             }
-          }
+          },
         },
-      })
+      }),
     ],
     content: `
       <p>
@@ -84,8 +84,8 @@ export default () => {
   return (
     <div>
       <EditorContent editor={editor} />
-      {editor &&
-        <div className={`character-count ${editor.getCharacterCount() === limit ? 'character-count--warning' : ''}`}>
+      {editor
+        && <div className={`character-count ${editor.getCharacterCount() === limit ? 'character-count--warning' : ''}`}>
           <svg
             height="20"
             width="20"

docs/src/demos/ReactPlayground/index.jsx

@@ -1,6 +1,9 @@
+/* eslint-disable */
 import React, { useState } from 'react'
 import tippy from 'tippy.js'
-import { useEditor, EditorContent, ReactRenderer, ReactNodeViewRenderer, NodeViewWrapper, NodeViewContent } from '@tiptap/react'
+import {
+  useEditor, EditorContent, ReactRenderer, ReactNodeViewRenderer, NodeViewWrapper, NodeViewContent,
+} from '@tiptap/react'
 import { defaultExtensions } from '@tiptap/starter-kit'
 import Heading from '@tiptap/extension-heading'
 import Paragraph from '@tiptap/extension-paragraph'
@@ -127,13 +130,13 @@ const MenuBar = ({ editor }) => {
   )
 }
 
-const MentionList = (props) => {
-  console.log({props})
+const MentionList = props => {
+  console.log({ props })
 
   return (
     <div>
       mentions
-      {props.items.map((item) => (
+      {props.items.map(item => (
         <div>
           {item}
         </div>
@@ -174,7 +177,7 @@ export default () => {
       Heading.extend({
         draggable: true,
         addNodeView() {
-          return ReactNodeViewRenderer((props) => {
+          return ReactNodeViewRenderer(props => {
             return (
               <NodeViewWrapper>
                 <div className="heading">
@@ -193,7 +196,7 @@ export default () => {
               </NodeViewWrapper>
             )
           })
-        }
+        },
       }),
       Mention.configure({
         suggestion: {
@@ -238,45 +241,45 @@ export default () => {
                 reactRenderer.destroy()
               },
             }
-          }
+          },
         },
-      })
+      }),
     ],
     content: `
       <h1>heading</h1>
       <h2>heading</h2>
       <p>paragraph</p>
     `,
-//     content: `
-//       <h2>
-//         Hi there,
-//       </h2>
-//       <p>
-//         this is a basic <em>basic</em> example of <strong>tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
-//       </p>
-//       <ul>
-//         <li>
-//           That’s a bullet list with one …
-//         </li>
-//         <li>
-//           … or two list items.
-//         </li>
-//       </ul>
-//       <p>
-//         Isn’t that great? And all of that is editable. But wait, there’s more. Let’s try a code block:
-//       </p>
-//       <pre><code class="language-css">body {
-//   display: none;
-// }</code></pre>
-//       <p>
-//         I know, I know, this is impressive. It’s only the tip of the iceberg though. Give it a try and click a little bit around. Don’t forget to check the other examples too.
-//       </p>
-//       <blockquote>
-//         Wow, that’s amazing. Good work, boy! 👏
-//         <br />
-//         — Mom
-//       </blockquote>
-//     `,
+    //     content: `
+    //       <h2>
+    //         Hi there,
+    //       </h2>
+    //       <p>
+    //         this is a basic <em>basic</em> example of <strong>tiptap</strong>. Sure, there are all kind of basic text styles you’d probably expect from a text editor. But wait until you see the lists:
+    //       </p>
+    //       <ul>
+    //         <li>
+    //           That’s a bullet list with one …
+    //         </li>
+    //         <li>
+    //           … or two list items.
+    //         </li>
+    //       </ul>
+    //       <p>
+    //         Isn’t that great? And all of that is editable. But wait, there’s more. Let’s try a code block:
+    //       </p>
+    //       <pre><code class="language-css">body {
+    //   display: none;
+    // }</code></pre>
+    //       <p>
+    //         I know, I know, this is impressive. It’s only the tip of the iceberg though. Give it a try and click a little bit around. Don’t forget to check the other examples too.
+    //       </p>
+    //       <blockquote>
+    //         Wow, that’s amazing. Good work, boy! 👏
+    //         <br />
+    //         — Mom
+    //       </blockquote>
+    //     `,
   })
 
   return (

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,