@handlewithcare/react-prosemirror 2.4.12 → 2.5.0

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/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
-        })
-    };
-}

package/dist/esm/nodeViews/createReactNodeViewConstructor.js

@@ -1,214 +0,0 @@
-import React, { forwardRef, useContext, useImperativeHandle, useState } from "react";
-import { createPortal } from "react-dom";
-import { NodeViewsContext } from "../contexts/NodeViewsContext.js";
-import { useEditorEffect } from "../hooks/useEditorEffect.js";
-import { NodePosProvider } from "../hooks/useNodePos.js";
-import { ROOT_NODE_KEY, createNodeKey, reactPluginKey } from "../plugins/react.js";
-import { phrasingContentTags } from "./phrasingContentTags.js";
-/**
- * Identifies a node view constructor as having been created
- * by @nytimes/react-prosemirror
- */ export const REACT_NODE_VIEW = Symbol("react node view");
-let didWarnReactPlugin = false;
-/**
- * Searches upward for the nearest node with a node key,
- * returning the first node key it finds associated with
- * a React node view.
- *
- * Returns the root key if no ancestor nodes have node keys.
- */ export function findNodeKeyUp(editorView, pos) {
-    const pluginState = reactPluginKey.getState(editorView.state);
-    if (!pluginState) return ROOT_NODE_KEY;
-    const $pos = editorView.state.doc.resolve(pos);
-    for(let d = $pos.depth; d > 0; d--){
-        const ancestorNodeTypeName = $pos.node(d).type.name;
-        const ancestorNodeView = editorView.props.nodeViews?.[ancestorNodeTypeName];
-        if (!ancestorNodeView?.[REACT_NODE_VIEW]) continue;
-        const ancestorPos = $pos.before(d);
-        const ancestorKey = pluginState.posToKey.get(ancestorPos);
-        if (ancestorKey) return ancestorKey;
-    }
-    return ROOT_NODE_KEY;
-}
-/**
- * Factory function for creating nodeViewConstructors that
- * render as React components.
- *
- * `NodeView` can be any React component that takes
- * `NodeViewComponentProps`. It will be passed all of the
- * arguments to the `nodeViewConstructor` except for
- * `editorView`. NodeView components that need access
- * directly to the EditorView should use the
- * `useEditorViewEvent` and `useEditorViewLayoutEffect`
- * hooks to ensure safe access.
- *
- * For contentful Nodes, the NodeView component will also
- * be passed a `children` prop containing an empty element.
- * ProseMirror will render content nodes into this element.
- */ export function createReactNodeViewConstructor(nodeViewConstructor, registerPortal) {
-    function nodeViewConstructorWrapper(node, editorView, getPos, decorations, innerDecorations) {
-        const nodeView = nodeViewConstructor(node, editorView, getPos, decorations, innerDecorations);
-        const { component: NodeView  } = nodeView;
-        if (!NodeView) {
-            return nodeView;
-        }
-        const reactPluginState = reactPluginKey.getState(editorView.state);
-        if (!reactPluginState) {
-            if (!didWarnReactPlugin) {
-                console.error("The React ProseMirror plugin is required to use React node views. " + "Make sure to add it to the ProseMirror editor state.");
-                didWarnReactPlugin = true;
-            }
-            return nodeView;
-        }
-        const { dom , contentDOM  } = nodeView;
-        // Use a span if the provided contentDOM is in the "phrasing" content
-        // category. Otherwise use a div. This is our best attempt at not
-        // breaking the intended content model, for now.
-        //
-        // https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#phrasing_content
-        const ContentDOMWrapper = contentDOM && (phrasingContentTags.includes(contentDOM.tagName.toLocaleLowerCase()) ? "span" : "div");
-        const nodeKey = reactPluginState.posToKey.get(getPos()) ?? createNodeKey();
-        /**
-     * Wrapper component to provide some imperative handles for updating
-     * and re-rendering its child. Takes and renders an arbitrary ElementType
-     * that expects NodeViewComponentProps as props.
-     */ const NodeViewWrapper = /*#__PURE__*/ forwardRef(function NodeViewWrapper(param, ref) {
-            let { initialState  } = param;
-            const [node, setNode] = useState(initialState.node);
-            const [decorations, setDecorations] = useState(initialState.decorations);
-            const [isSelected, setIsSelected] = useState(initialState.isSelected);
-            const nodeViews = useContext(NodeViewsContext);
-            const childNodeViews = nodeViews[nodeKey];
-            const [childNodeViewPortals, setChildNodeViewPortals] = useState(childNodeViews?.map((param)=>{
-                let { portal  } = param;
-                return portal;
-            }));
-            // `getPos` is technically derived from the EditorView
-            // state, so it's not safe to call until after the EditorView
-            // has been updated
-            useEditorEffect(()=>{
-                setChildNodeViewPortals(childNodeViews?.sort((a, b)=>a.getPos() - b.getPos()).map((param)=>{
-                    let { portal  } = param;
-                    return portal;
-                }));
-            }, [
-                childNodeViews
-            ]);
-            const [contentDOMWrapper, setContentDOMWrapper] = useState(null);
-            const [contentDOMParent, setContentDOMParent] = useState(null);
-            useImperativeHandle(ref, ()=>({
-                    node,
-                    contentDOMWrapper: contentDOMWrapper,
-                    contentDOMParent: contentDOMParent,
-                    setNode,
-                    setDecorations,
-                    setIsSelected
-                }), [
-                node,
-                contentDOMWrapper,
-                contentDOMParent
-            ]);
-            return /*#__PURE__*/ React.createElement(NodePosProvider, {
-                nodeKey: nodeKey
-            }, /*#__PURE__*/ React.createElement(NodeView, {
-                node: node,
-                decorations: decorations,
-                isSelected: isSelected
-            }, childNodeViewPortals, ContentDOMWrapper && /*#__PURE__*/ React.createElement(ContentDOMWrapper, {
-                style: {
-                    display: "contents"
-                },
-                ref: (nextContentDOMWrapper)=>{
-                    setContentDOMWrapper(nextContentDOMWrapper);
-                    // we preserve a reference to the contentDOMWrapper'
-                    // parent so that later we can reassemble the DOM hierarchy
-                    // React expects when cleaning up the ContentDOMWrapper element
-                    if (nextContentDOMWrapper?.parentNode) {
-                        setContentDOMParent(nextContentDOMWrapper.parentNode);
-                    }
-                }
-            })));
-        });
-        NodeViewWrapper.displayName = `NodeView(${NodeView.displayName ?? NodeView.name})`;
-        let componentRef = null;
-        const element = /*#__PURE__*/ React.createElement(NodeViewWrapper, {
-            initialState: {
-                node,
-                decorations,
-                isSelected: false
-            },
-            ref: (c)=>{
-                componentRef = c;
-                if (!componentRef || componentRef.node.isLeaf) return;
-                const contentDOMWrapper = componentRef.contentDOMWrapper;
-                if (!contentDOMWrapper || !(contentDOMWrapper instanceof HTMLElement)) {
-                    return;
-                }
-                // We always set contentDOM when !node.isLeaf, which is checked above
-                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                contentDOMWrapper.appendChild(contentDOM);
-                // Synchronize the ProseMirror selection to the DOM, because mounting the
-                // component changes the DOM outside of a ProseMirror update.
-                const { node  } = componentRef;
-                const pos = getPos();
-                const end = pos + node.nodeSize;
-                const { from , to  } = editorView.state.selection;
-                if (editorView.hasFocus() && pos < from && to < end) {
-                    // This call seems like it should be a no-op, given the editor already has
-                    // focus, but it causes ProseMirror to synchronize the DOM selection with
-                    // its state again, placing the DOM selection in a reasonable place within
-                    // the node.
-                    editorView.focus();
-                }
-            }
-        });
-        const portal = /*#__PURE__*/ createPortal(element, dom, nodeKey);
-        const unregisterPortal = registerPortal(editorView, getPos, portal);
-        return {
-            ignoreMutation (record) {
-                return !contentDOM?.contains(record.target);
-            },
-            ...nodeView,
-            selectNode () {
-                componentRef?.setIsSelected(true);
-                nodeView.selectNode?.();
-            },
-            deselectNode () {
-                componentRef?.setIsSelected(false);
-                nodeView.deselectNode?.();
-            },
-            update (node, decorations, innerDecorations) {
-                // If this node view's parent has been removed from the registry, we
-                // need to rebuild it and its children with new registry keys
-                const positionRegistry = reactPluginKey.getState(editorView.state);
-                if (positionRegistry && nodeKey !== positionRegistry.posToKey.get(getPos())) {
-                    return false;
-                }
-                if (nodeView.update?.(node, decorations, innerDecorations) === false) {
-                    return false;
-                }
-                if (node.type === componentRef?.node.type) {
-                    componentRef?.setNode(node);
-                    componentRef?.setDecorations(decorations);
-                    return true;
-                }
-                return false;
-            },
-            destroy () {
-                // React expects the contentDOMParent to be a child of the
-                // DOM element where the portal was mounted, but in some situations
-                // contenteditable may have already detached the contentDOMParent
-                // from the DOM. Here we attempt to reassemble the DOM that React
-                // expects when cleaning up the portal.
-                if (componentRef?.contentDOMParent) {
-                    this.dom.appendChild(componentRef.contentDOMParent);
-                }
-                unregisterPortal();
-                nodeView.destroy?.();
-            }
-        };
-    }
-    return Object.assign(nodeViewConstructorWrapper, {
-        [REACT_NODE_VIEW]: true
-    });
-}

package/dist/esm/nodeViews/phrasingContentTags.js

@@ -1,49 +0,0 @@
-export const phrasingContentTags = [
-    "abbr",
-    "audio",
-    "b",
-    "bdo",
-    "br",
-    "button",
-    "canvas",
-    "cite",
-    "code",
-    "data",
-    "datalist",
-    "dfn",
-    "em",
-    "embed",
-    "i",
-    "iframe",
-    "img",
-    "input",
-    "kbd",
-    "keygen",
-    "label",
-    "mark",
-    "math",
-    "meter",
-    "noscript",
-    "object",
-    "output",
-    "picture",
-    "progress",
-    "q",
-    "ruby",
-    "s",
-    "samp",
-    "script",
-    "select",
-    "small",
-    "span",
-    "strong",
-    "sub",
-    "sup",
-    "svg",
-    "textarea",
-    "time",
-    "u",
-    "var",
-    "video",
-    "wbr"
-];