@tiptap/react 3.0.0-beta.3 → 3.0.0-beta.30

package/dist/index.d.cts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime_js from 'react/jsx-runtime.js';
-import { EditorOptions, Editor, MarkViewRendererOptions, MarkView, MarkViewProps, MarkViewRenderer, NodeViewRendererOptions, NodeViewProps, NodeView, NodeViewRenderer } from '@tiptap/core';
+import { EditorOptions, Editor, MarkViewRendererOptions, MarkView, MarkViewProps, MarkViewRenderer, NodeViewProps, NodeViewRendererOptions, NodeView, NodeViewRendererProps, NodeViewRenderer } from '@tiptap/core';
 export * from '@tiptap/core';
 import * as React from 'react';
-import React__default, { DependencyList, ReactNode, HTMLAttributes, HTMLProps, ForwardedRef, ComponentProps, ComponentType as ComponentType$1 } from 'react';
+import React__default, { DependencyList, ReactNode, HTMLAttributes, HTMLProps, ForwardedRef, ComponentProps, ComponentClass, FunctionComponent, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, ComponentType as ComponentType$1 } from 'react';
 import { Node } from '@tiptap/pm/model';
 import { Decoration, DecorationSource } from '@tiptap/pm/view';
 
@@ -121,7 +121,7 @@ interface ReactRendererOptions {
      */
     className?: string;
 }
-type ComponentType<R, P> = React__default.ComponentClass<P> | React__default.FunctionComponent<P> | React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<P> & React__default.RefAttributes<R>>;
+type ComponentType<R, P> = ComponentClass<P> | FunctionComponent<P> | ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<R>>;
 /**
  * The ReactRenderer class. It's responsible for rendering React components inside the editor.
  * @example
@@ -139,7 +139,7 @@ declare class ReactRenderer<R = unknown, P extends Record<string, any> = object>
     component: any;
     element: Element;
     props: P;
-    reactElement: React__default.ReactNode;
+    reactElement: ReactNode;
     ref: R | null;
     /**
      * Immediately creates element and renders the provided React component.
@@ -168,9 +168,9 @@ interface MarkViewContextProps {
 }
 declare const ReactMarkViewContext: React__default.Context<MarkViewContextProps>;
 type MarkViewContentProps<T extends keyof React__default.JSX.IntrinsicElements = 'span'> = {
-    as?: NoInfer<T>;
-} & React__default.ComponentProps<T>;
-declare const MarkViewContent: React__default.FC<MarkViewContentProps>;
+    as?: T;
+} & Omit<React__default.ComponentProps<T>, 'as'>;
+declare const MarkViewContent: <T extends keyof React__default.JSX.IntrinsicElements = "span">(props: MarkViewContentProps<T>) => react_jsx_runtime_js.JSX.Element;
 interface ReactMarkViewRendererOptions extends MarkViewRendererOptions {
     /**
      * The tag name of the element wrapping the React component.
@@ -191,6 +191,10 @@ declare class ReactMarkView extends MarkView<React__default.ComponentType<MarkVi
 }
 declare function ReactMarkViewRenderer(component: React__default.ComponentType<MarkViewProps>, options?: Partial<ReactMarkViewRendererOptions>): MarkViewRenderer;
 
+type ReactNodeViewProps<T = HTMLElement> = NodeViewProps & {
+    ref: React__default.RefObject<T | null>;
+};
+
 interface ReactNodeViewRendererOptions extends NodeViewRendererOptions {
     /**
      * This function is called when the node view is updated.
@@ -223,15 +227,16 @@ interface ReactNodeViewRendererOptions extends NodeViewRendererOptions {
         HTMLAttributes: Record<string, any>;
     }) => Record<string, string>);
 }
-declare class ReactNodeView<Component extends ComponentType$1<NodeViewProps> = ComponentType$1<NodeViewProps>, NodeEditor extends Editor = Editor, Options extends ReactNodeViewRendererOptions = ReactNodeViewRendererOptions> extends NodeView<Component, NodeEditor, Options> {
+declare class ReactNodeView<T = HTMLElement, Component extends ComponentType$1<ReactNodeViewProps<T>> = ComponentType$1<ReactNodeViewProps<T>>, NodeEditor extends Editor = Editor, Options extends ReactNodeViewRendererOptions = ReactNodeViewRendererOptions> extends NodeView<Component, NodeEditor, Options> {
     /**
      * The renderer instance.
      */
-    renderer: ReactRenderer<unknown, NodeViewProps>;
+    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>);
     /**
      * Setup the React component.
      * Called on initialization.
@@ -280,7 +285,7 @@ declare class ReactNodeView<Component extends ComponentType$1<NodeViewProps> = C
 /**
  * Create a React node view renderer.
  */
-declare function ReactNodeViewRenderer(component: ComponentType$1<NodeViewProps>, options?: Partial<ReactNodeViewRendererOptions>): NodeViewRenderer;
+declare function ReactNodeViewRenderer<T = HTMLElement>(component: ComponentType$1<ReactNodeViewProps<T>>, options?: Partial<ReactNodeViewRendererOptions>): NodeViewRenderer;
 
 type EditorStateSnapshot<TEditor extends Editor | null = Editor | null> = {
     editor: TEditor;
@@ -342,4 +347,4 @@ declare const ReactNodeViewContentProvider: ({ children, content }: {
 }) => React.FunctionComponentElement<React.ProviderProps<ReactNodeViewContextProps>>;
 declare const useReactNodeView: () => ReactNodeViewContextProps;
 
-export { EditorConsumer, EditorContent, type EditorContentProps, EditorContext, type EditorContextValue, EditorProvider, type EditorProviderProps, type EditorStateSnapshot, MarkViewContent, type MarkViewContentProps, type MarkViewContextProps, NodeViewContent, type NodeViewContentProps, NodeViewWrapper, type NodeViewWrapperProps, PureEditorContent, ReactMarkView, ReactMarkViewContext, ReactMarkViewRenderer, type ReactMarkViewRendererOptions, ReactNodeView, ReactNodeViewContentProvider, ReactNodeViewContext, type ReactNodeViewContextProps, ReactNodeViewRenderer, type ReactNodeViewRendererOptions, ReactRenderer, type ReactRendererOptions, type UseEditorOptions, type UseEditorStateOptions, useCurrentEditor, useEditor, useEditorState, useReactNodeView };
+export { EditorConsumer, EditorContent, type EditorContentProps, EditorContext, type EditorContextValue, EditorProvider, type EditorProviderProps, type EditorStateSnapshot, MarkViewContent, type MarkViewContentProps, type MarkViewContextProps, NodeViewContent, type NodeViewContentProps, NodeViewWrapper, type NodeViewWrapperProps, PureEditorContent, ReactMarkView, ReactMarkViewContext, ReactMarkViewRenderer, type ReactMarkViewRendererOptions, ReactNodeView, ReactNodeViewContentProvider, ReactNodeViewContext, type ReactNodeViewContextProps, type ReactNodeViewProps, ReactNodeViewRenderer, type ReactNodeViewRendererOptions, ReactRenderer, type ReactRendererOptions, type UseEditorOptions, type UseEditorStateOptions, useCurrentEditor, useEditor, useEditorState, useReactNodeView };

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime_js from 'react/jsx-runtime.js';
-import { EditorOptions, Editor, MarkViewRendererOptions, MarkView, MarkViewProps, MarkViewRenderer, NodeViewRendererOptions, NodeViewProps, NodeView, NodeViewRenderer } from '@tiptap/core';
+import { EditorOptions, Editor, MarkViewRendererOptions, MarkView, MarkViewProps, MarkViewRenderer, NodeViewProps, NodeViewRendererOptions, NodeView, NodeViewRendererProps, NodeViewRenderer } from '@tiptap/core';
 export * from '@tiptap/core';
 import * as React from 'react';
-import React__default, { DependencyList, ReactNode, HTMLAttributes, HTMLProps, ForwardedRef, ComponentProps, ComponentType as ComponentType$1 } from 'react';
+import React__default, { DependencyList, ReactNode, HTMLAttributes, HTMLProps, ForwardedRef, ComponentProps, ComponentClass, FunctionComponent, ForwardRefExoticComponent, PropsWithoutRef, RefAttributes, ComponentType as ComponentType$1 } from 'react';
 import { Node } from '@tiptap/pm/model';
 import { Decoration, DecorationSource } from '@tiptap/pm/view';
 
@@ -121,7 +121,7 @@ interface ReactRendererOptions {
      */
     className?: string;
 }
-type ComponentType<R, P> = React__default.ComponentClass<P> | React__default.FunctionComponent<P> | React__default.ForwardRefExoticComponent<React__default.PropsWithoutRef<P> & React__default.RefAttributes<R>>;
+type ComponentType<R, P> = ComponentClass<P> | FunctionComponent<P> | ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<R>>;
 /**
  * The ReactRenderer class. It's responsible for rendering React components inside the editor.
  * @example
@@ -139,7 +139,7 @@ declare class ReactRenderer<R = unknown, P extends Record<string, any> = object>
     component: any;
     element: Element;
     props: P;
-    reactElement: React__default.ReactNode;
+    reactElement: ReactNode;
     ref: R | null;
     /**
      * Immediately creates element and renders the provided React component.
@@ -168,9 +168,9 @@ interface MarkViewContextProps {
 }
 declare const ReactMarkViewContext: React__default.Context<MarkViewContextProps>;
 type MarkViewContentProps<T extends keyof React__default.JSX.IntrinsicElements = 'span'> = {
-    as?: NoInfer<T>;
-} & React__default.ComponentProps<T>;
-declare const MarkViewContent: React__default.FC<MarkViewContentProps>;
+    as?: T;
+} & Omit<React__default.ComponentProps<T>, 'as'>;
+declare const MarkViewContent: <T extends keyof React__default.JSX.IntrinsicElements = "span">(props: MarkViewContentProps<T>) => react_jsx_runtime_js.JSX.Element;
 interface ReactMarkViewRendererOptions extends MarkViewRendererOptions {
     /**
      * The tag name of the element wrapping the React component.
@@ -191,6 +191,10 @@ declare class ReactMarkView extends MarkView<React__default.ComponentType<MarkVi
 }
 declare function ReactMarkViewRenderer(component: React__default.ComponentType<MarkViewProps>, options?: Partial<ReactMarkViewRendererOptions>): MarkViewRenderer;
 
+type ReactNodeViewProps<T = HTMLElement> = NodeViewProps & {
+    ref: React__default.RefObject<T | null>;
+};
+
 interface ReactNodeViewRendererOptions extends NodeViewRendererOptions {
     /**
      * This function is called when the node view is updated.
@@ -223,15 +227,16 @@ interface ReactNodeViewRendererOptions extends NodeViewRendererOptions {
         HTMLAttributes: Record<string, any>;
     }) => Record<string, string>);
 }
-declare class ReactNodeView<Component extends ComponentType$1<NodeViewProps> = ComponentType$1<NodeViewProps>, NodeEditor extends Editor = Editor, Options extends ReactNodeViewRendererOptions = ReactNodeViewRendererOptions> extends NodeView<Component, NodeEditor, Options> {
+declare class ReactNodeView<T = HTMLElement, Component extends ComponentType$1<ReactNodeViewProps<T>> = ComponentType$1<ReactNodeViewProps<T>>, NodeEditor extends Editor = Editor, Options extends ReactNodeViewRendererOptions = ReactNodeViewRendererOptions> extends NodeView<Component, NodeEditor, Options> {
     /**
      * The renderer instance.
      */
-    renderer: ReactRenderer<unknown, NodeViewProps>;
+    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>);
     /**
      * Setup the React component.
      * Called on initialization.
@@ -280,7 +285,7 @@ declare class ReactNodeView<Component extends ComponentType$1<NodeViewProps> = C
 /**
  * Create a React node view renderer.
  */
-declare function ReactNodeViewRenderer(component: ComponentType$1<NodeViewProps>, options?: Partial<ReactNodeViewRendererOptions>): NodeViewRenderer;
+declare function ReactNodeViewRenderer<T = HTMLElement>(component: ComponentType$1<ReactNodeViewProps<T>>, options?: Partial<ReactNodeViewRendererOptions>): NodeViewRenderer;
 
 type EditorStateSnapshot<TEditor extends Editor | null = Editor | null> = {
     editor: TEditor;
@@ -342,4 +347,4 @@ declare const ReactNodeViewContentProvider: ({ children, content }: {
 }) => React.FunctionComponentElement<React.ProviderProps<ReactNodeViewContextProps>>;
 declare const useReactNodeView: () => ReactNodeViewContextProps;
 
-export { EditorConsumer, EditorContent, type EditorContentProps, EditorContext, type EditorContextValue, EditorProvider, type EditorProviderProps, type EditorStateSnapshot, MarkViewContent, type MarkViewContentProps, type MarkViewContextProps, NodeViewContent, type NodeViewContentProps, NodeViewWrapper, type NodeViewWrapperProps, PureEditorContent, ReactMarkView, ReactMarkViewContext, ReactMarkViewRenderer, type ReactMarkViewRendererOptions, ReactNodeView, ReactNodeViewContentProvider, ReactNodeViewContext, type ReactNodeViewContextProps, ReactNodeViewRenderer, type ReactNodeViewRendererOptions, ReactRenderer, type ReactRendererOptions, type UseEditorOptions, type UseEditorStateOptions, useCurrentEditor, useEditor, useEditorState, useReactNodeView };
+export { EditorConsumer, EditorContent, type EditorContentProps, EditorContext, type EditorContextValue, EditorProvider, type EditorProviderProps, type EditorStateSnapshot, MarkViewContent, type MarkViewContentProps, type MarkViewContextProps, NodeViewContent, type NodeViewContentProps, NodeViewWrapper, type NodeViewWrapperProps, PureEditorContent, ReactMarkView, ReactMarkViewContext, ReactMarkViewRenderer, type ReactMarkViewRendererOptions, ReactNodeView, ReactNodeViewContentProvider, ReactNodeViewContext, type ReactNodeViewContextProps, type ReactNodeViewProps, ReactNodeViewRenderer, type ReactNodeViewRendererOptions, ReactRenderer, type ReactRendererOptions, type UseEditorOptions, type UseEditorStateOptions, useCurrentEditor, useEditor, useEditorState, useReactNodeView };

package/dist/index.js

@@ -4,7 +4,7 @@ import { createContext, useContext, useMemo } from "react";
 // src/EditorContent.tsx
 import React, { forwardRef } from "react";
 import ReactDOM from "react-dom";
-import { useSyncExternalStore } from "use-sync-external-store/shim";
+import { useSyncExternalStore } from "use-sync-external-store/shim/index.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var mergeRefs = (...refs) => {
   return (node) => {
@@ -120,13 +120,10 @@ var PureEditorContent = class extends React.Component {
       return;
     }
     this.initialized = false;
-    try {
-      if (!editor.isDestroyed) {
-        editor.view.setProps({
-          nodeViews: {}
-        });
-      }
-    } catch {
+    if (!editor.isDestroyed) {
+      editor.view.setProps({
+        nodeViews: {}
+      });
     }
     if (this.unsubscribeToContentComponent) {
       this.unsubscribeToContentComponent();
@@ -166,12 +163,12 @@ var EditorContent = React.memo(EditorContentWithKey);
 // src/useEditor.ts
 import { Editor } from "@tiptap/core";
 import { useDebugValue as useDebugValue2, useEffect as useEffect2, useRef, useState as useState2 } from "react";
-import { useSyncExternalStore as useSyncExternalStore2 } from "use-sync-external-store/shim";
+import { useSyncExternalStore as useSyncExternalStore2 } from "use-sync-external-store/shim/index.js";
 
 // src/useEditorState.ts
-import deepEqual from "fast-deep-equal/es6/react";
+import deepEqual from "fast-deep-equal/es6/react.js";
 import { useDebugValue, useEffect, useLayoutEffect, useState } from "react";
-import { useSyncExternalStoreWithSelector } from "use-sync-external-store/shim/with-selector";
+import { useSyncExternalStoreWithSelector } from "use-sync-external-store/shim/with-selector.js";
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
 var EditorStateManager = class {
   constructor(initialEditor) {
@@ -618,14 +615,42 @@ import { MarkView } from "@tiptap/core";
 import React4 from "react";
 
 // src/ReactRenderer.tsx
+import { version as reactVersion } from "react";
 import { flushSync } from "react-dom";
 import { jsx as jsx5 } from "react/jsx-runtime";
 function isClassComponent(Component) {
   return !!(typeof Component === "function" && Component.prototype && Component.prototype.isReactComponent);
 }
 function isForwardRefComponent(Component) {
-  var _a;
-  return !!(typeof Component === "object" && ((_a = Component.$$typeof) == null ? void 0 : _a.toString()) === "Symbol(react.forward_ref)");
+  return !!(typeof Component === "object" && Component.$$typeof && (Component.$$typeof.toString() === "Symbol(react.forward_ref)" || Component.$$typeof.description === "react.forward_ref"));
+}
+function isMemoComponent(Component) {
+  return !!(typeof Component === "object" && Component.$$typeof && (Component.$$typeof.toString() === "Symbol(react.memo)" || Component.$$typeof.description === "react.memo"));
+}
+function canReceiveRef(Component) {
+  if (isClassComponent(Component)) {
+    return true;
+  }
+  if (isForwardRefComponent(Component)) {
+    return true;
+  }
+  if (isMemoComponent(Component)) {
+    const wrappedComponent = Component.type;
+    if (wrappedComponent) {
+      return isClassComponent(wrappedComponent) || isForwardRefComponent(wrappedComponent);
+    }
+  }
+  return false;
+}
+function isReact19Plus() {
+  try {
+    if (reactVersion) {
+      const majorVersion = parseInt(reactVersion.split(".")[0], 10);
+      return majorVersion >= 19;
+    }
+  } catch {
+  }
+  return false;
 }
 var ReactRenderer = class {
   /**
@@ -647,7 +672,9 @@ var ReactRenderer = class {
         this.render();
       });
     } else {
-      this.render();
+      queueMicrotask(() => {
+        this.render();
+      });
     }
   }
   /**
@@ -658,12 +685,18 @@ var ReactRenderer = class {
     const Component = this.component;
     const props = this.props;
     const editor = this.editor;
-    if (isClassComponent(Component) || isForwardRefComponent(Component)) {
-      props.ref = (ref) => {
+    const isReact19 = isReact19Plus();
+    const componentCanReceiveRef = canReceiveRef(Component);
+    const elementProps = { ...props };
+    if (elementProps.ref && !(isReact19 || componentCanReceiveRef)) {
+      delete elementProps.ref;
+    }
+    if (!elementProps.ref && (isReact19 || componentCanReceiveRef)) {
+      elementProps.ref = (ref) => {
         this.ref = ref;
       };
     }
-    this.reactElement = /* @__PURE__ */ jsx5(Component, { ...props });
+    this.reactElement = /* @__PURE__ */ jsx5(Component, { ...elementProps });
     (_a = editor == null ? void 0 : editor.contentComponent) == null ? void 0 : _a.setRenderer(this.id, this);
   }
   /**
@@ -701,11 +734,11 @@ var ReactMarkViewContext = React4.createContext({
   }
 });
 var MarkViewContent = (props) => {
-  const Tag = props.as || "span";
+  const { as: Tag = "span", ...rest } = props;
   const { markViewContentRef } = React4.useContext(ReactMarkViewContext);
   return (
     // @ts-ignore
-    /* @__PURE__ */ jsx6(Tag, { ...props, ref: markViewContentRef, "data-mark-view-content": "" })
+    /* @__PURE__ */ jsx6(Tag, { ...rest, ref: markViewContentRef, "data-mark-view-content": "" })
   );
 };
 var ReactMarkView = class extends MarkView {
@@ -713,7 +746,7 @@ var ReactMarkView = class extends MarkView {
     super(component, props, options);
     this.didMountContentDomElement = false;
     const { as = "span", attrs, className = "" } = options || {};
-    const componentProps = props;
+    const componentProps = { ...props, updateAttributes: this.updateAttributes.bind(this) };
     this.contentDOMElement = document.createElement("span");
     const markViewContentRef = (el) => {
       if (el && this.contentDOMElement && el.firstChild !== this.contentDOMElement) {
@@ -754,9 +787,27 @@ function ReactMarkViewRenderer(component, options = {}) {
 
 // src/ReactNodeViewRenderer.tsx
 import { getRenderedAttributes, NodeView } from "@tiptap/core";
-import React5 from "react";
+import { createElement as createElement2, createRef, memo } from "react";
 import { jsx as jsx7 } from "react/jsx-runtime";
 var ReactNodeView = class extends NodeView {
+  constructor(component, props, 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 = "";
+      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.
@@ -773,7 +824,8 @@ var ReactNodeView = class extends NodeView {
       HTMLAttributes: this.HTMLAttributes,
       getPos: () => this.getPos(),
       updateAttributes: (attributes = {}) => this.updateAttributes(attributes),
-      deleteNode: () => this.deleteNode()
+      deleteNode: () => this.deleteNode(),
+      ref: createRef()
     };
     if (!this.component.displayName) {
       const capitalizeFirstChar = (string) => {
@@ -784,26 +836,18 @@ var ReactNodeView = class extends NodeView {
     const onDragStart = this.onDragStart.bind(this);
     const nodeViewContentRef = (element) => {
       if (element && this.contentDOMElement && element.firstChild !== this.contentDOMElement) {
+        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;
-    const ReactNodeViewProvider = React5.memo((componentProps) => {
-      return /* @__PURE__ */ jsx7(ReactNodeViewContext.Provider, { value: context, children: React5.createElement(Component, componentProps) });
+    const ReactNodeViewProvider = memo((componentProps) => {
+      return /* @__PURE__ */ jsx7(ReactNodeViewContext.Provider, { value: context, children: createElement2(Component, componentProps) });
     });
     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) {
-      this.contentDOMElement.dataset.nodeViewContentReact = "";
-      this.contentDOMElement.style.whiteSpace = "inherit";
-    }
     let as = this.node.isInline ? "span" : "div";
     if (this.options.as) {
       as = this.options.as;