@handlewithcare/react-prosemirror 2.0.0

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

@@ -0,0 +1,294 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */ 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);
+}
+import { Schema } from "prosemirror-model";
+import { Plugin } from "prosemirror-state";
+import { doc, h1, hr, img, p, pre, schema, strong } from "prosemirror-test-builder";
+import React, { forwardRef } from "react";
+import { tempEditor } from "../../testing/editorViewTestHelpers.js";
+describe("EditorView draw", ()=>{
+    it("updates the DOM", async ()=>{
+        const { view  } = tempEditor({
+            doc: doc(p("foo"))
+        });
+        view.dispatch(view.state.tr.insertText("bar"));
+        expect(view.dom.textContent).toBe("barfoo");
+    });
+    it("doesn't redraw nodes after changes", async ()=>{
+        const { view  } = tempEditor({
+            doc: doc(h1("foo<a>"), p("bar"))
+        });
+        const oldP = view.dom.querySelector("p");
+        view.dispatch(view.state.tr.insertText("!"));
+        expect(view.dom.querySelector("p")).toBe(oldP);
+    });
+    it("doesn't redraw nodes before changes", async ()=>{
+        const { view  } = tempEditor({
+            doc: doc(p("foo"), h1("bar"))
+        });
+        const oldP = view.dom.querySelector("p");
+        view.dispatch(view.state.tr.insertText("!", 2));
+        expect(view.dom.querySelector("p")).toBe(oldP);
+    });
+    it("doesn't redraw nodes between changes", async ()=>{
+        const { view  } = tempEditor({
+            doc: doc(p("foo"), h1("bar"), pre("baz"))
+        });
+        const oldP = view.dom.querySelector("p");
+        const oldPre = view.dom.querySelector("pre");
+        view.dispatch(view.state.tr.insertText("!", 2));
+        expect(view.dom.querySelector("p")).toBe(oldP);
+        expect(view.dom.querySelector("pre")).toBe(oldPre);
+    });
+    it("doesn't redraw siblings of a split node", async ()=>{
+        const { view  } = tempEditor({
+            doc: doc(p("foo"), h1("bar"), pre("baz"))
+        });
+        const oldP = view.dom.querySelector("p");
+        const oldPre = view.dom.querySelector("pre");
+        view.dispatch(view.state.tr.split(8));
+        expect(view.dom.querySelector("p")).toBe(oldP);
+        expect(view.dom.querySelector("pre")).toBe(oldPre);
+    });
+    it("doesn't redraw siblings of a joined node", async ()=>{
+        const { view  } = tempEditor({
+            doc: doc(p("foo"), h1("bar"), h1("x"), pre("baz"))
+        });
+        const oldP = view.dom.querySelector("p");
+        const oldPre = view.dom.querySelector("pre");
+        view.dispatch(view.state.tr.join(10));
+        expect(view.dom.querySelector("p")).toBe(oldP);
+        expect(view.dom.querySelector("pre")).toBe(oldPre);
+    });
+    it("doesn't redraw after a big deletion", async ()=>{
+        const { view  } = tempEditor({
+            doc: doc(p(), p(), p(), p(), p(), p(), p(), p(), h1("!"), p(), p())
+        });
+        const oldH = view.dom.querySelector("h1");
+        view.dispatch(view.state.tr.delete(2, 14));
+        expect(view.dom.querySelector("h1")).toBe(oldH);
+    });
+    it("adds classes from the attributes prop", async ()=>{
+        const { view , rerender  } = tempEditor({
+            doc: doc(p()),
+            attributes: {
+                class: "foo bar"
+            }
+        });
+        expect(view.dom.classList.contains("foo")).toBeTruthy();
+        expect(view.dom.classList.contains("bar")).toBeTruthy();
+        expect(view.dom.classList.contains("ProseMirror")).toBeTruthy();
+        rerender({
+            attributes: {
+                class: "baz"
+            }
+        });
+        expect(!view.dom.classList.contains("foo")).toBeTruthy();
+        expect(view.dom.classList.contains("baz")).toBeTruthy();
+    });
+    it("adds style from the attributes prop", async ()=>{
+        const { view  } = tempEditor({
+            doc: doc(p()),
+            attributes: {
+                style: "border: 1px solid red;"
+            },
+            plugins: [
+                new Plugin({
+                    props: {
+                        attributes: {
+                            style: "background: red;"
+                        }
+                    }
+                }),
+                new Plugin({
+                    props: {
+                        attributes: {
+                            style: "color: red;"
+                        }
+                    }
+                })
+            ]
+        });
+        expect(view.dom.style.border).toBe("1px solid red");
+        expect(view.dom.style.backgroundColor).toBe("red");
+        expect(view.dom.style.color).toBe("red");
+    });
+    it("can set other attributes", async ()=>{
+        const { view , rerender  } = tempEditor({
+            doc: doc(p()),
+            attributes: {
+                spellcheck: "false",
+                "aria-label": "hello"
+            }
+        });
+        expect(view.dom.spellcheck).toBe(false);
+        expect(view.dom.getAttribute("aria-label")).toBe("hello");
+        rerender({
+            attributes: {
+                style: "background-color: yellow"
+            }
+        });
+        expect(view.dom.hasAttribute("aria-label")).toBe(false);
+        expect(view.dom.style.backgroundColor).toBe("yellow");
+    });
+    it("can't set the contenteditable attribute", async ()=>{
+        const { view  } = tempEditor({
+            doc: doc(p()),
+            attributes: {
+                contenteditable: "false"
+            }
+        });
+        expect(view.dom.contentEditable).toBe("true");
+    });
+    it("understands the editable prop", async ()=>{
+        const { view , rerender  } = tempEditor({
+            doc: doc(p()),
+            editable: ()=>false
+        });
+        expect(view.dom.contentEditable).toBe("false");
+        rerender({
+            editable: ()=>true
+        });
+        expect(view.dom.contentEditable).toBe("true");
+    });
+    it("doesn't redraw following paragraphs when a paragraph is split", async ()=>{
+        const { view  } = tempEditor({
+            doc: doc(p("abcde"), p("fg"))
+        });
+        const lastPara = view.dom.lastChild;
+        view.dispatch(view.state.tr.split(3));
+        expect(view.dom.lastChild).toBe(lastPara);
+    });
+    it("doesn't greedily match nodes that have another match", async ()=>{
+        const { view  } = tempEditor({
+            doc: doc(p("a"), p("b"), p())
+        });
+        const secondPara = view.dom.querySelectorAll("p")[1];
+        view.dispatch(view.state.tr.split(2));
+        expect(view.dom.querySelectorAll("p")[2]).toBe(secondPara);
+    });
+    it("creates and destroys plugin views", async ()=>{
+        const events = [];
+        let PluginView = class PluginView {
+            update() {
+                events.push("update");
+            }
+            destroy() {
+                events.push("destroy");
+            }
+        };
+        const plugin = new Plugin({
+            view () {
+                events.push("create");
+                return new PluginView();
+            }
+        });
+        const { view , unmount  } = tempEditor({
+            plugins: [
+                plugin
+            ]
+        });
+        view.dispatch(view.state.tr.insertText("u"));
+        unmount();
+        expect(events.join(" ")).toBe("create update destroy");
+    });
+    it("redraws changed node views", async ()=>{
+        const { view , rerender  } = tempEditor({
+            doc: doc(p("foo"), hr())
+        });
+        expect(view.dom.querySelector("hr")).toBeTruthy();
+        rerender({
+            nodeViews: {
+                horizontal_rule: /*#__PURE__*/ forwardRef(function HorizontalRule(param, ref) {
+                    let { nodeProps , ...props } = param;
+                    return /*#__PURE__*/ React.createElement("var", _extends({
+                        ref: ref
+                    }, props));
+                })
+            }
+        });
+        expect(!view.dom.querySelector("hr")).toBeTruthy();
+        expect(view.dom.querySelector("var")).toBeTruthy();
+    });
+    it("doesn't get confused by merged nodes", async ()=>{
+        const { view  } = tempEditor({
+            doc: doc(p(strong("one"), " two ", strong("three")))
+        });
+        view.dispatch(view.state.tr.removeMark(1, 4, schema.marks.strong));
+        expect(view.dom.querySelectorAll("strong")).toHaveLength(1);
+    });
+    it("doesn't redraw too much when marks are present", async ()=>{
+        const s = new Schema({
+            nodes: {
+                doc: {
+                    content: "paragraph+",
+                    marks: "m"
+                },
+                text: {
+                    group: "inline"
+                },
+                paragraph: schema.spec.nodes.get("paragraph")
+            },
+            marks: {
+                m: {
+                    toDOM: ()=>[
+                            "div",
+                            {
+                                class: "m"
+                            },
+                            0
+                        ],
+                    parseDOM: [
+                        {
+                            tag: "div.m"
+                        }
+                    ]
+                }
+            }
+        });
+        const paragraphs = [];
+        for(let i = 1; i <= 10; i++)paragraphs.push(s.node("paragraph", null, [
+            s.text("para " + i)
+        ], [
+            s.mark("m")
+        ]));
+        const { view  } = tempEditor({
+            // @ts-expect-error this is fine
+            doc: s.node("doc", null, paragraphs)
+        });
+        const initialChildren = Array.from(view.dom.querySelectorAll("p"));
+        const newParagraphs = [];
+        for(let i = -6; i < 0; i++)newParagraphs.push(s.node("paragraph", null, [
+            s.text("para " + i)
+        ], [
+            s.mark("m")
+        ]));
+        view.dispatch(view.state.tr.replaceWith(0, 8, newParagraphs));
+        const currentChildren = Array.from(view.dom.querySelectorAll("p"));
+        let sameAtEnd = 0;
+        while(sameAtEnd < currentChildren.length && sameAtEnd < initialChildren.length && currentChildren[currentChildren.length - sameAtEnd - 1] == initialChildren[initialChildren.length - sameAtEnd - 1])sameAtEnd++;
+        expect(sameAtEnd).toBe(9);
+    });
+    it("correctly wraps inline nodes with marks", async ()=>{
+        const { view  } = tempEditor({
+            doc: doc(p(strong(img(), " two")))
+        });
+        const docDom = view.dom;
+        const paragraphDom = docDom.firstElementChild;
+        const strongDom = paragraphDom.firstElementChild;
+        expect(strongDom?.tagName).toBe("STRONG");
+        expect(strongDom?.firstElementChild?.tagName).toBe("IMG");
+        expect(strongDom?.childNodes.item(1).textContent).toBe(" two");
+    });
+});

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

@@ -0,0 +1,272 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable @typescript-eslint/no-non-null-assertion */ 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);
+}
+import { screen } from "@testing-library/react";
+import { Plugin } from "prosemirror-state";
+import { blockquote, br, doc, p } from "prosemirror-test-builder";
+import { Decoration, DecorationSet } from "prosemirror-view";
+import React, { forwardRef, useEffect } from "react";
+import { useEditorState } from "../../hooks/useEditorState.js";
+import { useStopEvent } from "../../hooks/useStopEvent.js";
+import { tempEditor } from "../../testing/editorViewTestHelpers.js";
+describe("nodeViews prop", ()=>{
+    it("can replace a node's representation", async ()=>{
+        const { view  } = tempEditor({
+            doc: doc(p("foo", br())),
+            nodeViews: {
+                hard_break: /*#__PURE__*/ forwardRef(function Var(props, ref) {
+                    return /*#__PURE__*/ React.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  } = tempEditor({
+            doc: doc(p("foo")),
+            nodeViews: {
+                paragraph: /*#__PURE__*/ forwardRef(function Paragraph(props, ref) {
+                    return /*#__PURE__*/ React.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  } = tempEditor({
+            doc: doc(p("foo")),
+            nodeViews: {
+                paragraph: /*#__PURE__*/ forwardRef(function Paragraph(props, ref) {
+                    return /*#__PURE__*/ React.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  } = tempEditor({
+            doc: doc(p("foo")),
+            nodeViews: {
+                paragraph: /*#__PURE__*/ forwardRef(function Paragraph(param, ref) {
+                    let { children , nodeProps , ...props } = param;
+                    return /*#__PURE__*/ React.createElement("p", _extends({
+                        ref: ref
+                    }, props), children);
+                })
+            }
+        });
+        rerender({
+            decorations (state) {
+                return DecorationSet.create(state.doc, [
+                    Decoration.inline(2, 3, {
+                        someattr: "ok"
+                    }),
+                    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  } = tempEditor({
+            doc: doc(p("foo")),
+            nodeViews: {
+                paragraph: /*#__PURE__*/ forwardRef(function Paragraph(props, ref) {
+                    return(// ContentDOM is inferred from where props.children is rendered
+                    /*#__PURE__*/ React.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 = false;
+        const { view  } = tempEditor({
+            doc: doc(p("foo", br())),
+            nodeViews: {
+                hard_break: /*#__PURE__*/ forwardRef(function BR(_props, ref) {
+                    // React implements "destroy methods" with effect
+                    // hooks
+                    useEffect(()=>{
+                        return ()=>{
+                            destroyed = true;
+                        };
+                    }, []);
+                    return /*#__PURE__*/ React.createElement("br", {
+                        ref: ref
+                    });
+                })
+            }
+        });
+        expect(destroyed).toBeFalsy();
+        view.dispatch(view.state.tr.delete(3, 5));
+        expect(destroyed).toBeTruthy();
+    });
+    it("can query its own position", async ()=>{
+        let pos;
+        const { view  } = tempEditor({
+            doc: doc(blockquote(p("abc"), p("foo", br()))),
+            nodeViews: {
+                hard_break: /*#__PURE__*/ forwardRef(function BR(param, ref) {
+                    let { nodeProps , children , ...props } = param;
+                    // trigger a re-render on every updated, otherwise we won't
+                    // re-render when an updated doesn't directly affect us
+                    useEditorState();
+                    pos = nodeProps.getPos();
+                    return /*#__PURE__*/ React.createElement("br", _extends({
+                        ref: ref
+                    }, props));
+                })
+            }
+        });
+        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 Plugin({
+            state: {
+                init () {
+                    return null;
+                },
+                apply (tr, prev) {
+                    return tr.getMeta("setDeco") || prev;
+                }
+            },
+            props: {
+                decorations (state) {
+                    const deco = this.getState(state);
+                    return deco && DecorationSet.create(state.doc, [
+                        Decoration.inline(0, state.doc.content.size, {}, {
+                            name: deco
+                        })
+                    ]);
+                }
+            }
+        });
+        const { view  } = tempEditor({
+            doc: doc(p("foo", br())),
+            plugins: [
+                plugin
+            ],
+            nodeViews: {
+                hard_break: /*#__PURE__*/ forwardRef(function Var(props, ref) {
+                    return /*#__PURE__*/ React.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 ()=>{
+        tempEditor({
+            doc: doc(p("foo")),
+            nodeViews: {
+                paragraph: /*#__PURE__*/ forwardRef(function Paragraph(props, ref) {
+                    expect(props.nodeProps.innerDecorations.find().map((d)=>`${d.from}-${d.to}`).join()).toBe("1-2");
+                    return /*#__PURE__*/ React.createElement("p", {
+                        ref: ref
+                    }, props.children);
+                })
+            },
+            decorations (state) {
+                return DecorationSet.create(state.doc, [
+                    Decoration.inline(2, 3, {
+                        someattr: "ok"
+                    }),
+                    Decoration.node(0, 5, {
+                        otherattr: "ok"
+                    })
+                ]);
+            }
+        });
+    });
+    it("provides access to inner decorations in the update method", async ()=>{
+        let innerDecos = [];
+        const { rerender  } = tempEditor({
+            doc: doc(p("foo")),
+            nodeViews: {
+                paragraph: /*#__PURE__*/ forwardRef(function Paragraph(props, ref) {
+                    innerDecos = props.nodeProps.innerDecorations.find().map((d)=>`${d.from}-${d.to}`);
+                    return /*#__PURE__*/ React.createElement("p", {
+                        ref: ref
+                    }, props.children);
+                })
+            }
+        });
+        rerender({
+            decorations (state) {
+                return DecorationSet.create(state.doc, [
+                    Decoration.inline(2, 3, {
+                        someattr: "ok"
+                    }),
+                    Decoration.node(0, 5, {
+                        otherattr: "ok"
+                    })
+                ]);
+            }
+        });
+        expect(innerDecos.join()).toBe("1-2");
+    });
+    it("can provide a stopEvent hook", async ()=>{
+        tempEditor({
+            doc: doc(p("input value")),
+            nodeViews: {
+                paragraph: /*#__PURE__*/ forwardRef(function ParagraphInput(param, ref) {
+                    let { nodeProps , children , ...props } = param;
+                    useStopEvent(()=>{
+                        return true;
+                    });
+                    return /*#__PURE__*/ React.createElement("input", _extends({
+                        ref: ref,
+                        type: "text",
+                        defaultValue: nodeProps.node.textContent
+                    }, props));
+                })
+            }
+        });
+        const input = screen.getByDisplayValue("input value");
+        input.focus();
+        await browser.keys("z");
+        expect(await $(input).getValue()).toBe("input valuez");
+    });
+});