@handlewithcare/react-prosemirror 2.8.1 → 2.9.0-tiptap.25

package/dist/cjs/cjs/esm/esm/components/__tests__/ProseMirror.node-view.test.js

@@ -0,0 +1,597 @@
+/* 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 _prosemirrorstate = require("prosemirror-state");
+const _prosemirrortestbuilder = require("prosemirror-test-builder");
+const _prosemirrorview = require("prosemirror-view");
+const _react1 = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _useEditorState = require("../../hooks/useEditorState.js");
+const _useStopEvent = require("../../hooks/useStopEvent.js");
+const _editorViewTestHelpers = require("../../testing/editorViewTestHelpers.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 _interop_require_wildcard(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 = {
+        __proto__: null
+    };
+    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("nodeViews prop", ()=>{
+    it("can replace a node's representation", async ()=>{
+        const { view } = (0, _editorViewTestHelpers.tempEditor)({
+            doc: (0, _prosemirrortestbuilder.doc)((0, _prosemirrortestbuilder.p)("foo", (0, _prosemirrortestbuilder.br)())),
+            nodeViews: {
+                hard_break: /*#__PURE__*/ (0, _react1.forwardRef)(function Var(props, ref) {
+                    return /*#__PURE__*/ _react1.default.createElement("var", {
+                        ref: ref
+                    }, props.children);
+                })
+            }
+        });
+        expect(view.dom.querySelector("var")).not.toBeNull();
+    });
+    it("can override drawing of a node's content", async ()=>{
+        const { view } = (0, _editorViewTestHelpers.tempEditor)({
+            doc: (0, _prosemirrortestbuilder.doc)((0, _prosemirrortestbuilder.p)("foo")),
+            nodeViews: {
+                paragraph: /*#__PURE__*/ (0, _react1.forwardRef)(function Paragraph(props, ref) {
+                    return /*#__PURE__*/ _react1.default.createElement("p", {
+                        ref: ref
+                    }, props.nodeProps.node.textContent.toUpperCase());
+                })
+            }
+        });
+        expect(view.dom.querySelector("p").textContent).toBe("FOO");
+        view.dispatch(view.state.tr.insertText("a"));
+        expect(view.dom.querySelector("p").textContent).toBe("AFOO");
+    });
+    // React makes this more or less trivial; the render
+    // method of the component _is_ the update (and create)
+    // method
+    // eslint-disable-next-line jest/no-disabled-tests
+    it.skip("can register its own update method", async ()=>{
+        const { view } = (0, _editorViewTestHelpers.tempEditor)({
+            doc: (0, _prosemirrortestbuilder.doc)((0, _prosemirrortestbuilder.p)("foo")),
+            nodeViews: {
+                paragraph: /*#__PURE__*/ (0, _react1.forwardRef)(function Paragraph(props, ref) {
+                    return /*#__PURE__*/ _react1.default.createElement("p", {
+                        ref: ref
+                    }, props.nodeProps.node.textContent.toUpperCase());
+                })
+            }
+        });
+        const para = view.dom.querySelector("p");
+        view.dispatch(view.state.tr.insertText("a"));
+        expect(view.dom.querySelector("p")).toBe(para);
+        expect(para.textContent).toBe("AFOO");
+    });
+    it("allows decoration updates for node views with an update method", async ()=>{
+        const { view, rerender } = (0, _editorViewTestHelpers.tempEditor)({
+            doc: (0, _prosemirrortestbuilder.doc)((0, _prosemirrortestbuilder.p)("foo")),
+            nodeViews: {
+                paragraph: /*#__PURE__*/ (0, _react1.forwardRef)(function Paragraph(param, ref) {
+                    let { children, nodeProps, ...props } = param;
+                    return /*#__PURE__*/ _react1.default.createElement("p", {
+                        ...props,
+                        ref: ref
+                    }, children);
+                })
+            }
+        });
+        rerender({
+            decorations (state) {
+                return _prosemirrorview.DecorationSet.create(state.doc, [
+                    _prosemirrorview.Decoration.inline(2, 3, {
+                        someattr: "ok"
+                    }),
+                    _prosemirrorview.Decoration.node(0, 5, {
+                        otherattr: "ok"
+                    })
+                ]);
+            }
+        });
+        expect(view.dom.querySelector("[someattr]")).not.toBeNull();
+        expect(view.dom.querySelector("[otherattr]")).not.toBeNull();
+    });
+    it("can provide a contentDOM property", async ()=>{
+        const { view } = (0, _editorViewTestHelpers.tempEditor)({
+            doc: (0, _prosemirrortestbuilder.doc)((0, _prosemirrortestbuilder.p)("foo")),
+            nodeViews: {
+                paragraph: /*#__PURE__*/ (0, _react1.forwardRef)(function Paragraph(props, ref) {
+                    return /*#__PURE__*/ _react1.default.createElement("p", {
+                        ref: ref
+                    }, props.children);
+                })
+            }
+        });
+        const para = view.dom.querySelector("p");
+        view.dispatch(view.state.tr.insertText("a"));
+        expect(view.dom.querySelector("p")).toBe(para);
+        expect(para.textContent).toBe("afoo");
+    });
+    it("has its destroy method called", async ()=>{
+        let destroyed = 0;
+        const { view } = (0, _editorViewTestHelpers.tempEditor)({
+            doc: (0, _prosemirrortestbuilder.doc)((0, _prosemirrortestbuilder.p)("foo", (0, _prosemirrortestbuilder.br)())),
+            nodeViews: {
+                hard_break: /*#__PURE__*/ (0, _react1.forwardRef)(function BR(_props, ref) {
+                    // React implements "destroy methods" with effect
+                    // hooks
+                    (0, _react1.useEffect)(()=>{
+                        return ()=>{
+                            destroyed++;
+                        };
+                    }, []);
+                    return /*#__PURE__*/ _react1.default.createElement("br", {
+                        ref: ref
+                    });
+                })
+            }
+        });
+        view.dispatch(view.state.tr.delete(3, 5));
+        expect(destroyed).toBe(1);
+    });
+    it("can query its own position", async ()=>{
+        let pos;
+        const { view } = (0, _editorViewTestHelpers.tempEditor)({
+            doc: (0, _prosemirrortestbuilder.doc)((0, _prosemirrortestbuilder.blockquote)((0, _prosemirrortestbuilder.p)("abc"), (0, _prosemirrortestbuilder.p)("foo", (0, _prosemirrortestbuilder.br)()))),
+            nodeViews: {
+                hard_break: /*#__PURE__*/ (0, _react1.forwardRef)(function BR(param, ref) {
+                    let { nodeProps, children, ...props } = param;
+                    // trigger a re-render on every update, otherwise we won't
+                    // re-render when an updated doesn't directly affect us
+                    (0, _useEditorState.useEditorState)();
+                    pos = nodeProps.getPos();
+                    return /*#__PURE__*/ _react1.default.createElement("br", {
+                        ...props,
+                        ref: ref
+                    });
+                })
+            }
+        });
+        expect(pos).toBe(10);
+        view.dispatch(view.state.tr.insertText("a"));
+        expect(pos).toBe(11);
+    });
+    it("has access to outer decorations", async ()=>{
+        const plugin = new _prosemirrorstate.Plugin({
+            state: {
+                init () {
+                    return null;
+                },
+                apply (tr, prev) {
+                    return tr.getMeta("setDeco") || prev;
+                }
+            },
+            props: {
+                decorations (state) {
+                    const deco = this.getState(state);
+                    return deco && _prosemirrorview.DecorationSet.create(state.doc, [
+                        _prosemirrorview.Decoration.inline(0, state.doc.content.size, {}, {
+                            name: deco
+                        })
+                    ]);
+                }
+            }
+        });
+        const { view } = (0, _editorViewTestHelpers.tempEditor)({
+            doc: (0, _prosemirrortestbuilder.doc)((0, _prosemirrortestbuilder.p)("foo", (0, _prosemirrortestbuilder.br)())),
+            plugins: [
+                plugin
+            ],
+            nodeViews: {
+                hard_break: /*#__PURE__*/ (0, _react1.forwardRef)(function Var(props, ref) {
+                    return /*#__PURE__*/ _react1.default.createElement("var", {
+                        ref: ref
+                    }, props.nodeProps.decorations.length ? props.nodeProps.decorations[0].spec.name : "[]");
+                })
+            }
+        });
+        expect(view.dom.querySelector("var").textContent).toBe("[]");
+        view.dispatch(view.state.tr.setMeta("setDeco", "foo"));
+        expect(view.dom.querySelector("var").textContent).toBe("foo");
+        view.dispatch(view.state.tr.setMeta("setDeco", "bar"));
+        expect(view.dom.querySelector("var").textContent).toBe("bar");
+    });
+    it("provides access to inner decorations in the constructor", async ()=>{
+        (0, _editorViewTestHelpers.tempEditor)({
+            doc: (0, _prosemirrortestbuilder.doc)((0, _prosemirrortestbuilder.p)("foo")),
+            nodeViews: {
+                paragraph: /*#__PURE__*/ (0, _react1.forwardRef)(function Paragraph(props, ref) {
+                    expect(props.nodeProps.innerDecorations.find().map((d)=>`${d.from}-${d.to}`).join()).toBe("1-2");
+                    return /*#__PURE__*/ _react1.default.createElement("p", {
+                        ref: ref
+                    }, props.children);
+                })
+            },
+            decorations (state) {
+                return _prosemirrorview.DecorationSet.create(state.doc, [
+                    _prosemirrorview.Decoration.inline(2, 3, {
+                        someattr: "ok"
+                    }),
+                    _prosemirrorview.Decoration.node(0, 5, {
+                        otherattr: "ok"
+                    })
+                ]);
+            }
+        });
+    });
+    it("provides access to inner decorations in the update method", async ()=>{
+        let innerDecos = [];
+        const { rerender } = (0, _editorViewTestHelpers.tempEditor)({
+            doc: (0, _prosemirrortestbuilder.doc)((0, _prosemirrortestbuilder.p)("foo")),
+            nodeViews: {
+                paragraph: /*#__PURE__*/ (0, _react1.forwardRef)(function Paragraph(props, ref) {
+                    innerDecos = props.nodeProps.innerDecorations.find().map((d)=>`${d.from}-${d.to}`);
+                    return /*#__PURE__*/ _react1.default.createElement("p", {
+                        ref: ref
+                    }, props.children);
+                })
+            }
+        });
+        rerender({
+            decorations (state) {
+                return _prosemirrorview.DecorationSet.create(state.doc, [
+                    _prosemirrorview.Decoration.inline(2, 3, {
+                        someattr: "ok"
+                    }),
+                    _prosemirrorview.Decoration.node(0, 5, {
+                        otherattr: "ok"
+                    })
+                ]);
+            }
+        });
+        expect(innerDecos.join()).toBe("1-2");
+    });
+    it("can provide a stopEvent hook", async ()=>{
+        (0, _editorViewTestHelpers.tempEditor)({
+            doc: (0, _prosemirrortestbuilder.doc)((0, _prosemirrortestbuilder.p)("input value")),
+            nodeViews: {
+                paragraph: /*#__PURE__*/ (0, _react1.forwardRef)(function ParagraphInput(param, ref) {
+                    let { nodeProps, children, ...props } = param;
+                    (0, _useStopEvent.useStopEvent)(()=>{
+                        return true;
+                    });
+                    return /*#__PURE__*/ _react1.default.createElement("input", {
+                        ...props,
+                        ref: ref,
+                        type: "text",
+                        defaultValue: nodeProps.node.textContent
+                    });
+                })
+            }
+        });
+        const input = _react.screen.getByDisplayValue("input value");
+        input.focus();
+        await browser.keys("z");
+        expect(await $(input).getValue()).toBe("input valuez");
+    });
+});
+describe("customNodeViews prop", ()=>{
+    it("can replace a node's representation", async ()=>{
+        const { view } = (0, _editorViewTestHelpers.tempEditor)({
+            doc: (0, _prosemirrortestbuilder.doc)((0, _prosemirrortestbuilder.p)("foo", (0, _prosemirrortestbuilder.br)())),
+            customNodeViews: {
+                hard_break () {
+                    return {
+                        dom: document.createElement("var")
+                    };
+                }
+            }
+        });
+        expect(view.dom.querySelector("var")).not.toBeNull();
+    });
+    it("can override drawing of a node's content", async ()=>{
+        const { view } = (0, _editorViewTestHelpers.tempEditor)({
+            doc: (0, _prosemirrortestbuilder.doc)((0, _prosemirrortestbuilder.p)("foo")),
+            customNodeViews: {
+                paragraph (node) {
+                    const dom = document.createElement("p");
+                    dom.appendChild(document.createTextNode(node.textContent.toUpperCase()));
+                    return {
+                        dom
+                    };
+                }
+            }
+        });
+        expect(view.dom.querySelector("p").textContent).toBe("FOO");
+    });
+    it("can register its own update method", async ()=>{
+        const { view } = (0, _editorViewTestHelpers.tempEditor)({
+            doc: (0, _prosemirrortestbuilder.doc)((0, _prosemirrortestbuilder.p)("foo")),
+            customNodeViews: {
+                paragraph (node) {
+                    const dom = document.createElement("p");
+                    dom.textContent = node.textContent.toUpperCase();
+                    return {
+                        dom,
+                        update (node) {
+                            dom.textContent = node.textContent.toUpperCase();
+                            return true;
+                        }
+                    };
+                }
+            }
+        });
+        const para = view.dom.querySelector("p");
+        view.dispatch(view.state.tr.insertText("a"));
+        expect(view.dom.querySelector("p")).toBe(para);
+        expect(para.textContent).toBe("AFOO");
+    });
+    it("allows decoration updates for node views with an update method", async ()=>{
+        const { view, rerender } = (0, _editorViewTestHelpers.tempEditor)({
+            doc: (0, _prosemirrortestbuilder.doc)((0, _prosemirrortestbuilder.p)("foo")),
+            customNodeViews: {
+                paragraph (node) {
+                    const dom = document.createElement("p");
+                    return {
+                        dom,
+                        contentDOM: dom,
+                        update (node_) {
+                            return node.sameMarkup(node_);
+                        }
+                    };
+                }
+            }
+        });
+        rerender({
+            decorations (state) {
+                return _prosemirrorview.DecorationSet.create(state.doc, [
+                    _prosemirrorview.Decoration.inline(2, 3, {
+                        someattr: "ok"
+                    }),
+                    _prosemirrorview.Decoration.node(0, 5, {
+                        otherattr: "ok"
+                    })
+                ]);
+            }
+        });
+        expect(view.dom.querySelector("[someattr]")).not.toBeNull();
+        expect(view.dom.querySelector("[otherattr]")).not.toBeNull();
+    });
+    it("can provide a contentDOM property", async ()=>{
+        const { view } = (0, _editorViewTestHelpers.tempEditor)({
+            doc: (0, _prosemirrortestbuilder.doc)((0, _prosemirrortestbuilder.p)("foo")),
+            customNodeViews: {
+                paragraph () {
+                    const dom = document.createElement("p");
+                    return {
+                        dom,
+                        contentDOM: dom
+                    };
+                }
+            }
+        });
+        const para = view.dom.querySelector("p");
+        view.dispatch(view.state.tr.insertText("a"));
+        expect(view.dom.querySelector("p")).toBe(para);
+        expect(para.textContent).toBe("afoo");
+    });
+    // Skipping for now... We don't use a mutation observer to
+    // detect changes, so we don't have an obvious place to call
+    // ignoreMutation at the moment.
+    // TODO: Add this check to beforeInputPlugin
+    // eslint-disable-next-line jest/no-disabled-tests
+    it.skip("has its ignoreMutation method called", async ()=>{
+        let mutation;
+        const { view } = (0, _editorViewTestHelpers.tempEditor)({
+            doc: (0, _prosemirrortestbuilder.doc)((0, _prosemirrortestbuilder.p)("foo")),
+            customNodeViews: {
+                paragraph () {
+                    const dom = document.createElement("div");
+                    const contentDOM = document.createElement("p");
+                    const info = document.createElement("x-info");
+                    dom.append(contentDOM, info);
+                    return {
+                        dom,
+                        contentDOM,
+                        ignoreMutation: (m)=>{
+                            mutation = m;
+                            return true;
+                        }
+                    };
+                }
+            }
+        });
+        expect(mutation).toBeFalsy();
+        view.dispatch(view.state.tr.delete(3, 5));
+        expect(mutation).toBeTruthy();
+        expect(mutation.target.tagName).toBe("X-INFO");
+    });
+    it("has its destroy method called", async ()=>{
+        let destroyed = 0;
+        const { view } = (0, _editorViewTestHelpers.tempEditor)({
+            doc: (0, _prosemirrortestbuilder.doc)((0, _prosemirrortestbuilder.p)("foo", (0, _prosemirrortestbuilder.br)())),
+            customNodeViews: {
+                hard_break () {
+                    return {
+                        dom: document.createElement("br"),
+                        destroy: ()=>destroyed++
+                    };
+                }
+            }
+        });
+        view.dispatch(view.state.tr.delete(3, 5));
+        expect(destroyed).toBe(1);
+    });
+    it("can query its own position", async ()=>{
+        let get;
+        const { view } = (0, _editorViewTestHelpers.tempEditor)({
+            doc: (0, _prosemirrortestbuilder.doc)((0, _prosemirrortestbuilder.blockquote)((0, _prosemirrortestbuilder.p)("abc"), (0, _prosemirrortestbuilder.p)("foo", (0, _prosemirrortestbuilder.br)()))),
+            customNodeViews: {
+                hard_break (_n, _v, getPos) {
+                    expect(getPos()).toBe(10);
+                    get = getPos;
+                    return {
+                        dom: document.createElement("br")
+                    };
+                }
+            }
+        });
+        expect(get()).toBe(10);
+        view.dispatch(view.state.tr.insertText("a"));
+        expect(get()).toBe(11);
+    });
+    it("has access to outer decorations", async ()=>{
+        const plugin = new _prosemirrorstate.Plugin({
+            state: {
+                init () {
+                    return null;
+                },
+                apply (tr, prev) {
+                    return tr.getMeta("setDeco") || prev;
+                }
+            },
+            props: {
+                decorations (state) {
+                    const deco = this.getState(state);
+                    return deco && _prosemirrorview.DecorationSet.create(state.doc, [
+                        _prosemirrorview.Decoration.inline(0, state.doc.content.size, {}, {
+                            name: deco
+                        })
+                    ]);
+                }
+            }
+        });
+        const { view } = (0, _editorViewTestHelpers.tempEditor)({
+            doc: (0, _prosemirrortestbuilder.doc)((0, _prosemirrortestbuilder.p)("foo", (0, _prosemirrortestbuilder.br)())),
+            plugins: [
+                plugin
+            ],
+            customNodeViews: {
+                hard_break (_n, _v, _p, deco) {
+                    const dom = document.createElement("var");
+                    function update(deco) {
+                        dom.textContent = deco.length ? deco[0].spec.name : "[]";
+                    }
+                    update(deco);
+                    return {
+                        dom,
+                        update (_, deco) {
+                            update(deco);
+                            return true;
+                        }
+                    };
+                }
+            }
+        });
+        expect(view.dom.querySelector("var").textContent).toBe("[]");
+        view.dispatch(view.state.tr.setMeta("setDeco", "foo"));
+        expect(view.dom.querySelector("var").textContent).toBe("foo");
+        view.dispatch(view.state.tr.setMeta("setDeco", "bar"));
+        expect(view.dom.querySelector("var").textContent).toBe("bar");
+    });
+    it("provides access to inner decorations in the constructor", async ()=>{
+        (0, _editorViewTestHelpers.tempEditor)({
+            doc: (0, _prosemirrortestbuilder.doc)((0, _prosemirrortestbuilder.p)("foo")),
+            customNodeViews: {
+                paragraph (_node, _v, _pos, _outer, innerDeco) {
+                    const dom = document.createElement("p");
+                    expect(innerDeco.find().map((d)=>`${d.from}-${d.to}`).join()).toBe("1-2");
+                    return {
+                        dom,
+                        contentDOM: dom
+                    };
+                }
+            },
+            decorations (state) {
+                return _prosemirrorview.DecorationSet.create(state.doc, [
+                    _prosemirrorview.Decoration.inline(2, 3, {
+                        someattr: "ok"
+                    }),
+                    _prosemirrorview.Decoration.node(0, 5, {
+                        otherattr: "ok"
+                    })
+                ]);
+            }
+        });
+    });
+    it("provides access to inner decorations in the update method", async ()=>{
+        let innerDecos = [];
+        const { rerender } = (0, _editorViewTestHelpers.tempEditor)({
+            doc: (0, _prosemirrortestbuilder.doc)((0, _prosemirrortestbuilder.p)("foo")),
+            customNodeViews: {
+                paragraph (node) {
+                    const dom = document.createElement("p");
+                    return {
+                        dom,
+                        contentDOM: dom,
+                        update (node_, _, innerDecoSet) {
+                            innerDecos = innerDecoSet.find().map((d)=>`${d.from}-${d.to}`);
+                            return node.sameMarkup(node_);
+                        }
+                    };
+                }
+            }
+        });
+        rerender({
+            decorations (state) {
+                return _prosemirrorview.DecorationSet.create(state.doc, [
+                    _prosemirrorview.Decoration.inline(2, 3, {
+                        someattr: "ok"
+                    }),
+                    _prosemirrorview.Decoration.node(0, 5, {
+                        otherattr: "ok"
+                    })
+                ]);
+            }
+        });
+        expect(innerDecos.join()).toBe("1-2");
+    });
+    it("can provide a stopEvent hook", async ()=>{
+        (0, _editorViewTestHelpers.tempEditor)({
+            doc: (0, _prosemirrortestbuilder.doc)((0, _prosemirrortestbuilder.p)("input value")),
+            customNodeViews: {
+                paragraph (node) {
+                    const dom = document.createElement("input");
+                    dom.value = node.textContent;
+                    return {
+                        dom,
+                        stopEvent () {
+                            return true;
+                        }
+                    };
+                }
+            }
+        });
+        const input = _react.screen.getByDisplayValue("input value");
+        input.focus();
+        await browser.keys("z");
+        expect(await $(input).getValue()).toBe("input valuez");
+    });
+});