@tiptap/react 3.0.0-next.1 → 3.0.0-next.2

package/src/FloatingMenu.tsx

@@ -1,77 +1,83 @@
 import { FloatingMenuPlugin, FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'
-import React, {
-  useEffect, useRef,
-} from 'react'
+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 FloatingMenuProps = Omit<Optional<FloatingMenuPluginProps, 'pluginKey'>, 'element' | 'editor'> & {
+export type FloatingMenuProps = Omit<
+  Optional<FloatingMenuPluginProps, 'pluginKey'>,
+  'element' | 'editor'
+> & {
   editor: FloatingMenuPluginProps['editor'] | null;
-  className?: string,
-  children: React.ReactNode
-  options?: FloatingMenuPluginProps['options']
-}
+  options?: FloatingMenuPluginProps['options'];
+} & React.HTMLAttributes<HTMLDivElement>;
 
-export const FloatingMenu = (props: FloatingMenuProps) => {
+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
+  }
+
   const { editor: currentEditor } = useCurrentEditor()
 
   useEffect(() => {
-    menuEl.current.style.visibility = 'hidden'
-    menuEl.current.style.position = 'absolute'
+    const floatingMenuElement = menuEl.current
+
+    floatingMenuElement.style.visibility = 'hidden'
+    floatingMenuElement.style.position = 'absolute'
 
-    if (props.editor?.isDestroyed || currentEditor?.isDestroyed) {
+    if (editor?.isDestroyed || currentEditor?.isDestroyed) {
       return
     }
 
-    const {
-      pluginKey = 'floatingMenu',
-      editor,
-      options,
-      shouldShow = null,
-    } = props
-
-    const menuEditor = editor || currentEditor
+    const attachToEditor = editor || currentEditor
 
-    if (!menuEditor) {
-      console.warn('FloatingMenu component is not rendered inside of an editor component or does not have editor prop.')
+    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,
-      editor: menuEditor,
-      element: menuEl.current,
-      options,
       shouldShow,
+      options,
     })
 
-    menuEditor.registerPlugin(plugin)
+    attachToEditor.registerPlugin(plugin)
+
     return () => {
-      menuEditor.unregisterPlugin(pluginKey)
+      attachToEditor.unregisterPlugin(pluginKey)
       window.requestAnimationFrame(() => {
-        if (menuEl.current.parentNode) {
-          menuEl.current.parentNode.removeChild(menuEl.current)
+        if (floatingMenuElement.parentNode) {
+          floatingMenuElement.parentNode.removeChild(floatingMenuElement)
         }
       })
     }
-  }, [
-    props.editor,
-    currentEditor,
-  ])
-
-  const portal = createPortal(
-    (
-    <div className={props.className}>
-      {props.children}
-    </div>
-    ), menuEl.current,
-  )
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editor, currentEditor])
 
-  return (
-    <>{portal}</>
+  return createPortal(
+    <div
+      {...restProps}
+    >
+      {children}
+    </div>,
+    menuEl.current,
   )
-}
+})

package/src/ReactNodeViewRenderer.tsx

@@ -1,55 +1,90 @@
 import {
   DecorationWithType,
   Editor,
+  getRenderedAttributes,
   NodeView,
   NodeViewProps,
   NodeViewRenderer,
   NodeViewRendererOptions,
-  NodeViewRendererProps,
 } from '@tiptap/core'
-import { Node as ProseMirrorNode } from '@tiptap/pm/model'
-import { Decoration, NodeView as ProseMirrorNodeView } from '@tiptap/pm/view'
-import React from 'react'
+import { Node, Node as ProseMirrorNode } from '@tiptap/pm/model'
+import { Decoration, DecorationSource, NodeView as ProseMirrorNodeView } from '@tiptap/pm/view'
+import React, { ComponentType } from 'react'
 
 import { EditorWithContentComponent } from './Editor.js'
 import { ReactRenderer } from './ReactRenderer.js'
 import { ReactNodeViewContext, ReactNodeViewContextProps } from './useReactNodeView.js'
 
 export interface ReactNodeViewRendererOptions extends NodeViewRendererOptions {
+  /**
+   * This function is called when the node view is updated.
+   * It allows you to compare the old node with the new node and decide if the component should update.
+   */
   update:
     | ((props: {
-        oldNode: ProseMirrorNode
-        oldDecorations: Decoration[]
-        newNode: ProseMirrorNode
-        newDecorations: Decoration[]
-        updateProps: () => void
+        oldNode: ProseMirrorNode;
+        oldDecorations: readonly Decoration[];
+        oldInnerDecorations: DecorationSource;
+        newNode: ProseMirrorNode;
+        newDecorations: readonly Decoration[];
+        innerDecorations: DecorationSource;
+        updateProps: () => void;
       }) => boolean)
-    | null
-  as?: string
-  className?: string
-  attrs?: Record<string, string>
+    | null;
+  /**
+   * The tag name of the element wrapping the React component.
+   */
+  as?: string;
+  /**
+   * The class name of the element wrapping the React component.
+   */
+  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.
+   * If this is an object, it will be applied once when the node view is mounted.
+   */
+  attrs?:
+    | Record<string, string>
+    | ((props: {
+        node: ProseMirrorNode;
+        HTMLAttributes: Record<string, any>;
+      }) => Record<string, string>);
 }
 
-class ReactNodeView extends NodeView<
-  React.FunctionComponent,
-  Editor,
-  ReactNodeViewRendererOptions
-> {
-  renderer!: ReactRenderer
-
+export class ReactNodeView<
+  Component extends ComponentType<NodeViewProps> = ComponentType<NodeViewProps>,
+  NodeEditor extends Editor = Editor,
+  Options extends ReactNodeViewRendererOptions = ReactNodeViewRendererOptions,
+> extends NodeView<Component, NodeEditor, Options> {
+  /**
+   * The renderer instance.
+   */
+  renderer!: ReactRenderer<unknown, NodeViewProps>
+
+  /**
+   * The element that holds the rich-text content of the node.
+   */
   contentDOMElement!: HTMLElement | null
 
+  /**
+   * Setup the React component.
+   * Called on initialization.
+   */
   mount() {
-    const props: NodeViewProps = {
+    const props = {
       editor: this.editor,
       node: this.node,
-      decorations: this.decorations,
+      decorations: this.decorations as DecorationWithType[],
+      innerDecorations: this.innerDecorations,
+      view: this.view,
       selected: false,
       extension: this.extension,
+      HTMLAttributes: this.HTMLAttributes,
       getPos: () => this.getPos(),
       updateAttributes: (attributes = {}) => this.updateAttributes(attributes),
       deleteNode: () => this.deleteNode(),
-    }
+    } satisfies NodeViewProps
 
     if (!(this.component as any).displayName) {
       const capitalizeFirstChar = (string: string): string => {
@@ -69,13 +104,15 @@ class ReactNodeView extends NodeView<
     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 (
-        <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'
 
@@ -88,6 +125,7 @@ class ReactNodeView extends NodeView<
     }
 
     if (this.contentDOMElement) {
+      this.contentDOMElement.dataset.nodeViewContentReact = ''
       // 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
@@ -110,10 +148,15 @@ class ReactNodeView extends NodeView<
       props,
       as,
       className: `node-${this.node.type.name} ${className}`.trim(),
-      attrs: this.options.attrs,
     })
+
+    this.updateElementAttributes()
   }
 
+  /**
+   * Return the DOM element.
+   * This is the element that will be used to display the node view.
+   */
   get dom() {
     if (
       this.renderer.element.firstElementChild
@@ -125,6 +168,10 @@ class ReactNodeView extends NodeView<
     return this.renderer.element as HTMLElement
   }
 
+  /**
+   * Return the content DOM element.
+   * This is the element that will be used to display the rich-text content of the node.
+   */
   get contentDOM() {
     if (this.node.isLeaf) {
       return null
@@ -133,10 +180,19 @@ class ReactNodeView extends NodeView<
     return this.contentDOMElement
   }
 
+  /**
+   * On editor selection update, check if the node is selected.
+   * If it is, call `selectNode`, otherwise call `deselectNode`.
+   */
   handleSelectionUpdate() {
     const { from, to } = this.editor.state.selection
+    const pos = this.getPos()
+
+    if (typeof pos !== 'number') {
+      return
+    }
 
-    if (from <= this.getPos() && to >= this.getPos() + this.node.nodeSize) {
+    if (from <= pos && to >= pos + this.node.nodeSize) {
       if (this.renderer.props.selected) {
         return
       }
@@ -151,9 +207,20 @@ class ReactNodeView extends NodeView<
     }
   }
 
-  update(node: ProseMirrorNode, decorations: DecorationWithType[]) {
-    const updateProps = (props?: Record<string, any>) => {
+  /**
+   * 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 {
+    const rerenderComponent = (props?: Record<string, any>) => {
       this.renderer.updateProps(props)
+      if (typeof this.options.attrs === 'function') {
+        this.updateElementAttributes()
+      }
     }
 
     if (node.type !== this.node.type) {
@@ -163,31 +230,44 @@ class ReactNodeView extends NodeView<
     if (typeof this.options.update === 'function') {
       const oldNode = this.node
       const oldDecorations = this.decorations
+      const oldInnerDecorations = this.innerDecorations
 
       this.node = node
       this.decorations = decorations
+      this.innerDecorations = innerDecorations
 
       return this.options.update({
         oldNode,
         oldDecorations,
         newNode: node,
         newDecorations: decorations,
-        updateProps: () => updateProps({ node, decorations }),
+        oldInnerDecorations,
+        innerDecorations,
+        updateProps: () => rerenderComponent({ node, decorations, innerDecorations }),
       })
     }
 
-    if (node === this.node && this.decorations === decorations) {
+    if (
+      node === this.node
+      && this.decorations === decorations
+      && this.innerDecorations === innerDecorations
+    ) {
       return true
     }
 
     this.node = node
     this.decorations = decorations
+    this.innerDecorations = innerDecorations
 
-    updateProps({ node, decorations })
+    rerenderComponent({ node, decorations, innerDecorations })
 
     return true
   }
 
+  /**
+   * Select the node.
+   * Add the `selected` prop and the `ProseMirror-selectednode` class.
+   */
   selectNode() {
     this.renderer.updateProps({
       selected: true,
@@ -195,6 +275,10 @@ class ReactNodeView extends NodeView<
     this.renderer.element.classList.add('ProseMirror-selectednode')
   }
 
+  /**
+   * Deselect the node.
+   * Remove the `selected` prop and the `ProseMirror-selectednode` class.
+   */
   deselectNode() {
     this.renderer.updateProps({
       selected: false,
@@ -202,25 +286,52 @@ class ReactNodeView extends NodeView<
     this.renderer.element.classList.remove('ProseMirror-selectednode')
   }
 
+  /**
+   * Destroy the React component instance.
+   */
   destroy() {
     this.renderer.destroy()
     this.editor.off('selectionUpdate', this.handleSelectionUpdate)
     this.contentDOMElement = null
   }
+
+  /**
+   * Update the attributes of the top-level element that holds the React component.
+   * Applying the attributes defined in the `attrs` option.
+   */
+  updateElementAttributes() {
+    if (this.options.attrs) {
+      let attrsObj: Record<string, string> = {}
+
+      if (typeof this.options.attrs === 'function') {
+        const extensionAttributes = this.editor.extensionManager.attributes
+        const HTMLAttributes = getRenderedAttributes(this.node, extensionAttributes)
+
+        attrsObj = this.options.attrs({ node: this.node, HTMLAttributes })
+      } else {
+        attrsObj = this.options.attrs
+      }
+
+      this.renderer.updateAttributes(attrsObj)
+    }
+  }
 }
 
+/**
+ * Create a React node view renderer.
+ */
 export function ReactNodeViewRenderer(
-  component: any,
+  component: ComponentType<NodeViewProps>,
   options?: Partial<ReactNodeViewRendererOptions>,
 ): NodeViewRenderer {
-  return (props: NodeViewRendererProps) => {
+  return props => {
     // try to get the parent component
     // this is important for vue devtools to show the component hierarchy correctly
     // maybe it’s `undefined` because <editor-content> isn’t rendered yet
     if (!(props.editor as EditorWithContentComponent).contentComponent) {
-      return {}
+      return {} as unknown as ProseMirrorNodeView
     }
 
-    return new ReactNodeView(component, props, options) as unknown as ProseMirrorNodeView
+    return new ReactNodeView(component, props, options)
   }
 }

package/src/ReactRenderer.tsx

@@ -57,14 +57,6 @@ export interface ReactRendererOptions {
    * @example 'foo bar'
    */
   className?: string,
-
-  /**
-   * The attributes of the element.
-   * @type {Record<string, string>}
-   * @default {}
-   * @example { 'data-foo': 'bar' }
-   */
-  attrs?: Record<string, string>,
 }
 
 type ComponentType<R, P> =
@@ -83,7 +75,7 @@ type ComponentType<R, P> =
  *   as: 'span',
  * })
 */
-export class ReactRenderer<R = unknown, P = unknown> {
+export class ReactRenderer<R = unknown, P extends Record<string, any> = {}> {
   id: string
 
   editor: Editor
@@ -92,23 +84,25 @@ export class ReactRenderer<R = unknown, P = unknown> {
 
   element: Element
 
-  props: Record<string, any>
+  props: P
 
   reactElement: React.ReactNode
 
   ref: R | null = null
 
+  /**
+   * Immediately creates element and renders the provided React component.
+   */
   constructor(component: ComponentType<R, P>, {
     editor,
     props = {},
     as = 'div',
     className = '',
-    attrs,
   }: ReactRendererOptions) {
     this.id = Math.floor(Math.random() * 0xFFFFFFFF).toString()
     this.component = component
     this.editor = editor as EditorWithContentComponent
-    this.props = props
+    this.props = props as P
     this.element = document.createElement(as)
     this.element.classList.add('react-renderer')
 
@@ -116,12 +110,6 @@ export class ReactRenderer<R = unknown, P = unknown> {
       this.element.classList.add(...className.split(' '))
     }
 
-    if (attrs) {
-      Object.keys(attrs).forEach(key => {
-        this.element.setAttribute(key, attrs[key])
-      })
-    }
-
     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
@@ -133,22 +121,29 @@ export class ReactRenderer<R = unknown, P = unknown> {
     }
   }
 
+  /**
+   * Render the React component.
+   */
   render(): void {
     const Component = this.component
     const props = this.props
     const editor = this.editor as EditorWithContentComponent
 
     if (isClassComponent(Component) || isForwardRefComponent(Component)) {
+      // @ts-ignore This is a hack to make the ref work
       props.ref = (ref: R) => {
         this.ref = ref
       }
     }
 
-    this.reactElement = React.createElement(Component, props)
+    this.reactElement = <Component {...props} />
 
     editor?.contentComponent?.setRenderer(this.id, this)
   }
 
+  /**
+   * Re-renders the React component with new props.
+   */
   updateProps(props: Record<string, any> = {}): void {
     this.props = {
       ...this.props,
@@ -158,9 +153,21 @@ export class ReactRenderer<R = unknown, P = unknown> {
     this.render()
   }
 
+  /**
+   * Destroy the React component.
+   */
   destroy(): void {
     const editor = this.editor as EditorWithContentComponent
 
     editor?.contentComponent?.removeRenderer(this.id)
   }
+
+  /**
+   * Update the attributes of the element that holds the React component.
+   */
+  updateAttributes(attributes: Record<string, string>): void {
+    Object.keys(attributes).forEach(key => {
+      this.element.setAttribute(key, attributes[key])
+    })
+  }
 }

package/src/useEditor.ts

@@ -29,7 +29,7 @@ export type UseEditorOptions = Partial<EditorOptions> & {
   /**
    * Whether to re-render the editor on each transaction.
    * This is legacy behavior that will be removed in future versions.
-   * @default true
+   * @default false
    */
   shouldRerenderOnTransaction?: boolean;
 };
@@ -78,6 +78,7 @@ class EditorInstanceManager {
     this.options = options
     this.subscriptions = new Set<() => void>()
     this.setEditor(this.getInitialEditor())
+    this.scheduleDestroy()
 
     this.getEditor = this.getEditor.bind(this)
     this.getServerSnapshot = this.getServerSnapshot.bind(this)
@@ -147,6 +148,8 @@ class EditorInstanceManager {
       onTransaction: (...args) => this.options.current.onTransaction?.(...args),
       onUpdate: (...args) => this.options.current.onUpdate?.(...args),
       onContentError: (...args) => this.options.current.onContentError?.(...args),
+      onDrop: (...args) => this.options.current.onDrop?.(...args),
+      onPaste: (...args) => this.options.current.onPaste?.(...args),
     }
     const editor = new Editor(optionsToApply)
 
@@ -195,7 +198,10 @@ class EditorInstanceManager {
       if (this.editor && !this.editor.isDestroyed && deps.length === 0) {
         // if the editor does exist & deps are empty, we don't need to re-initialize the editor
         // we can fast-path to update the editor options on the existing instance
-        this.editor.setOptions(this.options.current)
+        this.editor.setOptions({
+          ...this.options.current,
+          editable: this.editor.isEditable,
+        })
       } else {
         // When the editor:
         // - does not yet exist
@@ -252,10 +258,10 @@ class EditorInstanceManager {
     const currentInstanceId = this.instanceId
     const currentEditor = this.editor
 
-    // Wait a tick to see if the component is still mounted
+    // Wait two ticks to see if the component is still mounted
     this.scheduledDestructionTimeout = setTimeout(() => {
       if (this.isComponentMounted && this.instanceId === currentInstanceId) {
-        // If still mounted on the next tick, with the same instanceId, do not destroy the editor
+        // If still mounted on the following tick, with the same instanceId, do not destroy the editor
         if (currentEditor) {
           // just re-apply options as they might have changed
           currentEditor.setOptions(this.options.current)
@@ -268,7 +274,9 @@ class EditorInstanceManager {
           this.setEditor(null)
         }
       }
-    }, 0)
+      // This allows the effect to run again between ticks
+      // which may save us from having to re-create the editor
+    }, 1)
   }
 }
 
@@ -280,9 +288,9 @@ class EditorInstanceManager {
  * @example const editor = useEditor({ extensions: [...] })
  */
 export function useEditor(
-  options: UseEditorOptions & { immediatelyRender: true },
+  options: UseEditorOptions & { immediatelyRender: false },
   deps?: DependencyList
-): Editor;
+): Editor | null;
 
 /**
  * This hook allows you to create an editor instance.
@@ -291,7 +299,7 @@ export function useEditor(
  * @returns The editor instance
  * @example const editor = useEditor({ extensions: [...] })
  */
-export function useEditor(options?: UseEditorOptions, deps?: DependencyList): Editor | null;
+export function useEditor(options: UseEditorOptions, deps?: DependencyList): Editor;
 
 export function useEditor(
   options: UseEditorOptions = {},
@@ -320,7 +328,7 @@ export function useEditor(
   useEditorState({
     editor,
     selector: ({ transactionNumber }) => {
-      if (options.shouldRerenderOnTransaction === false) {
+      if (options.shouldRerenderOnTransaction === false || options.shouldRerenderOnTransaction === undefined) {
         // This will prevent the editor from re-rendering on each transaction
         return null
       }