@handlewithcare/react-prosemirror 3.1.0-tiptap.48 → 3.1.0-tiptap.49

package/dist/cjs/tiptap/hooks/useEditor.js

@@ -0,0 +1,349 @@
+// Forked from Tiptap's useEditor hook, with modifications to support
+// server-side rendering
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useEditor", {
+    enumerable: true,
+    get: function() {
+        return useEditor;
+    }
+});
+const _core = require("@tiptap/core");
+const _react = require("@tiptap/react");
+const _react1 = require("react");
+const _index = require("use-sync-external-store/shim/index.js");
+const isDev = process.env.NODE_ENV !== "production";
+const isSSR = typeof window === "undefined";
+const isNext = isSSR || Boolean(typeof window !== "undefined" && window.next);
+/**
+ * This class handles the creation, destruction, and re-creation of the editor instance.
+ */ let EditorInstanceManager = class EditorInstanceManager {
+    /**
+   * The current editor instance.
+   */ editor = null;
+    /**
+   * The most recent options to apply to the editor.
+   */ options;
+    /**
+   * The subscriptions to notify when the editor instance
+   * has been created or destroyed.
+   */ subscriptions = new Set();
+    /**
+   * A timeout to destroy the editor if it was not mounted within a time frame.
+   */ scheduledDestructionTimeout;
+    /**
+   * Whether the editor has been mounted.
+   */ isComponentMounted = false;
+    /**
+   * The most recent dependencies array.
+   */ previousDeps = null;
+    /**
+   * The unique instance ID. This is used to identify the editor instance. And will be re-generated for each new instance.
+   */ instanceId = "";
+    constructor(options){
+        this.options = options;
+        this.subscriptions = 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);
+        this.refreshEditorInstance = this.refreshEditorInstance.bind(this);
+        this.scheduleDestroy = this.scheduleDestroy.bind(this);
+        this.onRender = this.onRender.bind(this);
+        this.createEditor = this.createEditor.bind(this);
+    }
+    setEditor(editor) {
+        this.editor = editor;
+        this.instanceId = Math.random().toString(36).slice(2, 9);
+        // Notify all subscribers that the editor instance has been created
+        this.subscriptions.forEach((cb)=>cb());
+    }
+    getInitialEditor() {
+        if (this.options.current.immediatelyRender === undefined) {
+            if (isSSR || isNext) {
+                if (isDev) {
+                    /**
+           * Throw an error in development, to make sure the developer is aware that tiptap cannot be SSR'd
+           * and that they need to set `immediatelyRender` to `false` to avoid hydration mismatches.
+           */ throw new Error("Tiptap Error: SSR has been detected, please set `immediatelyRender` explicitly to `false` to avoid hydration mismatches.");
+                }
+                // Best faith effort in production, run the code in the legacy mode to avoid hydration mismatches and errors in production
+                return null;
+            }
+            // Default to immediately rendering when client-side rendering
+            return this.createEditor();
+        }
+        // ----- FORKED CHANGES -----
+        // if (this.options.current.immediatelyRender && isSSR && isDev) {
+        //   // Warn in development, to make sure the developer is aware that tiptap cannot be SSR'd, set `immediatelyRender` to `false` to avoid hydration mismatches.
+        //   throw new Error(
+        //     "Tiptap Error: SSR has been detected, and `immediatelyRender` has been set to `true` this is an unsupported configuration that may result in errors, explicitly set `immediatelyRender` to `false` to avoid hydration mismatches."
+        //   );
+        // }
+        // ----- END FORKED CHANGES -----
+        if (this.options.current.immediatelyRender) {
+            return this.createEditor();
+        }
+        return null;
+    }
+    /**
+   * Create a new editor instance. And attach event listeners.
+   */ createEditor() {
+        var _this = this;
+        const optionsToApply = {
+            ...this.options.current,
+            // Always call the most recent version of the callback function by default
+            onBeforeCreate: function() {
+                for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+                    args[_key] = arguments[_key];
+                }
+                return _this.options.current.onBeforeCreate?.(...args);
+            },
+            onBlur: function() {
+                for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+                    args[_key] = arguments[_key];
+                }
+                return _this.options.current.onBlur?.(...args);
+            },
+            onCreate: function() {
+                for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+                    args[_key] = arguments[_key];
+                }
+                return _this.options.current.onCreate?.(...args);
+            },
+            onDestroy: function() {
+                for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+                    args[_key] = arguments[_key];
+                }
+                return _this.options.current.onDestroy?.(...args);
+            },
+            onFocus: function() {
+                for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+                    args[_key] = arguments[_key];
+                }
+                return _this.options.current.onFocus?.(...args);
+            },
+            onSelectionUpdate: function() {
+                for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+                    args[_key] = arguments[_key];
+                }
+                return _this.options.current.onSelectionUpdate?.(...args);
+            },
+            onTransaction: function() {
+                for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+                    args[_key] = arguments[_key];
+                }
+                return _this.options.current.onTransaction?.(...args);
+            },
+            onUpdate: function() {
+                for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+                    args[_key] = arguments[_key];
+                }
+                return _this.options.current.onUpdate?.(...args);
+            },
+            onContentError: function() {
+                for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+                    args[_key] = arguments[_key];
+                }
+                return _this.options.current.onContentError?.(...args);
+            },
+            onDrop: function() {
+                for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+                    args[_key] = arguments[_key];
+                }
+                return _this.options.current.onDrop?.(...args);
+            },
+            onPaste: function() {
+                for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+                    args[_key] = arguments[_key];
+                }
+                return _this.options.current.onPaste?.(...args);
+            },
+            onDelete: function() {
+                for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+                    args[_key] = arguments[_key];
+                }
+                return _this.options.current.onDelete?.(...args);
+            }
+        };
+        const editor = new _core.Editor(optionsToApply);
+        // no need to keep track of the event listeners, they will be removed when the editor is destroyed
+        return editor;
+    }
+    /**
+   * Get the current editor instance.
+   */ getEditor() {
+        return this.editor;
+    }
+    // ----- FORKED CHANGES -----
+    /**
+   * Always disable the editor on the server-side.
+   */ getServerSnapshot() {
+        // return null;
+        // Return editor in SSRm, contrary to Tiptap's implementation
+        return this.editor;
+    }
+    // ----- END FORKED CHANGES -----
+    /**
+   * Subscribe to the editor instance's changes.
+   */ subscribe(onStoreChange) {
+        this.subscriptions.add(onStoreChange);
+        return ()=>{
+            this.subscriptions.delete(onStoreChange);
+        };
+    }
+    static compareOptions(a, b) {
+        return Object.keys(a).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
+   * @returns A cleanup function
+   */ onRender(deps) {
+        // The returned callback will run on each render
+        return ()=>{
+            this.isComponentMounted = true;
+            // Cleanup any scheduled destructions, since we are currently rendering
+            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 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
+                // - is destroyed
+                // - the deps array changes
+                // We need to destroy the editor instance and re-initialize it
+                this.refreshEditorInstance(deps);
+            }
+            return ()=>{
+                this.isComponentMounted = false;
+                this.scheduleDestroy();
+            };
+        };
+    }
+    /**
+   * Recreate the editor instance if the dependencies have changed.
+   */ refreshEditorInstance(deps) {
+        if (this.editor && !this.editor.isDestroyed) {
+            // Editor instance already exists
+            if (this.previousDeps === null) {
+                // If lastDeps has not yet been initialized, reuse the current editor instance
+                this.previousDeps = deps;
+                return;
+            }
+            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
+                return;
+            }
+        }
+        if (this.editor && !this.editor.isDestroyed) {
+            // Destroy the editor instance if it exists
+            this.editor.destroy();
+        }
+        this.setEditor(this.createEditor());
+        // Update the lastDeps to the current deps
+        this.previousDeps = deps;
+    }
+    /**
+   * Schedule the destruction of the editor instance.
+   * This will only destroy the editor if it was not mounted on the next tick.
+   * This is to avoid destroying the editor instance when it's actually still mounted.
+   */ scheduleDestroy() {
+        const currentInstanceId = this.instanceId;
+        const currentEditor = this.editor;
+        // Wait two ticks to see if the component is still mounted
+        this.scheduledDestructionTimeout = setTimeout(()=>{
+            if (this.isComponentMounted && this.instanceId === currentInstanceId) {
+                // If still mounted on the following tick, with the same instanceId, do not destroy the editor
+                if (currentEditor) {
+                    // just re-apply options as they might have changed
+                    currentEditor.setOptions(this.options.current);
+                }
+                return;
+            }
+            if (currentEditor && !currentEditor.isDestroyed) {
+                currentEditor.destroy();
+                if (this.instanceId === currentInstanceId) {
+                    this.setEditor(null);
+                }
+            }
+        // This allows the effect to run again between ticks
+        // which may save us from having to re-create the editor
+        }, 1);
+    }
+};
+function useEditor() {
+    let options = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {}, deps = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : [];
+    const mostRecentOptions = (0, _react1.useRef)(options);
+    mostRecentOptions.current = options;
+    const [instanceManager] = (0, _react1.useState)(()=>new EditorInstanceManager(mostRecentOptions));
+    const editor = (0, _index.useSyncExternalStore)(instanceManager.subscribe, instanceManager.getEditor, instanceManager.getServerSnapshot);
+    (0, _react1.useDebugValue)(editor);
+    // This effect will handle creating/updating the editor instance
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    (0, _react1.useEffect)(instanceManager.onRender(deps));
+    // The default behavior is to re-render on each transaction
+    // This is legacy behavior that will be removed in future versions
+    (0, _react.useEditorState)({
+        editor,
+        selector: (param)=>{
+            let { transactionNumber } = param;
+            if (options.shouldRerenderOnTransaction === false || options.shouldRerenderOnTransaction === undefined) {
+                // This will prevent the editor from re-rendering on each transaction
+                return null;
+            }
+            // This will avoid re-rendering on the first transaction when `immediatelyRender` is set to `true`
+            if (options.immediatelyRender && transactionNumber === 0) {
+                return 0;
+            }
+            return transactionNumber + 1;
+        }
+    });
+    return editor;
+}

package/dist/cjs/tiptap/hooks/useTiptapEditor.js

@@ -8,10 +8,10 @@ Object.defineProperty(exports, "useTiptapEditor", {
         return useTiptapEditor;
     }
 });
-const _react = require("@tiptap/react");
 const _StaticEditorView = require("../../StaticEditorView.js");
 const _ReactProseMirror = require("../extensions/ReactProseMirror.js");
 const _ReactProseMirrorCommands = require("../extensions/ReactProseMirrorCommands.js");
+const _useEditor = require("./useEditor.js");
 function useTiptapEditor(options, deps) {
     const extensions = [
         _ReactProseMirror.ReactProseMirror,
@@ -28,7 +28,7 @@ function useTiptapEditor(options, deps) {
         };
         extensions.push(_ReactProseMirrorCommands.ReactProseMirrorCommands);
     }
-    const editor = (0, _react.useEditor)({
+    const editor = (0, _useEditor.useEditor)({
         ...options,
         extensions,
         element: null

package/dist/cjs/tiptap/utils/ssrJSDOMPatch.js

@@ -0,0 +1,59 @@
+/**
+ * This file is used to patch global DOM variables in a NodeJS environment.
+ * This is needed for ProseMirror to work in a NodeJS environment.
+ */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+if (typeof window === "undefined") {
+    // Make sure to import JSDOM only in a NodeJS environment.
+    // The magic comments prevent bundlers from statically analyzing this require:
+    // - webpackIgnore: true  → webpack / Next.js
+    // - @vite-ignore         → Vite
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const jsdom = require(/* webpackIgnore: true */ /* @vite-ignore */ "jsdom");
+    const html = `
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Testing</title>
+  </head>
+  <body></body>
+</html>
+`;
+    const { window: window1 } = new jsdom.JSDOM(html);
+    global.window = window1;
+    global.document = window1.document;
+    // Use Object.defineProperty for navigator since it's read-only in Node.js 22+
+    Object.defineProperty(global, "navigator", {
+        value: window1.navigator,
+        writable: true,
+        configurable: true
+    });
+    global.innerHeight = 0;
+    global.SVGElement = window1.SVGElement;
+    // @ts-expect-error stub getSelection for SSR
+    document.getSelection = ()=>({});
+    document.createRange = ()=>({
+            setStart () {},
+            setEnd () {},
+            // @ts-expect-error stub getBoundingClientRect for SSR
+            getClientRects () {
+                return {
+                    left: 0,
+                    top: 0,
+                    right: 0,
+                    bottom: 0
+                };
+            },
+            // @ts-expect-error stub getBoundingClientRect for SSR
+            getBoundingClientRect () {
+                return {
+                    left: 0,
+                    top: 0,
+                    right: 0,
+                    bottom: 0
+                };
+            }
+        });
+}

package/dist/cjs/viewdesc.js

@@ -266,9 +266,7 @@ let ViewDesc = class ViewDesc {
                 prev = i ? this.children[i - 1] : null;
                 if (!prev || prev.dom.parentNode == this.contentDOM) break;
             }
-            if (prev && side && enter && !prev.border && !prev.domAtom) {
-                return prev.domFromPos(prev.size, side);
-            }
+            if (prev && side && enter && !prev.border && !prev.domAtom) return prev.domFromPos(prev.size, side);
             return {
                 node: this.contentDOM,
                 offset: prev ? (0, _dom.domIndex)(prev.dom) + 1 : 0
@@ -403,9 +401,7 @@ let ViewDesc = class ViewDesc {
             const after = selRange.focusNode.childNodes[selRange.focusOffset];
             if (after && after.contentEditable == "false") force = true;
         }
-        if (!(force || brKludge && _browser.browser.safari) && (0, _dom.isEquivalentPosition)(anchorDOM.node, anchorDOM.offset, selRange.anchorNode, selRange.anchorOffset) && (0, _dom.isEquivalentPosition)(headDOM.node, headDOM.offset, selRange.focusNode, selRange.focusOffset)) {
-            return;
-        }
+        if (!(force || brKludge && _browser.browser.safari) && (0, _dom.isEquivalentPosition)(anchorDOM.node, anchorDOM.offset, selRange.anchorNode, selRange.anchorOffset) && (0, _dom.isEquivalentPosition)(headDOM.node, headDOM.offset, selRange.focusNode, selRange.focusOffset)) return;
         // Selection.extend can be used to create an 'inverted' selection
         // (one where the focus is before the anchor), but not all
         // browsers support it yet.
@@ -670,10 +666,7 @@ let TextViewDesc = class TextViewDesc extends NodeViewDesc {
             skip: skip || true
         };
     }
-    update(node, outerDeco, _innerDeco, _view) {
-        if (this.dirty == NODE_DIRTY || this.dirty != NOT_DIRTY && !this.inParent() || !node.sameMarkup(this.node)) return false;
-        this.updateOuterDeco(outerDeco);
-        this.node = node;
+    update(_node, _outerDeco, _innerDeco, _view) {
         this.dirty = NOT_DIRTY;
         return true;
     }

package/dist/esm/ReactEditorView.js

@@ -33,7 +33,6 @@ function changedNodeViews(a, b) {
     nextProps;
     prevState;
     _destroyed;
-    deferPendingEffects;
     constructor(place, props){
         // Prevent the base class from destroying the React-managed nodes.
         // Restore them below after invoking the base class constructor.
@@ -86,7 +85,6 @@ function changedNodeViews(a, b) {
         // @ts-expect-error this violates the typing but class does it, too.
         this.docView = null;
         this._destroyed = false;
-        this.deferPendingEffects = false;
     }
     get props() {
         return this.nextProps;

package/dist/esm/components/ChildNodeViews.js

@@ -51,18 +51,13 @@ const ChildView = /*#__PURE__*/ memo(function ChildView(param) {
         key: child.key
     }, (param)=>{
         let { siblingsRef, parentRef } = param;
-        return /*#__PURE__*/ React.createElement(EditorContext.Consumer, null, (param)=>{
-            let { registerEventListener, unregisterEventListener } = param;
-            return /*#__PURE__*/ React.createElement(TextNodeView, {
-                view: view,
-                node: child.node,
-                getPos: getPos,
-                siblingsRef: siblingsRef,
-                parentRef: parentRef,
-                decorations: child.outerDeco,
-                registerEventListener: registerEventListener,
-                unregisterEventListener: unregisterEventListener
-            });
+        return /*#__PURE__*/ React.createElement(TextNodeView, {
+            view: view,
+            node: child.node,
+            getPos: getPos,
+            siblingsRef: siblingsRef,
+            parentRef: parentRef,
+            decorations: child.outerDeco
         });
     }) : /*#__PURE__*/ React.createElement(NodeView, {
         key: child.key,

package/dist/esm/components/CursorWrapper.js

@@ -1,9 +1,8 @@
-import React, { forwardRef, useImperativeHandle, useRef, useState } from "react";
+import React, { forwardRef, useImperativeHandle, useRef } from "react";
 import { domIndex } from "../dom.js";
 import { useEditorEffect } from "../hooks/useEditorEffect.js";
 export const CursorWrapper = /*#__PURE__*/ forwardRef(function CursorWrapper(param, ref) {
     let { widget, getPos, ...props } = param;
-    const [shouldRender, setShouldRender] = useState(true);
     const innerRef = useRef(null);
     useImperativeHandle(ref, ()=>{
         return innerRef.current;
@@ -15,20 +14,22 @@ export const CursorWrapper = /*#__PURE__*/ forwardRef(function CursorWrapper(par
         // @ts-expect-error Internal property - domSelection
         const domSel = view.domSelection();
         const node = innerRef.current;
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        domSel.collapse(node.parentNode, domIndex(node) + 1);
+        const img = node.nodeName == "IMG";
+        if (img) {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            domSel.collapse(node.parentNode, domIndex(node) + 1);
+        } else {
+            domSel.collapse(node, 0);
+        }
         // @ts-expect-error Internal property - domObserver
         view.domObserver.connectSelection();
-        setTimeout(()=>{
-            setShouldRender(false);
-        });
     }, []);
-    return shouldRender ? /*#__PURE__*/ React.createElement("img", {
+    return /*#__PURE__*/ React.createElement("img", {
         ref: innerRef,
         className: "ProseMirror-separator",
         // eslint-disable-next-line react/no-unknown-property
         "mark-placeholder": "true",
         alt: "",
         ...props
-    }) : null;
+    });
 });