@tiptap/react 2.5.9 → 2.6.0

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

@@ -1,23 +1,19 @@
 import React, { ForwardedRef, HTMLProps } from 'react';
 import { Editor } from './Editor.js';
-import { ReactRenderer } from './ReactRenderer.js';
 export interface EditorContentProps extends HTMLProps<HTMLDivElement> {
     editor: Editor | null;
     innerRef?: ForwardedRef<HTMLDivElement | null>;
 }
-export interface EditorContentState {
-    renderers: Record<string, ReactRenderer>;
-}
-export declare class PureEditorContent extends React.Component<EditorContentProps, EditorContentState> {
+export declare class PureEditorContent extends React.Component<EditorContentProps, {
+    hasContentComponentInitialized: boolean;
+}> {
     editorContentRef: React.RefObject<any>;
     initialized: boolean;
+    unsubscribeToContentComponent?: () => void;
     constructor(props: EditorContentProps);
     componentDidMount(): void;
     componentDidUpdate(): void;
     init(): void;
-    maybeFlushSync(fn: () => void): void;
-    setRenderer(id: string, renderer: ReactRenderer): void;
-    removeRenderer(id: string): void;
     componentWillUnmount(): void;
     render(): React.JSX.Element;
 }

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

@@ -1,6 +1,5 @@
-import { EditorOptions } from '@tiptap/core';
+import { type EditorOptions, Editor } from '@tiptap/core';
 import { DependencyList } from 'react';
-import { Editor } from './Editor.js';
 /**
  * The options for the `useEditor` hook.
  */

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

@@ -1,4 +1,4 @@
-import type { Editor } from './Editor.js';
+import type { Editor } from '@tiptap/core';
 export type EditorStateSnapshot<TEditor extends Editor | null = Editor | null> = {
     editor: TEditor;
     transactionNumber: number;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tiptap/react",
   "description": "React components for tiptap",
-  "version": "2.5.9",
+  "version": "2.6.0",
   "homepage": "https://tiptap.dev",
   "keywords": [
     "tiptap",
@@ -29,22 +29,22 @@
     "dist"
   ],
   "dependencies": {
-    "@tiptap/extension-bubble-menu": "^2.5.9",
-    "@tiptap/extension-floating-menu": "^2.5.9",
+    "@tiptap/extension-bubble-menu": "^2.6.0",
+    "@tiptap/extension-floating-menu": "^2.6.0",
     "@types/use-sync-external-store": "^0.0.6",
     "use-sync-external-store": "^1.2.2"
   },
   "devDependencies": {
-    "@tiptap/core": "^2.5.9",
-    "@tiptap/pm": "^2.5.9",
+    "@tiptap/core": "^2.6.0",
+    "@tiptap/pm": "^2.6.0",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
   "peerDependencies": {
-    "@tiptap/core": "^2.5.9",
-    "@tiptap/pm": "^2.5.9",
+    "@tiptap/core": "^2.6.0",
+    "@tiptap/pm": "^2.6.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   },

package/src/Context.tsx

@@ -1,6 +1,7 @@
+import { Editor } from '@tiptap/core'
 import React, { createContext, ReactNode, useContext } from 'react'
 
-import { Editor } from './Editor.js'
+import { Editor as ReactEditor } from './Editor.js'
 import { EditorContent } from './EditorContent.js'
 import { useEditor, UseEditorOptions } from './useEditor.js'
 
@@ -44,7 +45,7 @@ export function EditorProvider({
       {slotBefore}
       <EditorConsumer>
         {({ editor: currentEditor }) => (
-          <EditorContent editor={currentEditor} />
+          <EditorContent editor={currentEditor as ReactEditor} />
         )}
       </EditorConsumer>
       {children}

package/src/Editor.ts

@@ -1,12 +1,14 @@
 import { Editor as CoreEditor } from '@tiptap/core'
 import React from 'react'
 
-import { EditorContentProps, EditorContentState } from './EditorContent.js'
 import { ReactRenderer } from './ReactRenderer.js'
 
-type ContentComponent = React.Component<EditorContentProps, EditorContentState> & {
+type ContentComponent = {
   setRenderer(id: string, renderer: ReactRenderer): void;
   removeRenderer(id: string): void;
+  subscribe: (callback: () => void) => () => void;
+  getSnapshot: () => Record<string, React.ReactPortal>;
+  getServerSnapshot: () => Record<string, React.ReactPortal>;
 }
 
 export class Editor extends CoreEditor {

package/src/EditorContent.tsx

@@ -1,7 +1,8 @@
 import React, {
   ForwardedRef, forwardRef, HTMLProps, LegacyRef, MutableRefObject,
 } from 'react'
-import ReactDOM, { flushSync } from 'react-dom'
+import ReactDOM from 'react-dom'
+import { useSyncExternalStore } from 'use-sync-external-store/shim'
 
 import { Editor } from './Editor.js'
 import { ReactRenderer } from './ReactRenderer.js'
@@ -20,12 +21,23 @@ const mergeRefs = <T extends HTMLDivElement>(
   }
 }
 
-const Portals: React.FC<{ renderers: Record<string, ReactRenderer> }> = ({ renderers }) => {
+/**
+ * This component renders all of the editor's node views.
+ */
+const Portals: React.FC<{ contentComponent: Exclude<Editor['contentComponent'], null> }> = ({
+  contentComponent,
+}) => {
+  // For performance reasons, we render the node view portals on state changes only
+  const renderers = useSyncExternalStore(
+    contentComponent.subscribe,
+    contentComponent.getSnapshot,
+    contentComponent.getServerSnapshot,
+  )
+
+  // This allows us to directly render the portals without any additional wrapper
   return (
     <>
-      {Object.entries(renderers).map(([key, renderer]) => {
-        return ReactDOM.createPortal(renderer.reactElement, renderer.element, key)
-      })}
+      {Object.values(renderers)}
     </>
   )
 }
@@ -35,22 +47,67 @@ export interface EditorContentProps extends HTMLProps<HTMLDivElement> {
   innerRef?: ForwardedRef<HTMLDivElement | null>;
 }
 
-export interface EditorContentState {
-  renderers: Record<string, ReactRenderer>;
+function getInstance(): Exclude<Editor['contentComponent'], null> {
+  const subscribers = new Set<() => void>()
+  let renderers: Record<string, React.ReactPortal> = {}
+
+  return {
+    /**
+     * Subscribe to the editor instance's changes.
+     */
+    subscribe(callback: () => void) {
+      subscribers.add(callback)
+      return () => {
+        subscribers.delete(callback)
+      }
+    },
+    getSnapshot() {
+      return renderers
+    },
+    getServerSnapshot() {
+      return renderers
+    },
+    /**
+     * Adds a new NodeView Renderer to the editor.
+     */
+    setRenderer(id: string, renderer: ReactRenderer) {
+      renderers = {
+        ...renderers,
+        [id]: ReactDOM.createPortal(renderer.reactElement, renderer.element, id),
+      }
+
+      subscribers.forEach(subscriber => subscriber())
+    },
+    /**
+     * Removes a NodeView Renderer from the editor.
+     */
+    removeRenderer(id: string) {
+      const nextRenderers = { ...renderers }
+
+      delete nextRenderers[id]
+      renderers = nextRenderers
+      subscribers.forEach(subscriber => subscriber())
+    },
+  }
 }
 
-export class PureEditorContent extends React.Component<EditorContentProps, EditorContentState> {
+export class PureEditorContent extends React.Component<
+  EditorContentProps,
+  { hasContentComponentInitialized: boolean }
+> {
   editorContentRef: React.RefObject<any>
 
   initialized: boolean
 
+  unsubscribeToContentComponent?: () => void
+
   constructor(props: EditorContentProps) {
     super(props)
     this.editorContentRef = React.createRef()
     this.initialized = false
 
     this.state = {
-      renderers: {},
+      hasContentComponentInitialized: Boolean(props.editor?.contentComponent),
     }
   }
 
@@ -78,7 +135,27 @@ export class PureEditorContent extends React.Component<EditorContentProps, Edito
         element,
       })
 
-      editor.contentComponent = this
+      editor.contentComponent = getInstance()
+
+      // Has the content component been initialized?
+      if (!this.state.hasContentComponentInitialized) {
+        // Subscribe to the content component
+        this.unsubscribeToContentComponent = editor.contentComponent.subscribe(() => {
+          this.setState(prevState => {
+            if (!prevState.hasContentComponentInitialized) {
+              return {
+                hasContentComponentInitialized: true,
+              }
+            }
+            return prevState
+          })
+
+          // Unsubscribe to previous content component
+          if (this.unsubscribeToContentComponent) {
+            this.unsubscribeToContentComponent()
+          }
+        })
+      }
 
       editor.createNodeViews()
 
@@ -86,41 +163,6 @@ export class PureEditorContent extends React.Component<EditorContentProps, Edito
     }
   }
 
-  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
 
@@ -136,6 +178,10 @@ export class PureEditorContent extends React.Component<EditorContentProps, Edito
       })
     }
 
+    if (this.unsubscribeToContentComponent) {
+      this.unsubscribeToContentComponent()
+    }
+
     editor.contentComponent = null
 
     if (!editor.options.element.firstChild) {
@@ -158,7 +204,7 @@ export class PureEditorContent extends React.Component<EditorContentProps, Edito
       <>
         <div ref={mergeRefs(innerRef, this.editorContentRef)} {...rest} />
         {/* @ts-ignore */}
-        <Portals renderers={this.state.renderers} />
+        {editor?.contentComponent && <Portals contentComponent={editor.contentComponent} />}
       </>
     )
   }
@@ -168,7 +214,7 @@ export class PureEditorContent extends React.Component<EditorContentProps, Edito
 const EditorContentWithKey = forwardRef<HTMLDivElement, EditorContentProps>(
   (props: Omit<EditorContentProps, 'innerRef'>, ref) => {
     const key = React.useMemo(() => {
-      return Math.floor(Math.random() * 0xFFFFFFFF).toString()
+      return Math.floor(Math.random() * 0xffffffff).toString()
     }, [props.editor])
 
     // Can't use JSX here because it conflicts with the type definition of Vue's JSX, so use createElement

package/src/NodeViewWrapper.tsx

@@ -12,6 +12,7 @@ export const NodeViewWrapper: React.FC<NodeViewWrapperProps> = React.forwardRef(
   const Tag = props.as || 'div'
 
   return (
+    // @ts-ignore
     <Tag
       {...props}
       ref={ref}

package/src/ReactNodeViewRenderer.tsx

@@ -58,25 +58,23 @@ class ReactNodeView extends NodeView<
       this.component.displayName = capitalizeFirstChar(this.extension.name)
     }
 
-    const ReactNodeViewProvider: React.FunctionComponent = componentProps => {
-      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)
-        }
+    const onDragStart = this.onDragStart.bind(this)
+    const nodeViewContentRef: ReactNodeViewContextProps['nodeViewContentRef'] = element => {
+      if (element && this.contentDOMElement && element.firstChild !== this.contentDOMElement) {
+        element.appendChild(this.contentDOMElement)
       }
-
+    }
+    const context = { onDragStart, nodeViewContentRef }
+    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 = React.memo(componentProps => {
       return (
-        <>
-          {/* @ts-ignore */}
-          <ReactNodeViewContext.Provider value={{ onDragStart, nodeViewContentRef }}>
-            {/* @ts-ignore */}
-            <Component {...componentProps} />
-          </ReactNodeViewContext.Provider>
-        </>
+        <ReactNodeViewContext.Provider value={context}>
+          {React.createElement(Component, componentProps)}
+        </ReactNodeViewContext.Provider>
       )
-    }
+    })
 
     ReactNodeViewProvider.displayName = 'ReactNodeView'
 

package/src/ReactRenderer.tsx

@@ -1,5 +1,6 @@
 import { Editor } from '@tiptap/core'
 import React from 'react'
+import { flushSync } from 'react-dom'
 
 import { Editor as ExtendedEditor } from './Editor.js'
 
@@ -121,7 +122,15 @@ export class ReactRenderer<R = unknown, P = unknown> {
       })
     }
 
-    this.render()
+    if (this.editor.isInitialized) {
+      // On first render, we need to flush the render synchronously
+      // Renders afterwards can be async, but this fixes a cursor positioning issue
+      flushSync(() => {
+        this.render()
+      })
+    } else {
+      this.render()
+    }
   }
 
   render(): void {
@@ -134,7 +143,7 @@ export class ReactRenderer<R = unknown, P = unknown> {
       }
     }
 
-    this.reactElement = <Component {...props } />
+    this.reactElement = React.createElement(Component, props)
 
     this.editor?.contentComponent?.setRenderer(this.id, this)
   }

package/src/useEditor.ts

@@ -1,4 +1,4 @@
-import { EditorOptions } from '@tiptap/core'
+import { type EditorOptions, Editor } from '@tiptap/core'
 import {
   DependencyList,
   MutableRefObject,
@@ -9,7 +9,6 @@ import {
 } from 'react'
 import { useSyncExternalStore } from 'use-sync-external-store/shim'
 
-import { Editor } from './Editor.js'
 import { useEditorState } from './useEditorState.js'
 
 const isDev = process.env.NODE_ENV !== 'production'
@@ -137,18 +136,20 @@ class EditorInstanceManager {
    * Create a new editor instance. And attach event listeners.
    */
   private createEditor(): Editor {
-    const editor = new Editor(this.options.current)
-
-    // Always call the most recent version of the callback function by default
-    editor.on('beforeCreate', (...args) => this.options.current.onBeforeCreate?.(...args))
-    editor.on('blur', (...args) => this.options.current.onBlur?.(...args))
-    editor.on('create', (...args) => this.options.current.onCreate?.(...args))
-    editor.on('destroy', (...args) => this.options.current.onDestroy?.(...args))
-    editor.on('focus', (...args) => this.options.current.onFocus?.(...args))
-    editor.on('selectionUpdate', (...args) => this.options.current.onSelectionUpdate?.(...args))
-    editor.on('transaction', (...args) => this.options.current.onTransaction?.(...args))
-    editor.on('update', (...args) => this.options.current.onUpdate?.(...args))
-    editor.on('contentError', (...args) => this.options.current.onContentError?.(...args))
+    const optionsToApply: Partial<EditorOptions> = {
+      ...this.options.current,
+      // Always call the most recent version of the callback function by default
+      onBeforeCreate: (...args) => this.options.current.onBeforeCreate?.(...args),
+      onBlur: (...args) => this.options.current.onBlur?.(...args),
+      onCreate: (...args) => this.options.current.onCreate?.(...args),
+      onDestroy: (...args) => this.options.current.onDestroy?.(...args),
+      onFocus: (...args) => this.options.current.onFocus?.(...args),
+      onSelectionUpdate: (...args) => this.options.current.onSelectionUpdate?.(...args),
+      onTransaction: (...args) => this.options.current.onTransaction?.(...args),
+      onUpdate: (...args) => this.options.current.onUpdate?.(...args),
+      onContentError: (...args) => this.options.current.onContentError?.(...args),
+    }
+    const editor = new Editor(optionsToApply)
 
     // no need to keep track of the event listeners, they will be removed when the editor is destroyed
 
@@ -216,7 +217,6 @@ class EditorInstanceManager {
    * Recreate the editor instance if the dependencies have changed.
    */
   private refreshEditorInstance(deps: DependencyList) {
-
     if (this.editor && !this.editor.isDestroyed) {
       // Editor instance already exists
       if (this.previousDeps === null) {

package/src/useEditorState.ts

@@ -1,8 +1,7 @@
+import type { Editor } from '@tiptap/core'
 import { useDebugValue, useEffect, useState } from 'react'
 import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector'
 
-import type { Editor } from './Editor.js'
-
 export type EditorStateSnapshot<TEditor extends Editor | null = Editor | null> = {
   editor: TEditor;
   transactionNumber: number;