@tiptap/react 2.0.0-beta.99 → 2.0.0-rc.2

package/dist/packages/react/src/ReactRenderer.d.ts

@@ -1,17 +1,15 @@
-import React from 'react';
 import { Editor } from '@tiptap/core';
+import React from 'react';
 import { Editor as ExtendedEditor } from './Editor';
 export interface ReactRendererOptions {
     editor: Editor;
     props?: Record<string, any>;
     as?: string;
     className?: string;
+    attrs?: Record<string, string>;
 }
-declare type ComponentType<R> = React.ComponentClass | React.FunctionComponent | React.ForwardRefExoticComponent<{
-    items: any[];
-    command: any;
-} & React.RefAttributes<R>>;
-export declare class ReactRenderer<R = unknown> {
+declare type ComponentType<R, P> = React.ComponentClass<P> | React.FunctionComponent<P> | React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<R>>;
+export declare class ReactRenderer<R = unknown, P = unknown> {
     id: string;
     editor: ExtendedEditor;
     component: any;
@@ -19,7 +17,7 @@ export declare class ReactRenderer<R = unknown> {
     props: Record<string, any>;
     reactElement: React.ReactNode;
     ref: R | null;
-    constructor(component: ComponentType<R>, { editor, props, as, className, }: ReactRendererOptions);
+    constructor(component: ComponentType<R, P>, { editor, props, as, className, attrs, }: ReactRendererOptions);
     render(): void;
     updateProps(props?: Record<string, any>): void;
     destroy(): void;

package/dist/packages/react/src/index.d.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';

package/dist/packages/react/src/useEditor.d.ts

@@ -1,4 +1,4 @@
-import { DependencyList } from 'react';
 import { EditorOptions } from '@tiptap/core';
+import { DependencyList } from 'react';
 import { Editor } from './Editor';
 export declare const useEditor: (options?: Partial<EditorOptions>, deps?: DependencyList) => Editor | null;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/react",
   "description": "React components for tiptap",
-  "version": "2.0.0-beta.99",
+  "version": "2.0.0-rc.2",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -12,34 +12,48 @@
     "type": "github",
     "url": "https://github.com/sponsors/ueberdosis"
   },
-  "main": "dist/tiptap-react.cjs.js",
-  "umd": "dist/tiptap-react.umd.js",
-  "module": "dist/tiptap-react.esm.js",
+  "exports": {
+    ".": {
+      "types": "./dist/packages/react/src/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "umd": "dist/index.umd.js",
   "types": "dist/packages/react/src/index.d.ts",
+  "type": "module",
   "files": [
     "src",
     "dist"
   ],
   "devDependencies": {
-    "@types/react": "^17.0.37",
-    "@types/react-dom": "^17.0.11",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0"
+    "@tiptap/core": "^2.0.0-rc.1",
+    "@tiptap/pm": "^2.0.0-rc.1",
+    "@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.0",
-    "react-dom": "^17.0.0"
+    "@tiptap/core": "^2.0.0-rc.1",
+    "@tiptap/pm": "^2.0.0-rc.1",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0"
   },
   "dependencies": {
-    "@tiptap/extension-bubble-menu": "^2.0.0-beta.52",
-    "@tiptap/extension-floating-menu": "^2.0.0-beta.47",
-    "prosemirror-view": "^1.23.3"
+    "@tiptap/extension-bubble-menu": "^2.0.0-rc.1",
+    "@tiptap/extension-floating-menu": "^2.0.0-rc.1"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/ueberdosis/tiptap",
     "directory": "packages/react"
   },
-  "gitHead": "56cbf99f9f636930f77840d6e69dd1d8d2063e37"
-}
+  "sideEffects": false,
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build": "npm run clean && rollup -c"
+  }
+}

package/src/BubbleMenu.tsx

@@ -1,45 +1,45 @@
-import React, { useEffect, useRef } from 'react'
 import { BubbleMenuPlugin, BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu'
+import React, { useEffect, useState } from 'react'
 
-type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>
+type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
 
 export type BubbleMenuProps = Omit<Optional<BubbleMenuPluginProps, 'pluginKey'>, 'element'> & {
-  className?: string,
-}
+  className?: string;
+  children: React.ReactNode;
+  updateDelay?: number;
+};
 
-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(() => {
-    if (!element.current) {
+    if (!element) {
+      return
+    }
+
+    if (props.editor.isDestroyed) {
       return
     }
 
     const {
-      pluginKey = 'bubbleMenu',
-      editor,
-      tippyOptions = {},
-      shouldShow = null,
+      pluginKey = 'bubbleMenu', editor, tippyOptions = {}, updateDelay, shouldShow = null,
     } = props
 
-    editor.registerPlugin(BubbleMenuPlugin({
-      pluginKey,
+    const plugin = BubbleMenuPlugin({
+      updateDelay,
       editor,
-      element: element.current as HTMLElement,
-      tippyOptions,
+      element,
+      pluginKey,
       shouldShow,
-    }))
+      tippyOptions,
+    })
 
-    return () => {
-      editor.unregisterPlugin(pluginKey)
-    }
-  }, [
-    props.editor,
-    element.current,
-  ])
+    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,7 +1,14 @@
-import React from 'react'
 import { Editor as CoreEditor } from '@tiptap/core'
+import React from 'react'
+
 import { EditorContentProps, EditorContentState } from './EditorContent'
+import { ReactRenderer } from './ReactRenderer'
+
+type ContentComponent = React.Component<EditorContentProps, EditorContentState> & {
+  setRenderer(id: string, renderer: ReactRenderer): void;
+  removeRenderer(id: string): void;
+}
 
 export class Editor extends CoreEditor {
-  public contentComponent: React.Component<EditorContentProps, EditorContentState> | null = null
+  public contentComponent: ContentComponent | null = null
 }

package/src/EditorContent.tsx

@@ -1,39 +1,39 @@
 import React, { HTMLProps } from 'react'
-import ReactDOM from 'react-dom'
+import ReactDOM, { flushSync } from 'react-dom'
+
 import { Editor } from './Editor'
 import { ReactRenderer } from './ReactRenderer'
 
-const Portals: React.FC<{ renderers: Map<string, ReactRenderer> }> = ({ renderers }) => {
+const Portals: React.FC<{ renderers: Record<string, ReactRenderer> }> = ({ renderers }) => {
   return (
     <>
-      {Array.from(renderers).map(([key, renderer]) => {
-        return ReactDOM.createPortal(
-          renderer.reactElement,
-          renderer.element,
-          key,
-        )
+      {Object.entries(renderers).map(([key, renderer]) => {
+        return ReactDOM.createPortal(renderer.reactElement, renderer.element, key)
       })}
     </>
   )
 }
 
 export interface EditorContentProps extends HTMLProps<HTMLDivElement> {
-  editor: Editor | null,
+  editor: Editor | null;
 }
 
 export interface EditorContentState {
-  renderers: Map<string, ReactRenderer>
+  renderers: Record<string, ReactRenderer>;
 }
 
 export class PureEditorContent extends React.Component<EditorContentProps, EditorContentState> {
   editorContentRef: React.RefObject<any>
 
+  initialized: boolean
+
   constructor(props: EditorContentProps) {
     super(props)
     this.editorContentRef = React.createRef()
+    this.initialized = false
 
     this.state = {
-      renderers: new Map(),
+      renderers: {},
     }
   }
 
@@ -64,9 +64,46 @@ export class PureEditorContent extends React.Component<EditorContentProps, Edito
       editor.contentComponent = this
 
       editor.createNodeViews()
+
+      this.initialized = true
+    }
+  }
+
+  maybeFlushSync(fn: () => void) {
+    // Avoid calling flushSync until the editor is initialized.
+    // Initialization happens during the componentDidMount or componentDidUpdate
+    // lifecycle methods, and React doesn't allow calling flushSync from inside
+    // a lifecycle method.
+    if (this.initialized) {
+      flushSync(fn)
+    } else {
+      fn()
     }
   }
 
+  setRenderer(id: string, renderer: ReactRenderer) {
+    this.maybeFlushSync(() => {
+      this.setState(({ renderers }) => ({
+        renderers: {
+          ...renderers,
+          [id]: renderer,
+        },
+      }))
+    })
+  }
+
+  removeRenderer(id: string) {
+    this.maybeFlushSync(() => {
+      this.setState(({ renderers }) => {
+        const nextRenderers = { ...renderers }
+
+        delete nextRenderers[id]
+
+        return { renderers: nextRenderers }
+      })
+    })
+  }
+
   componentWillUnmount() {
     const { editor } = this.props
 
@@ -74,6 +111,8 @@ export class PureEditorContent extends React.Component<EditorContentProps, Edito
       return
     }
 
+    this.initialized = false
+
     if (!editor.isDestroyed) {
       editor.view.setProps({
         nodeViews: {},
@@ -101,6 +140,7 @@ export class PureEditorContent extends React.Component<EditorContentProps, Edito
     return (
       <>
         <div ref={this.editorContentRef} {...rest} />
+        {/* @ts-ignore */}
         <Portals renderers={this.state.renderers} />
       </>
     )

package/src/FloatingMenu.tsx

@@ -1,17 +1,24 @@
-import React, { useEffect, useRef } from 'react'
 import { FloatingMenuPlugin, FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'
+import React, {
+  useEffect, useState,
+} from 'react'
 
 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(() => {
-    if (!element.current) {
+    if (!element) {
+      return
+    }
+
+    if (props.editor.isDestroyed) {
       return
     }
 
@@ -22,24 +29,23 @@ export const FloatingMenu: React.FC<FloatingMenuProps> = props => {
       shouldShow = null,
     } = props
 
-    editor.registerPlugin(FloatingMenuPlugin({
+    const plugin = FloatingMenuPlugin({
       pluginKey,
       editor,
-      element: element.current as HTMLElement,
+      element,
       tippyOptions,
       shouldShow,
-    }))
+    })
 
-    return () => {
-      editor.unregisterPlugin(pluginKey)
-    }
+    editor.registerPlugin(plugin)
+    return () => editor.unregisterPlugin(pluginKey)
   }, [
     props.editor,
-    element.current,
+    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,4 +1,5 @@
 import React from 'react'
+
 import { useReactNodeView } from './useReactNodeView'
 
 export interface NodeViewContentProps {
@@ -16,8 +17,8 @@ export const NodeViewContent: React.FC<NodeViewContentProps> = props => {
       ref={nodeViewContentRef}
       data-node-view-content=""
       style={{
-        ...props.style,
         whiteSpace: 'pre-wrap',
+        ...props.style,
       }}
     />
   )

package/src/NodeViewWrapper.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import { useReactNodeView } from './useReactNodeView'
 
 export interface NodeViewWrapperProps {
@@ -17,8 +18,8 @@ export const NodeViewWrapper: React.FC<NodeViewWrapperProps> = React.forwardRef(
       data-node-view-wrapper=""
       onDragStart={onDragStart}
       style={{
-        ...props.style,
         whiteSpace: 'normal',
+        ...props.style,
       }}
     />
   )

package/src/ReactNodeViewRenderer.tsx

@@ -1,30 +1,39 @@
-import React from 'react'
 import {
+  DecorationWithType,
   NodeView,
   NodeViewProps,
   NodeViewRenderer,
-  NodeViewRendererProps,
   NodeViewRendererOptions,
+  NodeViewRendererProps,
 } from '@tiptap/core'
-import { Decoration, NodeView as ProseMirrorNodeView } from 'prosemirror-view'
-import { Node as ProseMirrorNode } from 'prosemirror-model'
+import { Node as ProseMirrorNode } from '@tiptap/pm/model'
+import { Decoration, NodeView as ProseMirrorNodeView } from '@tiptap/pm/view'
+import React from 'react'
+
 import { Editor } from './Editor'
 import { ReactRenderer } from './ReactRenderer'
 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,
+  update:
+    | ((props: {
+        oldNode: ProseMirrorNode
+        oldDecorations: Decoration[]
+        newNode: ProseMirrorNode
+        newDecorations: Decoration[]
+        updateProps: () => void
+      }) => boolean)
+    | null
+  as?: string
+  className?: string
+  attrs?: Record<string, string>
 }
 
-class ReactNodeView extends NodeView<React.FunctionComponent, Editor, ReactNodeViewRendererOptions> {
-
+class ReactNodeView extends NodeView<
+  React.FunctionComponent,
+  Editor,
+  ReactNodeViewRendererOptions
+> {
   renderer!: ReactRenderer
 
   contentDOMElement!: HTMLElement | null
@@ -53,19 +62,19 @@ class ReactNodeView extends NodeView<React.FunctionComponent, Editor, ReactNodeV
       const Component = this.component
       const onDragStart = this.onDragStart.bind(this)
       const nodeViewContentRef: ReactNodeViewContextProps['nodeViewContentRef'] = element => {
-        if (
-          element
-          && this.contentDOMElement
-          && element.firstChild !== this.contentDOMElement
-        ) {
+        if (element && this.contentDOMElement && element.firstChild !== this.contentDOMElement) {
           element.appendChild(this.contentDOMElement)
         }
       }
 
       return (
-        <ReactNodeViewContext.Provider value={{ onDragStart, nodeViewContentRef }}>
-          <Component {...componentProps} />
-        </ReactNodeViewContext.Provider>
+        <>
+          {/* @ts-ignore */}
+          <ReactNodeViewContext.Provider value={{ onDragStart, nodeViewContentRef }}>
+            {/* @ts-ignore */}
+            <Component {...componentProps} />
+          </ReactNodeViewContext.Provider>
+        </>
       )
     }
 
@@ -88,11 +97,14 @@ class ReactNodeView extends NodeView<React.FunctionComponent, Editor, ReactNodeV
       as = this.options.as
     }
 
+    const { className = '' } = this.options
+
     this.renderer = new ReactRenderer(ReactNodeViewProvider, {
       editor: this.editor,
       props,
       as,
-      className: `node-${this.node.type.name}`,
+      className: `node-${this.node.type.name} ${className}`.trim(),
+      attrs: this.options.attrs,
     })
   }
 
@@ -104,7 +116,7 @@ class ReactNodeView extends NodeView<React.FunctionComponent, Editor, ReactNodeV
       throw Error('Please use the NodeViewWrapper component for your node view.')
     }
 
-    return this.renderer.element
+    return this.renderer.element as HTMLElement
   }
 
   get contentDOM() {
@@ -115,7 +127,7 @@ class ReactNodeView extends NodeView<React.FunctionComponent, Editor, ReactNodeV
     return this.contentDOMElement
   }
 
-  update(node: ProseMirrorNode, decorations: Decoration[]) {
+  update(node: ProseMirrorNode, decorations: DecorationWithType[]) {
     const updateProps = (props?: Record<string, any>) => {
       this.renderer.updateProps(props)
     }
@@ -170,7 +182,10 @@ class ReactNodeView extends NodeView<React.FunctionComponent, Editor, ReactNodeV
   }
 }
 
-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
@@ -179,6 +194,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,5 +1,6 @@
-import React from 'react'
 import { Editor } from '@tiptap/core'
+import React from 'react'
+
 import { Editor as ExtendedEditor } from './Editor'
 
 function isClassComponent(Component: any) {
@@ -22,14 +23,15 @@ export interface ReactRendererOptions {
   props?: Record<string, any>,
   as?: string,
   className?: string,
+  attrs?: Record<string, string>,
 }
 
-type ComponentType<R> =
-  | React.ComponentClass
-  | React.FunctionComponent
-  | React.ForwardRefExoticComponent<{ items: any[], command: any } & React.RefAttributes<R>>
+type ComponentType<R, P> =
+  React.ComponentClass<P> |
+  React.FunctionComponent<P> |
+  React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<R>>;
 
-export class ReactRenderer<R = unknown> {
+export class ReactRenderer<R = unknown, P = unknown> {
   id: string
 
   editor: ExtendedEditor
@@ -44,11 +46,12 @@ export class ReactRenderer<R = unknown> {
 
   ref: R | null = null
 
-  constructor(component: ComponentType<R>, {
+  constructor(component: ComponentType<R, P>, {
     editor,
     props = {},
     as = 'div',
     className = '',
+    attrs,
   }: ReactRendererOptions) {
     this.id = Math.floor(Math.random() * 0xFFFFFFFF).toString()
     this.component = component
@@ -61,6 +64,12 @@ export class ReactRenderer<R = unknown> {
       this.element.classList.add(...className.split(' '))
     }
 
+    if (attrs) {
+      Object.keys(attrs).forEach(key => {
+        this.element.setAttribute(key, attrs[key])
+      })
+    }
+
     this.render()
   }
 
@@ -76,14 +85,7 @@ export class ReactRenderer<R = unknown> {
 
     this.reactElement = <Component {...props } />
 
-    if (this.editor?.contentComponent) {
-      this.editor.contentComponent.setState({
-        renderers: this.editor.contentComponent.state.renderers.set(
-          this.id,
-          this,
-        ),
-      })
-    }
+    this.editor?.contentComponent?.setRenderer(this.id, this)
   }
 
   updateProps(props: Record<string, any> = {}): void {
@@ -96,14 +98,6 @@ export class ReactRenderer<R = unknown> {
   }
 
   destroy(): void {
-    if (this.editor?.contentComponent) {
-      const { renderers } = this.editor.contentComponent.state
-
-      renderers.delete(this.id)
-
-      this.editor.contentComponent.setState({
-        renderers,
-      })
-    }
+    this.editor?.contentComponent?.removeRenderer(this.id)
   }
 }

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'