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

package/dist/index.cjs

@@ -40,6 +40,7 @@ __export(src_exports, {
   NodeViewContent: () => NodeViewContent,
   NodeViewWrapper: () => NodeViewWrapper,
   PureEditorContent: () => PureEditorContent,
+  ReactNodeView: () => ReactNodeView,
   ReactNodeViewContext: () => ReactNodeViewContext,
   ReactNodeViewRenderer: () => ReactNodeViewRenderer,
   ReactRenderer: () => ReactRenderer,
@@ -52,11 +53,11 @@ module.exports = __toCommonJS(src_exports);
 
 // src/BubbleMenu.tsx
 var import_extension_bubble_menu = require("@tiptap/extension-bubble-menu");
-var import_react5 = __toESM(require("react"), 1);
+var import_react6 = __toESM(require("react"), 1);
 var import_react_dom2 = require("react-dom");
 
 // src/Context.tsx
-var import_react4 = __toESM(require("react"), 1);
+var import_react5 = __toESM(require("react"), 1);
 
 // src/EditorContent.tsx
 var import_react = __toESM(require("react"), 1);
@@ -215,12 +216,14 @@ var EditorContent = import_react.default.memo(EditorContentWithKey);
 
 // src/useEditor.ts
 var import_core = require("@tiptap/core");
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_shim2 = require("use-sync-external-store/shim");
 
 // src/useEditorState.ts
-var import_react2 = require("react");
+var import_react2 = __toESM(require("fast-deep-equal/es6/react"), 1);
+var import_react3 = require("react");
 var import_with_selector = require("use-sync-external-store/shim/with-selector");
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_react3.useLayoutEffect : import_react3.useEffect;
 var EditorStateManager = class {
   constructor(initialEditor) {
     this.transactionNumber = 0;
@@ -279,18 +282,19 @@ var EditorStateManager = class {
   }
 };
 function useEditorState(options) {
-  const [editorInstance] = (0, import_react2.useState)(() => new EditorStateManager(options.editor));
+  var _a;
+  const [editorStateManager] = (0, import_react3.useState)(() => new EditorStateManager(options.editor));
   const selectedState = (0, import_with_selector.useSyncExternalStoreWithSelector)(
-    editorInstance.subscribe,
-    editorInstance.getSnapshot,
-    editorInstance.getServerSnapshot,
+    editorStateManager.subscribe,
+    editorStateManager.getSnapshot,
+    editorStateManager.getServerSnapshot,
     options.selector,
-    options.equalityFn
+    (_a = options.equalityFn) != null ? _a : import_react2.default
   );
-  (0, import_react2.useEffect)(() => {
-    return editorInstance.watch(options.editor);
-  }, [options.editor, editorInstance]);
-  (0, import_react2.useDebugValue)(selectedState);
+  useIsomorphicLayoutEffect(() => {
+    return editorStateManager.watch(options.editor);
+  }, [options.editor, editorStateManager]);
+  (0, import_react3.useDebugValue)(selectedState);
   return selectedState;
 }
 
@@ -324,6 +328,7 @@ var EditorInstanceManager = class {
     this.options = options;
     this.subscriptions = /* @__PURE__ */ new Set();
     this.setEditor(this.getInitialEditor());
+    this.scheduleDestroy();
     this.getEditor = this.getEditor.bind(this);
     this.getServerSnapshot = this.getServerSnapshot.bind(this);
     this.subscribe = this.subscribe.bind(this);
@@ -401,6 +406,14 @@ var EditorInstanceManager = class {
       onContentError: (...args) => {
         var _a, _b;
         return (_b = (_a = this.options.current).onContentError) == null ? void 0 : _b.call(_a, ...args);
+      },
+      onDrop: (...args) => {
+        var _a, _b;
+        return (_b = (_a = this.options.current).onDrop) == null ? void 0 : _b.call(_a, ...args);
+      },
+      onPaste: (...args) => {
+        var _a, _b;
+        return (_b = (_a = this.options.current).onPaste) == null ? void 0 : _b.call(_a, ...args);
       }
     };
     const editor = new import_core.Editor(optionsToApply);
@@ -437,7 +450,10 @@ var EditorInstanceManager = class {
       this.isComponentMounted = true;
       clearTimeout(this.scheduledDestructionTimeout);
       if (this.editor && !this.editor.isDestroyed && deps.length === 0) {
-        this.editor.setOptions(this.options.current);
+        this.editor.setOptions({
+          ...this.options.current,
+          editable: this.editor.isEditable
+        });
       } else {
         this.refreshEditorInstance(deps);
       }
@@ -488,24 +504,24 @@ var EditorInstanceManager = class {
           this.setEditor(null);
         }
       }
-    }, 0);
+    }, 1);
   }
 };
 function useEditor(options = {}, deps = []) {
-  const mostRecentOptions = (0, import_react3.useRef)(options);
+  const mostRecentOptions = (0, import_react4.useRef)(options);
   mostRecentOptions.current = options;
-  const [instanceManager] = (0, import_react3.useState)(() => new EditorInstanceManager(mostRecentOptions));
+  const [instanceManager] = (0, import_react4.useState)(() => new EditorInstanceManager(mostRecentOptions));
   const editor = (0, import_shim2.useSyncExternalStore)(
     instanceManager.subscribe,
     instanceManager.getEditor,
     instanceManager.getServerSnapshot
   );
-  (0, import_react3.useDebugValue)(editor);
-  (0, import_react3.useEffect)(instanceManager.onRender(deps));
+  (0, import_react4.useDebugValue)(editor);
+  (0, import_react4.useEffect)(instanceManager.onRender(deps));
   useEditorState({
     editor,
     selector: ({ transactionNumber }) => {
-      if (options.shouldRerenderOnTransaction === false) {
+      if (options.shouldRerenderOnTransaction === false || options.shouldRerenderOnTransaction === void 0) {
         return null;
       }
       if (options.immediatelyRender && transactionNumber === 0) {
@@ -518,134 +534,162 @@ function useEditor(options = {}, deps = []) {
 }
 
 // src/Context.tsx
-var EditorContext = (0, import_react4.createContext)({
+var EditorContext = (0, import_react5.createContext)({
   editor: null
 });
 var EditorConsumer = EditorContext.Consumer;
-var useCurrentEditor = () => (0, import_react4.useContext)(EditorContext);
+var useCurrentEditor = () => (0, import_react5.useContext)(EditorContext);
 function EditorProvider({
   children,
   slotAfter,
   slotBefore,
+  editorContainerProps = {},
   ...editorOptions
 }) {
   const editor = useEditor(editorOptions);
+  const contextValue = (0, import_react5.useMemo)(() => ({ editor }), [editor]);
   if (!editor) {
     return null;
   }
-  return /* @__PURE__ */ import_react4.default.createElement(EditorContext.Provider, { value: { editor } }, slotBefore, /* @__PURE__ */ import_react4.default.createElement(EditorConsumer, null, ({ editor: currentEditor }) => /* @__PURE__ */ import_react4.default.createElement(EditorContent, { editor: currentEditor })), children, slotAfter);
+  return /* @__PURE__ */ import_react5.default.createElement(EditorContext.Provider, { value: contextValue }, slotBefore, /* @__PURE__ */ import_react5.default.createElement(EditorConsumer, null, ({ editor: currentEditor }) => /* @__PURE__ */ import_react5.default.createElement(EditorContent, { editor: currentEditor, ...editorContainerProps })), children, slotAfter);
 }
 
 // src/BubbleMenu.tsx
-var BubbleMenu = (props) => {
-  const menuEl = (0, import_react5.useRef)(document.createElement("div"));
-  const { editor: currentEditor } = useCurrentEditor();
-  (0, import_react5.useEffect)(() => {
-    var _a;
-    menuEl.current.style.visibility = "hidden";
-    menuEl.current.style.position = "absolute";
-    if (((_a = props.editor) == null ? void 0 : _a.isDestroyed) || (currentEditor == null ? void 0 : currentEditor.isDestroyed)) {
-      return;
-    }
-    const {
-      pluginKey = "bubbleMenu",
-      editor,
-      updateDelay,
-      resizeDelay,
-      shouldShow = null
-    } = props;
-    const menuEditor = editor || currentEditor;
-    if (!menuEditor) {
-      console.warn("BubbleMenu component is not rendered inside of an editor component or does not have editor prop.");
-      return;
+var BubbleMenu = import_react6.default.forwardRef(
+  ({
+    pluginKey = "bubbleMenu",
+    editor,
+    updateDelay,
+    resizeDelay,
+    shouldShow = null,
+    options,
+    children,
+    ...restProps
+  }, ref) => {
+    const menuEl = (0, import_react6.useRef)(document.createElement("div"));
+    if (typeof ref === "function") {
+      ref(menuEl.current);
+    } else if (ref) {
+      ref.current = menuEl.current;
     }
-    const plugin = (0, import_extension_bubble_menu.BubbleMenuPlugin)({
-      updateDelay,
-      resizeDelay,
-      editor: menuEditor,
-      element: menuEl.current,
-      pluginKey,
-      shouldShow,
-      options: props.options
-    });
-    menuEditor.registerPlugin(plugin);
-    return () => {
-      menuEditor.unregisterPlugin(pluginKey);
-      window.requestAnimationFrame(() => {
-        if (menuEl.current.parentNode) {
-          menuEl.current.parentNode.removeChild(menuEl.current);
-        }
+    const { editor: currentEditor } = useCurrentEditor();
+    (0, import_react6.useEffect)(() => {
+      const bubbleMenuElement = menuEl.current;
+      bubbleMenuElement.style.visibility = "hidden";
+      bubbleMenuElement.style.position = "absolute";
+      if ((editor == null ? void 0 : editor.isDestroyed) || (currentEditor == null ? void 0 : currentEditor.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."
+        );
+        return;
+      }
+      const plugin = (0, import_extension_bubble_menu.BubbleMenuPlugin)({
+        updateDelay,
+        resizeDelay,
+        editor: attachToEditor,
+        element: bubbleMenuElement,
+        pluginKey,
+        shouldShow,
+        options
       });
-    };
-  }, [props.editor, currentEditor]);
-  const portal = (0, import_react_dom2.createPortal)(
-    /* @__PURE__ */ import_react5.default.createElement("div", { className: props.className }, props.children),
-    menuEl.current
-  );
-  return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, portal);
-};
+      attachToEditor.registerPlugin(plugin);
+      return () => {
+        attachToEditor.unregisterPlugin(pluginKey);
+        window.requestAnimationFrame(() => {
+          if (bubbleMenuElement.parentNode) {
+            bubbleMenuElement.parentNode.removeChild(bubbleMenuElement);
+          }
+        });
+      };
+    }, [editor, currentEditor]);
+    return (0, import_react_dom2.createPortal)(
+      /* @__PURE__ */ import_react6.default.createElement(
+        "div",
+        {
+          ...restProps
+        },
+        children
+      ),
+      menuEl.current
+    );
+  }
+);
 
 // src/FloatingMenu.tsx
 var import_extension_floating_menu = require("@tiptap/extension-floating-menu");
-var import_react6 = __toESM(require("react"), 1);
+var import_react7 = __toESM(require("react"), 1);
 var import_react_dom3 = require("react-dom");
-var FloatingMenu = (props) => {
-  const menuEl = (0, import_react6.useRef)(document.createElement("div"));
+var FloatingMenu = import_react7.default.forwardRef(({
+  pluginKey = "floatingMenu",
+  editor,
+  shouldShow = null,
+  options,
+  children,
+  ...restProps
+}, ref) => {
+  const menuEl = (0, import_react7.useRef)(document.createElement("div"));
+  if (typeof ref === "function") {
+    ref(menuEl.current);
+  } else if (ref) {
+    ref.current = menuEl.current;
+  }
   const { editor: currentEditor } = useCurrentEditor();
-  (0, import_react6.useEffect)(() => {
-    var _a;
-    menuEl.current.style.visibility = "hidden";
-    menuEl.current.style.position = "absolute";
-    if (((_a = props.editor) == null ? void 0 : _a.isDestroyed) || (currentEditor == null ? void 0 : currentEditor.isDestroyed)) {
+  (0, import_react7.useEffect)(() => {
+    const floatingMenuElement = menuEl.current;
+    floatingMenuElement.style.visibility = "hidden";
+    floatingMenuElement.style.position = "absolute";
+    if ((editor == null ? void 0 : editor.isDestroyed) || (currentEditor == null ? void 0 : currentEditor.isDestroyed)) {
       return;
     }
-    const {
-      pluginKey = "floatingMenu",
-      editor,
-      options,
-      shouldShow = null
-    } = props;
-    const menuEditor = editor || currentEditor;
-    if (!menuEditor) {
-      console.warn("FloatingMenu component is not rendered inside of an editor component or does not have editor prop.");
+    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 = (0, import_extension_floating_menu.FloatingMenuPlugin)({
+      editor: attachToEditor,
+      element: floatingMenuElement,
       pluginKey,
-      editor: menuEditor,
-      element: menuEl.current,
-      options,
-      shouldShow
+      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 = (0, import_react_dom3.createPortal)(
-    /* @__PURE__ */ import_react6.default.createElement("div", { className: props.className }, props.children),
+  }, [editor, currentEditor]);
+  return (0, import_react_dom3.createPortal)(
+    /* @__PURE__ */ import_react7.default.createElement(
+      "div",
+      {
+        ...restProps
+      },
+      children
+    ),
     menuEl.current
   );
-  return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, portal);
-};
+});
 
 // src/NodeViewContent.tsx
-var import_react8 = __toESM(require("react"), 1);
+var import_react9 = __toESM(require("react"), 1);
 
 // src/useReactNodeView.ts
-var import_react7 = require("react");
-var ReactNodeViewContext = (0, import_react7.createContext)({
+var import_react8 = require("react");
+var ReactNodeViewContext = (0, import_react8.createContext)({
   onDragStart: void 0
 });
-var useReactNodeView = () => (0, import_react7.useContext)(ReactNodeViewContext);
+var useReactNodeView = () => (0, import_react8.useContext)(ReactNodeViewContext);
 
 // src/NodeViewContent.tsx
 var NodeViewContent = (props) => {
@@ -653,7 +697,7 @@ var NodeViewContent = (props) => {
   const { nodeViewContentRef } = useReactNodeView();
   return (
     // @ts-ignore
-    /* @__PURE__ */ import_react8.default.createElement(
+    /* @__PURE__ */ import_react9.default.createElement(
       Tag,
       {
         ...props,
@@ -669,13 +713,13 @@ var NodeViewContent = (props) => {
 };
 
 // src/NodeViewWrapper.tsx
-var import_react9 = __toESM(require("react"), 1);
-var NodeViewWrapper = import_react9.default.forwardRef((props, ref) => {
+var import_react10 = __toESM(require("react"), 1);
+var NodeViewWrapper = import_react10.default.forwardRef((props, ref) => {
   const { onDragStart } = useReactNodeView();
   const Tag = props.as || "div";
   return (
     // @ts-ignore
-    /* @__PURE__ */ import_react9.default.createElement(
+    /* @__PURE__ */ import_react10.default.createElement(
       Tag,
       {
         ...props,
@@ -693,10 +737,10 @@ var NodeViewWrapper = import_react9.default.forwardRef((props, ref) => {
 
 // src/ReactNodeViewRenderer.tsx
 var import_core2 = require("@tiptap/core");
-var import_react11 = __toESM(require("react"), 1);
+var import_react12 = __toESM(require("react"), 1);
 
 // src/ReactRenderer.tsx
-var import_react10 = __toESM(require("react"), 1);
+var import_react11 = __toESM(require("react"), 1);
 var import_react_dom4 = require("react-dom");
 function isClassComponent(Component) {
   return !!(typeof Component === "function" && Component.prototype && Component.prototype.isReactComponent);
@@ -706,12 +750,14 @@ function isForwardRefComponent(Component) {
   return !!(typeof Component === "object" && ((_a = Component.$$typeof) == null ? void 0 : _a.toString()) === "Symbol(react.forward_ref)");
 }
 var ReactRenderer = class {
+  /**
+   * Immediately creates element and renders the provided React component.
+   */
   constructor(component, {
     editor,
     props = {},
     as = "div",
-    className = "",
-    attrs
+    className = ""
   }) {
     this.ref = null;
     this.id = Math.floor(Math.random() * 4294967295).toString();
@@ -723,11 +769,6 @@ var ReactRenderer = class {
     if (className) {
       this.element.classList.add(...className.split(" "));
     }
-    if (attrs) {
-      Object.keys(attrs).forEach((key) => {
-        this.element.setAttribute(key, attrs[key]);
-      });
-    }
     if (this.editor.isInitialized) {
       (0, import_react_dom4.flushSync)(() => {
         this.render();
@@ -736,6 +777,9 @@ var ReactRenderer = class {
       this.render();
     }
   }
+  /**
+   * Render the React component.
+   */
   render() {
     var _a;
     const Component = this.component;
@@ -746,9 +790,12 @@ var ReactRenderer = class {
         this.ref = ref;
       };
     }
-    this.reactElement = import_react10.default.createElement(Component, props);
+    this.reactElement = /* @__PURE__ */ import_react11.default.createElement(Component, { ...props });
     (_a = editor == null ? void 0 : editor.contentComponent) == null ? void 0 : _a.setRenderer(this.id, this);
   }
+  /**
+   * Re-renders the React component with new props.
+   */
   updateProps(props = {}) {
     this.props = {
       ...this.props,
@@ -756,22 +803,40 @@ var ReactRenderer = class {
     };
     this.render();
   }
+  /**
+   * Destroy the React component.
+   */
   destroy() {
     var _a;
     const editor = this.editor;
     (_a = editor == null ? void 0 : editor.contentComponent) == null ? void 0 : _a.removeRenderer(this.id);
   }
+  /**
+   * Update the attributes of the element that holds the React component.
+   */
+  updateAttributes(attributes) {
+    Object.keys(attributes).forEach((key) => {
+      this.element.setAttribute(key, attributes[key]);
+    });
+  }
 };
 
 // src/ReactNodeViewRenderer.tsx
 var ReactNodeView = class extends import_core2.NodeView {
+  /**
+   * Setup the React component.
+   * Called on initialization.
+   */
   mount() {
     const props = {
       editor: this.editor,
       node: this.node,
       decorations: this.decorations,
+      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()
@@ -790,9 +855,11 @@ var ReactNodeView = class extends import_core2.NodeView {
     };
     const context = { onDragStart, nodeViewContentRef };
     const Component = this.component;
-    const ReactNodeViewProvider = import_react11.default.memo((componentProps) => {
-      return /* @__PURE__ */ import_react11.default.createElement(ReactNodeViewContext.Provider, { value: context }, import_react11.default.createElement(Component, componentProps));
-    });
+    const ReactNodeViewProvider = import_react12.default.memo(
+      (componentProps) => {
+        return /* @__PURE__ */ import_react12.default.createElement(ReactNodeViewContext.Provider, { value: context }, import_react12.default.createElement(Component, componentProps));
+      }
+    );
     ReactNodeViewProvider.displayName = "ReactNodeView";
     if (this.node.isLeaf) {
       this.contentDOMElement = null;
@@ -802,6 +869,7 @@ var ReactNodeView = class extends import_core2.NodeView {
       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";
@@ -815,10 +883,14 @@ var ReactNodeView = class extends import_core2.NodeView {
       editor: this.editor,
       props,
       as,
-      className: `node-${this.node.type.name} ${className}`.trim(),
-      attrs: this.options.attrs
+      className: `node-${this.node.type.name} ${className}`.trim()
     });
+    this.updateElementAttributes();
   }
+  /**
+   * Return the DOM element.
+   * This is the element that will be used to display the node view.
+   */
   get dom() {
     var _a;
     if (this.renderer.element.firstElementChild && !((_a = this.renderer.element.firstElementChild) == null ? void 0 : _a.hasAttribute("data-node-view-wrapper"))) {
@@ -826,15 +898,27 @@ var ReactNodeView = class extends import_core2.NodeView {
     }
     return this.renderer.element;
   }
+  /**
+   * 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;
     }
     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;
-    if (from <= this.getPos() && to >= this.getPos() + this.node.nodeSize) {
+    const pos = this.getPos();
+    if (typeof pos !== "number") {
+      return;
+    }
+    if (from <= pos && to >= pos + this.node.nodeSize) {
       if (this.renderer.props.selected) {
         return;
       }
@@ -846,9 +930,16 @@ var ReactNodeView = class extends import_core2.NodeView {
       this.deselectNode();
     }
   }
-  update(node, decorations) {
-    const updateProps = (props) => {
+  /**
+   * On update, update the React component.
+   * To prevent unnecessary updates, the `update` option can be used.
+   */
+  update(node, decorations, innerDecorations) {
+    const rerenderComponent = (props) => {
       this.renderer.updateProps(props);
+      if (typeof this.options.attrs === "function") {
+        this.updateElementAttributes();
+      }
     };
     if (node.type !== this.node.type) {
       return false;
@@ -856,41 +947,74 @@ var ReactNodeView = class extends import_core2.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;
-    updateProps({ node, decorations });
+    this.innerDecorations = innerDecorations;
+    rerenderComponent({ node, decorations, innerDecorations });
     return true;
   }
+  /**
+   * Select the node.
+   * Add the `selected` prop and the `ProseMirror-selectednode` class.
+   */
   selectNode() {
     this.renderer.updateProps({
       selected: true
     });
     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
     });
     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 = {};
+      if (typeof this.options.attrs === "function") {
+        const extensionAttributes = this.editor.extensionManager.attributes;
+        const HTMLAttributes2 = (0, import_core2.getRenderedAttributes)(this.node, extensionAttributes);
+        attrsObj = this.options.attrs({ node: this.node, HTMLAttributes: HTMLAttributes2 });
+      } else {
+        attrsObj = this.options.attrs;
+      }
+      this.renderer.updateAttributes(attrsObj);
+    }
+  }
 };
 function ReactNodeViewRenderer(component, options) {
   return (props) => {
@@ -914,6 +1038,7 @@ __reExport(src_exports, require("@tiptap/core"), module.exports);
   NodeViewContent,
   NodeViewWrapper,
   PureEditorContent,
+  ReactNodeView,
   ReactNodeViewContext,
   ReactNodeViewRenderer,
   ReactRenderer,