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

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

@@ -0,0 +1,380 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _prosemirrormodel = require("prosemirror-model");
+const _prosemirrorstate = require("prosemirror-state");
+const _prosemirrortestbuilder = require("prosemirror-test-builder");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+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("EditorView draw", ()=>{
+    it("updates the DOM", async ()=>{
+        const { view } = (0, _editorViewTestHelpers.tempEditor)({
+            doc: (0, _prosemirrortestbuilder.doc)((0, _prosemirrortestbuilder.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 } = (0, _editorViewTestHelpers.tempEditor)({
+            doc: (0, _prosemirrortestbuilder.doc)((0, _prosemirrortestbuilder.h1)("foo<a>"), (0, _prosemirrortestbuilder.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 } = (0, _editorViewTestHelpers.tempEditor)({
+            doc: (0, _prosemirrortestbuilder.doc)((0, _prosemirrortestbuilder.p)("foo"), (0, _prosemirrortestbuilder.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 } = (0, _editorViewTestHelpers.tempEditor)({
+            doc: (0, _prosemirrortestbuilder.doc)((0, _prosemirrortestbuilder.p)("foo"), (0, _prosemirrortestbuilder.h1)("bar"), (0, _prosemirrortestbuilder.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 } = (0, _editorViewTestHelpers.tempEditor)({
+            doc: (0, _prosemirrortestbuilder.doc)((0, _prosemirrortestbuilder.p)("foo"), (0, _prosemirrortestbuilder.h1)("bar"), (0, _prosemirrortestbuilder.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 } = (0, _editorViewTestHelpers.tempEditor)({
+            doc: (0, _prosemirrortestbuilder.doc)((0, _prosemirrortestbuilder.p)("foo"), (0, _prosemirrortestbuilder.h1)("bar"), (0, _prosemirrortestbuilder.h1)("x"), (0, _prosemirrortestbuilder.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 } = (0, _editorViewTestHelpers.tempEditor)({
+            doc: (0, _prosemirrortestbuilder.doc)((0, _prosemirrortestbuilder.p)(), (0, _prosemirrortestbuilder.p)(), (0, _prosemirrortestbuilder.p)(), (0, _prosemirrortestbuilder.p)(), (0, _prosemirrortestbuilder.p)(), (0, _prosemirrortestbuilder.p)(), (0, _prosemirrortestbuilder.p)(), (0, _prosemirrortestbuilder.p)(), (0, _prosemirrortestbuilder.h1)("!"), (0, _prosemirrortestbuilder.p)(), (0, _prosemirrortestbuilder.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 } = (0, _editorViewTestHelpers.tempEditor)({
+            doc: (0, _prosemirrortestbuilder.doc)((0, _prosemirrortestbuilder.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 } = (0, _editorViewTestHelpers.tempEditor)({
+            doc: (0, _prosemirrortestbuilder.doc)((0, _prosemirrortestbuilder.p)()),
+            attributes: {
+                style: "border: 1px solid red;"
+            },
+            plugins: [
+                new _prosemirrorstate.Plugin({
+                    props: {
+                        attributes: {
+                            style: "background: red;"
+                        }
+                    }
+                }),
+                new _prosemirrorstate.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 } = (0, _editorViewTestHelpers.tempEditor)({
+            doc: (0, _prosemirrortestbuilder.doc)((0, _prosemirrortestbuilder.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 } = (0, _editorViewTestHelpers.tempEditor)({
+            doc: (0, _prosemirrortestbuilder.doc)((0, _prosemirrortestbuilder.p)()),
+            attributes: {
+                contenteditable: "false"
+            }
+        });
+        expect(view.dom.contentEditable).toBe("true");
+    });
+    it("understands the editable prop", async ()=>{
+        const { view, rerender } = (0, _editorViewTestHelpers.tempEditor)({
+            doc: (0, _prosemirrortestbuilder.doc)((0, _prosemirrortestbuilder.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 } = (0, _editorViewTestHelpers.tempEditor)({
+            doc: (0, _prosemirrortestbuilder.doc)((0, _prosemirrortestbuilder.p)("abcde"), (0, _prosemirrortestbuilder.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 } = (0, _editorViewTestHelpers.tempEditor)({
+            doc: (0, _prosemirrortestbuilder.doc)((0, _prosemirrortestbuilder.p)("a"), (0, _prosemirrortestbuilder.p)("b"), (0, _prosemirrortestbuilder.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, updates,  and destroys plugin views", async ()=>{
+        const events = [];
+        let PluginView = class PluginView {
+            update() {
+                events.push("update");
+            }
+            destroy() {
+                events.push("destroy");
+            }
+        };
+        const plugin = new _prosemirrorstate.Plugin({
+            view () {
+                events.push("create");
+                return new PluginView();
+            }
+        });
+        const { view, unmount } = (0, _editorViewTestHelpers.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 } = (0, _editorViewTestHelpers.tempEditor)({
+            doc: (0, _prosemirrortestbuilder.doc)((0, _prosemirrortestbuilder.p)("foo"), (0, _prosemirrortestbuilder.hr)())
+        });
+        expect(view.dom.querySelector("hr")).toBeTruthy();
+        rerender({
+            nodeViews: {
+                horizontal_rule: /*#__PURE__*/ (0, _react.forwardRef)(function HorizontalRule(param, ref) {
+                    let { nodeProps, ...props } = param;
+                    return /*#__PURE__*/ _react.default.createElement("var", {
+                        ...props,
+                        ref: ref
+                    });
+                })
+            }
+        });
+        expect(!view.dom.querySelector("hr")).toBeTruthy();
+        expect(view.dom.querySelector("var")).toBeTruthy();
+    });
+    it("doesn't get confused by merged nodes", async ()=>{
+        const { view } = (0, _editorViewTestHelpers.tempEditor)({
+            doc: (0, _prosemirrortestbuilder.doc)((0, _prosemirrortestbuilder.p)((0, _prosemirrortestbuilder.strong)("one"), " two ", (0, _prosemirrortestbuilder.strong)("three")))
+        });
+        view.dispatch(view.state.tr.removeMark(1, 4, _prosemirrortestbuilder.schema.marks.strong));
+        expect(view.dom.querySelectorAll("strong")).toHaveLength(1);
+    });
+    it("doesn't redraw too much when marks are present", async ()=>{
+        const s = new _prosemirrormodel.Schema({
+            nodes: {
+                doc: {
+                    content: "paragraph+",
+                    marks: "m"
+                },
+                text: {
+                    group: "inline"
+                },
+                paragraph: _prosemirrortestbuilder.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 } = (0, _editorViewTestHelpers.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 } = (0, _editorViewTestHelpers.tempEditor)({
+            doc: (0, _prosemirrortestbuilder.doc)((0, _prosemirrortestbuilder.p)((0, _prosemirrortestbuilder.strong)((0, _prosemirrortestbuilder.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");
+    });
+    it("correctly wraps block nodes with marks", async ()=>{
+        const testSchema = new _prosemirrormodel.Schema({
+            nodes: _prosemirrortestbuilder.schema.spec.nodes.update("image", {
+                ..._prosemirrortestbuilder.schema.spec.nodes.get("image"),
+                inline: false,
+                group: "block"
+            }),
+            marks: _prosemirrortestbuilder.schema.spec.marks.addToEnd("difficulty", {
+                attrs: {
+                    level: {
+                        default: "beginner"
+                    }
+                },
+                toDOM (mark) {
+                    return [
+                        "div",
+                        {
+                            "data-difficulty": mark.attrs["level"]
+                        },
+                        0
+                    ];
+                }
+            })
+        });
+        const { doc, image, difficulty } = (0, _prosemirrortestbuilder.builders)(testSchema);
+        const { view } = (0, _editorViewTestHelpers.tempEditor)({
+            doc: doc(difficulty(image({
+                src: ""
+            })))
+        });
+        const docDom = view.dom;
+        const difficultyDom = docDom.firstElementChild;
+        const imageDom = difficultyDom.firstElementChild;
+        expect(difficultyDom.tagName).toBe("DIV");
+        expect(difficultyDom.dataset["difficulty"]).toBe("beginner");
+        expect(imageDom.tagName).toBe("IMG");
+    });
+    it("supports omitting the hole in mark specs", async ()=>{
+        const testSchema = new _prosemirrormodel.Schema({
+            nodes: _prosemirrortestbuilder.schema.spec.nodes,
+            marks: _prosemirrortestbuilder.schema.spec.marks.addToEnd("bold", {
+                toDOM () {
+                    return [
+                        "strong"
+                    ];
+                }
+            })
+        });
+        const { doc, paragraph, bold } = (0, _prosemirrortestbuilder.builders)(testSchema);
+        const { view } = (0, _editorViewTestHelpers.tempEditor)({
+            doc: doc(paragraph(bold("Some bold text")))
+        });
+        expect(view.dom.textContent).toBe("Some bold text");
+    });
+});

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

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _prosemirrorcommands = require("prosemirror-commands");
+const _prosemirrorkeymap = require("prosemirror-keymap");
+const _prosemirrorstate = require("prosemirror-state");
+const _prosemirrortestbuilder = require("prosemirror-test-builder");
+const _beforeInputPlugin = require("../../plugins/beforeInputPlugin.js");
+const _editorViewTestHelpers = require("../../testing/editorViewTestHelpers.js");
+describe("ProseMirror Mobile", ()=>{
+    it("handles insertParagraph with mobile Enter key", async ()=>{
+        const { view } = (0, _editorViewTestHelpers.tempEditor)({
+            doc: (0, _prosemirrortestbuilder.doc)((0, _prosemirrortestbuilder.p)("Hello")),
+            plugins: createPlugins()
+        });
+        setCursorAtEnd(view);
+        view.focus();
+        await browser.keys("Enter");
+        expect(view.state.doc).toEqual((0, _prosemirrortestbuilder.doc)((0, _prosemirrortestbuilder.p)("Hello"), (0, _prosemirrortestbuilder.p)()));
+    });
+    it("handles insertLineBreak with mobile Shift+Enter", async ()=>{
+        const { view } = (0, _editorViewTestHelpers.tempEditor)({
+            doc: (0, _prosemirrortestbuilder.doc)((0, _prosemirrortestbuilder.p)("Hello")),
+            plugins: createPlugins()
+        });
+        setCursorAtEnd(view);
+        view.focus();
+        await browser.keys([
+            "Shift",
+            "Enter"
+        ]);
+        expect(view.state.doc).toEqual((0, _prosemirrortestbuilder.doc)((0, _prosemirrortestbuilder.p)("Hello", (0, _prosemirrortestbuilder.br)())));
+    });
+});
+function createPlugins() {
+    return [
+        (0, _prosemirrorkeymap.keymap)({
+            "Shift-Enter": (state, dispatch)=>{
+                const { tr } = state;
+                if (_prosemirrortestbuilder.schema.nodes.hard_break) {
+                    tr.insert(tr.selection.from, _prosemirrortestbuilder.schema.nodes.hard_break.create());
+                    dispatch?.(tr);
+                    return true;
+                }
+                return false;
+            }
+        }),
+        (0, _prosemirrorkeymap.keymap)(_prosemirrorcommands.baseKeymap),
+        (0, _beforeInputPlugin.beforeInputPlugin)(()=>{
+        // no-op as this doesn't matter for this test
+        })
+    ];
+}
+function setCursorAtEnd(view) {
+    const endPos = view.state.doc.content.size - 1;
+    view.dispatch(view.state.tr.setSelection(_prosemirrorstate.TextSelection.near(view.state.doc.resolve(endPos))));
+}