@tiptap/react 3.0.0 → 3.0.2-beta.0

package/src/ReactMarkViewRenderer.tsx

@@ -0,0 +1,111 @@
+/* eslint-disable @typescript-eslint/no-shadow */
+import type { MarkViewProps, MarkViewRenderer, MarkViewRendererOptions } from '@tiptap/core'
+import { MarkView } from '@tiptap/core'
+import React from 'react'
+
+// import { flushSync } from 'react-dom'
+import { ReactRenderer } from './ReactRenderer.js'
+
+export interface MarkViewContextProps {
+  markViewContentRef: (element: HTMLElement | null) => void
+}
+export const ReactMarkViewContext = React.createContext<MarkViewContextProps>({
+  markViewContentRef: () => {
+    // do nothing
+  },
+})
+
+export type MarkViewContentProps<T extends keyof React.JSX.IntrinsicElements = 'span'> = {
+  as?: T
+} & Omit<React.ComponentProps<T>, 'as'>
+
+export const MarkViewContent = <T extends keyof React.JSX.IntrinsicElements = 'span'>(
+  props: MarkViewContentProps<T>,
+) => {
+  const { as: Tag = 'span', ...rest } = props
+  const { markViewContentRef } = React.useContext(ReactMarkViewContext)
+
+  return (
+    // @ts-ignore
+    <Tag {...rest} ref={markViewContentRef} data-mark-view-content="" />
+  )
+}
+
+export interface ReactMarkViewRendererOptions extends MarkViewRendererOptions {
+  /**
+   * The tag name of the element wrapping the React component.
+   */
+  as?: string
+  className?: string
+  attrs?: { [key: string]: string }
+}
+
+export class ReactMarkView extends MarkView<React.ComponentType<MarkViewProps>, ReactMarkViewRendererOptions> {
+  renderer: ReactRenderer
+  contentDOMElement: HTMLElement | null
+  didMountContentDomElement = false
+
+  constructor(
+    component: React.ComponentType<MarkViewProps>,
+    props: MarkViewProps,
+    options?: Partial<ReactMarkViewRendererOptions>,
+  ) {
+    super(component, props, options)
+
+    const { as = 'span', attrs, className = '' } = options || {}
+    const componentProps = { ...props, updateAttributes: this.updateAttributes.bind(this) } satisfies MarkViewProps
+
+    this.contentDOMElement = document.createElement('span')
+
+    const markViewContentRef: MarkViewContextProps['markViewContentRef'] = el => {
+      if (el && this.contentDOMElement && el.firstChild !== this.contentDOMElement) {
+        el.appendChild(this.contentDOMElement)
+        this.didMountContentDomElement = true
+      }
+    }
+    const context: MarkViewContextProps = {
+      markViewContentRef,
+    }
+
+    // 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 ReactMarkViewProvider: React.FunctionComponent<MarkViewProps> = React.memo(componentProps => {
+      return (
+        <ReactMarkViewContext.Provider value={context}>
+          {React.createElement(component, componentProps)}
+        </ReactMarkViewContext.Provider>
+      )
+    })
+
+    ReactMarkViewProvider.displayName = 'ReactNodeView'
+
+    this.renderer = new ReactRenderer(ReactMarkViewProvider, {
+      editor: props.editor,
+      props: componentProps,
+      as,
+      className: `mark-${props.mark.type.name} ${className}`.trim(),
+    })
+
+    if (attrs) {
+      this.renderer.updateAttributes(attrs)
+    }
+  }
+
+  get dom() {
+    return this.renderer.element as HTMLElement
+  }
+
+  get contentDOM() {
+    if (!this.didMountContentDomElement) {
+      return null
+    }
+    return this.contentDOMElement as HTMLElement
+  }
+}
+
+export function ReactMarkViewRenderer(
+  component: React.ComponentType<MarkViewProps>,
+  options: Partial<ReactMarkViewRendererOptions> = {},
+): MarkViewRenderer {
+  return props => new ReactMarkView(component, props, options)
+}

package/src/ReactNodeViewRenderer.tsx

@@ -1,54 +1,119 @@
-import {
+import type {
   DecorationWithType,
-  NodeView,
-  NodeViewProps,
+  Editor,
   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 { getRenderedAttributes, NodeView } from '@tiptap/core'
+import type { Node, Node as ProseMirrorNode } from '@tiptap/pm/model'
+import type { Decoration, DecorationSource, NodeView as ProseMirrorNodeView } from '@tiptap/pm/view'
+import type { ComponentType, NamedExoticComponent } from 'react'
+import { createElement, createRef, memo } from 'react'
 
-import { Editor } from './Editor.js'
+import type { EditorWithContentComponent } from './Editor.js'
 import { ReactRenderer } from './ReactRenderer.js'
-import { ReactNodeViewContext, ReactNodeViewContextProps } from './useReactNodeView.js'
+import type { ReactNodeViewProps } from './types.js'
+import type { ReactNodeViewContextProps } from './useReactNodeView.js'
+import { ReactNodeViewContext } 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[]
+        oldDecorations: readonly Decoration[]
+        oldInnerDecorations: DecorationSource
         newNode: ProseMirrorNode
-        newDecorations: Decoration[]
+        newDecorations: readonly Decoration[]
+        innerDecorations: DecorationSource
         updateProps: () => void
       }) => boolean)
     | 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
-  attrs?: Record<string, 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<
+  T = HTMLElement,
+  Component extends ComponentType<ReactNodeViewProps<T>> = ComponentType<ReactNodeViewProps<T>>,
+  NodeEditor extends Editor = Editor,
+  Options extends ReactNodeViewRendererOptions = ReactNodeViewRendererOptions,
+> extends NodeView<Component, NodeEditor, Options> {
+  /**
+   * The renderer instance.
+   */
+  renderer!: ReactRenderer<unknown, ReactNodeViewProps<T>>
+
+  /**
+   * The element that holds the rich-text content of the node.
+   */
   contentDOMElement!: HTMLElement | null
 
+  constructor(component: Component, props: NodeViewRendererProps, options?: Partial<Options>) {
+    super(component, props, options)
+
+    if (!this.node.isLeaf) {
+      if (this.options.contentDOMElementTag) {
+        this.contentDOMElement = document.createElement(this.options.contentDOMElementTag)
+      } else {
+        this.contentDOMElement = document.createElement(this.node.isInline ? 'span' : 'div')
+      }
+
+      this.contentDOMElement.dataset.nodeViewContentReact = ''
+      this.contentDOMElement.dataset.nodeViewWrapper = ''
+
+      // 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'
+
+      const contentTarget = this.dom.querySelector('[data-node-view-content]')
+
+      if (!contentTarget) {
+        return
+      }
+
+      contentTarget.appendChild(this.contentDOMElement)
+    }
+  }
+
+  /**
+   * 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(),
-    }
+      ref: createRef<T>(),
+    } satisfies ReactNodeViewProps<T>
 
     if (!(this.component as any).displayName) {
       const capitalizeFirstChar = (string: string): string => {
@@ -58,43 +123,30 @@ 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) {
+        // remove the nodeViewWrapper attribute from the element
+        if (element.hasAttribute('data-node-view-wrapper')) {
+          element.removeAttribute('data-node-view-wrapper')
         }
+        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: NamedExoticComponent<ReactNodeViewProps<T>> = memo(componentProps => {
       return (
-        <>
-          {/* @ts-ignore */}
-          <ReactNodeViewContext.Provider value={{ onDragStart, nodeViewContentRef }}>
-            {/* @ts-ignore */}
-            <Component {...componentProps} />
-          </ReactNodeViewContext.Provider>
-        </>
+        <ReactNodeViewContext.Provider value={context}>
+          {createElement(Component, componentProps)}
+        </ReactNodeViewContext.Provider>
       )
-    }
+    })
 
     ReactNodeViewProvider.displayName = 'ReactNodeView'
 
-    if (this.node.isLeaf) {
-      this.contentDOMElement = null
-    } else if (this.options.contentDOMElementTag) {
-      this.contentDOMElement = document.createElement(this.options.contentDOMElementTag)
-    } else {
-      this.contentDOMElement = 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) {
@@ -104,21 +156,26 @@ class ReactNodeView extends NodeView<
     const { className = '' } = this.options
 
     this.handleSelectionUpdate = this.handleSelectionUpdate.bind(this)
-    this.editor.on('selectionUpdate', this.handleSelectionUpdate)
 
     this.renderer = new ReactRenderer(ReactNodeViewProvider, {
       editor: this.editor,
       props,
       as,
       className: `node-${this.node.type.name} ${className}`.trim(),
-      attrs: this.options.attrs,
     })
+
+    this.editor.on('selectionUpdate', this.handleSelectionUpdate)
+    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
-      && !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.')
     }
@@ -126,6 +183,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
@@ -134,10 +195,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 (from <= this.getPos() && to >= this.getPos() + this.node.nodeSize) {
+    if (typeof pos !== 'number') {
+      return
+    }
+
+    if (from <= pos && to >= pos + this.node.nodeSize) {
       if (this.renderer.props.selected) {
         return
       }
@@ -152,9 +222,16 @@ 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) {
@@ -164,31 +241,40 @@ 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,
@@ -196,6 +282,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,
@@ -203,25 +293,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)
+    }
+  }
 }
 
-export function ReactNodeViewRenderer(
-  component: any,
+/**
+ * Create a React node view renderer.
+ */
+export function ReactNodeViewRenderer<T = HTMLElement>(
+  component: ComponentType<ReactNodeViewProps<T>>,
   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 Editor).contentComponent) {
-      return {}
+    if (!(props.editor as EditorWithContentComponent).contentComponent) {
+      return {} as unknown as ProseMirrorNodeView
     }
 
-    return new ReactNodeView(component, props, options) as unknown as ProseMirrorNodeView
+    return new ReactNodeView<T>(component, props, options)
   }
 }