@handlewithcare/react-prosemirror 3.1.0-tiptap.28 → 3.1.0-tiptap.30

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

@@ -0,0 +1,324 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable @typescript-eslint/no-non-null-assertion */ import { render, screen } from "@testing-library/react";
+import { Schema } from "prosemirror-model";
+import { EditorState, Plugin } from "prosemirror-state";
+import { doc, em, hr, li, p, schema, strong, ul } from "prosemirror-test-builder";
+import React, { forwardRef, useEffect, useState } from "react";
+import { useEditorEffect } from "../../hooks/useEditorEffect.js";
+import { useStopEvent } from "../../hooks/useStopEvent.js";
+import { reactKeys } from "../../plugins/reactKeys.js";
+import { tempEditor } from "../../testing/editorViewTestHelpers.js";
+import { ProseMirror } from "../ProseMirror.js";
+import { ProseMirrorDoc } from "../ProseMirrorDoc.js";
+describe("ProseMirror", ()=>{
+    it("renders a contenteditable", async ()=>{
+        const schema = new Schema({
+            nodes: {
+                text: {},
+                doc: {
+                    content: "text*"
+                }
+            }
+        });
+        const editorState = EditorState.create({
+            schema
+        });
+        function TestEditor() {
+            return /*#__PURE__*/ React.createElement(ProseMirror, {
+                defaultState: editorState
+            }, /*#__PURE__*/ React.createElement(ProseMirrorDoc, {
+                "data-testid": "editor"
+            }));
+        }
+        render(/*#__PURE__*/ React.createElement(TestEditor, null));
+        const editor = 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 Schema({
+            nodes: {
+                text: {},
+                doc: {
+                    content: "text*"
+                }
+            }
+        });
+        let outerEditorState = EditorState.create({
+            schema
+        });
+        function TestEditor() {
+            const [editorState, setEditorState] = useState(outerEditorState);
+            useEffect(()=>{
+                outerEditorState = editorState;
+            }, [
+                editorState
+            ]);
+            return /*#__PURE__*/ React.createElement(ProseMirror, {
+                state: editorState,
+                dispatchTransaction: (tr)=>setEditorState(editorState.apply(tr))
+            }, /*#__PURE__*/ React.createElement(ProseMirrorDoc, {
+                "data-testid": "editor"
+            }));
+        }
+        render(/*#__PURE__*/ React.createElement(TestEditor, null));
+        const editor = 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 Schema({
+            nodes: {
+                text: {},
+                paragraph: {
+                    content: "text*",
+                    toDOM () {
+                        return [
+                            "p",
+                            0
+                        ];
+                    }
+                },
+                doc: {
+                    content: "paragraph+"
+                }
+            }
+        });
+        const editorState = EditorState.create({
+            schema
+        });
+        const Paragraph = /*#__PURE__*/ forwardRef(function Paragraph(param, ref) {
+            let { children } = param;
+            return /*#__PURE__*/ React.createElement("p", {
+                ref: ref,
+                "data-testid": "paragraph"
+            }, children);
+        });
+        const reactNodeViews = {
+            paragraph: Paragraph
+        };
+        function TestEditor() {
+            return /*#__PURE__*/ React.createElement(ProseMirror, {
+                defaultState: editorState,
+                nodeViews: reactNodeViews
+            }, /*#__PURE__*/ React.createElement(ProseMirrorDoc, {
+                "data-testid": "editor"
+            }));
+        }
+        render(/*#__PURE__*/ React.createElement(TestEditor, null));
+        const editor = 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(screen.getAllByTestId("paragraph").length).toBeGreaterThanOrEqual(1);
+    });
+    it("reflects the current state in .props", async ()=>{
+        const { view } = tempEditor({
+            doc: doc(p())
+        });
+        expect(view.state).toBe(view.props.state);
+    });
+    it("calls handleScrollToSelection when appropriate", async ()=>{
+        let scrolled = 0;
+        const { view } = tempEditor({
+            doc: doc(p()),
+            handleScrollToSelection: ()=>{
+                scrolled++;
+                return false;
+            }
+        });
+        view.focus();
+        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 } = tempEditor({
+            doc: doc(ul(li(p(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 } = tempEditor({
+            doc: doc(p(em(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 } = tempEditor({
+            doc: doc(p("foo"), 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 } = tempEditor({
+            doc: doc(p("foo"), 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 } = tempEditor({
+            doc: doc(p("foo"), 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("supports focusing interactive controls", async ()=>{
+        tempEditor({
+            doc: doc(hr()),
+            nodeViews: {
+                horizontal_rule: /*#__PURE__*/ forwardRef(function Button(param, ref) {
+                    let { nodeProps, ...props } = param;
+                    useStopEvent(()=>{
+                        return true;
+                    });
+                    return /*#__PURE__*/ React.createElement("button", {
+                        ...props,
+                        id: "button",
+                        ref: ref,
+                        type: "button"
+                    }, "Click me");
+                })
+            }
+        });
+        const button = screen.getByText("Click me");
+        await $("#button").click();
+        expect(document.activeElement === button).toBeTruthy();
+    });
+    it("cleans up event listeners on reconfigure", async ()=>{
+        let firstFocusHandlerCalled = 0;
+        let secondFocusHandlerCalled = 0;
+        const viewPlugin = ()=>new Plugin({
+                props: {
+                    nodeViews: {
+                        horizontal_rule () {
+                            const dom = document.createElement("hr");
+                            return {
+                                dom
+                            };
+                        }
+                    }
+                }
+            });
+        const startDoc = doc(p("first"));
+        const firstState = EditorState.create({
+            doc: startDoc,
+            schema,
+            plugins: [
+                viewPlugin(),
+                reactKeys()
+            ]
+        });
+        let firstView = null;
+        let secondView = null;
+        function Test() {
+            useEditorEffect((v)=>{
+                if (firstView === null) {
+                    firstView = v;
+                } else {
+                    secondView = v;
+                }
+            });
+            return null;
+        }
+        const { rerender } = render(/*#__PURE__*/ React.createElement(ProseMirror, {
+            state: firstState,
+            handleDOMEvents: {
+                focus: ()=>{
+                    firstFocusHandlerCalled++;
+                }
+            }
+        }, /*#__PURE__*/ React.createElement(Test, null), /*#__PURE__*/ React.createElement(ProseMirrorDoc, null)));
+        const secondState = EditorState.create({
+            doc: doc(p("second")),
+            schema,
+            plugins: [
+                viewPlugin(),
+                reactKeys()
+            ]
+        });
+        rerender(/*#__PURE__*/ React.createElement(ProseMirror, {
+            state: secondState,
+            handleDOMEvents: {
+                focus: ()=>{
+                    secondFocusHandlerCalled++;
+                }
+            }
+        }, /*#__PURE__*/ React.createElement(Test, null), /*#__PURE__*/ React.createElement(ProseMirrorDoc, null)));
+        secondView.dom.focus();
+        expect(firstFocusHandlerCalled).toBe(0);
+        expect(secondFocusHandlerCalled).toBe(1);
+    });
+});

package/dist/esm/components/nodes/NodeViewConstructorView.js

@@ -2,12 +2,14 @@ import { DOMSerializer } from "prosemirror-model";
 import React, { cloneElement, memo, useMemo, useRef } from "react";
 import { createPortal } from "react-dom";
 import { ChildDescriptionsContext } from "../../contexts/ChildDescriptionsContext.js";
+import { useForceUpdate } from "../../hooks/useForceUpdate.js";
 import { useNodeViewDescription } from "../../hooks/useNodeViewDescription.js";
 import { ChildNodeViews, wrapInDeco } from "../ChildNodeViews.js";
 export const NodeViewConstructorView = /*#__PURE__*/ memo(function NodeViewConstructorView(param) {
     let { constructor, node, getPos, innerDeco, outerDeco } = param;
     const ref = useRef(null);
     const innerRef = useRef(null);
+    const forceUpdate = useForceUpdate();
     const nodeProps = useMemo(()=>({
             node,
             getPos,
@@ -53,6 +55,11 @@ export const NodeViewConstructorView = /*#__PURE__*/ memo(function NodeViewConst
                 nodeDOM.draggable = true;
             }
         }
+        if (contentDOM) {
+            // Force a re-render if we have a contentDOM,
+            // so that we properly create a portal into it
+            forceUpdate();
+        }
         return {
             ...nodeView,
             destroy () {

package/dist/esm/components/nodes/ReactNodeView.js

@@ -3,15 +3,17 @@ import { ChildDescriptionsContext } from "../../contexts/ChildDescriptionsContex
 import { IgnoreMutationContext } from "../../contexts/IgnoreMutationContext.js";
 import { SelectNodeContext } from "../../contexts/SelectNodeContext.js";
 import { StopEventContext } from "../../contexts/StopEventContext.js";
+import { useForceUpdate } from "../../hooks/useForceUpdate.js";
 import { useNodeViewDescription } from "../../hooks/useNodeViewDescription.js";
 import { ChildNodeViews, wrapInDeco } from "../ChildNodeViews.js";
 export const ReactNodeView = /*#__PURE__*/ memo(function ReactNodeView(param) {
     let { component: Component, outerDeco, getPos, node, innerDeco } = param;
     const [hasCustomSelectNode, setHasCustomSelectNode] = useState(false);
     const [selected, setSelected] = useState(false);
-    const [dom, setDOM] = useState(null);
-    const [nodeDOM, setNodeDOM] = useState(null);
-    const [contentDOM, setContentDOM] = useState(null);
+    const forceUpdate = useForceUpdate();
+    const domRef = useRef(null);
+    const nodeDOMRef = useRef(null);
+    const contentDOMRef = useRef(null);
     const selectNodeRef = useRef(null);
     const deselectNodeRef = useRef(null);
     const stopEventRef = useRef(null);
@@ -41,22 +43,21 @@ export const ReactNodeView = /*#__PURE__*/ memo(function ReactNodeView(param) {
             };
         };
     }, []);
-    const nodeProps = useMemo(()=>({
+    const nodeViewDescProps = useMemo(()=>({
             node: node,
             getPos: getPos,
             decorations: outerDeco,
-            innerDecorations: innerDeco,
-            contentDOMRef: setContentDOM
+            innerDecorations: innerDeco
         }), [
         getPos,
         innerDeco,
         node,
         outerDeco
     ]);
-    const { childContextValue } = useNodeViewDescription(()=>dom, ()=>contentDOM, ()=>{
+    const { childContextValue, refUpdated } = useNodeViewDescription(()=>domRef.current, ()=>contentDOMRef.current, ()=>{
         setSelected(false);
         return {
-            dom: nodeDOM ?? dom,
+            dom: nodeDOMRef.current ?? domRef.current,
             update () {
                 return true;
             },
@@ -90,10 +91,49 @@ export const ReactNodeView = /*#__PURE__*/ memo(function ReactNodeView(param) {
                 return false;
             }
         };
-    }, nodeProps);
+    }, nodeViewDescProps);
+    const setDOM = useCallback((el)=>{
+        domRef.current = el;
+        refUpdated();
+    }, [
+        refUpdated
+    ]);
+    const setNodeDOM = useCallback((el)=>{
+        if (!!nodeDOMRef.current !== !!el) {
+            // Force a re-render if the existence of nodeDOM
+            // is changing, since we use its existince to set
+            // some props
+            forceUpdate();
+        }
+        nodeDOMRef.current = el;
+        refUpdated();
+    }, [
+        forceUpdate,
+        refUpdated
+    ]);
+    const setContentDOM = useCallback((el)=>{
+        if (!!contentDOMRef.current !== !!el) {
+            // Force a re-render if the existence of contentDOM
+            // is changing, since we use its existince to set
+            // some props
+            forceUpdate();
+        }
+        contentDOMRef.current = el;
+        refUpdated();
+    }, [
+        forceUpdate,
+        refUpdated
+    ]);
+    const nodeProps = useMemo(()=>({
+            ...nodeViewDescProps,
+            contentDOMRef: setContentDOM
+        }), [
+        nodeViewDescProps,
+        setContentDOM
+    ]);
     const props = {
         nodeProps,
-        ...!contentDOM && !nodeProps.node.isText && nodeDOM?.nodeName !== "BR" ? {
+        ...!contentDOMRef.current && !nodeProps.node.isText && nodeDOMRef.current?.nodeName !== "BR" ? {
             contentEditable: false,
             suppressContentEditableWarning: true
         } : null,

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

@@ -0,0 +1,98 @@
+/* Copyright (c) The New York Times Company */ import { act, render, screen } from "@testing-library/react";
+import React, { useLayoutEffect, useState } from "react";
+import { LayoutGroup } from "../../components/LayoutGroup.js";
+import { useLayoutGroupEffect } from "../../hooks/useLayoutGroupEffect.js";
+describe("DeferredLayoutEffects", ()=>{
+    jest.useFakeTimers("modern");
+    it("registers multiple effects and runs them", ()=>{
+        function Parent() {
+            return /*#__PURE__*/ React.createElement(LayoutGroup, null, /*#__PURE__*/ React.createElement(Child, null));
+        }
+        function Child() {
+            const [double, setDouble] = useState(1);
+            useLayoutEffect(()=>{
+                if (double === 2) {
+                    setTimeout(()=>{
+                        setDouble((d)=>d * 2.5);
+                    }, 500);
+                }
+                if (double === 20) {
+                    setDouble((d)=>d * 2.5);
+                }
+            }, [
+                double
+            ]);
+            useLayoutGroupEffect(()=>{
+                const timeout = setTimeout(()=>{
+                    setDouble((d)=>d * 2);
+                }, 1000);
+                return ()=>{
+                    clearTimeout(timeout);
+                };
+            }, [
+                double
+            ]);
+            return /*#__PURE__*/ React.createElement("div", null, /*#__PURE__*/ React.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
+        render(/*#__PURE__*/ React.createElement(Parent, null));
+        expect(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
+        act(()=>{
+            jest.advanceTimersByTime(1000);
+        });
+        expect(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
+        act(()=>{
+            jest.advanceTimersByTime(500);
+        });
+        expect(screen.getByTestId("double").innerHTML).toBe("5");
+        // ... 500 more milliseconds go by ...
+        // ... the canceled timeout should not run
+        // ... the rescheduled timoeut should not yet run
+        act(()=>{
+            jest.advanceTimersByTime(500);
+        });
+        expect(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
+        act(()=>{
+            jest.advanceTimersByTime(500);
+        });
+        expect(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
+        act(()=>{
+            jest.advanceTimersByTime(1000);
+        });
+        // For this assertion, we need to clear a timer from the React scheduler.
+        jest.advanceTimersByTime(1);
+        expect(screen.getByTestId("double").innerHTML).toBe("50");
+        expect(jest.getTimerCount()).toBe(1);
+    });
+});