@handlewithcare/react-prosemirror 2.4.12 → 2.5.1

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

@@ -1,207 +0,0 @@
-import { act, render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { Schema } from "prosemirror-model";
-import { EditorState } from "prosemirror-state";
-import React, { useEffect, useState } from "react";
-import { react } from "../../plugins/react.js";
-import { setupProseMirrorView, teardownProseMirrorView } from "../../testing/setupProseMirrorView.js";
-import { ProseMirror } from "../ProseMirror.js";
-// Mock `ReactDOM.flushSync` to call `act` to flush updates from DOM mutations.
-jest.mock("react-dom", ()=>({
-        ...jest.requireActual("react-dom"),
-        flushSync: (fn)=>act(fn)
-    }));
-describe("ProseMirror", ()=>{
-    beforeAll(()=>{
-        setupProseMirrorView();
-    });
-    it("renders a contenteditable", async ()=>{
-        const schema = new Schema({
-            nodes: {
-                text: {},
-                doc: {
-                    content: "text*"
-                }
-            }
-        });
-        const defaultState = EditorState.create({
-            schema
-        });
-        function TestEditor() {
-            const [mount, setMount] = useState(null);
-            return /*#__PURE__*/ React.createElement(ProseMirror, {
-                mount: mount,
-                defaultState: defaultState
-            }, /*#__PURE__*/ React.createElement("div", {
-                "data-testid": "editor",
-                ref: setMount
-            }));
-        }
-        const user = userEvent.setup();
-        render(/*#__PURE__*/ React.createElement(TestEditor, null));
-        const editor = screen.getByTestId("editor");
-        await user.type(editor, "Hello, world!");
-        expect(editor.textContent).toBe("Hello, world!");
-    });
-    it("supports observing transaction dispatch", async ()=>{
-        const schema = new Schema({
-            nodes: {
-                text: {},
-                doc: {
-                    content: "text*"
-                }
-            }
-        });
-        const defaultState = EditorState.create({
-            schema
-        });
-        const dispatchTransaction = jest.fn();
-        function TestEditor() {
-            const [mount, setMount] = useState(null);
-            return /*#__PURE__*/ React.createElement(ProseMirror, {
-                mount: mount,
-                defaultState: defaultState,
-                dispatchTransaction: dispatchTransaction
-            }, /*#__PURE__*/ React.createElement("div", {
-                "data-testid": "editor",
-                ref: setMount
-            }));
-        }
-        const user = userEvent.setup();
-        render(/*#__PURE__*/ React.createElement(TestEditor, null));
-        const editor = screen.getByTestId("editor");
-        await user.type(editor, "Hello, world!");
-        expect(editor.textContent).toBe("Hello, world!");
-        expect(dispatchTransaction).toHaveBeenCalledTimes(13);
-    });
-    it("supports controlling the editor state", async ()=>{
-        const schema = new Schema({
-            nodes: {
-                text: {},
-                doc: {
-                    content: "text*"
-                }
-            }
-        });
-        let observedState = EditorState.create({
-            schema
-        });
-        function TestEditor() {
-            const [state, setState] = useState(observedState);
-            const [mount, setMount] = useState(null);
-            useEffect(()=>{
-                observedState = state;
-            }, [
-                state
-            ]);
-            return /*#__PURE__*/ React.createElement(ProseMirror, {
-                mount: mount,
-                state: state,
-                dispatchTransaction: (tr)=>{
-                    setState((s)=>s.apply(tr));
-                }
-            }, /*#__PURE__*/ React.createElement("div", {
-                "data-testid": "editor",
-                ref: setMount
-            }));
-        }
-        const user = userEvent.setup();
-        render(/*#__PURE__*/ React.createElement(TestEditor, null));
-        const editor = screen.getByTestId("editor");
-        await user.type(editor, "Hello, world!");
-        expect(observedState.doc.textContent).toBe("Hello, world!");
-    });
-    it("updates props atomically", async ()=>{
-        const schema = new Schema({
-            nodes: {
-                text: {},
-                doc: {
-                    content: "text*"
-                }
-            }
-        });
-        const defaultState = EditorState.create({
-            schema
-        });
-        let allStatesMatched = true;
-        function TestEditor() {
-            const [state, setState] = useState(defaultState);
-            const [mount, setMount] = useState(null);
-            // Check that function props get invoked with the latest React state.
-            const editable = (viewState)=>{
-                allStatesMatched &&= viewState === state;
-                return true;
-            };
-            return /*#__PURE__*/ React.createElement(ProseMirror, {
-                mount: mount,
-                editable: editable,
-                state: state,
-                dispatchTransaction: (tr)=>{
-                    setState((s)=>s.apply(tr));
-                }
-            }, /*#__PURE__*/ React.createElement("div", {
-                "data-testid": "editor",
-                ref: setMount
-            }));
-        }
-        const user = userEvent.setup();
-        render(/*#__PURE__*/ React.createElement(TestEditor, null));
-        const editor = screen.getByTestId("editor");
-        await user.type(editor, "Hello, world!");
-        expect(allStatesMatched).toBe(true);
-    });
-    it("supports React NodeViews", async ()=>{
-        const schema = new Schema({
-            nodes: {
-                text: {},
-                paragraph: {
-                    content: "text*"
-                },
-                doc: {
-                    content: "paragraph+"
-                }
-            }
-        });
-        const defaultState = EditorState.create({
-            schema,
-            plugins: [
-                react()
-            ]
-        });
-        function Paragraph(param) {
-            let { children  } = param;
-            return /*#__PURE__*/ React.createElement("p", {
-                "data-testid": "paragraph"
-            }, children);
-        }
-        const nodeViews = {
-            paragraph: ()=>({
-                    component: Paragraph,
-                    dom: document.createElement("div"),
-                    contentDOM: document.createElement("span")
-                })
-        };
-        function TestEditor() {
-            const [mount, setMount] = useState(null);
-            return /*#__PURE__*/ React.createElement(ProseMirror, {
-                mount: mount,
-                defaultState: defaultState,
-                nodeViews: nodeViews
-            }, /*#__PURE__*/ React.createElement("div", {
-                "data-testid": "editor",
-                ref: setMount
-            }));
-        }
-        const user = userEvent.setup();
-        render(/*#__PURE__*/ React.createElement(TestEditor, null));
-        const editor = screen.getByTestId("editor");
-        await user.type(editor, "Hello, world!");
-        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);
-    });
-    afterAll(()=>{
-        teardownProseMirrorView();
-    });
-});

package/dist/esm/contexts/NodeViewsContext.js

@@ -1,9 +0,0 @@
-import { createContext } from "react";
-/**
- * A context containing a map of node view keys to portals.
- *
- * Each node view registers a portal under its parent's
- * key. Each can then retrieve the list of portals under their
- * key, allowing portals to be rendered with the appropriate
- * hierarchy.
- */ export const NodeViewsContext = createContext(null);

package/dist/esm/hooks/__tests__/useEditorViewLayoutEffect.test.js

@@ -1,98 +0,0 @@
-/* eslint-disable @typescript-eslint/no-empty-function */ import { render } from "@testing-library/react";
-import React from "react";
-import { LayoutGroup } from "../../components/LayoutGroup.js";
-import { EditorContext } from "../../contexts/EditorContext.js";
-import { useEditorEffect } from "../useEditorEffect.js";
-function TestComponent(param) {
-    let { effect , dependencies =[]  } = param;
-    useEditorEffect(effect, [
-        effect,
-        ...dependencies
-    ]);
-    return null;
-}
-describe("useEditorViewLayoutEffect", ()=>{
-    it("should run the effect", ()=>{
-        const effect = jest.fn();
-        const editorView = {};
-        const editorState = {};
-        const registerEventListener = ()=>{};
-        const unregisterEventListener = ()=>{};
-        render(/*#__PURE__*/ React.createElement(LayoutGroup, null, /*#__PURE__*/ React.createElement(EditorContext.Provider, {
-            value: {
-                editorView,
-                editorState,
-                registerEventListener,
-                unregisterEventListener
-            }
-        }, /*#__PURE__*/ React.createElement(TestComponent, {
-            effect: effect
-        }))));
-        expect(effect).toHaveBeenCalled();
-        expect(effect).toHaveBeenCalledWith(editorView);
-    });
-    it("should not re-run the effect if no dependencies change", ()=>{
-        const effect = jest.fn();
-        const editorView = {};
-        const editorState = {};
-        const registerEventListener = ()=>{};
-        const unregisterEventListener = ()=>{};
-        const { rerender  } = render(/*#__PURE__*/ React.createElement(LayoutGroup, null, /*#__PURE__*/ React.createElement(EditorContext.Provider, {
-            value: {
-                editorView,
-                editorState,
-                registerEventListener,
-                unregisterEventListener
-            }
-        }, /*#__PURE__*/ React.createElement(TestComponent, {
-            effect: effect,
-            dependencies: []
-        }))));
-        rerender(/*#__PURE__*/ React.createElement(LayoutGroup, null, /*#__PURE__*/ React.createElement(EditorContext.Provider, {
-            value: {
-                editorView,
-                editorState,
-                registerEventListener,
-                unregisterEventListener
-            }
-        }, /*#__PURE__*/ React.createElement(TestComponent, {
-            effect: effect,
-            dependencies: []
-        }))));
-        expect(effect).toHaveBeenCalledTimes(1);
-    });
-    it("should re-run the effect if dependencies change", ()=>{
-        const effect = jest.fn();
-        const editorView = {};
-        const editorState = {};
-        const registerEventListener = ()=>{};
-        const unregisterEventListener = ()=>{};
-        const { rerender  } = render(/*#__PURE__*/ React.createElement(LayoutGroup, null, /*#__PURE__*/ React.createElement(EditorContext.Provider, {
-            value: {
-                editorView,
-                editorState,
-                registerEventListener,
-                unregisterEventListener
-            }
-        }, /*#__PURE__*/ React.createElement(TestComponent, {
-            effect: effect,
-            dependencies: [
-                "one"
-            ]
-        }))));
-        rerender(/*#__PURE__*/ React.createElement(LayoutGroup, null, /*#__PURE__*/ React.createElement(EditorContext.Provider, {
-            value: {
-                editorView,
-                editorState,
-                registerEventListener,
-                unregisterEventListener
-            }
-        }, /*#__PURE__*/ React.createElement(TestComponent, {
-            effect: effect,
-            dependencies: [
-                "two"
-            ]
-        }))));
-        expect(effect).toHaveBeenCalledTimes(2);
-    });
-});

package/dist/esm/hooks/__tests__/useNodeViews.test.js

@@ -1,116 +0,0 @@
-import { act, render, screen } from "@testing-library/react";
-import { Schema } from "prosemirror-model";
-import { EditorState } from "prosemirror-state";
-import React, { createContext, useContext, useState } from "react";
-import { ProseMirror } from "../../components/ProseMirror.js";
-import { react } from "../../plugins/react.js";
-// Mock `ReactDOM.flushSync` to call `act` to flush updates from DOM mutations.
-jest.mock("react-dom", ()=>({
-        ...jest.requireActual("react-dom"),
-        flushSync: (fn)=>act(fn)
-    }));
-const schema = new Schema({
-    nodes: {
-        doc: {
-            content: "block+"
-        },
-        list: {
-            group: "block",
-            content: "list_item+"
-        },
-        list_item: {
-            content: "inline*"
-        },
-        text: {
-            group: "inline"
-        }
-    }
-});
-const state = EditorState.create({
-    doc: schema.topNodeType.create(null, schema.nodes.list.createAndFill()),
-    schema,
-    plugins: [
-        react()
-    ]
-});
-describe("useNodeViews", ()=>{
-    it("should render node views", ()=>{
-        function List(param) {
-            let { children  } = param;
-            return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("span", {
-                contentEditable: false
-            }, "list"), /*#__PURE__*/ React.createElement("ul", null, children));
-        }
-        function ListItem(param) {
-            let { children  } = param;
-            return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("span", {
-                contentEditable: false
-            }, "list item"), /*#__PURE__*/ React.createElement("li", null, children));
-        }
-        const nodeViews = {
-            list: ()=>({
-                    component: List,
-                    dom: document.createElement("div"),
-                    contentDOM: document.createElement("div")
-                }),
-            list_item: ()=>({
-                    component: ListItem,
-                    dom: document.createElement("div"),
-                    contentDOM: document.createElement("div")
-                })
-        };
-        function TestEditor() {
-            const [mount, setMount] = useState(null);
-            return /*#__PURE__*/ React.createElement(ProseMirror, {
-                mount: mount,
-                nodeViews: nodeViews,
-                defaultState: state
-            }, /*#__PURE__*/ React.createElement("div", {
-                ref: setMount
-            }));
-        }
-        render(/*#__PURE__*/ React.createElement(TestEditor, null));
-        expect(screen.getByText("list")).toBeTruthy();
-        expect(screen.getByText("list item")).toBeTruthy();
-    });
-    it("should render child node views as children of their parents", ()=>{
-        const TestContext = /*#__PURE__*/ createContext("default");
-        function List(param) {
-            let { children  } = param;
-            return /*#__PURE__*/ React.createElement(TestContext.Provider, {
-                value: "overriden"
-            }, /*#__PURE__*/ React.createElement("ul", null, children));
-        }
-        function ListItem(param) {
-            let { children  } = param;
-            const testContextValue = useContext(TestContext);
-            return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("span", {
-                contentEditable: false
-            }, testContextValue), /*#__PURE__*/ React.createElement("li", null, children));
-        }
-        const nodeViews = {
-            list: ()=>({
-                    component: List,
-                    dom: document.createElement("div"),
-                    contentDOM: document.createElement("div")
-                }),
-            list_item: ()=>({
-                    component: ListItem,
-                    dom: document.createElement("div"),
-                    contentDOM: document.createElement("div")
-                })
-        };
-        function TestEditor() {
-            const [mount, setMount] = useState(null);
-            return /*#__PURE__*/ React.createElement(ProseMirror, {
-                mount: mount,
-                nodeViews: nodeViews,
-                defaultState: state
-            }, /*#__PURE__*/ React.createElement("div", {
-                ref: setMount
-            }));
-        }
-        render(/*#__PURE__*/ React.createElement(TestEditor, null));
-        expect(screen.getByText("overriden")).toBeTruthy();
-    });
-});

package/dist/esm/hooks/useClientOnly.js

@@ -1,9 +0,0 @@
-import { useSyncExternalStore } from "react";
-// eslint-disable-next-line @typescript-eslint/no-empty-function
-function unsubscribe() {}
-function subscribe() {
-    return unsubscribe;
-}
-export function useClientOnly() {
-    return useSyncExternalStore(subscribe, ()=>true, ()=>false);
-}

package/dist/esm/hooks/useEditorView.js

@@ -1,99 +0,0 @@
-import { Schema } from "prosemirror-model";
-import { EditorState } from "prosemirror-state";
-import { EditorView } from "prosemirror-view";
-import { useLayoutEffect, useMemo, useState } from "react";
-import { flushSync } from "react-dom";
-import { useComponentEventListeners } from "./useComponentEventListeners.js";
-const EMPTY_SCHEMA = new Schema({
-    nodes: {
-        doc: {
-            content: "text*"
-        },
-        text: {
-            inline: true
-        }
-    }
-});
-const EMPTY_STATE = EditorState.create({
-    schema: EMPTY_SCHEMA
-});
-let didWarnValueDefaultValue = false;
-/**
- * Creates, mounts, and manages a ProseMirror `EditorView`.
- *
- * All state and props updates are executed in a layout effect.
- * To ensure that the EditorState and EditorView are never out of
- * sync, it's important that the EditorView produced by this hook
- * is only accessed through the provided hooks.
- */ export function useEditorView(mount, options) {
-    if (process.env.NODE_ENV !== "production") {
-        if (options.defaultState !== undefined && options.state !== undefined && !didWarnValueDefaultValue) {
-            console.error("A component contains a ProseMirror editor with both value and defaultValue props. " + "ProseMirror editors must be either controlled or uncontrolled " + "(specify either the state prop, or the defaultState prop, but not both). " + "Decide between using a controlled or uncontrolled ProseMirror editor " + "and remove one of these props. More info: " + "https://reactjs.org/link/controlled-components");
-            didWarnValueDefaultValue = true;
-        }
-    }
-    const defaultState = options.defaultState ?? EMPTY_STATE;
-    const [_state, setState] = useState(defaultState);
-    const state = options.state ?? _state;
-    const { componentEventListenersPlugin , registerEventListener , unregisterEventListener  } = useComponentEventListeners();
-    const plugins = useMemo(()=>[
-            ...options.plugins ?? [],
-            componentEventListenersPlugin
-        ], [
-        options.plugins,
-        componentEventListenersPlugin
-    ]);
-    function dispatchTransaction(tr) {
-        flushSync(()=>{
-            if (!options.state) {
-                setState((s)=>s.apply(tr));
-            }
-            if (options.dispatchTransaction) {
-                options.dispatchTransaction.call(this, tr);
-            }
-        });
-    }
-    const directEditorProps = {
-        ...options,
-        state,
-        plugins,
-        dispatchTransaction
-    };
-    const [_view, setView] = useState(null);
-    const view = options.view ?? _view;
-    useLayoutEffect(()=>{
-        return ()=>{
-            if (_view) {
-                _view.destroy();
-            }
-        };
-    }, [
-        _view
-    ]);
-    // This effect runs on every render and handles the view lifecycle.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    useLayoutEffect(()=>{
-        if (_view) {
-            if (_view.dom === mount) {
-                _view.setProps(directEditorProps);
-            } else {
-                setView(null);
-            }
-        } else if (mount) {
-            setView(new EditorView({
-                mount
-            }, directEditorProps));
-        }
-    });
-    return useMemo(()=>({
-            editorState: state,
-            editorView: view,
-            registerEventListener,
-            unregisterEventListener
-        }), [
-        state,
-        _view,
-        registerEventListener,
-        unregisterEventListener
-    ]);
-}

package/dist/esm/hooks/useNodePos.js

@@ -1,16 +0,0 @@
-import React, { createContext, useContext } from "react";
-import { reactPluginKey } from "../plugins/react.js";
-import { useEditorState } from "./useEditorState.js";
-const NodePosContext = /*#__PURE__*/ createContext(null);
-export function NodePosProvider(param) {
-    let { nodeKey , children  } = param;
-    const editorState = useEditorState();
-    const pluginState = reactPluginKey.getState(editorState);
-    if (!pluginState) return /*#__PURE__*/ React.createElement(React.Fragment, null, children);
-    return /*#__PURE__*/ React.createElement(NodePosContext.Provider, {
-        value: pluginState.keyToPos.get(nodeKey) ?? 0
-    }, children);
-}
-export function useNodePos() {
-    return useContext(NodePosContext);
-}

package/dist/esm/hooks/useNodeViews.js

@@ -1,53 +0,0 @@
-import React, { useCallback, useMemo, useState } from "react";
-import { NodeViews } from "../components/NodeViews.js";
-import { createReactNodeViewConstructor, findNodeKeyUp } from "../nodeViews/createReactNodeViewConstructor.js";
-export function useNodeViews(nodeViews) {
-    const [portals, setPortals] = useState({});
-    const registerPortal = useCallback((view, getPos, portal)=>{
-        const nearestAncestorKey = findNodeKeyUp(view, getPos());
-        setPortals((oldPortals)=>{
-            const oldChildPortals = oldPortals[nearestAncestorKey] ?? [];
-            const newChildPortals = oldChildPortals.concat({
-                getPos,
-                portal
-            });
-            return {
-                ...oldPortals,
-                [nearestAncestorKey]: newChildPortals
-            };
-        });
-        return ()=>{
-            setPortals((oldPortals)=>{
-                const oldChildPortals = oldPortals[nearestAncestorKey] ?? [];
-                const newChildPortals = oldChildPortals.filter((param)=>{
-                    let { portal: p  } = param;
-                    return p !== portal;
-                });
-                return {
-                    ...oldPortals,
-                    [nearestAncestorKey]: newChildPortals
-                };
-            });
-        };
-    }, []);
-    const wrappedNodeViews = useMemo(()=>{
-        const nodeViewEntries = Object.entries(nodeViews ?? {});
-        const wrappedNodeViewEntries = nodeViewEntries.map((param)=>{
-            let [name, constructor] = param;
-            return [
-                name,
-                createReactNodeViewConstructor(constructor, registerPortal)
-            ];
-        });
-        return Object.fromEntries(wrappedNodeViewEntries);
-    }, [
-        nodeViews,
-        registerPortal
-    ]);
-    return {
-        nodeViews: wrappedNodeViews,
-        nodeViewsComponent: /*#__PURE__*/ React.createElement(NodeViews, {
-            portals: portals
-        })
-    };
-}