@tiptap/react 2.23.1 → 2.24.1

package/dist/index.js

@@ -1,6 +1,6 @@
 import { BubbleMenuPlugin } from '@tiptap/extension-bubble-menu';
 import React, { forwardRef, useState, useDebugValue, useLayoutEffect, useEffect, useRef, createContext, useContext, version, createRef, memo, createElement } from 'react';
-import ReactDOM, { flushSync } from 'react-dom';
+import ReactDOM from 'react-dom';
 import { Editor, NodeView, getRenderedAttributes } from '@tiptap/core';
 export * from '@tiptap/core';
 import { FloatingMenuPlugin } from '@tiptap/extension-floating-menu';
@@ -1295,16 +1295,9 @@ class ReactRenderer {
         if (className) {
             this.element.classList.add(...className.split(' '));
         }
-        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
-            flushSync(() => {
-                this.render();
-            });
-        }
-        else {
+        queueMicrotask(() => {
             this.render();
-        }
+        });
     }
     /**
      * Render the React component.
@@ -1361,6 +1354,24 @@ class ReactRenderer {
 }
 
 class ReactNodeView 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 = '';
+            // 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';
+            this.dom.appendChild(this.contentDOMElement);
+        }
+    }
     /**
      * Setup the React component.
      * Called on initialization.
@@ -1389,6 +1400,10 @@ class ReactNodeView extends NodeView {
         const onDragStart = this.onDragStart.bind(this);
         const 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);
             }
         };
@@ -1400,22 +1415,6 @@ class ReactNodeView extends NodeView {
             return (React.createElement(ReactNodeViewContext.Provider, { value: context }, createElement(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 = '';
-            // 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) {
             as = this.options.as;