@tiptap/react 3.0.0-next.3 → 3.0.0-next.4

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/react",
   "description": "React components for tiptap",
-  "version": "3.0.0-next.3",
+  "version": "3.0.0-next.4",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -14,7 +14,10 @@
   },
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
+      "types": {
+        "import": "./dist/index.d.ts",
+        "require": "./dist/index.d.cts"
+      },
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     }
@@ -28,19 +31,19 @@
     "dist"
   ],
   "dependencies": {
-    "@tiptap/extension-bubble-menu": "^3.0.0-next.3",
-    "@tiptap/extension-floating-menu": "^3.0.0-next.3",
+    "@tiptap/extension-bubble-menu": "^3.0.0-next.4",
+    "@tiptap/extension-floating-menu": "^3.0.0-next.4",
     "@types/use-sync-external-store": "^0.0.6",
-    "fast-deep-equal": "^3",
-    "use-sync-external-store": "^1"
+    "fast-deep-equal": "^3.1.3",
+    "use-sync-external-store": "^1.4.0"
   },
   "devDependencies": {
-    "@tiptap/core": "^3.0.0-next.3",
-    "@tiptap/pm": "^3.0.0-next.3",
-    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.6",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "@tiptap/core": "^3.0.0-next.4",
+    "@tiptap/pm": "^3.0.0-next.4",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "peerDependencies": {
     "@tiptap/core": "^3.0.0-next.1",
@@ -55,6 +58,7 @@
   },
   "sideEffects": false,
   "scripts": {
-    "build": "tsup"
+    "build": "tsup",
+    "lint": "prettier ./src/ --check && eslint --cache --quiet --no-error-on-unmatched-pattern ./src/"
   }
-}
+}

package/src/BubbleMenu.tsx

@@ -1,33 +1,17 @@
-import { BubbleMenuPlugin, BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu'
+import { type BubbleMenuPluginProps, BubbleMenuPlugin } from '@tiptap/extension-bubble-menu'
 import React, { useEffect, useRef } from 'react'
 import { createPortal } from 'react-dom'
 
 import { useCurrentEditor } from './Context.js'
 
-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' | 'editor'
-> & {
-  editor: BubbleMenuPluginProps['editor'] | null;
-  updateDelay?: number;
-  resizeDelay?: number;
-  options?: BubbleMenuPluginProps['options'];
-} & React.HTMLAttributes<HTMLDivElement>;
+export type BubbleMenuProps = Optional<Omit<Optional<BubbleMenuPluginProps, 'pluginKey'>, 'element'>, 'editor'> &
+  React.HTMLAttributes<HTMLDivElement>
 
 export const BubbleMenu = React.forwardRef<HTMLDivElement, BubbleMenuProps>(
   (
-    {
-      pluginKey = 'bubbleMenu',
-      editor,
-      updateDelay,
-      resizeDelay,
-      shouldShow = null,
-      options,
-      children,
-      ...restProps
-    },
+    { pluginKey = 'bubbleMenu', editor, updateDelay, resizeDelay, shouldShow = null, options, children, ...restProps },
     ref,
   ) => {
     const menuEl = useRef(document.createElement('div'))
@@ -53,9 +37,7 @@ export const BubbleMenu = React.forwardRef<HTMLDivElement, BubbleMenuProps>(
       const attachToEditor = editor || currentEditor
 
       if (!attachToEditor) {
-        console.warn(
-          'BubbleMenu component is not rendered inside of an editor component or does not have editor prop.',
-        )
+        console.warn('BubbleMenu component is not rendered inside of an editor component or does not have editor prop.')
         return
       }
 
@@ -82,13 +64,6 @@ export const BubbleMenu = React.forwardRef<HTMLDivElement, BubbleMenuProps>(
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [editor, currentEditor])
 
-    return createPortal(
-      <div
-        {...restProps}
-      >
-        {children}
-      </div>,
-      menuEl.current,
-    )
+    return createPortal(<div {...restProps}>{children}</div>, menuEl.current)
   },
 )

package/src/Context.tsx

@@ -1,14 +1,12 @@
 import { Editor } from '@tiptap/core'
-import React, {
-  createContext, HTMLAttributes, ReactNode, useContext, useMemo,
-} from 'react'
+import React, { createContext, HTMLAttributes, ReactNode, useContext, useMemo } from 'react'
 
 import { EditorContent } from './EditorContent.js'
 import { useEditor, UseEditorOptions } from './useEditor.js'
 
 export type EditorContextValue = {
-  editor: Editor | null;
-};
+  editor: Editor | null
+}
 
 export const EditorContext = createContext<EditorContextValue>({
   editor: null,
@@ -22,11 +20,11 @@ export const EditorConsumer = EditorContext.Consumer
 export const useCurrentEditor = () => useContext(EditorContext)
 
 export type EditorProviderProps = {
-  children?: ReactNode;
-  slotBefore?: ReactNode;
-  slotAfter?: ReactNode;
-  editorContainerProps?: HTMLAttributes<HTMLDivElement>;
-} & UseEditorOptions;
+  children?: ReactNode
+  slotBefore?: ReactNode
+  slotAfter?: ReactNode
+  editorContainerProps?: HTMLAttributes<HTMLDivElement>
+} & UseEditorOptions
 
 /**
  * This is the provider component for the editor.
@@ -51,9 +49,7 @@ export function EditorProvider({
     <EditorContext.Provider value={contextValue}>
       {slotBefore}
       <EditorConsumer>
-        {({ editor: currentEditor }) => (
-          <EditorContent editor={currentEditor} {...editorContainerProps} />
-        )}
+        {({ editor: currentEditor }) => <EditorContent editor={currentEditor} {...editorContainerProps} />}
       </EditorConsumer>
       {children}
       {slotAfter}

package/src/Editor.ts

@@ -5,9 +5,9 @@ import { ReactRenderer } from './ReactRenderer.js'
 
 export type EditorWithContentComponent = Editor & { contentComponent?: ContentComponent | null }
 export type ContentComponent = {
-  setRenderer(id: string, renderer: ReactRenderer): void;
-  removeRenderer(id: string): void;
-  subscribe: (callback: () => void) => () => void;
-  getSnapshot: () => Record<string, ReactPortal>;
-  getServerSnapshot: () => Record<string, ReactPortal>;
+  setRenderer(id: string, renderer: ReactRenderer): void
+  removeRenderer(id: string): void
+  subscribe: (callback: () => void) => () => void
+  getSnapshot: () => Record<string, ReactPortal>
+  getServerSnapshot: () => Record<string, ReactPortal>
 }

package/src/EditorContent.tsx

@@ -1,22 +1,18 @@
 import { Editor } from '@tiptap/core'
-import React, {
-  ForwardedRef, forwardRef, HTMLProps, LegacyRef, MutableRefObject,
-} from 'react'
+import React, { ForwardedRef, forwardRef, HTMLProps, LegacyRef, MutableRefObject } from 'react'
 import ReactDOM from 'react-dom'
 import { useSyncExternalStore } from 'use-sync-external-store/shim'
 
 import { ContentComponent, EditorWithContentComponent } from './Editor.js'
 import { ReactRenderer } from './ReactRenderer.js'
 
-const mergeRefs = <T extends HTMLDivElement>(
-  ...refs: Array<MutableRefObject<T> | LegacyRef<T> | undefined>
-) => {
+const mergeRefs = <T extends HTMLDivElement>(...refs: Array<MutableRefObject<T> | LegacyRef<T> | undefined>) => {
   return (node: T) => {
     refs.forEach(ref => {
       if (typeof ref === 'function') {
         ref(node)
       } else if (ref) {
-        (ref as MutableRefObject<T | null>).current = node
+        ;(ref as MutableRefObject<T | null>).current = node
       }
     })
   }
@@ -25,9 +21,7 @@ const mergeRefs = <T extends HTMLDivElement>(
 /**
  * This component renders all of the editor's node views.
  */
-const Portals: React.FC<{ contentComponent: ContentComponent }> = ({
-  contentComponent,
-}) => {
+const Portals: React.FC<{ contentComponent: ContentComponent }> = ({ contentComponent }) => {
   // For performance reasons, we render the node view portals on state changes only
   const renderers = useSyncExternalStore(
     contentComponent.subscribe,
@@ -36,16 +30,12 @@ const Portals: React.FC<{ contentComponent: ContentComponent }> = ({
   )
 
   // This allows us to directly render the portals without any additional wrapper
-  return (
-    <>
-      {Object.values(renderers)}
-    </>
-  )
+  return <>{Object.values(renderers)}</>
 }
 
 export interface EditorContentProps extends HTMLProps<HTMLDivElement> {
-  editor: Editor | null;
-  innerRef?: ForwardedRef<HTMLDivElement | null>;
+  editor: Editor | null
+  innerRef?: ForwardedRef<HTMLDivElement | null>
 }
 
 function getInstance(): ContentComponent {
@@ -216,7 +206,7 @@ const EditorContentWithKey = forwardRef<HTMLDivElement, EditorContentProps>(
   (props: Omit<EditorContentProps, 'innerRef'>, ref) => {
     const key = React.useMemo(() => {
       return Math.floor(Math.random() * 0xffffffff).toString()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+      // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.editor])
 
     // Can't use JSX here because it conflicts with the type definition of Vue's JSX, so use createElement

package/src/FloatingMenu.tsx

@@ -4,80 +4,65 @@ import { createPortal } from 'react-dom'
 
 import { useCurrentEditor } from './Context.js'
 
-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 FloatingMenuProps = Omit<
-  Optional<FloatingMenuPluginProps, 'pluginKey'>,
-  'element' | 'editor'
-> & {
-  editor: FloatingMenuPluginProps['editor'] | null;
-  options?: FloatingMenuPluginProps['options'];
-} & React.HTMLAttributes<HTMLDivElement>;
+export type FloatingMenuProps = Omit<Optional<FloatingMenuPluginProps, 'pluginKey'>, 'element' | 'editor'> & {
+  editor: FloatingMenuPluginProps['editor'] | null
+  options?: FloatingMenuPluginProps['options']
+} & React.HTMLAttributes<HTMLDivElement>
 
-export const FloatingMenu = React.forwardRef<HTMLDivElement, FloatingMenuProps>(({
-  pluginKey = 'floatingMenu',
-  editor,
-  shouldShow = null,
-  options,
-  children,
-  ...restProps
-}, ref) => {
-  const menuEl = useRef(document.createElement('div'))
+export const FloatingMenu = React.forwardRef<HTMLDivElement, FloatingMenuProps>(
+  ({ pluginKey = 'floatingMenu', editor, shouldShow = null, options, children, ...restProps }, ref) => {
+    const menuEl = useRef(document.createElement('div'))
 
-  if (typeof ref === 'function') {
-    ref(menuEl.current)
-  } else if (ref) {
-    ref.current = menuEl.current
-  }
+    if (typeof ref === 'function') {
+      ref(menuEl.current)
+    } else if (ref) {
+      ref.current = menuEl.current
+    }
 
-  const { editor: currentEditor } = useCurrentEditor()
+    const { editor: currentEditor } = useCurrentEditor()
 
-  useEffect(() => {
-    const floatingMenuElement = menuEl.current
+    useEffect(() => {
+      const floatingMenuElement = menuEl.current
 
-    floatingMenuElement.style.visibility = 'hidden'
-    floatingMenuElement.style.position = 'absolute'
+      floatingMenuElement.style.visibility = 'hidden'
+      floatingMenuElement.style.position = 'absolute'
 
-    if (editor?.isDestroyed || currentEditor?.isDestroyed) {
-      return
-    }
+      if (editor?.isDestroyed || currentEditor?.isDestroyed) {
+        return
+      }
 
-    const attachToEditor = editor || currentEditor
+      const attachToEditor = editor || currentEditor
 
-    if (!attachToEditor) {
-      console.warn(
-        'FloatingMenu component is not rendered inside of an editor component or does not have editor prop.',
-      )
-      return
-    }
+      if (!attachToEditor) {
+        console.warn(
+          'FloatingMenu component is not rendered inside of an editor component or does not have editor prop.',
+        )
+        return
+      }
 
-    const plugin = FloatingMenuPlugin({
-      editor: attachToEditor,
-      element: floatingMenuElement,
-      pluginKey,
-      shouldShow,
-      options,
-    })
+      const plugin = FloatingMenuPlugin({
+        editor: attachToEditor,
+        element: floatingMenuElement,
+        pluginKey,
+        shouldShow,
+        options,
+      })
 
-    attachToEditor.registerPlugin(plugin)
+      attachToEditor.registerPlugin(plugin)
 
-    return () => {
-      attachToEditor.unregisterPlugin(pluginKey)
-      window.requestAnimationFrame(() => {
-        if (floatingMenuElement.parentNode) {
-          floatingMenuElement.parentNode.removeChild(floatingMenuElement)
-        }
-      })
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [editor, currentEditor])
+      return () => {
+        attachToEditor.unregisterPlugin(pluginKey)
+        window.requestAnimationFrame(() => {
+          if (floatingMenuElement.parentNode) {
+            floatingMenuElement.parentNode.removeChild(floatingMenuElement)
+          }
+        })
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [editor, currentEditor])
 
-  return createPortal(
-    <div
-      {...restProps}
-    >
-      {children}
-    </div>,
-    menuEl.current,
-  )
-})
+    return createPortal(<div {...restProps}>{children}</div>, menuEl.current)
+  },
+)

package/src/NodeViewContent.tsx

@@ -1,15 +1,16 @@
-import React from 'react'
+import React, { ComponentProps } from 'react'
 
 import { useReactNodeView } from './useReactNodeView.js'
 
-export interface NodeViewContentProps {
-  [key: string]: any,
-  as?: React.ElementType,
-}
+export type NodeViewContentProps<T extends keyof React.JSX.IntrinsicElements = 'div'> = {
+  as?: NoInfer<T>
+} & ComponentProps<T>
 
-export const NodeViewContent: React.FC<NodeViewContentProps> = props => {
-  const Tag = props.as || 'div'
-  const { nodeViewContentRef } = useReactNodeView()
+export function NodeViewContent<T extends keyof React.JSX.IntrinsicElements = 'div'>({
+  as: Tag = 'div' as T,
+  ...props
+}: NodeViewContentProps<T>) {
+  const { nodeViewContentRef, nodeViewContentChildren } = useReactNodeView()
 
   return (
     // @ts-ignore
@@ -21,6 +22,8 @@ export const NodeViewContent: React.FC<NodeViewContentProps> = props => {
         whiteSpace: 'pre-wrap',
         ...props.style,
       }}
-    />
+    >
+      {nodeViewContentChildren}
+    </Tag>
   )
 }

package/src/NodeViewWrapper.tsx

@@ -3,8 +3,8 @@ import React from 'react'
 import { useReactNodeView } from './useReactNodeView.js'
 
 export interface NodeViewWrapperProps {
-  [key: string]: any,
-  as?: React.ElementType,
+  [key: string]: any
+  as?: React.ElementType
 }
 
 export const NodeViewWrapper: React.FC<NodeViewWrapperProps> = React.forwardRef((props, ref) => {

package/src/ReactNodeViewRenderer.tsx

@@ -22,23 +22,23 @@ export interface ReactNodeViewRendererOptions extends NodeViewRendererOptions {
    */
   update:
     | ((props: {
-        oldNode: ProseMirrorNode;
-        oldDecorations: readonly Decoration[];
-        oldInnerDecorations: DecorationSource;
-        newNode: ProseMirrorNode;
-        newDecorations: readonly Decoration[];
-        innerDecorations: DecorationSource;
-        updateProps: () => void;
+        oldNode: ProseMirrorNode
+        oldDecorations: readonly Decoration[]
+        oldInnerDecorations: DecorationSource
+        newNode: ProseMirrorNode
+        newDecorations: readonly Decoration[]
+        innerDecorations: DecorationSource
+        updateProps: () => void
       }) => boolean)
-    | null;
+    | null
   /**
    * The tag name of the element wrapping the React component.
    */
-  as?: string;
+  as?: string
   /**
    * The class name of the element wrapping the React component.
    */
-  className?: string;
+  className?: string
   /**
    * Attributes that should be applied to the element wrapping the React component.
    * If this is a function, it will be called each time the node view is updated.
@@ -46,10 +46,7 @@ export interface ReactNodeViewRendererOptions extends NodeViewRendererOptions {
    */
   attrs?:
     | Record<string, string>
-    | ((props: {
-        node: ProseMirrorNode;
-        HTMLAttributes: Record<string, any>;
-      }) => Record<string, string>);
+    | ((props: { node: ProseMirrorNode; HTMLAttributes: Record<string, any> }) => Record<string, string>)
 }
 
 export class ReactNodeView<
@@ -104,15 +101,13 @@ export class ReactNodeView<
     const Component = this.component
     // For performance reasons, we memoize the provider component
     // And all of the things it requires are declared outside of the component, so it doesn't need to re-render
-    const ReactNodeViewProvider: React.FunctionComponent<NodeViewProps> = React.memo(
-      componentProps => {
-        return (
-          <ReactNodeViewContext.Provider value={context}>
-            {React.createElement(Component, componentProps)}
-          </ReactNodeViewContext.Provider>
-        )
-      },
-    )
+    const ReactNodeViewProvider: React.FunctionComponent<NodeViewProps> = React.memo(componentProps => {
+      return (
+        <ReactNodeViewContext.Provider value={context}>
+          {React.createElement(Component, componentProps)}
+        </ReactNodeViewContext.Provider>
+      )
+    })
 
     ReactNodeViewProvider.displayName = 'ReactNodeView'
 
@@ -159,8 +154,8 @@ export class ReactNodeView<
    */
   get dom() {
     if (
-      this.renderer.element.firstElementChild
-      && !this.renderer.element.firstElementChild?.hasAttribute('data-node-view-wrapper')
+      this.renderer.element.firstElementChild &&
+      !this.renderer.element.firstElementChild?.hasAttribute('data-node-view-wrapper')
     ) {
       throw Error('Please use the NodeViewWrapper component for your node view.')
     }
@@ -211,11 +206,7 @@ export class ReactNodeView<
    * On update, update the React component.
    * To prevent unnecessary updates, the `update` option can be used.
    */
-  update(
-    node: Node,
-    decorations: readonly Decoration[],
-    innerDecorations: DecorationSource,
-  ): boolean {
+  update(node: Node, decorations: readonly Decoration[], innerDecorations: DecorationSource): boolean {
     const rerenderComponent = (props?: Record<string, any>) => {
       this.renderer.updateProps(props)
       if (typeof this.options.attrs === 'function') {
@@ -247,11 +238,7 @@ export class ReactNodeView<
       })
     }
 
-    if (
-      node === this.node
-      && this.decorations === decorations
-      && this.innerDecorations === innerDecorations
-    ) {
+    if (node === this.node && this.decorations === decorations && this.innerDecorations === innerDecorations) {
       return true
     }
 

package/src/ReactRenderer.tsx

@@ -10,11 +10,7 @@ import { EditorWithContentComponent } from './Editor.js'
  * @returns {boolean}
  */
 function isClassComponent(Component: any) {
-  return !!(
-    typeof Component === 'function'
-    && Component.prototype
-    && Component.prototype.isReactComponent
-  )
+  return !!(typeof Component === 'function' && Component.prototype && Component.prototype.isReactComponent)
 }
 
 /**
@@ -23,10 +19,7 @@ function isClassComponent(Component: any) {
  * @returns {boolean}
  */
 function isForwardRefComponent(Component: any) {
-  return !!(
-    typeof Component === 'object'
-    && Component.$$typeof?.toString() === 'Symbol(react.forward_ref)'
-  )
+  return !!(typeof Component === 'object' && Component.$$typeof?.toString() === 'Symbol(react.forward_ref)')
 }
 
 export interface ReactRendererOptions {
@@ -34,21 +27,21 @@ export interface ReactRendererOptions {
    * The editor instance.
    * @type {Editor}
    */
-  editor: Editor,
+  editor: Editor
 
   /**
    * The props for the component.
    * @type {Record<string, any>}
    * @default {}
    */
-  props?: Record<string, any>,
+  props?: Record<string, any>
 
   /**
    * The tag name of the element.
    * @type {string}
    * @default 'div'
    */
-  as?: string,
+  as?: string
 
   /**
    * The class name of the element.
@@ -56,13 +49,13 @@ export interface ReactRendererOptions {
    * @default ''
    * @example 'foo bar'
    */
-  className?: string,
+  className?: string
 }
 
 type ComponentType<R, P> =
-  React.ComponentClass<P> |
-  React.FunctionComponent<P> |
-  React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<R>>;
+  | React.ComponentClass<P>
+  | React.FunctionComponent<P>
+  | React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<R>>
 
 /**
  * The ReactRenderer class. It's responsible for rendering React components inside the editor.
@@ -74,8 +67,8 @@ type ComponentType<R, P> =
  *   },
  *   as: 'span',
  * })
-*/
-export class ReactRenderer<R = unknown, P extends Record<string, any> = {}> {
+ */
+export class ReactRenderer<R = unknown, P extends Record<string, any> = object> {
   id: string
 
   editor: Editor
@@ -93,13 +86,11 @@ export class ReactRenderer<R = unknown, P extends Record<string, any> = {}> {
   /**
    * Immediately creates element and renders the provided React component.
    */
-  constructor(component: ComponentType<R, P>, {
-    editor,
-    props = {},
-    as = 'div',
-    className = '',
-  }: ReactRendererOptions) {
-    this.id = Math.floor(Math.random() * 0xFFFFFFFF).toString()
+  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 as EditorWithContentComponent
     this.props = props as P