@handlewithcare/react-prosemirror 2.4.10 → 2.4.12

package/dist/cjs/nodeViews/createReactNodeViewConstructor.js

@@ -0,0 +1,244 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    REACT_NODE_VIEW: ()=>REACT_NODE_VIEW,
+    findNodeKeyUp: ()=>findNodeKeyUp,
+    createReactNodeViewConstructor: ()=>createReactNodeViewConstructor
+});
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _reactDom = require("react-dom");
+const _nodeViewsContextJs = require("../contexts/NodeViewsContext.js");
+const _useEditorEffectJs = require("../hooks/useEditorEffect.js");
+const _useNodePosJs = require("../hooks/useNodePos.js");
+const _reactJs = require("../plugins/react.js");
+const _phrasingContentTagsJs = require("./phrasingContentTags.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 _interopRequireWildcard(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 = {};
+    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;
+}
+const REACT_NODE_VIEW = Symbol("react node view");
+let didWarnReactPlugin = false;
+function findNodeKeyUp(editorView, pos) {
+    const pluginState = _reactJs.reactPluginKey.getState(editorView.state);
+    if (!pluginState) return _reactJs.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 _reactJs.ROOT_NODE_KEY;
+}
+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 = _reactJs.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 && (_phrasingContentTagsJs.phrasingContentTags.includes(contentDOM.tagName.toLocaleLowerCase()) ? "span" : "div");
+        const nodeKey = reactPluginState.posToKey.get(getPos()) ?? (0, _reactJs.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__*/ (0, _react.forwardRef)(function NodeViewWrapper(param, ref) {
+            let { initialState  } = param;
+            const [node, setNode] = (0, _react.useState)(initialState.node);
+            const [decorations, setDecorations] = (0, _react.useState)(initialState.decorations);
+            const [isSelected, setIsSelected] = (0, _react.useState)(initialState.isSelected);
+            const nodeViews = (0, _react.useContext)(_nodeViewsContextJs.NodeViewsContext);
+            const childNodeViews = nodeViews[nodeKey];
+            const [childNodeViewPortals, setChildNodeViewPortals] = (0, _react.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
+            (0, _useEditorEffectJs.useEditorEffect)(()=>{
+                setChildNodeViewPortals(childNodeViews?.sort((a, b)=>a.getPos() - b.getPos()).map((param)=>{
+                    let { portal  } = param;
+                    return portal;
+                }));
+            }, [
+                childNodeViews
+            ]);
+            const [contentDOMWrapper, setContentDOMWrapper] = (0, _react.useState)(null);
+            const [contentDOMParent, setContentDOMParent] = (0, _react.useState)(null);
+            (0, _react.useImperativeHandle)(ref, ()=>({
+                    node,
+                    contentDOMWrapper: contentDOMWrapper,
+                    contentDOMParent: contentDOMParent,
+                    setNode,
+                    setDecorations,
+                    setIsSelected
+                }), [
+                node,
+                contentDOMWrapper,
+                contentDOMParent
+            ]);
+            return /*#__PURE__*/ _react.default.createElement(_useNodePosJs.NodePosProvider, {
+                nodeKey: nodeKey
+            }, /*#__PURE__*/ _react.default.createElement(NodeView, {
+                node: node,
+                decorations: decorations,
+                isSelected: isSelected
+            }, childNodeViewPortals, ContentDOMWrapper && /*#__PURE__*/ _react.default.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.default.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__*/ (0, _reactDom.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 = _reactJs.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/cjs/nodeViews/phrasingContentTags.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "phrasingContentTags", {
+    enumerable: true,
+    get: ()=>phrasingContentTags
+});
+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"
+];

package/dist/cjs/plugins/__tests__/react.test.js

@@ -0,0 +1,139 @@
+/* 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 _prosemirrorTransform = require("prosemirror-transform");
+const _reactJs = require("../react.js");
+const schema = new _prosemirrorModel.Schema({
+    nodes: {
+        doc: {
+            content: "block+"
+        },
+        paragraph: {
+            group: "block",
+            content: "inline*"
+        },
+        list: {
+            group: "block",
+            content: "list_item+"
+        },
+        list_item: {
+            content: "paragraph+"
+        },
+        text: {
+            group: "inline"
+        }
+    }
+});
+describe("reactNodeViewPlugin", ()=>{
+    it("should create a unique key for each node", ()=>{
+        const editorState = _prosemirrorState.EditorState.create({
+            doc: schema.topNodeType.create(null, [
+                schema.nodes.paragraph.create(),
+                schema.nodes.paragraph.create(),
+                schema.nodes.paragraph.create()
+            ]),
+            plugins: [
+                (0, _reactJs.react)()
+            ]
+        });
+        const pluginState = _reactJs.reactPluginKey.getState(editorState);
+        expect(pluginState.posToKey.size).toBe(3);
+    });
+    it("should maintain key stability when possible", ()=>{
+        const initialEditorState = _prosemirrorState.EditorState.create({
+            doc: schema.topNodeType.create(null, [
+                schema.nodes.paragraph.create(),
+                schema.nodes.paragraph.create(),
+                schema.nodes.paragraph.create()
+            ]),
+            plugins: [
+                (0, _reactJs.react)()
+            ]
+        });
+        const initialPluginState = _reactJs.reactPluginKey.getState(initialEditorState);
+        const nextEditorState = initialEditorState.apply(initialEditorState.tr.insertText("Hello, world!", 1));
+        const nextPluginState = _reactJs.reactPluginKey.getState(nextEditorState);
+        expect(Array.from(nextPluginState.keyToPos.keys())).toEqual(Array.from(initialPluginState.keyToPos.keys()));
+    });
+    it("should create unique keys for new nodes", ()=>{
+        const initialEditorState = _prosemirrorState.EditorState.create({
+            doc: schema.topNodeType.create(null, [
+                schema.nodes.paragraph.create(),
+                schema.nodes.paragraph.create(),
+                schema.nodes.paragraph.create()
+            ]),
+            plugins: [
+                (0, _reactJs.react)()
+            ]
+        });
+        const initialPluginState = _reactJs.reactPluginKey.getState(initialEditorState);
+        const nextEditorState = initialEditorState.apply(initialEditorState.tr.insert(0, schema.nodes.list.createAndFill()));
+        const nextPluginState = _reactJs.reactPluginKey.getState(nextEditorState);
+        // Adds new keys for new nodes
+        expect(nextPluginState.keyToPos.size).toBe(6);
+        // Maintains keys for previous nodes that are still there
+        Array.from(initialPluginState.keyToPos.keys()).forEach((key)=>{
+            expect(Array.from(nextPluginState.keyToPos.keys())).toContain(key);
+        });
+    });
+    it("should maintain key stability when splitting a node", ()=>{
+        const initialEditorState = _prosemirrorState.EditorState.create({
+            doc: schema.topNodeType.create(null, [
+                schema.nodes.list.create(null, [
+                    schema.nodes.list_item.create(null, [
+                        schema.nodes.paragraph.create(null, [
+                            schema.text("first")
+                        ])
+                    ])
+                ])
+            ]),
+            plugins: [
+                (0, _reactJs.react)()
+            ]
+        });
+        const initialPluginState = _reactJs.reactPluginKey.getState(initialEditorState);
+        const nextEditorState = initialEditorState.apply(initialEditorState.tr.insert(1, schema.nodes.list_item.create(null, [
+            schema.nodes.paragraph.create(null, [
+                schema.text("second")
+            ])
+        ])));
+        const nextPluginState = _reactJs.reactPluginKey.getState(nextEditorState);
+        // The new list item was inserted before the original one,
+        // pushing it further into the document. The original list
+        // item should keep its original key, and the new list item
+        // should be assigned a new one
+        expect(nextPluginState.posToKey.get(11)).toBe(initialPluginState.posToKey.get(1));
+        expect(nextPluginState.posToKey.get(1)).not.toBe(initialPluginState.posToKey.get(1));
+    });
+    it("should maintain key stability when wrapping a node", ()=>{
+        const initialEditorState = _prosemirrorState.EditorState.create({
+            doc: schema.topNodeType.create(null, [
+                schema.nodes.paragraph.create(null, [
+                    schema.text("content")
+                ])
+            ]),
+            plugins: [
+                (0, _reactJs.react)()
+            ]
+        });
+        const initialPluginState = _reactJs.reactPluginKey.getState(initialEditorState);
+        const start = 1;
+        const end = 9;
+        const tr = initialEditorState.tr.delete(start, end);
+        const $start = tr.doc.resolve(start);
+        const range = $start.blockRange();
+        const wrapping = range && (0, _prosemirrorTransform.findWrapping)(range, schema.nodes.list, null);
+        tr.wrap(range, wrapping);
+        const nextEditorState = initialEditorState.apply(tr);
+        const nextPluginState = _reactJs.reactPluginKey.getState(nextEditorState);
+        // The new list and list item nodes were wrapped around the
+        // paragraph, pushing it further into the document. The paragraph
+        // should keep its original key, and the new nodes
+        // should be assigned a new one
+        expect(nextPluginState.posToKey.get(2)).toBe(initialPluginState.posToKey.get(0));
+        expect(nextPluginState.posToKey.get(0)).not.toBe(initialPluginState.posToKey.get(0));
+    });
+});

package/dist/cjs/plugins/react.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    ROOT_NODE_KEY: ()=>ROOT_NODE_KEY,
+    createNodeKey: ()=>createNodeKey,
+    reactPluginKey: ()=>reactPluginKey,
+    react: ()=>react
+});
+const _prosemirrorState = require("prosemirror-state");
+const ROOT_NODE_KEY = Symbol("@nytimes/react-prosemirror/root-node-key");
+function createNodeKey() {
+    return Math.floor(Math.random() * 0xffffff).toString(16);
+}
+const reactPluginKey = new _prosemirrorState.PluginKey("@nytimes/react-prosemirror/react");
+function react() {
+    return new _prosemirrorState.Plugin({
+        key: reactPluginKey,
+        state: {
+            init (_, state) {
+                const next = {
+                    posToKey: new Map(),
+                    keyToPos: new Map()
+                };
+                state.doc.descendants((node, pos)=>{
+                    if (node.isText) return false;
+                    const key = createNodeKey();
+                    next.posToKey.set(pos, key);
+                    next.keyToPos.set(key, pos);
+                    return true;
+                });
+                return next;
+            },
+            /**
+       * Keeps node keys (mostly) stable across transactions.
+       *
+       * To accomplish this, we map each node position backwards
+       * through the transaction to identify its previous position,
+       * and thereby retrieve its previous key.
+       */ apply (tr, value, _, newState) {
+                if (!tr.docChanged) return value;
+                const next = {
+                    posToKey: new Map(),
+                    keyToPos: new Map()
+                };
+                for (const [pos, key] of value.posToKey.entries()){
+                    const { pos: newPos , deleted  } = tr.mapping.mapResult(pos);
+                    if (deleted) continue;
+                    next.posToKey.set(newPos, key);
+                    next.keyToPos.set(key, newPos);
+                }
+                newState.doc.descendants((node, pos)=>{
+                    if (node.isText) return false;
+                    if (next.posToKey.has(pos)) return true;
+                    const key = createNodeKey();
+                    next.posToKey.set(pos, key);
+                    next.keyToPos.set(key, pos);
+                    return true;
+                });
+                return next;
+            }
+        }
+    });
+}

package/dist/esm/components/Editor.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { EditorContext } from "../contexts/EditorContext.js";
+import { useEditorView } from "../hooks/useEditorView.js";
+import { useNodeViews } from "../hooks/useNodeViews.js";
+export function Editor(param) {
+    let { mount , children , ...options } = param;
+    const { nodeViews , nodeViewsComponent  } = useNodeViews(options.nodeViews);
+    const value = useEditorView(mount, {
+        ...options,
+        nodeViews
+    });
+    return /*#__PURE__*/ React.createElement(EditorContext.Provider, {
+        value: value
+    }, children, nodeViewsComponent);
+}

package/dist/esm/components/NodeViews.js

@@ -0,0 +1,26 @@
+import React, { useState } from "react";
+import { NodeViewsContext } from "../contexts/NodeViewsContext.js";
+import { useEditorEffect } from "../hooks/useEditorEffect.js";
+import { ROOT_NODE_KEY } from "../plugins/react.js";
+export function NodeViews(param) {
+    let { portals  } = param;
+    const rootRegisteredPortals = portals[ROOT_NODE_KEY];
+    const [rootPortals, setRootPortals] = useState(rootRegisteredPortals?.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(()=>{
+        setRootPortals(rootRegisteredPortals?.sort((a, b)=>a.getPos() - b.getPos()).map((param)=>{
+            let { portal  } = param;
+            return portal;
+        }) ?? []);
+    }, [
+        rootRegisteredPortals
+    ]);
+    return /*#__PURE__*/ React.createElement(NodeViewsContext.Provider, {
+        value: portals
+    }, rootPortals);
+}

package/dist/esm/{contexts/__tests__/DeferredLayoutEffects.test.js → components/__tests__/LayoutGroup.test.js}

@@ -1,8 +1,8 @@
 import { act, render, screen } from "@testing-library/react";
 import React, { useLayoutEffect, useState } from "react";
-import { LayoutGroup } from "../../components/LayoutGroup.js";
 import { useLayoutGroupEffect } from "../../hooks/useLayoutGroupEffect.js";
-describe("DeferredLayoutEffects", ()=>{
+import { LayoutGroup } from "../LayoutGroup.js";
+describe("LayoutGroup", ()=>{
     jest.useFakeTimers("modern");
     it("registers multiple effects and runs them", ()=>{
         function Parent() {