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

package/dist/cjs/hooks/useComponentEventListeners.js

@@ -9,9 +9,17 @@ Object.defineProperty(exports, "useComponentEventListeners", {
     }
 });
 const _react = require("react");
-const _componentEventListeners = require("../plugins/componentEventListeners.js");
-function useComponentEventListeners() {
-    const [registry, setRegistry] = (0, _react.useState)(new Map());
+const _reactdom = require("react-dom");
+function useComponentEventListeners(existingHandlers) {
+    const [registry, setRegistry] = (0, _react.useState)(new Map(Object.entries(existingHandlers ?? {}).map((param)=>{
+        let [eventName, handler] = param;
+        return [
+            eventName,
+            handler ? [
+                handler
+            ] : []
+        ];
+    })));
     const registerEventListener = (0, _react.useCallback)((eventType, handler)=>{
         const handlers = registry.get(eventType) ?? [];
         handlers.unshift(handler);
@@ -28,12 +36,45 @@ function useComponentEventListeners() {
     }, [
         registry
     ]);
-    const componentEventListenersPlugin = (0, _react.useMemo)(()=>(0, _componentEventListeners.componentEventListeners)(registry), [
+    (0, _react.useLayoutEffect)(()=>{
+        if (!existingHandlers) return;
+        for (const [eventType, handler] of Object.entries(existingHandlers)){
+            if (!handler) return;
+            registerEventListener(eventType, handler);
+        }
+        return ()=>{
+            for (const [eventType, handler] of Object.entries(existingHandlers)){
+                if (!handler) return;
+                unregisterEventListener(eventType, handler);
+            }
+        };
+    }, [
+        existingHandlers,
+        registerEventListener,
+        unregisterEventListener
+    ]);
+    const handleDOMEvents = (0, _react.useMemo)(()=>{
+        const domEventHandlers = {};
+        for (const [eventType, handlers] of registry.entries()){
+            function handleEvent(view, event) {
+                for (const handler of handlers){
+                    let handled = false;
+                    (0, _reactdom.unstable_batchedUpdates)(()=>{
+                        handled = !!handler(view, event);
+                    });
+                    if (handled || event.defaultPrevented) return true;
+                }
+                return false;
+            }
+            domEventHandlers[eventType] = handleEvent;
+        }
+        return domEventHandlers;
+    }, [
         registry
     ]);
     return {
         registerEventListener,
         unregisterEventListener,
-        componentEventListenersPlugin
+        handleDOMEvents
     };
 }

package/dist/cjs/hooks/useEditor.js

@@ -32,7 +32,7 @@ function useEditor(mount, options) {
     const defaultState = options.defaultState ?? _constants.EMPTY_STATE;
     const [_state, setState] = (0, _react.useState)(defaultState);
     const state = options.state ?? _state;
-    const { componentEventListenersPlugin, registerEventListener, unregisterEventListener } = (0, _useComponentEventListeners.useComponentEventListeners)();
+    const { handleDOMEvents, registerEventListener, unregisterEventListener } = (0, _useComponentEventListeners.useComponentEventListeners)(options.handleDOMEvents);
     const setCursorWrapper = (0, _react.useCallback)((deco)=>{
         (0, _reactdom.flushSync)(()=>{
             _setCursorWrapper(deco);
@@ -40,11 +40,9 @@ function useEditor(mount, options) {
     }, []);
     const plugins = (0, _react.useMemo)(()=>[
             ...options.plugins ?? [],
-            componentEventListenersPlugin,
             (0, _beforeInputPlugin.beforeInputPlugin)(setCursorWrapper)
         ], [
         options.plugins,
-        componentEventListenersPlugin,
         setCursorWrapper
     ]);
     const dispatchTransaction = (0, _react.useCallback)(function dispatchTransaction(tr) {
@@ -73,7 +71,8 @@ function useEditor(mount, options) {
         ...options,
         state,
         plugins,
-        dispatchTransaction
+        dispatchTransaction,
+        handleDOMEvents
     };
     const [view, setView] = (0, _react.useState)(()=>{
         return new _StaticEditorView.StaticEditorView(directEditorProps);
@@ -105,17 +104,18 @@ function useEditor(mount, options) {
         if (view instanceof _ReactEditorView.ReactEditorView && !view.isDestroyed) {
             if (view.deferPendingEffects) {
                 setTimeout(()=>{
+                    // Plugins might dispatch transactions from their
+                    // view update lifecycle hooks
                     flushSyncRef.current = false;
                     view.commitPendingEffects();
                     flushSyncRef.current = true;
                 });
             } else {
-                // Plugins might dispatch transactions from their
-                // view update lifecycle hooks
                 flushSyncRef.current = false;
                 view.commitPendingEffects();
                 flushSyncRef.current = true;
             }
+            view.commitPendingEffects();
         }
     });
     view.update(directEditorProps);

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/esm/hooks/useComponentEventListeners.js

@@ -1,5 +1,5 @@
-/* Copyright (c) The New York Times Company */ import { useCallback, useMemo, useState } from "react";
-import { componentEventListeners } from "../plugins/componentEventListeners.js";
+/* Copyright (c) The New York Times Company */ import { useCallback, useLayoutEffect, useMemo, useState } from "react";
+import { unstable_batchedUpdates as batch } from "react-dom";
 /**
  * Produces a plugin that can be used with ProseMirror to handle DOM
  * events at the EditorView.dom element.
@@ -14,19 +14,27 @@ import { componentEventListeners } from "../plugins/componentEventListeners.js";
  * @privateRemarks
  *
  * This hook uses a combination of mutable and immutable updates to give
- * us precise control over when we re-create the ProseMirror plugin.
+ * us precise control over when we re-create the event listeners.
  *
- * The plugin has a mutable reference to the set of handlers for each
+ * The hook has a mutable reference to the set of handlers for each
  * event type, but the set of event types is static. This means that we
- * need to produce a new ProseMirror plugin whenever a new event type is
- * registered. We avoid producing a new ProseMirrer plugin in any other
- * scenario to avoid the performance overhead of reconfiguring the plugins
- * in the EditorView.
+ * need to produce a new handleDOMEVents record whenever a new event type is
+ * registered. We avoid producing a new record in any other
+ * scenario to avoid the performance overhead of re-registering the event
+ * listeners in the EditorView.
  *
  * To accomplish this, we shallowly clone the registry whenever a new event
  * type is registered.
- */ export function useComponentEventListeners() {
-    const [registry, setRegistry] = useState(new Map());
+ */ export function useComponentEventListeners(existingHandlers) {
+    const [registry, setRegistry] = useState(new Map(Object.entries(existingHandlers ?? {}).map((param)=>{
+        let [eventName, handler] = param;
+        return [
+            eventName,
+            handler ? [
+                handler
+            ] : []
+        ];
+    })));
     const registerEventListener = useCallback((eventType, handler)=>{
         const handlers = registry.get(eventType) ?? [];
         handlers.unshift(handler);
@@ -43,12 +51,45 @@ import { componentEventListeners } from "../plugins/componentEventListeners.js";
     }, [
         registry
     ]);
-    const componentEventListenersPlugin = useMemo(()=>componentEventListeners(registry), [
+    useLayoutEffect(()=>{
+        if (!existingHandlers) return;
+        for (const [eventType, handler] of Object.entries(existingHandlers)){
+            if (!handler) return;
+            registerEventListener(eventType, handler);
+        }
+        return ()=>{
+            for (const [eventType, handler] of Object.entries(existingHandlers)){
+                if (!handler) return;
+                unregisterEventListener(eventType, handler);
+            }
+        };
+    }, [
+        existingHandlers,
+        registerEventListener,
+        unregisterEventListener
+    ]);
+    const handleDOMEvents = useMemo(()=>{
+        const domEventHandlers = {};
+        for (const [eventType, handlers] of registry.entries()){
+            function handleEvent(view, event) {
+                for (const handler of handlers){
+                    let handled = false;
+                    batch(()=>{
+                        handled = !!handler(view, event);
+                    });
+                    if (handled || event.defaultPrevented) return true;
+                }
+                return false;
+            }
+            domEventHandlers[eventType] = handleEvent;
+        }
+        return domEventHandlers;
+    }, [
         registry
     ]);
     return {
         registerEventListener,
         unregisterEventListener,
-        componentEventListenersPlugin
+        handleDOMEvents
     };
 }

package/dist/esm/hooks/useEditor.js

@@ -30,7 +30,7 @@ let didWarnValueDefaultValue = false;
     const defaultState = options.defaultState ?? EMPTY_STATE;
     const [_state, setState] = useState(defaultState);
     const state = options.state ?? _state;
-    const { componentEventListenersPlugin, registerEventListener, unregisterEventListener } = useComponentEventListeners();
+    const { handleDOMEvents, registerEventListener, unregisterEventListener } = useComponentEventListeners(options.handleDOMEvents);
     const setCursorWrapper = useCallback((deco)=>{
         flushSync(()=>{
             _setCursorWrapper(deco);
@@ -38,11 +38,9 @@ let didWarnValueDefaultValue = false;
     }, []);
     const plugins = useMemo(()=>[
             ...options.plugins ?? [],
-            componentEventListenersPlugin,
             beforeInputPlugin(setCursorWrapper)
         ], [
         options.plugins,
-        componentEventListenersPlugin,
         setCursorWrapper
     ]);
     const dispatchTransaction = useCallback(function dispatchTransaction(tr) {
@@ -71,7 +69,8 @@ let didWarnValueDefaultValue = false;
         ...options,
         state,
         plugins,
-        dispatchTransaction
+        dispatchTransaction,
+        handleDOMEvents
     };
     const [view, setView] = useState(()=>{
         return new StaticEditorView(directEditorProps);
@@ -103,17 +102,18 @@ let didWarnValueDefaultValue = false;
         if (view instanceof ReactEditorView && !view.isDestroyed) {
             if (view.deferPendingEffects) {
                 setTimeout(()=>{
+                    // Plugins might dispatch transactions from their
+                    // view update lifecycle hooks
                     flushSyncRef.current = false;
                     view.commitPendingEffects();
                     flushSyncRef.current = true;
                 });
             } else {
-                // Plugins might dispatch transactions from their
-                // view update lifecycle hooks
                 flushSyncRef.current = false;
                 view.commitPendingEffects();
                 flushSyncRef.current = true;
             }
+            view.commitPendingEffects();
         }
     });
     view.update(directEditorProps);