@handlewithcare/react-prosemirror 2.0.0

package/dist/cjs/components/__tests__/ProseMirror.test.js

@@ -0,0 +1,382 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable @typescript-eslint/no-non-null-assertion */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _react = require("@testing-library/react");
+const _prosemirrorModel = require("prosemirror-model");
+const _prosemirrorState = require("prosemirror-state");
+const _prosemirrorTestBuilder = require("prosemirror-test-builder");
+const _react1 = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _useEditorEffectJs = require("../../hooks/useEditorEffect.js");
+const _useStopEventJs = require("../../hooks/useStopEvent.js");
+const _reactKeysJs = require("../../plugins/reactKeys.js");
+const _editorViewTestHelpersJs = require("../../testing/editorViewTestHelpers.js");
+const _proseMirrorJs = require("../ProseMirror.js");
+const _proseMirrorDocJs = require("../ProseMirrorDoc.js");
+function _extends() {
+    _extends = Object.assign || function(target) {
+        for(var i = 1; i < arguments.length; i++){
+            var source = arguments[i];
+            for(var key in source){
+                if (Object.prototype.hasOwnProperty.call(source, key)) {
+                    target[key] = source[key];
+                }
+            }
+        }
+        return target;
+    };
+    return _extends.apply(this, arguments);
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interopRequireWildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+describe("ProseMirror", ()=>{
+    it("renders a contenteditable", async ()=>{
+        const schema = new _prosemirrorModel.Schema({
+            nodes: {
+                text: {},
+                doc: {
+                    content: "text*"
+                }
+            }
+        });
+        const editorState = _prosemirrorState.EditorState.create({
+            schema
+        });
+        function TestEditor() {
+            return /*#__PURE__*/ _react1.default.createElement(_proseMirrorJs.ProseMirror, {
+                defaultState: editorState
+            }, /*#__PURE__*/ _react1.default.createElement(_proseMirrorDocJs.ProseMirrorDoc, {
+                "data-testid": "editor"
+            }));
+        }
+        (0, _react.render)(/*#__PURE__*/ _react1.default.createElement(TestEditor, null));
+        const editor = _react.screen.getByTestId("editor");
+        editor.focus();
+        await browser.keys("H");
+        await browser.keys("e");
+        await browser.keys("l");
+        await browser.keys("l");
+        await browser.keys("o");
+        await browser.keys(",");
+        await browser.keys(" ");
+        await browser.keys("w");
+        await browser.keys("o");
+        await browser.keys("r");
+        await browser.keys("l");
+        await browser.keys("d");
+        await browser.keys("!");
+        expect(editor.textContent).toBe("Hello, world!");
+    });
+    it("supports lifted editor state", async ()=>{
+        const schema = new _prosemirrorModel.Schema({
+            nodes: {
+                text: {},
+                doc: {
+                    content: "text*"
+                }
+            }
+        });
+        let outerEditorState = _prosemirrorState.EditorState.create({
+            schema
+        });
+        function TestEditor() {
+            const [editorState, setEditorState] = (0, _react1.useState)(outerEditorState);
+            (0, _react1.useEffect)(()=>{
+                outerEditorState = editorState;
+            }, [
+                editorState
+            ]);
+            return /*#__PURE__*/ _react1.default.createElement(_proseMirrorJs.ProseMirror, {
+                state: editorState,
+                dispatchTransaction: (tr)=>setEditorState(editorState.apply(tr))
+            }, /*#__PURE__*/ _react1.default.createElement(_proseMirrorDocJs.ProseMirrorDoc, {
+                "data-testid": "editor"
+            }));
+        }
+        (0, _react.render)(/*#__PURE__*/ _react1.default.createElement(TestEditor, null));
+        const editor = _react.screen.getByTestId("editor");
+        editor.focus();
+        await browser.keys("H");
+        await browser.keys("e");
+        await browser.keys("l");
+        await browser.keys("l");
+        await browser.keys("o");
+        await browser.keys(",");
+        await browser.keys(" ");
+        await browser.keys("w");
+        await browser.keys("o");
+        await browser.keys("r");
+        await browser.keys("l");
+        await browser.keys("d");
+        await browser.keys("!");
+        expect(outerEditorState.doc.textContent).toBe("Hello, world!");
+    });
+    it("supports React NodeViews", async ()=>{
+        const schema = new _prosemirrorModel.Schema({
+            nodes: {
+                text: {},
+                paragraph: {
+                    content: "text*",
+                    toDOM () {
+                        return [
+                            "p",
+                            0
+                        ];
+                    }
+                },
+                doc: {
+                    content: "paragraph+"
+                }
+            }
+        });
+        const editorState = _prosemirrorState.EditorState.create({
+            schema
+        });
+        const Paragraph = /*#__PURE__*/ (0, _react1.forwardRef)(function Paragraph(param, ref) {
+            let { children  } = param;
+            return /*#__PURE__*/ _react1.default.createElement("p", {
+                ref: ref,
+                "data-testid": "paragraph"
+            }, children);
+        });
+        const reactNodeViews = {
+            paragraph: Paragraph
+        };
+        function TestEditor() {
+            return /*#__PURE__*/ _react1.default.createElement(_proseMirrorJs.ProseMirror, {
+                defaultState: editorState,
+                nodeViews: reactNodeViews
+            }, /*#__PURE__*/ _react1.default.createElement(_proseMirrorDocJs.ProseMirrorDoc, {
+                "data-testid": "editor"
+            }));
+        }
+        (0, _react.render)(/*#__PURE__*/ _react1.default.createElement(TestEditor, null));
+        const editor = _react.screen.getByTestId("editor");
+        editor.focus();
+        await browser.keys("H");
+        await browser.keys("e");
+        await browser.keys("l");
+        await browser.keys("l");
+        await browser.keys("o");
+        await browser.keys(",");
+        await browser.keys(" ");
+        await browser.keys("w");
+        await browser.keys("o");
+        await browser.keys("r");
+        await browser.keys("l");
+        await browser.keys("d");
+        await browser.keys("!");
+        expect(editor.textContent).toBe("Hello, world!");
+        // Ensure that ProseMirror really rendered our Paragraph
+        // component, not just any old <p> tag
+        expect(_react.screen.getAllByTestId("paragraph").length).toBeGreaterThanOrEqual(1);
+    });
+    it("reflects the current state in .props", async ()=>{
+        const { view  } = (0, _editorViewTestHelpersJs.tempEditor)({
+            doc: (0, _prosemirrorTestBuilder.doc)((0, _prosemirrorTestBuilder.p)())
+        });
+        expect(view.state).toBe(view.props.state);
+    });
+    it("calls handleScrollToSelection when appropriate", async ()=>{
+        let scrolled = 0;
+        const { view  } = (0, _editorViewTestHelpersJs.tempEditor)({
+            doc: (0, _prosemirrorTestBuilder.doc)((0, _prosemirrorTestBuilder.p)()),
+            handleScrollToSelection: ()=>{
+                scrolled++;
+                return false;
+            }
+        });
+        view.dispatch(view.state.tr.scrollIntoView());
+        expect(scrolled).toBe(1);
+    });
+    it("can be queried for the DOM position at a doc position", async ()=>{
+        const { view  } = (0, _editorViewTestHelpersJs.tempEditor)({
+            doc: (0, _prosemirrorTestBuilder.doc)((0, _prosemirrorTestBuilder.ul)((0, _prosemirrorTestBuilder.li)((0, _prosemirrorTestBuilder.p)((0, _prosemirrorTestBuilder.strong)("foo")))))
+        });
+        const inText = view.domAtPos(4);
+        expect(inText.offset).toBe(1);
+        expect(inText.node.nodeValue).toBe("foo");
+        const beforeLI = view.domAtPos(1);
+        expect(beforeLI.offset).toBe(0);
+        expect(beforeLI.node.nodeName).toBe("UL");
+        const afterP = view.domAtPos(7);
+        expect(afterP.offset).toBe(1);
+        expect(afterP.node.nodeName).toBe("LI");
+    });
+    it("can bias DOM position queries to enter nodes", async ()=>{
+        const { view  } = (0, _editorViewTestHelpersJs.tempEditor)({
+            doc: (0, _prosemirrorTestBuilder.doc)((0, _prosemirrorTestBuilder.p)((0, _prosemirrorTestBuilder.em)((0, _prosemirrorTestBuilder.strong)("a"), "b"), "c"))
+        });
+        function get(pos, bias) {
+            const r = view.domAtPos(pos, bias);
+            return (r.node.nodeType == 1 ? r.node.nodeName : r.node.nodeValue) + "@" + r.offset;
+        }
+        expect(get(1, 0)).toBe("P@0");
+        expect(get(1, -1)).toBe("P@0");
+        expect(get(1, 1)).toBe("a@0");
+        expect(get(2, -1)).toBe("a@1");
+        expect(get(2, 0)).toBe("EM@1");
+        expect(get(2, 1)).toBe("b@0");
+        expect(get(3, -1)).toBe("b@1");
+        expect(get(3, 0)).toBe("P@1");
+        expect(get(3, 1)).toBe("c@0");
+        expect(get(4, -1)).toBe("c@1");
+        expect(get(4, 0)).toBe("P@2");
+        expect(get(4, 1)).toBe("P@2");
+    });
+    it("can be queried for a node's DOM representation", async ()=>{
+        const { view  } = (0, _editorViewTestHelpersJs.tempEditor)({
+            doc: (0, _prosemirrorTestBuilder.doc)((0, _prosemirrorTestBuilder.p)("foo"), (0, _prosemirrorTestBuilder.hr)())
+        });
+        expect(view.nodeDOM(0).nodeName).toBe("P");
+        expect(view.nodeDOM(5).nodeName).toBe("HR");
+        expect(view.nodeDOM(3)).toBeNull();
+    });
+    it("can map DOM positions to doc positions", async ()=>{
+        const { view  } = (0, _editorViewTestHelpersJs.tempEditor)({
+            doc: (0, _prosemirrorTestBuilder.doc)((0, _prosemirrorTestBuilder.p)("foo"), (0, _prosemirrorTestBuilder.hr)())
+        });
+        expect(view.posAtDOM(view.dom.firstChild.firstChild, 2)).toBe(3);
+        expect(view.posAtDOM(view.dom, 1)).toBe(5);
+        expect(view.posAtDOM(view.dom, 2)).toBe(6);
+        expect(view.posAtDOM(view.dom.lastChild, 0, -1)).toBe(5);
+        expect(view.posAtDOM(view.dom.lastChild, 0, 1)).toBe(6);
+    });
+    it("binds this to itself in dispatchTransaction prop", async ()=>{
+        let thisBinding;
+        const { view  } = (0, _editorViewTestHelpersJs.tempEditor)({
+            doc: (0, _prosemirrorTestBuilder.doc)((0, _prosemirrorTestBuilder.p)("foo"), (0, _prosemirrorTestBuilder.hr)()),
+            dispatchTransaction () {
+                // eslint-disable-next-line @typescript-eslint/no-this-alias
+                thisBinding = this;
+            }
+        });
+        view.dispatch(view.state.tr.insertText("x"));
+        expect(view).toBe(thisBinding);
+    });
+    it("replaces the EditorView when ProseMirror would redraw", async ()=>{
+        const viewPlugin = ()=>new _prosemirrorState.Plugin({
+                props: {
+                    nodeViews: {
+                        horizontal_rule () {
+                            const dom = document.createElement("hr");
+                            return {
+                                dom
+                            };
+                        }
+                    }
+                }
+            });
+        const startDoc = (0, _prosemirrorTestBuilder.doc)((0, _prosemirrorTestBuilder.p)());
+        const firstState = _prosemirrorState.EditorState.create({
+            doc: startDoc,
+            schema: _prosemirrorTestBuilder.schema,
+            plugins: [
+                viewPlugin(),
+                (0, _reactKeysJs.reactKeys)()
+            ]
+        });
+        let firstView = null;
+        let secondView = null;
+        function Test() {
+            (0, _useEditorEffectJs.useEditorEffect)((v)=>{
+                if (firstView === null) {
+                    firstView = v;
+                } else {
+                    secondView = v;
+                }
+            });
+            return null;
+        }
+        const Paragraph = /*#__PURE__*/ (0, _react1.forwardRef)(function Paragraph(param, ref) {
+            let { nodeProps , children , ...props } = param;
+            return /*#__PURE__*/ _react1.default.createElement("p", _extends({
+                ref: ref,
+                "data-testid": "node-view"
+            }, props), children);
+        });
+        const { rerender  } = (0, _react.render)(/*#__PURE__*/ _react1.default.createElement(_proseMirrorJs.ProseMirror, {
+            state: firstState,
+            nodeViews: {
+                paragraph: Paragraph
+            }
+        }, /*#__PURE__*/ _react1.default.createElement(Test, null), /*#__PURE__*/ _react1.default.createElement(_proseMirrorDocJs.ProseMirrorDoc, null)));
+        expect(()=>_react.screen.getByTestId("node-view")).not.toThrow();
+        const secondState = _prosemirrorState.EditorState.create({
+            doc: startDoc,
+            schema: _prosemirrorTestBuilder.schema,
+            plugins: [
+                viewPlugin(),
+                (0, _reactKeysJs.reactKeys)()
+            ]
+        });
+        rerender(/*#__PURE__*/ _react1.default.createElement(_proseMirrorJs.ProseMirror, {
+            state: secondState,
+            nodeViews: {
+                paragraph: Paragraph
+            }
+        }, /*#__PURE__*/ _react1.default.createElement(Test, null), /*#__PURE__*/ _react1.default.createElement(_proseMirrorDocJs.ProseMirrorDoc, null)));
+        expect(()=>_react.screen.getByTestId("node-view")).not.toThrow();
+        expect(firstView).not.toBeNull();
+        expect(secondView).not.toBeNull();
+        expect(firstView === secondView).toBeFalsy();
+    });
+    it("supports focusing interactive controls", async ()=>{
+        (0, _editorViewTestHelpersJs.tempEditor)({
+            doc: (0, _prosemirrorTestBuilder.doc)((0, _prosemirrorTestBuilder.hr)()),
+            nodeViews: {
+                horizontal_rule: /*#__PURE__*/ (0, _react1.forwardRef)(function Button(param, ref) {
+                    let { nodeProps , ...props } = param;
+                    (0, _useStopEventJs.useStopEvent)(()=>{
+                        return true;
+                    });
+                    return /*#__PURE__*/ _react1.default.createElement("button", _extends({
+                        id: "button",
+                        ref: ref,
+                        type: "button"
+                    }, props), "Click me");
+                })
+            }
+        });
+        const button = _react.screen.getByText("Click me");
+        await $("#button").click();
+        expect(document.activeElement === button).toBeTruthy();
+    });
+});

package/dist/cjs/contexts/ChildDescriptorsContext.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ChildDescriptorsContext", {
+    enumerable: true,
+    get: function() {
+        return ChildDescriptorsContext;
+    }
+});
+const _react = require("react");
+const ChildDescriptorsContext = (0, _react.createContext)({
+    parentRef: {
+        current: undefined
+    },
+    siblingsRef: {
+        current: []
+    }
+});

package/dist/cjs/contexts/EditorContext.js

@@ -0,0 +1,12 @@
+/* Copyright (c) The New York Times Company */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "EditorContext", {
+    enumerable: true,
+    get: function() {
+        return EditorContext;
+    }
+});
+const _react = require("react");
+const EditorContext = (0, _react.createContext)(null);

package/dist/cjs/contexts/EditorStateContext.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "EditorStateContext", {
+    enumerable: true,
+    get: function() {
+        return EditorStateContext;
+    }
+});
+const _react = require("react");
+const EditorStateContext = (0, _react.createContext)(null);

package/dist/cjs/contexts/LayoutGroupContext.js

@@ -0,0 +1,12 @@
+/* Copyright (c) The New York Times Company */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "LayoutGroupContext", {
+    enumerable: true,
+    get: function() {
+        return LayoutGroupContext;
+    }
+});
+const _react = require("react");
+const LayoutGroupContext = /*#__PURE__*/ (0, _react.createContext)(null);

package/dist/cjs/contexts/NodeViewContext.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "NodeViewContext", {
+    enumerable: true,
+    get: function() {
+        return NodeViewContext;
+    }
+});
+const _react = require("react");
+const NodeViewContext = /*#__PURE__*/ (0, _react.createContext)(null);

package/dist/cjs/contexts/SelectNodeContext.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SelectNodeContext", {
+    enumerable: true,
+    get: function() {
+        return SelectNodeContext;
+    }
+});
+const _react = require("react");
+const SelectNodeContext = (0, _react.createContext)(null);

package/dist/cjs/contexts/StopEventContext.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "StopEventContext", {
+    enumerable: true,
+    get: function() {
+        return StopEventContext;
+    }
+});
+const _react = require("react");
+const StopEventContext = (0, _react.createContext)(null);

package/dist/cjs/contexts/__tests__/DeferredLayoutEffects.test.js

@@ -0,0 +1,141 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _react = require("@testing-library/react");
+const _react1 = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _layoutGroupJs = require("../../components/LayoutGroup.js");
+const _useLayoutGroupEffectJs = require("../../hooks/useLayoutGroupEffect.js");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interopRequireWildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+describe("DeferredLayoutEffects", ()=>{
+    jest.useFakeTimers("modern");
+    it("registers multiple effects and runs them", ()=>{
+        function Parent() {
+            return /*#__PURE__*/ _react1.default.createElement(_layoutGroupJs.LayoutGroup, null, /*#__PURE__*/ _react1.default.createElement(Child, null));
+        }
+        function Child() {
+            const [double, setDouble] = (0, _react1.useState)(1);
+            (0, _react1.useLayoutEffect)(()=>{
+                if (double === 2) {
+                    setTimeout(()=>{
+                        setDouble((d)=>d * 2.5);
+                    }, 500);
+                }
+                if (double === 20) {
+                    setDouble((d)=>d * 2.5);
+                }
+            }, [
+                double
+            ]);
+            (0, _useLayoutGroupEffectJs.useLayoutGroupEffect)(()=>{
+                const timeout = setTimeout(()=>{
+                    setDouble((d)=>d * 2);
+                }, 1000);
+                return ()=>{
+                    clearTimeout(timeout);
+                };
+            }, [
+                double
+            ]);
+            return /*#__PURE__*/ _react1.default.createElement("div", null, /*#__PURE__*/ _react1.default.createElement("div", {
+                "data-testid": "double"
+            }, double));
+        }
+        // The component mounts ...
+        // ... the initial value should be 1
+        // ... there should be one timeout scheduled by the deferred effect
+        (0, _react.render)(/*#__PURE__*/ _react1.default.createElement(Parent, null));
+        expect(_react.screen.getByTestId("double").innerHTML).toBe("1");
+        // This block assert that deferred effects run.
+        // --------------------------------------------
+        // 1000 milliseconds go by ...
+        // ... the timeout set by the deferred effect should run
+        // ... the timeout should double the new value to 2
+        // ... the immediate effect should set a timeout
+        // ... the deferred effect should set a timeout
+        (0, _react.act)(()=>{
+            jest.advanceTimersByTime(1000);
+        });
+        expect(_react.screen.getByTestId("double").innerHTML).toBe("2");
+        // The next three blocks assert that cleanup of deferred effects run.
+        // ------------------------------------------------------------------
+        // 500 milliseconds go by ...
+        // ... the timeout set by the immediate effect should run
+        // ... the timeout should set the value to 5
+        // ... the old deferred effect should cancel its timeout
+        // ... the new deferred effect should set a new timeout
+        (0, _react.act)(()=>{
+            jest.advanceTimersByTime(500);
+        });
+        expect(_react.screen.getByTestId("double").innerHTML).toBe("5");
+        // ... 500 more milliseconds go by ...
+        // ... the canceled timeout should not run
+        // ... the rescheduled timoeut should not yet run
+        (0, _react.act)(()=>{
+            jest.advanceTimersByTime(500);
+        });
+        expect(_react.screen.getByTestId("double").innerHTML).toBe("5");
+        // ... 500 more milliseconds go by ...
+        // ... the rescheduled timeout should run
+        // ... the timeout should double the value to 10
+        // ... the deferred effect should set a new timeout
+        (0, _react.act)(()=>{
+            jest.advanceTimersByTime(500);
+        });
+        expect(_react.screen.getByTestId("double").innerHTML).toBe("10");
+        // The next block asserts that cancelation of deferred effects works.
+        // ------------------------------------------------------------------
+        // 1000 milliseconds go by ...
+        // ... the timeout set by the deferred effect should run
+        // ... the timeout should double the value to 20
+        // ... the immediate effect should then set the value to 50
+        // ... the deferred effect from the first render should not run
+        // ... the deferred effect from the second render should run
+        // ... the deferred effect that does run should set a new timeout
+        (0, _react.act)(()=>{
+            jest.advanceTimersByTime(1000);
+        });
+        // For this assertion, we need to clear a timer from the React scheduler.
+        jest.advanceTimersByTime(1);
+        expect(_react.screen.getByTestId("double").innerHTML).toBe("50");
+        expect(jest.getTimerCount()).toBe(1);
+    });
+});

package/dist/cjs/decorations/ReactWidgetType.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    ReactWidgetType: function() {
+        return ReactWidgetType;
+    },
+    widget: function() {
+        return widget;
+    }
+});
+const _prosemirrorview = require("prosemirror-view");
+function compareObjs(a, b) {
+    if (a == b) return true;
+    for(const p in a)if (a[p] !== b[p]) return false;
+    for(const p in b)if (!(p in a)) return false;
+    return true;
+}
+const noSpec = {
+    side: 0
+};
+let ReactWidgetType = class ReactWidgetType {
+    Component;
+    side;
+    spec;
+    constructor(Component, spec){
+        this.Component = Component;
+        this.spec = spec ?? noSpec;
+        this.side = this.spec.side ?? 0;
+    }
+    map(mapping, span, offset, oldOffset) {
+        const { pos, deleted } = mapping.mapResult(span.from + oldOffset, this.side < 0 ? -1 : 1);
+        // @ts-expect-error The Decoration constructor is private/internal, but
+        // we need to use it for our custom widget implementation here.
+        return deleted ? null : new _prosemirrorview.Decoration(pos - offset, pos - offset, this);
+    }
+    valid() {
+        return true;
+    }
+    eq(other) {
+        return this == other || other instanceof ReactWidgetType && (this.spec.key && this.spec.key == other.spec.key || this.Component == other.Component && compareObjs(this.spec, other.spec));
+    }
+    destroy() {
+    // Can be implemented with React effect hooks
+    }
+};
+function widget(pos, component, spec) {
+    // @ts-expect-error The Decoration constructor is private/internal, but
+    // we need to use it for our custom widget implementation here.
+    return new _prosemirrorview.Decoration(pos, pos, new ReactWidgetType(component, spec));
+}