@tiptap/react 2.0.0-beta.7 → 2.0.0-beta.70

package/src/NodeViewWrapper.tsx

@@ -2,22 +2,24 @@ import React from 'react'
 import { useReactNodeView } from './useReactNodeView'
 
 export interface NodeViewWrapperProps {
-  className?: string,
-  as: React.ElementType,
+  [key: string]: any,
+  as?: React.ElementType,
 }
 
-export const NodeViewWrapper: React.FC<NodeViewWrapperProps> = props => {
+export const NodeViewWrapper: React.FC<NodeViewWrapperProps> = React.forwardRef((props, ref) => {
   const { onDragStart } = useReactNodeView()
   const Tag = props.as || 'div'
 
   return (
     <Tag
-      className={props.className}
+      {...props}
+      ref={ref}
       data-node-view-wrapper=""
       onDragStart={onDragStart}
-      style={{ whiteSpace: 'normal' }}
-    >
-     {props.children}
-    </Tag>
+      style={{
+        ...props.style,
+        whiteSpace: 'normal',
+      }}
+    />
   )
-}
+})

package/src/ReactNodeViewRenderer.tsx

@@ -1,9 +1,10 @@
-import React, { useState, useEffect } from 'react'
+import React from 'react'
 import {
   NodeView,
   NodeViewProps,
   NodeViewRenderer,
   NodeViewRendererProps,
+  NodeViewRendererOptions,
 } from '@tiptap/core'
 import { Decoration, NodeView as ProseMirrorNodeView } from 'prosemirror-view'
 import { Node as ProseMirrorNode } from 'prosemirror-model'
@@ -11,15 +12,22 @@ import { Editor } from './Editor'
 import { ReactRenderer } from './ReactRenderer'
 import { ReactNodeViewContext } from './useReactNodeView'
 
-interface ReactNodeViewRendererOptions {
-  stopEvent: ((event: Event) => boolean) | null,
-  update: ((node: ProseMirrorNode, decorations: Decoration[]) => boolean) | null,
+export interface ReactNodeViewRendererOptions extends NodeViewRendererOptions {
+  update: ((props: {
+    oldNode: ProseMirrorNode,
+    oldDecorations: Decoration[],
+    newNode: ProseMirrorNode,
+    newDecorations: Decoration[],
+    updateProps: () => void,
+  }) => boolean) | null,
 }
 
-class ReactNodeView extends NodeView<React.FunctionComponent, Editor> {
+class ReactNodeView extends NodeView<React.FunctionComponent, Editor, ReactNodeViewRendererOptions> {
 
   renderer!: ReactRenderer
 
+  contentDOMElement!: HTMLElement | null
+
   mount() {
     const props: NodeViewProps = {
       editor: this.editor,
@@ -29,6 +37,7 @@ class ReactNodeView extends NodeView<React.FunctionComponent, Editor> {
       extension: this.extension,
       getPos: () => this.getPos(),
       updateAttributes: (attributes = {}) => this.updateAttributes(attributes),
+      deleteNode: () => this.deleteNode(),
     }
 
     if (!(this.component as any).displayName) {
@@ -36,26 +45,16 @@ class ReactNodeView extends NodeView<React.FunctionComponent, Editor> {
         return string.charAt(0).toUpperCase() + string.substring(1)
       }
 
-      // @ts-ignore
-      this.component.displayName = capitalizeFirstChar(this.extension.config.name)
+      this.component.displayName = capitalizeFirstChar(this.extension.name)
     }
 
     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 maybeMoveContentDOM = this.maybeMoveContentDOM.bind(this)
       const Component = this.component
 
-      useEffect(() => {
-        this.editor.on('viewUpdate', onViewUpdate)
-
-        return () => {
-          this.editor.off('viewUpdate', onViewUpdate)
-        }
-      }, [])
-
       return (
-        <ReactNodeViewContext.Provider value={{ onDragStart, isEditable }}>
+        <ReactNodeViewContext.Provider value={{ onDragStart, maybeMoveContentDOM }}>
           <Component {...componentProps} />
         </ReactNodeViewContext.Provider>
       )
@@ -63,15 +62,32 @@ class ReactNodeView extends NodeView<React.FunctionComponent, Editor> {
 
     ReactNodeViewProvider.displayName = 'ReactNodeView'
 
+    this.contentDOMElement = this.node.isLeaf
+      ? null
+      : document.createElement(this.node.isInline ? 'span' : 'div')
+
+    if (this.contentDOMElement) {
+      // For some reason the whiteSpace prop is not inherited properly in Chrome and Safari
+      // With this fix it seems to work fine
+      // See: https://github.com/ueberdosis/tiptap/issues/1197
+      this.contentDOMElement.style.whiteSpace = 'inherit'
+    }
+
     this.renderer = new ReactRenderer(ReactNodeViewProvider, {
       editor: this.editor,
       props,
+      as: this.node.isInline
+        ? 'span'
+        : 'div',
     })
   }
 
   get dom() {
-    if (!this.renderer.element.firstElementChild?.hasAttribute('data-node-view-wrapper')) {
-      throw Error('Please use the ReactViewWrapper component for your node view.')
+    if (
+      this.renderer.element.firstElementChild
+      && !this.renderer.element.firstElementChild?.hasAttribute('data-node-view-wrapper')
+    ) {
+      throw Error('Please use the NodeViewWrapper component for your node view.')
     }
 
     return this.renderer.element
@@ -82,14 +98,43 @@ class ReactNodeView extends NodeView<React.FunctionComponent, Editor> {
       return null
     }
 
+    this.maybeMoveContentDOM()
+
+    return this.contentDOMElement
+  }
+
+  maybeMoveContentDOM(): void {
     const contentElement = this.dom.querySelector('[data-node-view-content]')
 
-    return contentElement || this.dom
+    if (
+      this.contentDOMElement
+      && contentElement
+      && !contentElement.contains(this.contentDOMElement)
+    ) {
+      contentElement.appendChild(this.contentDOMElement)
+    }
   }
 
   update(node: ProseMirrorNode, decorations: Decoration[]) {
+    const updateProps = (props?: Record<string, any>) => {
+      this.renderer.updateProps(props)
+      this.maybeMoveContentDOM()
+    }
+
     if (typeof this.options.update === 'function') {
-      return this.options.update(node, decorations)
+      const oldNode = this.node
+      const oldDecorations = this.decorations
+
+      this.node = node
+      this.decorations = decorations
+
+      return this.options.update({
+        oldNode,
+        oldDecorations,
+        newNode: node,
+        newDecorations: decorations,
+        updateProps: () => updateProps({ node, decorations }),
+      })
     }
 
     if (node.type !== this.node.type) {
@@ -102,7 +147,8 @@ class ReactNodeView extends NodeView<React.FunctionComponent, Editor> {
 
     this.node = node
     this.decorations = decorations
-    this.renderer.updateProps({ node, decorations })
+
+    updateProps({ node, decorations })
 
     return true
   }
@@ -121,6 +167,7 @@ class ReactNodeView extends NodeView<React.FunctionComponent, Editor> {
 
   destroy() {
     this.renderer.destroy()
+    this.contentDOMElement = null
   }
 }
 

package/src/ReactRenderer.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { AnyObject } from '@tiptap/core'
 import { Editor } from './Editor'
 
 function isClassComponent(Component: any) {
@@ -10,12 +9,24 @@ function isClassComponent(Component: any) {
   )
 }
 
+function isForwardRefComponent(Component: any) {
+  return !!(
+    typeof Component === 'object'
+    && Component.$$typeof?.toString() === 'Symbol(react.forward_ref)'
+  )
+}
+
 export interface ReactRendererOptions {
-  as?: string,
   editor: Editor,
-  props?: AnyObject,
+  props?: Record<string, any>,
+  as?: string,
 }
 
+type ComponentType =
+  | React.ComponentClass
+  | React.FunctionComponent
+  | React.ForwardRefExoticComponent<{ items: any[], command: any } & React.RefAttributes<unknown>>
+
 export class ReactRenderer {
   id: string
 
@@ -25,18 +36,18 @@ export class ReactRenderer {
 
   element: Element
 
-  props: AnyObject
+  props: Record<string, any>
 
   reactElement: React.ReactNode
 
   ref: React.Component | null = null
 
-  constructor(component: React.Component | React.FunctionComponent, { props = {}, editor }: ReactRendererOptions) {
+  constructor(component: ComponentType, { 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()
   }
@@ -45,7 +56,7 @@ export class ReactRenderer {
     const Component = this.component
     const props = this.props
 
-    if (isClassComponent(Component)) {
+    if (isClassComponent(Component) || isForwardRefComponent(Component)) {
       props.ref = (ref: React.Component) => {
         this.ref = ref
       }
@@ -63,7 +74,7 @@ export class ReactRenderer {
     }
   }
 
-  updateProps(props: AnyObject = {}): void {
+  updateProps(props: Record<string, any> = {}): void {
     this.props = {
       ...this.props,
       ...props,

package/src/index.ts

@@ -1,6 +1,7 @@
 export * from '@tiptap/core'
 export * from './BubbleMenu'
 export { Editor } from './Editor'
+export * from './FloatingMenu'
 export * from './useEditor'
 export * from './ReactRenderer'
 export * from './ReactNodeViewRenderer'

package/src/useEditor.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, DependencyList } from 'react'
 import { EditorOptions } from '@tiptap/core'
 import { Editor } from './Editor'
 
@@ -8,7 +8,7 @@ function useForceUpdate() {
   return () => setValue(value => value + 1)
 }
 
-export const useEditor = (options: Partial<EditorOptions> = {}) => {
+export const useEditor = (options: Partial<EditorOptions> = {}, deps: DependencyList = []) => {
   const [editor, setEditor] = useState<Editor | null>(null)
   const forceUpdate = useForceUpdate()
 
@@ -22,7 +22,7 @@ export const useEditor = (options: Partial<EditorOptions> = {}) => {
     return () => {
       instance.destroy()
     }
-  }, [])
+  }, deps)
 
   return editor
 }

package/src/useReactNodeView.ts

@@ -1,12 +1,11 @@
 import { createContext, useContext } from 'react'
 
 export interface ReactNodeViewContextProps {
-  isEditable: boolean,
   onDragStart: (event: DragEvent) => void,
+  maybeMoveContentDOM: () => void,
 }
 
 export const ReactNodeViewContext = createContext<Partial<ReactNodeViewContextProps>>({
-  isEditable: undefined,
   onDragStart: undefined,
 })
 

package/CHANGELOG.md

@@ -1,64 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [2.0.0-beta.7](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/react@2.0.0-beta.6...@tiptap/react@2.0.0-beta.7) (2021-03-31)
-
-**Note:** Version bump only for package @tiptap/react
-
-
-
-
-
-# [2.0.0-beta.6](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/react@2.0.0-beta.5...@tiptap/react@2.0.0-beta.6) (2021-03-28)
-
-**Note:** Version bump only for package @tiptap/react
-
-
-
-
-
-# [2.0.0-beta.5](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/react@2.0.0-beta.4...@tiptap/react@2.0.0-beta.5) (2021-03-24)
-
-**Note:** Version bump only for package @tiptap/react
-
-
-
-
-
-# [2.0.0-beta.4](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/react@2.0.0-beta.3...@tiptap/react@2.0.0-beta.4) (2021-03-18)
-
-**Note:** Version bump only for package @tiptap/react
-
-
-
-
-
-# [2.0.0-beta.3](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/react@2.0.0-beta.2...@tiptap/react@2.0.0-beta.3) (2021-03-16)
-
-**Note:** Version bump only for package @tiptap/react
-
-
-
-
-
-# [2.0.0-beta.2](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/react@2.0.0-beta.1...@tiptap/react@2.0.0-beta.2) (2021-03-09)
-
-**Note:** Version bump only for package @tiptap/react
-
-
-
-
-
-# [2.0.0-beta.1](https://github.com/ueberdosis/tiptap-next/compare/@tiptap/react@2.0.0-alpha.2...@tiptap/react@2.0.0-beta.1) (2021-03-05)
-
-**Note:** Version bump only for package @tiptap/react
-
-
-
-
-
-# 2.0.0-alpha.2 (2021-02-26)
-
-**Note:** Version bump only for package @tiptap/react