@tiptap/react 2.6.5 → 2.7.0-pre.0

package/dist/index.js

@@ -1,10 +1,14 @@
 import { BubbleMenuPlugin } from '@tiptap/extension-bubble-menu';
 import React, { forwardRef, useState, useEffect, useDebugValue, useRef, createContext, useContext } from 'react';
 import ReactDOM, { flushSync } from 'react-dom';
-import { Editor, NodeView } from '@tiptap/core';
+import { Editor, NodeView, getRenderedAttributes } from '@tiptap/core';
 export * from '@tiptap/core';
 import { FloatingMenuPlugin } from '@tiptap/extension-floating-menu';
 
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
 var shim = {exports: {}};
 
 var useSyncExternalStoreShim_production_min = {};
@@ -440,6 +444,80 @@ const EditorContentWithKey = forwardRef((props, ref) => {
 });
 const EditorContent = React.memo(EditorContentWithKey);
 
+var react = function equal(a, b) {
+  if (a === b) return true;
+
+  if (a && b && typeof a == 'object' && typeof b == 'object') {
+    if (a.constructor !== b.constructor) return false;
+
+    var length, i, keys;
+    if (Array.isArray(a)) {
+      length = a.length;
+      if (length != b.length) return false;
+      for (i = length; i-- !== 0;)
+        if (!equal(a[i], b[i])) return false;
+      return true;
+    }
+
+
+    if ((a instanceof Map) && (b instanceof Map)) {
+      if (a.size !== b.size) return false;
+      for (i of a.entries())
+        if (!b.has(i[0])) return false;
+      for (i of a.entries())
+        if (!equal(i[1], b.get(i[0]))) return false;
+      return true;
+    }
+
+    if ((a instanceof Set) && (b instanceof Set)) {
+      if (a.size !== b.size) return false;
+      for (i of a.entries())
+        if (!b.has(i[0])) return false;
+      return true;
+    }
+
+    if (ArrayBuffer.isView(a) && ArrayBuffer.isView(b)) {
+      length = a.length;
+      if (length != b.length) return false;
+      for (i = length; i-- !== 0;)
+        if (a[i] !== b[i]) return false;
+      return true;
+    }
+
+
+    if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags;
+    if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf();
+    if (a.toString !== Object.prototype.toString) return a.toString() === b.toString();
+
+    keys = Object.keys(a);
+    length = keys.length;
+    if (length !== Object.keys(b).length) return false;
+
+    for (i = length; i-- !== 0;)
+      if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
+
+    for (i = length; i-- !== 0;) {
+      var key = keys[i];
+
+      if (key === '_owner' && a.$$typeof) {
+        // React-specific: avoid traversing React elements' _owner.
+        //  _owner contains circular references
+        // and is not needed when comparing the actual elements (and not their owners)
+        continue;
+      }
+
+      if (!equal(a[key], b[key])) return false;
+    }
+
+    return true;
+  }
+
+  // true if both NaN, false otherwise
+  return a!==a && b!==b;
+};
+
+var deepEqual = /*@__PURE__*/getDefaultExportFromCjs(react);
+
 var withSelector = {exports: {}};
 
 var withSelector_production_min = {};
@@ -711,13 +789,25 @@ class EditorStateManager {
         return undefined;
     }
 }
+/**
+ * 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.
+ * @example
+ * ```tsx
+ * const editor = useEditor({...options})
+ * const { currentSelection } = useEditorState({
+ *  editor,
+ *  selector: snapshot => ({ currentSelection: snapshot.editor.state.selection }),
+ * })
+ */
 function useEditorState(options) {
-    const [editorInstance] = useState(() => new EditorStateManager(options.editor));
+    var _a;
+    const [editorStateManager] = useState(() => new EditorStateManager(options.editor));
     // Using the `useSyncExternalStore` hook to sync the editor instance with the component state
-    const selectedState = withSelectorExports.useSyncExternalStoreWithSelector(editorInstance.subscribe, editorInstance.getSnapshot, editorInstance.getServerSnapshot, options.selector, options.equalityFn);
+    const selectedState = withSelectorExports.useSyncExternalStoreWithSelector(editorStateManager.subscribe, editorStateManager.getSnapshot, editorStateManager.getServerSnapshot, options.selector, (_a = options.equalityFn) !== null && _a !== void 0 ? _a : deepEqual);
     useEffect(() => {
-        return editorInstance.watch(options.editor);
-    }, [options.editor, editorInstance]);
+        return editorStateManager.watch(options.editor);
+    }, [options.editor, editorStateManager]);
     useDebugValue(selectedState);
     return selectedState;
 }
@@ -811,6 +901,8 @@ class EditorInstanceManager {
             onTransaction: (...args) => { var _a, _b; return (_b = (_a = this.options.current).onTransaction) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); },
             onUpdate: (...args) => { var _a, _b; return (_b = (_a = this.options.current).onUpdate) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); },
             onContentError: (...args) => { var _a, _b; return (_b = (_a = this.options.current).onContentError) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); },
+            onDrop: (...args) => { var _a, _b; return (_b = (_a = this.options.current).onDrop) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); },
+            onPaste: (...args) => { var _a, _b; return (_b = (_a = this.options.current).onPaste) === null || _b === void 0 ? void 0 : _b.call(_a, ...args); },
         };
         const editor = new Editor(optionsToApply);
         // no need to keep track of the event listeners, they will be removed when the editor is destroyed
@@ -1099,7 +1191,10 @@ function isForwardRefComponent(Component) {
  * })
 */
 class ReactRenderer {
-    constructor(component, { editor, props = {}, as = 'div', className = '', attrs, }) {
+    /**
+     * Immediately creates element and renders the provided React component.
+     */
+    constructor(component, { editor, props = {}, as = 'div', className = '', }) {
         this.ref = null;
         this.id = Math.floor(Math.random() * 0xFFFFFFFF).toString();
         this.component = component;
@@ -1110,11 +1205,6 @@ class ReactRenderer {
         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) {
             // On first render, we need to flush the render synchronously
             // Renders afterwards can be async, but this fixes a cursor positioning issue
@@ -1126,12 +1216,16 @@ class ReactRenderer {
             this.render();
         }
     }
+    /**
+     * Render the React component.
+     */
     render() {
         var _a;
         const Component = this.component;
         const props = this.props;
         const editor = this.editor;
         if (isClassComponent(Component) || isForwardRefComponent(Component)) {
+            // @ts-ignore This is a hack to make the ref work
             props.ref = (ref) => {
                 this.ref = ref;
             };
@@ -1139,6 +1233,9 @@ class ReactRenderer {
         this.reactElement = React.createElement(Component, props);
         (_a = editor === null || editor === void 0 ? void 0 : editor.contentComponent) === null || _a === void 0 ? void 0 : _a.setRenderer(this.id, this);
     }
+    /**
+     * Re-renders the React component with new props.
+     */
     updateProps(props = {}) {
         this.props = {
             ...this.props,
@@ -1146,21 +1243,39 @@ class ReactRenderer {
         };
         this.render();
     }
+    /**
+     * Destroy the React component.
+     */
     destroy() {
         var _a;
         const editor = this.editor;
         (_a = editor === null || editor === void 0 ? void 0 : editor.contentComponent) === null || _a === void 0 ? 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]);
+        });
+    }
 }
 
 class ReactNodeView extends 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(),
@@ -1195,6 +1310,7 @@ class ReactNodeView extends NodeView {
             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
@@ -1212,9 +1328,13 @@ class ReactNodeView extends NodeView {
             props,
             as,
             className: `node-${this.node.type.name} ${className}`.trim(),
-            attrs: this.options.attrs,
         });
+        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
@@ -1223,15 +1343,27 @@ class ReactNodeView extends 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;
             }
@@ -1244,9 +1376,16 @@ class ReactNodeView extends 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;
@@ -1254,44 +1393,83 @@ 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;
-        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 HTMLAttributes = getRenderedAttributes(this.node, extensionAttributes);
+                attrsObj = this.options.attrs({ node: this.node, HTMLAttributes });
+            }
+            else {
+                attrsObj = this.options.attrs;
+            }
+            this.renderer.updateAttributes(attrsObj);
+        }
+    }
 }
+/**
+ * Create a React node view renderer.
+ */
 function ReactNodeViewRenderer(component, options) {
-    return (props) => {
+    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
@@ -1302,5 +1480,5 @@ function ReactNodeViewRenderer(component, options) {
     };
 }
 
-export { BubbleMenu, EditorConsumer, EditorContent, EditorContext, EditorProvider, FloatingMenu, NodeViewContent, NodeViewWrapper, PureEditorContent, ReactNodeViewContext, ReactNodeViewRenderer, ReactRenderer, useCurrentEditor, useEditor, useEditorState, useReactNodeView };
+export { BubbleMenu, EditorConsumer, EditorContent, EditorContext, EditorProvider, FloatingMenu, NodeViewContent, NodeViewWrapper, PureEditorContent, ReactNodeView, ReactNodeViewContext, ReactNodeViewRenderer, ReactRenderer, useCurrentEditor, useEditor, useEditorState, useReactNodeView };
 //# sourceMappingURL=index.js.map