@tiptap/react 2.0.0-beta.17 → 2.0.0-beta.194

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/react",
   "description": "React components for tiptap",
-  "version": "2.0.0-beta.17",
+  "version": "2.0.0-beta.194",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -15,25 +15,31 @@
   "main": "dist/tiptap-react.cjs.js",
   "umd": "dist/tiptap-react.umd.js",
   "module": "dist/tiptap-react.esm.js",
-  "unpkg": "dist/tiptap-react.bundle.umd.min.js",
   "types": "dist/packages/react/src/index.d.ts",
   "files": [
     "src",
     "dist"
   ],
+  "devDependencies": {
+    "@types/react": "^18.0.1",
+    "@types/react-dom": "^18.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
   "peerDependencies": {
-    "@tiptap/core": "^2.0.0-beta.1",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1"
+    "@tiptap/core": "^2.0.0-beta.193",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
   },
   "dependencies": {
-    "@tiptap/extension-bubble-menu": "^2.0.0-beta.5",
-    "@tiptap/extension-floating-menu": "^2.0.0-beta.2",
-    "prosemirror-view": "^1.18.2"
+    "@tiptap/extension-bubble-menu": "^2.0.0-beta.194",
+    "@tiptap/extension-floating-menu": "^2.0.0-beta.194",
+    "prosemirror-view": "1.26.2"
   },
-  "devDependencies": {
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.3"
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ueberdosis/tiptap",
+    "directory": "packages/react"
   },
-  "gitHead": "113d50b814c8860465c8bb16ae2bee3097689016"
+  "sideEffects": false
 }

package/src/BubbleMenu.tsx

@@ -1,29 +1,51 @@
-import React, { useEffect, useRef } from 'react'
-import { BubbleMenuPlugin, BubbleMenuPluginKey, BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu'
+import { BubbleMenuPlugin, BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu'
+import React, {
+  useEffect, useState,
+} from 'react'
 
-export type BubbleMenuProps = Omit<BubbleMenuPluginProps, 'element'> & {
+type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>
+
+export type BubbleMenuProps = Omit<Optional<BubbleMenuPluginProps, 'pluginKey'>, 'element'> & {
   className?: string,
+  children: React.ReactNode
 }
 
-export const BubbleMenu: React.FC<BubbleMenuProps> = props => {
-  const element = useRef<HTMLDivElement>(null)
+export const BubbleMenu = (props: BubbleMenuProps) => {
+  const [element, setElement] = useState<HTMLDivElement | null>(null)
 
   useEffect(() => {
-    const { editor, keepInBounds = true } = props
+    if (!element) {
+      return
+    }
+
+    if (props.editor.isDestroyed) {
+      return
+    }
 
-    editor.registerPlugin(BubbleMenuPlugin({
+    const {
+      pluginKey = 'bubbleMenu',
       editor,
-      element: element.current as HTMLElement,
-      keepInBounds,
-    }))
+      tippyOptions = {},
+      shouldShow = null,
+    } = props
 
-    return () => {
-      editor.unregisterPlugin(BubbleMenuPluginKey)
-    }
-  }, [])
+    const plugin = BubbleMenuPlugin({
+      pluginKey,
+      editor,
+      element,
+      tippyOptions,
+      shouldShow,
+    })
+
+    editor.registerPlugin(plugin)
+    return () => editor.unregisterPlugin(pluginKey)
+  }, [
+    props.editor,
+    element,
+  ])
 
   return (
-    <div ref={element} className={props.className} style={{ visibility: 'hidden' }}>
+    <div ref={setElement} className={props.className} style={{ visibility: 'hidden' }}>
       {props.children}
     </div>
   )

package/src/Editor.ts

@@ -1,5 +1,6 @@
-import React from 'react'
 import { Editor as CoreEditor } from '@tiptap/core'
+import React from 'react'
+
 import { EditorContentProps, EditorContentState } from './EditorContent'
 
 export class Editor extends CoreEditor {

package/src/EditorContent.tsx

@@ -1,5 +1,6 @@
-import React from 'react'
+import React, { HTMLProps } from 'react'
 import ReactDOM from 'react-dom'
+
 import { Editor } from './Editor'
 import { ReactRenderer } from './ReactRenderer'
 
@@ -17,7 +18,7 @@ const Portals: React.FC<{ renderers: Map<string, ReactRenderer> }> = ({ renderer
   )
 }
 
-export interface EditorContentProps {
+export interface EditorContentProps extends HTMLProps<HTMLDivElement> {
   editor: Editor | null,
 }
 
@@ -55,7 +56,7 @@ export class PureEditorContent extends React.Component<EditorContentProps, Edito
 
       const element = this.editorContentRef.current
 
-      element.appendChild(editor.options.element.firstChild)
+      element.append(...editor.options.element.childNodes)
 
       editor.setOptions({
         element,
@@ -63,8 +64,7 @@ export class PureEditorContent extends React.Component<EditorContentProps, Edito
 
       editor.contentComponent = this
 
-      // TODO: alternative to setTimeout?
-      setTimeout(() => editor.createNodeViews(), 0)
+      editor.createNodeViews()
     }
   }
 
@@ -89,7 +89,7 @@ export class PureEditorContent extends React.Component<EditorContentProps, Edito
 
     const newElement = document.createElement('div')
 
-    newElement.appendChild(editor.options.element.firstChild)
+    newElement.append(...editor.options.element.childNodes)
 
     editor.setOptions({
       element: newElement,
@@ -97,9 +97,11 @@ export class PureEditorContent extends React.Component<EditorContentProps, Edito
   }
 
   render() {
+    const { editor, ...rest } = this.props
+
     return (
       <>
-        <div ref={this.editorContentRef} />
+        <div ref={this.editorContentRef} {...rest} />
         <Portals renderers={this.state.renderers} />
       </>
     )

package/src/FloatingMenu.tsx

@@ -1,28 +1,51 @@
-import React, { useEffect, useRef } from 'react'
-import { FloatingMenuPlugin, FloatingMenuPluginKey, FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'
+import { FloatingMenuPlugin, FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'
+import React, {
+  useEffect, useState,
+} from 'react'
 
-export type FloatingMenuProps = Omit<FloatingMenuPluginProps, 'element'> & {
+type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>
+
+export type FloatingMenuProps = Omit<Optional<FloatingMenuPluginProps, 'pluginKey'>, 'element'> & {
   className?: string,
+  children: React.ReactNode
 }
 
-export const FloatingMenu: React.FC<FloatingMenuProps> = props => {
-  const element = useRef<HTMLDivElement>(null)
+export const FloatingMenu = (props: FloatingMenuProps) => {
+  const [element, setElement] = useState<HTMLDivElement | null>(null)
 
   useEffect(() => {
-    const { editor } = props
+    if (!element) {
+      return
+    }
+
+    if (props.editor.isDestroyed) {
+      return
+    }
 
-    editor.registerPlugin(FloatingMenuPlugin({
+    const {
+      pluginKey = 'floatingMenu',
       editor,
-      element: element.current as HTMLElement,
-    }))
+      tippyOptions = {},
+      shouldShow = null,
+    } = props
 
-    return () => {
-      editor.unregisterPlugin(FloatingMenuPluginKey)
-    }
-  }, [])
+    const plugin = FloatingMenuPlugin({
+      pluginKey,
+      editor,
+      element,
+      tippyOptions,
+      shouldShow,
+    })
+
+    editor.registerPlugin(plugin)
+    return () => editor.unregisterPlugin(pluginKey)
+  }, [
+    props.editor,
+    element,
+  ])
 
   return (
-    <div ref={element} className={props.className} style={{ visibility: 'hidden' }}>
+    <div ref={setElement} className={props.className} style={{ visibility: 'hidden' }}>
       {props.children}
     </div>
   )

package/src/NodeViewContent.tsx

@@ -1,18 +1,25 @@
 import React from 'react'
 
+import { useReactNodeView } from './useReactNodeView'
+
 export interface NodeViewContentProps {
-  className?: string,
+  [key: string]: any,
   as?: React.ElementType,
 }
 
 export const NodeViewContent: React.FC<NodeViewContentProps> = props => {
   const Tag = props.as || 'div'
+  const { nodeViewContentRef } = useReactNodeView()
 
   return (
     <Tag
-      className={props.className}
+      {...props}
+      ref={nodeViewContentRef}
       data-node-view-content=""
-      style={{ whiteSpace: 'pre-wrap' }}
+      style={{
+        whiteSpace: 'pre-wrap',
+        ...props.style,
+      }}
     />
   )
 }

package/src/NodeViewWrapper.tsx

@@ -1,23 +1,26 @@
 import React from 'react'
+
 import { useReactNodeView } from './useReactNodeView'
 
 export interface NodeViewWrapperProps {
-  className?: string,
+  [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={{
+        whiteSpace: 'normal',
+        ...props.style,
+      }}
+    />
   )
-}
+})

package/src/ReactNodeViewRenderer.tsx

@@ -1,25 +1,41 @@
-import React from 'react'
 import {
   NodeView,
   NodeViewProps,
   NodeViewRenderer,
+  NodeViewRendererOptions,
   NodeViewRendererProps,
 } from '@tiptap/core'
-import { Decoration, NodeView as ProseMirrorNodeView } from 'prosemirror-view'
 import { Node as ProseMirrorNode } from 'prosemirror-model'
+import { Decoration, NodeView as ProseMirrorNodeView } from 'prosemirror-view'
+import React from 'react'
+
 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,
+import { ReactNodeViewContext, ReactNodeViewContextProps } from './useReactNodeView'
+
+export interface ReactNodeViewRendererOptions extends NodeViewRendererOptions {
+  update:
+    | ((props: {
+        oldNode: ProseMirrorNode;
+        oldDecorations: Decoration[];
+        newNode: ProseMirrorNode;
+        newDecorations: Decoration[];
+        updateProps: () => void;
+      }) => boolean)
+    | null;
+  as?: string;
+  className?: string;
 }
 
-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 +45,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,15 +53,20 @@ class ReactNodeView extends NodeView<React.FunctionComponent, Editor> {
         return string.charAt(0).toUpperCase() + string.substring(1)
       }
 
-      this.component.displayName = capitalizeFirstChar(this.extension.config.name)
+      this.component.displayName = capitalizeFirstChar(this.extension.name)
     }
 
     const ReactNodeViewProvider: React.FunctionComponent = componentProps => {
-      const onDragStart = this.onDragStart.bind(this)
       const Component = this.component
+      const onDragStart = this.onDragStart.bind(this)
+      const nodeViewContentRef: ReactNodeViewContextProps['nodeViewContentRef'] = element => {
+        if (element && this.contentDOMElement && element.firstChild !== this.contentDOMElement) {
+          element.appendChild(this.contentDOMElement)
+        }
+      }
 
       return (
-        <ReactNodeViewContext.Provider value={{ onDragStart }}>
+        <ReactNodeViewContext.Provider value={{ onDragStart, nodeViewContentRef }}>
           <Component {...componentProps} />
         </ReactNodeViewContext.Provider>
       )
@@ -52,21 +74,42 @@ 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'
+    }
+
+    let as = this.node.isInline ? 'span' : 'div'
+
+    if (this.options.as) {
+      as = this.options.as
+    }
+
+    const { className = '' } = this.options
+
     this.renderer = new ReactRenderer(ReactNodeViewProvider, {
       editor: this.editor,
       props,
-      as: this.node.isInline
-        ? 'span'
-        : 'div',
+      as,
+      className: `node-${this.node.type.name} ${className}`.trim(),
     })
   }
 
   get dom() {
-    if (!this.renderer.element.firstElementChild?.hasAttribute('data-node-view-wrapper')) {
+    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
+    return this.renderer.element as HTMLElement
   }
 
   get contentDOM() {
@@ -74,27 +117,42 @@ class ReactNodeView extends NodeView<React.FunctionComponent, Editor> {
       return null
     }
 
-    const contentElement = this.dom.querySelector('[data-node-view-content]')
-
-    return contentElement || this.dom
+    return this.contentDOMElement
   }
 
   update(node: ProseMirrorNode, decorations: Decoration[]) {
-    if (typeof this.options.update === 'function') {
-      return this.options.update(node, decorations)
+    const updateProps = (props?: Record<string, any>) => {
+      this.renderer.updateProps(props)
     }
 
     if (node.type !== this.node.type) {
       return false
     }
 
+    if (typeof this.options.update === 'function') {
+      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 === this.node && this.decorations === decorations) {
       return true
     }
 
     this.node = node
     this.decorations = decorations
-    this.renderer.updateProps({ node, decorations })
+
+    updateProps({ node, decorations })
 
     return true
   }
@@ -113,10 +171,14 @@ class ReactNodeView extends NodeView<React.FunctionComponent, Editor> {
 
   destroy() {
     this.renderer.destroy()
+    this.contentDOMElement = null
   }
 }
 
-export function ReactNodeViewRenderer(component: any, options?: Partial<ReactNodeViewRendererOptions>): NodeViewRenderer {
+export function ReactNodeViewRenderer(
+  component: any,
+  options?: Partial<ReactNodeViewRendererOptions>,
+): NodeViewRenderer {
   return (props: NodeViewRendererProps) => {
     // try to get the parent component
     // this is important for vue devtools to show the component hierarchy correctly
@@ -125,6 +187,6 @@ export function ReactNodeViewRenderer(component: any, options?: Partial<ReactNod
       return {}
     }
 
-    return new ReactNodeView(component, props, options) as ProseMirrorNodeView
+    return new ReactNodeView(component, props, options) as unknown as ProseMirrorNodeView
   }
 }

package/src/ReactRenderer.tsx

@@ -1,6 +1,8 @@
+import { Editor } from '@tiptap/core'
 import React from 'react'
-import { AnyObject } from '@tiptap/core'
-import { Editor } from './Editor'
+import { flushSync } from 'react-dom'
+
+import { Editor as ExtendedEditor } from './Editor'
 
 function isClassComponent(Component: any) {
   return !!(
@@ -10,34 +12,57 @@ function isClassComponent(Component: any) {
   )
 }
 
+function isForwardRefComponent(Component: any) {
+  return !!(
+    typeof Component === 'object'
+    && Component.$$typeof?.toString() === 'Symbol(react.forward_ref)'
+  )
+}
+
 export interface ReactRendererOptions {
   editor: Editor,
-  props?: AnyObject,
+  props?: Record<string, any>,
   as?: string,
+  className?: string,
 }
 
-export class ReactRenderer {
+type ComponentType<R, P> =
+  React.ComponentClass<P> |
+  React.FunctionComponent<P> |
+  React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<R>>;
+
+export class ReactRenderer<R = unknown, P = unknown> {
   id: string
 
-  editor: Editor
+  editor: ExtendedEditor
 
   component: any
 
   element: Element
 
-  props: AnyObject
+  props: Record<string, any>
 
   reactElement: React.ReactNode
 
-  ref: React.Component | null = null
+  ref: R | null = null
 
-  constructor(component: React.Component | React.FunctionComponent, { editor, props = {}, as = 'div' }: ReactRendererOptions) {
+  constructor(component: ComponentType<R, P>, {
+    editor,
+    props = {},
+    as = 'div',
+    className = '',
+  }: ReactRendererOptions) {
     this.id = Math.floor(Math.random() * 0xFFFFFFFF).toString()
     this.component = component
-    this.editor = editor
+    this.editor = editor as ExtendedEditor
     this.props = props
     this.element = document.createElement(as)
     this.element.classList.add('react-renderer')
+
+    if (className) {
+      this.element.classList.add(...className.split(' '))
+    }
+
     this.render()
   }
 
@@ -45,25 +70,27 @@ export class ReactRenderer {
     const Component = this.component
     const props = this.props
 
-    if (isClassComponent(Component)) {
-      props.ref = (ref: React.Component) => {
+    if (isClassComponent(Component) || isForwardRefComponent(Component)) {
+      props.ref = (ref: R) => {
         this.ref = ref
       }
     }
 
     this.reactElement = <Component {...props } />
 
-    if (this.editor?.contentComponent) {
-      this.editor.contentComponent.setState({
-        renderers: this.editor.contentComponent.state.renderers.set(
-          this.id,
-          this,
-        ),
-      })
-    }
+    flushSync(() => {
+      if (this.editor?.contentComponent) {
+        this.editor.contentComponent.setState({
+          renderers: this.editor.contentComponent.state.renderers.set(
+            this.id,
+            this,
+          ),
+        })
+      }
+    })
   }
 
-  updateProps(props: AnyObject = {}): void {
+  updateProps(props: Record<string, any> = {}): void {
     this.props = {
       ...this.props,
       ...props,
@@ -73,14 +100,16 @@ export class ReactRenderer {
   }
 
   destroy(): void {
-    if (this.editor?.contentComponent) {
-      const { renderers } = this.editor.contentComponent.state
+    flushSync(() => {
+      if (this.editor?.contentComponent) {
+        const { renderers } = this.editor.contentComponent.state
 
-      renderers.delete(this.id)
+        renderers.delete(this.id)
 
-      this.editor.contentComponent.setState({
-        renderers,
-      })
-    }
+        this.editor.contentComponent.setState({
+          renderers,
+        })
+      }
+    })
   }
 }

package/src/index.ts

@@ -1,10 +1,10 @@
-export * from '@tiptap/core'
 export * from './BubbleMenu'
 export { Editor } from './Editor'
-export * from './FloatingMenu'
-export * from './useEditor'
-export * from './ReactRenderer'
-export * from './ReactNodeViewRenderer'
 export * from './EditorContent'
-export * from './NodeViewWrapper'
+export * from './FloatingMenu'
 export * from './NodeViewContent'
+export * from './NodeViewWrapper'
+export * from './ReactNodeViewRenderer'
+export * from './ReactRenderer'
+export * from './useEditor'
+export * from '@tiptap/core'