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

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

@@ -0,0 +1,339 @@
+// Forked from Tiptap's useEditor hook, with modifications to support
+// server-side rendering
+import { Editor } from "@tiptap/core";
+import { useEditorState } from "@tiptap/react";
+import { useDebugValue, useEffect, useRef, useState } from "react";
+import { useSyncExternalStore } from "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 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);
+    }
+};
+export 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 = useRef(options);
+    mostRecentOptions.current = options;
+    const [instanceManager] = useState(()=>new EditorInstanceManager(mostRecentOptions));
+    const editor = useSyncExternalStore(instanceManager.subscribe, instanceManager.getEditor, instanceManager.getServerSnapshot);
+    useDebugValue(editor);
+    // This effect will handle creating/updating the editor instance
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    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
+    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/esm/tiptap/hooks/useTiptapEditor.js

@@ -1,7 +1,7 @@
-import { useEditor } from "@tiptap/react";
 import { StaticEditorView } from "../../StaticEditorView.js";
 import { ReactProseMirror } from "../extensions/ReactProseMirror.js";
 import { ReactProseMirrorCommands } from "../extensions/ReactProseMirrorCommands.js";
+import { useEditor } from "./useEditor.js";
 export function useTiptapEditor(options, deps) {
     const extensions = [
         ReactProseMirror,