@handlewithcare/react-prosemirror 3.2.4 → 3.2.6

package/README.md

@@ -713,6 +713,10 @@ Select a piece of the EditorState, a la Redux’s `useSelector`.
 This hook will only trigger a re-render of the consuming component if the return
 value of the selector changes.
 
+The provided selector must return the same value when it receieves the same
+inputs. If the selector creates and returns a new object when it runs, you'll
+enter a rerender loop.
+
 ### `useNodePos`
 
 ```ts

package/dist/cjs/hooks/useEditor.js

@@ -39,7 +39,8 @@ function useEditor(mount, options) {
         options.plugins
     ]);
     const dispatchTransaction = (0, _react.useCallback)(function dispatchTransaction(tr) {
-        if (flushSyncRef.current) {
+        const async = tr.getMeta("async");
+        if (flushSyncRef.current && !async) {
             (0, _reactdom.flushSync)(()=>{
                 if (!options.state) {
                     setState((s)=>s.apply(tr));

package/dist/cjs/hooks/useEditorStateSelector.js

@@ -12,8 +12,6 @@ const _react = require("react");
 const _EditorStateStoreContext = require("../contexts/EditorStateStoreContext.js");
 function useEditorStateSelector(selector) {
     const store = (0, _react.useContext)(_EditorStateStoreContext.EditorStateStoreContext);
-    const selectorRef = (0, _react.useRef)(selector);
-    selectorRef.current = selector;
-    const getSnapshot = ()=>selectorRef.current(store.getState());
+    const getSnapshot = ()=>selector(store.getState());
     return (0, _react.useSyncExternalStore)(store.subscribe, getSnapshot, getSnapshot);
 }

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

@@ -11,12 +11,26 @@ Object.defineProperty(exports, "useEditor", {
     }
 });
 const _core = require("@tiptap/core");
-const _react = require("@tiptap/react");
-const _react1 = require("react");
+const _react = 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);
+const _StaticEditorView = require("../../StaticEditorView.js");
+let ReactEditor = class ReactEditor extends _core.Editor {
+    constructor(options){
+        super(options);
+        // @ts-expect-error Internal property
+        this.editorView = new _StaticEditorView.StaticEditorView({
+            // @ts-expect-error Internal property
+            state: this.editorState.reconfigure({
+                plugins: this.extensionManager.plugins
+            }),
+            ...this.options.editorProps,
+            attributes: {
+                role: "textbox",
+                ...this.options.editorProps.attributes
+            }
+        });
+    }
+};
 /**
  * This class handles the creation, destruction, and re-creation of the editor instance.
  */ let EditorInstanceManager = class EditorInstanceManager {
@@ -45,7 +59,7 @@ const isNext = isSSR || Boolean(typeof window !== "undefined" && window.next);
     constructor(options){
         this.options = options;
         this.subscriptions = new Set();
-        this.setEditor(this.getInitialEditor());
+        this.setEditor(this.createEditor());
         this.scheduleDestroy();
         this.getEditor = this.getEditor.bind(this);
         this.getServerSnapshot = this.getServerSnapshot.bind(this);
@@ -61,34 +75,6 @@ const isNext = isSSR || Boolean(typeof window !== "undefined" && window.next);
         // 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() {
@@ -169,7 +155,7 @@ const isNext = isSSR || Boolean(typeof window !== "undefined" && window.next);
                 return _this.options.current.onDelete?.(...args);
             }
         };
-        const editor = new _core.Editor(optionsToApply);
+        const editor = new ReactEditor(optionsToApply);
         // no need to keep track of the event listeners, they will be removed when the editor is destroyed
         return editor;
     }
@@ -320,30 +306,13 @@ const isNext = isSSR || Boolean(typeof window !== "undefined" && window.next);
 };
 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);
+    const mostRecentOptions = (0, _react.useRef)(options);
     mostRecentOptions.current = options;
-    const [instanceManager] = (0, _react1.useState)(()=>new EditorInstanceManager(mostRecentOptions));
+    const [instanceManager] = (0, _react.useState)(()=>new EditorInstanceManager(mostRecentOptions));
     const editor = (0, _index.useSyncExternalStore)(instanceManager.subscribe, instanceManager.getEditor, instanceManager.getServerSnapshot);
-    (0, _react1.useDebugValue)(editor);
+    (0, _react.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;
-        }
-    });
+    (0, _react.useEffect)(instanceManager.onRender(deps));
     return editor;
 }

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

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "useTiptapEditor", {
         return useTiptapEditor;
     }
 });
-const _StaticEditorView = require("../../StaticEditorView.js");
 const _ReactProseMirror = require("../extensions/ReactProseMirror.js");
 const _ReactProseMirrorCommands = require("../extensions/ReactProseMirrorCommands.js");
 const _useEditor = require("./useEditor.js");
@@ -28,34 +27,9 @@ function useTiptapEditor(options, deps) {
         };
         extensions.push(_ReactProseMirrorCommands.ReactProseMirrorCommands);
     }
-    const editor = (0, _useEditor.useEditor)({
+    return (0, _useEditor.useEditor)({
         ...options,
         extensions,
         element: null
     }, deps);
-    // @ts-expect-error private property
-    editor.editorView ??= new _StaticEditorView.StaticEditorView({
-        // @ts-expect-error private property
-        state: editor.editorState,
-        ...editor.options.editorProps,
-        attributes: {
-            role: "textbox",
-            ...editor.options.editorProps.attributes
-        }
-    });
-    // @ts-expect-error private property
-    const stateHasPlugins = !!editor.editorState.plugins.length;
-    const stateNeedsReconfigure = !stateHasPlugins && !editor.isDestroyed;
-    if (stateNeedsReconfigure) {
-        const managerPlugins = editor.extensionManager.plugins;
-        if (managerPlugins.length) {
-            // @ts-expect-error private property
-            editor.editorState = editor.editorState.reconfigure({
-                plugins: editor.extensionManager.plugins
-            });
-            // @ts-expect-error private property
-            editor.editorView.updateState(editor.editorState);
-        }
-    }
-    return editor;
 }

package/dist/esm/hooks/useEditor.js

@@ -37,7 +37,8 @@ let didWarnValueDefaultValue = false;
         options.plugins
     ]);
     const dispatchTransaction = useCallback(function dispatchTransaction(tr) {
-        if (flushSyncRef.current) {
+        const async = tr.getMeta("async");
+        if (flushSyncRef.current && !async) {
             flushSync(()=>{
                 if (!options.state) {
                     setState((s)=>s.apply(tr));

package/dist/esm/hooks/useEditorStateSelector.js

@@ -1,4 +1,4 @@
-import { useContext, useRef, useSyncExternalStore } from "react";
+import { useContext, useSyncExternalStore } from "react";
 import { EditorStateStoreContext } from "../contexts/EditorStateStoreContext.js";
 /**
  * Select a piece of the EditorState, a la Redux’s
@@ -9,8 +9,6 @@ import { EditorStateStoreContext } from "../contexts/EditorStateStoreContext.js"
  * changes.
  */ export function useEditorStateSelector(selector) {
     const store = useContext(EditorStateStoreContext);
-    const selectorRef = useRef(selector);
-    selectorRef.current = selector;
-    const getSnapshot = ()=>selectorRef.current(store.getState());
+    const getSnapshot = ()=>selector(store.getState());
     return useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
 }

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

@@ -1,12 +1,26 @@
 // 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);
+import { StaticEditorView } from "../../StaticEditorView.js";
+let ReactEditor = class ReactEditor extends Editor {
+    constructor(options){
+        super(options);
+        // @ts-expect-error Internal property
+        this.editorView = new StaticEditorView({
+            // @ts-expect-error Internal property
+            state: this.editorState.reconfigure({
+                plugins: this.extensionManager.plugins
+            }),
+            ...this.options.editorProps,
+            attributes: {
+                role: "textbox",
+                ...this.options.editorProps.attributes
+            }
+        });
+    }
+};
 /**
  * This class handles the creation, destruction, and re-creation of the editor instance.
  */ let EditorInstanceManager = class EditorInstanceManager {
@@ -35,7 +49,7 @@ const isNext = isSSR || Boolean(typeof window !== "undefined" && window.next);
     constructor(options){
         this.options = options;
         this.subscriptions = new Set();
-        this.setEditor(this.getInitialEditor());
+        this.setEditor(this.createEditor());
         this.scheduleDestroy();
         this.getEditor = this.getEditor.bind(this);
         this.getServerSnapshot = this.getServerSnapshot.bind(this);
@@ -51,34 +65,6 @@ const isNext = isSSR || Boolean(typeof window !== "undefined" && window.next);
         // 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() {
@@ -159,7 +145,7 @@ const isNext = isSSR || Boolean(typeof window !== "undefined" && window.next);
                 return _this.options.current.onDelete?.(...args);
             }
         };
-        const editor = new Editor(optionsToApply);
+        const editor = new ReactEditor(optionsToApply);
         // no need to keep track of the event listeners, they will be removed when the editor is destroyed
         return editor;
     }
@@ -318,22 +304,5 @@ export function useEditor() {
     // 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,4 +1,3 @@
-import { StaticEditorView } from "../../StaticEditorView.js";
 import { ReactProseMirror } from "../extensions/ReactProseMirror.js";
 import { ReactProseMirrorCommands } from "../extensions/ReactProseMirrorCommands.js";
 import { useEditor } from "./useEditor.js";
@@ -24,34 +23,9 @@ import { useEditor } from "./useEditor.js";
         };
         extensions.push(ReactProseMirrorCommands);
     }
-    const editor = useEditor({
+    return useEditor({
         ...options,
         extensions,
         element: null
     }, deps);
-    // @ts-expect-error private property
-    editor.editorView ??= new StaticEditorView({
-        // @ts-expect-error private property
-        state: editor.editorState,
-        ...editor.options.editorProps,
-        attributes: {
-            role: "textbox",
-            ...editor.options.editorProps.attributes
-        }
-    });
-    // @ts-expect-error private property
-    const stateHasPlugins = !!editor.editorState.plugins.length;
-    const stateNeedsReconfigure = !stateHasPlugins && !editor.isDestroyed;
-    if (stateNeedsReconfigure) {
-        const managerPlugins = editor.extensionManager.plugins;
-        if (managerPlugins.length) {
-            // @ts-expect-error private property
-            editor.editorState = editor.editorState.reconfigure({
-                plugins: editor.extensionManager.plugins
-            });
-            // @ts-expect-error private property
-            editor.editorView.updateState(editor.editorState);
-        }
-    }
-    return editor;
 }