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

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

package/src/index.ts

@@ -1,9 +1,8 @@
-export * from './BubbleMenu.js'
 export * from './Context.js'
 export * from './EditorContent.js'
-export * from './FloatingMenu.js'
 export * from './NodeViewContent.js'
 export * from './NodeViewWrapper.js'
+export * from './ReactMarkViewRenderer.js'
 export * from './ReactNodeViewRenderer.js'
 export * from './ReactRenderer.js'
 export * from './useEditor.js'

package/src/{BubbleMenu.tsx → menus/BubbleMenu.tsx}

@@ -1,33 +1,16 @@
-import { BubbleMenuPlugin, BubbleMenuPluginProps } from '@tiptap/extension-bubble-menu'
+import { type BubbleMenuPluginProps, BubbleMenuPlugin } from '@tiptap/extension-bubble-menu'
+import { useCurrentEditor } from '@tiptap/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 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'))
@@ -46,16 +29,14 @@ export const BubbleMenu = React.forwardRef<HTMLDivElement, BubbleMenuProps>(
       bubbleMenuElement.style.visibility = 'hidden'
       bubbleMenuElement.style.position = 'absolute'
 
-      if (editor?.isDestroyed || currentEditor?.isDestroyed) {
+      if (editor?.isDestroyed || (currentEditor as any)?.isDestroyed) {
         return
       }
 
       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 +63,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/menus/FloatingMenu.tsx

@@ -0,0 +1,67 @@
+import { FloatingMenuPlugin, FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'
+import { useCurrentEditor } from '@tiptap/react'
+import React, { useEffect, useRef } from 'react'
+import { createPortal } from 'react-dom'
+
+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 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(() => {
+      const floatingMenuElement = menuEl.current
+
+      floatingMenuElement.style.visibility = 'hidden'
+      floatingMenuElement.style.position = 'absolute'
+
+      if (editor?.isDestroyed || (currentEditor as any)?.isDestroyed) {
+        return
+      }
+
+      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
+      }
+
+      const plugin = FloatingMenuPlugin({
+        editor: attachToEditor,
+        element: floatingMenuElement,
+        pluginKey,
+        shouldShow,
+        options,
+      })
+
+      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 createPortal(<div {...restProps}>{children}</div>, menuEl.current)
+  },
+)

package/src/menus/index.ts

@@ -0,0 +1,2 @@
+export * from './BubbleMenu.js'
+export * from './FloatingMenu.js'

package/src/useEditor.ts

@@ -1,16 +1,10 @@
 import { type EditorOptions, Editor } from '@tiptap/core'
-import {
-  DependencyList,
-  MutableRefObject,
-  useDebugValue,
-  useEffect,
-  useRef,
-  useState,
-} from 'react'
+import { DependencyList, MutableRefObject, useDebugValue, useEffect, useRef, useState } from 'react'
 import { useSyncExternalStore } from 'use-sync-external-store/shim'
 
 import { useEditorState } from './useEditorState.js'
 
+// @ts-ignore
 const isDev = process.env.NODE_ENV !== 'production'
 const isSSR = typeof window === 'undefined'
 const isNext = isSSR || Boolean(typeof window !== 'undefined' && (window as any).next)
@@ -25,14 +19,14 @@ export type UseEditorOptions = Partial<EditorOptions> & {
    * If server-side rendering, set this to `false`.
    * @default true
    */
-  immediatelyRender?: boolean;
+  immediatelyRender?: boolean
   /**
    * Whether to re-render the editor on each transaction.
    * This is legacy behavior that will be removed in future versions.
    * @default false
    */
-  shouldRerenderOnTransaction?: boolean;
-};
+  shouldRerenderOnTransaction?: boolean
+}
 
 /**
  * This class handles the creation, destruction, and re-creation of the editor instance.
@@ -150,6 +144,7 @@ class EditorInstanceManager {
       onContentError: (...args) => this.options.current.onContentError?.(...args),
       onDrop: (...args) => this.options.current.onDrop?.(...args),
       onPaste: (...args) => this.options.current.onPaste?.(...args),
+      onDelete: (...args) => this.options.current.onDelete?.(...args),
     }
     const editor = new Editor(optionsToApply)
 
@@ -183,6 +178,47 @@ class EditorInstanceManager {
     }
   }
 
+  static compareOptions(a: UseEditorOptions, b: UseEditorOptions) {
+    return (Object.keys(a) as (keyof UseEditorOptions)[]).every(key => {
+      if (
+        [
+          'onCreate',
+          'onBeforeCreate',
+          'onDestroy',
+          'onUpdate',
+          'onTransaction',
+          'onFocus',
+          'onBlur',
+          'onSelectionUpdate',
+          'onContentError',
+          'onDrop',
+          'onPaste',
+        ].includes(key)
+      ) {
+        // we don't want to compare callbacks, they are always different and only registered once
+        return true
+      }
+
+      // We often encourage putting extensions inlined in the options object, so we will do a slightly deeper comparison here
+      if (key === 'extensions' && a.extensions && b.extensions) {
+        if (a.extensions.length !== b.extensions.length) {
+          return false
+        }
+        return a.extensions.every((extension, index) => {
+          if (extension !== b.extensions?.[index]) {
+            return false
+          }
+          return true
+        })
+      }
+      if (a[key] !== b[key]) {
+        // if any of the options have changed, we should update the editor options
+        return false
+      }
+      return true
+    })
+  }
+
   /**
    * On each render, we will create, update, or destroy the editor instance.
    * @param deps The dependencies to watch for changes
@@ -196,12 +232,15 @@ class EditorInstanceManager {
       clearTimeout(this.scheduledDestructionTimeout)
 
       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,
-          editable: this.editor.isEditable,
-        })
+        // if the editor does exist & deps are empty, we don't need to re-initialize the editor generally
+        if (!EditorInstanceManager.compareOptions(this.options.current, this.editor.options)) {
+          // But, the options are different, so we need to update the editor options
+          // Still, this is faster than re-creating the editor
+          this.editor.setOptions({
+            ...this.options.current,
+            editable: this.editor.isEditable,
+          })
+        }
       } else {
         // When the editor:
         // - does not yet exist
@@ -229,8 +268,8 @@ class EditorInstanceManager {
         this.previousDeps = deps
         return
       }
-      const depsAreEqual = this.previousDeps.length === deps.length
-        && this.previousDeps.every((dep, index) => dep === deps[index])
+      const depsAreEqual =
+        this.previousDeps.length === deps.length && this.previousDeps.every((dep, index) => dep === deps[index])
 
       if (depsAreEqual) {
         // deps exist and are equal, no need to recreate
@@ -289,8 +328,8 @@ class EditorInstanceManager {
  */
 export function useEditor(
   options: UseEditorOptions & { immediatelyRender: false },
-  deps?: DependencyList
-): Editor | null;
+  deps?: DependencyList,
+): Editor | null
 
 /**
  * This hook allows you to create an editor instance.
@@ -299,12 +338,9 @@ export function useEditor(
  * @returns The editor instance
  * @example const editor = useEditor({ extensions: [...] })
  */
-export function useEditor(options: UseEditorOptions, deps?: DependencyList): Editor;
+export function useEditor(options: UseEditorOptions, deps?: DependencyList): Editor
 
-export function useEditor(
-  options: UseEditorOptions = {},
-  deps: DependencyList = [],
-): Editor | null {
+export function useEditor(options: UseEditorOptions = {}, deps: DependencyList = []): Editor | null {
   const mostRecentOptions = useRef(options)
 
   mostRecentOptions.current = options

package/src/useEditorState.ts

@@ -1,35 +1,30 @@
 import type { Editor } from '@tiptap/core'
 import deepEqual from 'fast-deep-equal/es6/react'
-import {
-  useDebugValue, useEffect, useLayoutEffect, useState,
-} from 'react'
+import { useDebugValue, useEffect, useLayoutEffect, useState } from 'react'
 import { useSyncExternalStoreWithSelector } from 'use-sync-external-store/shim/with-selector'
 
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect
 
 export type EditorStateSnapshot<TEditor extends Editor | null = Editor | null> = {
-  editor: TEditor;
-  transactionNumber: number;
-};
-
-export type UseEditorStateOptions<
-  TSelectorResult,
-  TEditor extends Editor | null = Editor | null,
-> = {
+  editor: TEditor
+  transactionNumber: number
+}
+
+export type UseEditorStateOptions<TSelectorResult, TEditor extends Editor | null = Editor | null> = {
   /**
    * The editor instance.
    */
-  editor: TEditor;
+  editor: TEditor
   /**
    * A selector function to determine the value to compare for re-rendering.
    */
-  selector: (context: EditorStateSnapshot<TEditor>) => TSelectorResult;
+  selector: (context: EditorStateSnapshot<TEditor>) => TSelectorResult
   /**
    * A custom equality function to determine if the editor should re-render.
    * @default `deepEqual` from `fast-deep-equal`
    */
-  equalityFn?: (a: TSelectorResult, b: TSelectorResult | null) => boolean;
-};
+  equalityFn?: (a: TSelectorResult, b: TSelectorResult | null) => boolean
+}
 
 /**
  * To synchronize the editor instance with the component state,
@@ -126,8 +121,8 @@ class EditorStateManager<TEditor extends Editor | null = Editor | null> {
  * })
  */
 export function useEditorState<TSelectorResult>(
-  options: UseEditorStateOptions<TSelectorResult, Editor>
-): TSelectorResult;
+  options: UseEditorStateOptions<TSelectorResult, Editor>,
+): TSelectorResult
 /**
  * This hook allows you to watch for changes on the editor instance.
  * It will allow you to select a part of the editor state and re-render the component when it changes.
@@ -140,8 +135,8 @@ export function useEditorState<TSelectorResult>(
  * })
  */
 export function useEditorState<TSelectorResult>(
-  options: UseEditorStateOptions<TSelectorResult, Editor | null>
-): TSelectorResult | null;
+  options: UseEditorStateOptions<TSelectorResult, Editor | null>,
+): TSelectorResult | null
 
 /**
  * This hook allows you to watch for changes on the editor instance.

package/src/useReactNodeView.ts

@@ -1,12 +1,27 @@
-import { createContext, useContext } from 'react'
+import { createContext, createElement, ReactNode, useContext } from 'react'
 
 export interface ReactNodeViewContextProps {
-  onDragStart: (event: DragEvent) => void,
-  nodeViewContentRef: (element: HTMLElement | null) => void,
+  onDragStart?: (event: DragEvent) => void
+  nodeViewContentRef?: (element: HTMLElement | null) => void
+  /**
+   * This allows you to add children into the NodeViewContent component.
+   * This is useful when statically rendering the content of a node view.
+   */
+  nodeViewContentChildren?: ReactNode
 }
 
-export const ReactNodeViewContext = createContext<Partial<ReactNodeViewContextProps>>({
-  onDragStart: undefined,
+export const ReactNodeViewContext = createContext<ReactNodeViewContextProps>({
+  onDragStart: () => {
+    // no-op
+  },
+  nodeViewContentChildren: undefined,
+  nodeViewContentRef: () => {
+    // no-op
+  },
 })
 
+export const ReactNodeViewContentProvider = ({ children, content }: { children: ReactNode; content: ReactNode }) => {
+  return createElement(ReactNodeViewContext.Provider, { value: { nodeViewContentChildren: content } }, children)
+}
+
 export const useReactNodeView = () => useContext(ReactNodeViewContext)

package/src/FloatingMenu.tsx

@@ -1,83 +0,0 @@
-import { FloatingMenuPlugin, FloatingMenuPluginProps } from '@tiptap/extension-floating-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>;
-
-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'))
-
-  if (typeof ref === 'function') {
-    ref(menuEl.current)
-  } else if (ref) {
-    ref.current = menuEl.current
-  }
-
-  const { editor: currentEditor } = useCurrentEditor()
-
-  useEffect(() => {
-    const floatingMenuElement = menuEl.current
-
-    floatingMenuElement.style.visibility = 'hidden'
-    floatingMenuElement.style.position = 'absolute'
-
-    if (editor?.isDestroyed || currentEditor?.isDestroyed) {
-      return
-    }
-
-    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
-    }
-
-    const plugin = FloatingMenuPlugin({
-      editor: attachToEditor,
-      element: floatingMenuElement,
-      pluginKey,
-      shouldShow,
-      options,
-    })
-
-    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 createPortal(
-    <div
-      {...restProps}
-    >
-      {children}
-    </div>,
-    menuEl.current,
-  )
-})