@handlewithcare/react-prosemirror 2.4.10 → 2.4.12

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

@@ -6,7 +6,6 @@ const _react = require("@testing-library/react");
 const _react1 = /*#__PURE__*/ _interopRequireDefault(require("react"));
 const _layoutGroupJs = require("../../components/LayoutGroup.js");
 const _editorContextJs = require("../../contexts/EditorContext.js");
-const _editorStateContextJs = require("../../contexts/EditorStateContext.js");
 const _useEditorEffectJs = require("../useEditorEffect.js");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
@@ -15,8 +14,10 @@ function _interopRequireDefault(obj) {
 }
 function TestComponent(param) {
     let { effect , dependencies =[]  } = param;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    (0, _useEditorEffectJs.useEditorEffect)(effect, dependencies);
+    (0, _useEditorEffectJs.useEditorEffect)(effect, [
+        effect,
+        ...dependencies
+    ]);
     return null;
 }
 describe("useEditorViewLayoutEffect", ()=>{
@@ -28,15 +29,14 @@ describe("useEditorViewLayoutEffect", ()=>{
         const unregisterEventListener = ()=>{};
         (0, _react.render)(/*#__PURE__*/ _react1.default.createElement(_layoutGroupJs.LayoutGroup, null, /*#__PURE__*/ _react1.default.createElement(_editorContextJs.EditorContext.Provider, {
             value: {
-                view: editorView,
+                editorView,
+                editorState,
                 registerEventListener,
                 unregisterEventListener
             }
-        }, /*#__PURE__*/ _react1.default.createElement(_editorStateContextJs.EditorStateContext.Provider, {
-            value: editorState
         }, /*#__PURE__*/ _react1.default.createElement(TestComponent, {
             effect: effect
-        })))));
+        }))));
         expect(effect).toHaveBeenCalled();
         expect(effect).toHaveBeenCalledWith(editorView);
     });
@@ -46,27 +46,28 @@ describe("useEditorViewLayoutEffect", ()=>{
         const editorState = {};
         const registerEventListener = ()=>{};
         const unregisterEventListener = ()=>{};
-        const contextValue = {
-            view: editorView,
-            registerEventListener,
-            unregisterEventListener
-        };
         const { rerender  } = (0, _react.render)(/*#__PURE__*/ _react1.default.createElement(_layoutGroupJs.LayoutGroup, null, /*#__PURE__*/ _react1.default.createElement(_editorContextJs.EditorContext.Provider, {
-            value: contextValue
-        }, /*#__PURE__*/ _react1.default.createElement(_editorStateContextJs.EditorStateContext.Provider, {
-            value: editorState
+            value: {
+                editorView,
+                editorState,
+                registerEventListener,
+                unregisterEventListener
+            }
         }, /*#__PURE__*/ _react1.default.createElement(TestComponent, {
             effect: effect,
             dependencies: []
-        })), " ")));
+        }))));
         rerender(/*#__PURE__*/ _react1.default.createElement(_layoutGroupJs.LayoutGroup, null, /*#__PURE__*/ _react1.default.createElement(_editorContextJs.EditorContext.Provider, {
-            value: contextValue
-        }, /*#__PURE__*/ _react1.default.createElement(_editorStateContextJs.EditorStateContext.Provider, {
-            value: editorState
+            value: {
+                editorView,
+                editorState,
+                registerEventListener,
+                unregisterEventListener
+            }
         }, /*#__PURE__*/ _react1.default.createElement(TestComponent, {
             effect: effect,
             dependencies: []
-        })))));
+        }))));
         expect(effect).toHaveBeenCalledTimes(1);
     });
     it("should re-run the effect if dependencies change", ()=>{
@@ -77,32 +78,30 @@ describe("useEditorViewLayoutEffect", ()=>{
         const unregisterEventListener = ()=>{};
         const { rerender  } = (0, _react.render)(/*#__PURE__*/ _react1.default.createElement(_layoutGroupJs.LayoutGroup, null, /*#__PURE__*/ _react1.default.createElement(_editorContextJs.EditorContext.Provider, {
             value: {
-                view: editorView,
+                editorView,
+                editorState,
                 registerEventListener,
                 unregisterEventListener
             }
-        }, /*#__PURE__*/ _react1.default.createElement(_editorStateContextJs.EditorStateContext.Provider, {
-            value: editorState
         }, /*#__PURE__*/ _react1.default.createElement(TestComponent, {
             effect: effect,
             dependencies: [
                 "one"
             ]
-        })))));
+        }))));
         rerender(/*#__PURE__*/ _react1.default.createElement(_layoutGroupJs.LayoutGroup, null, /*#__PURE__*/ _react1.default.createElement(_editorContextJs.EditorContext.Provider, {
             value: {
-                view: editorView,
+                editorView,
+                editorState,
                 registerEventListener,
                 unregisterEventListener
             }
-        }, /*#__PURE__*/ _react1.default.createElement(_editorStateContextJs.EditorStateContext.Provider, {
-            value: editorState
         }, /*#__PURE__*/ _react1.default.createElement(TestComponent, {
             effect: effect,
             dependencies: [
                 "two"
             ]
-        })))));
+        }))));
         expect(effect).toHaveBeenCalledTimes(2);
     });
 });

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

@@ -0,0 +1,159 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _react = require("@testing-library/react");
+const _prosemirrorModel = require("prosemirror-model");
+const _prosemirrorState = require("prosemirror-state");
+const _react1 = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _proseMirrorJs = require("../../components/ProseMirror.js");
+const _reactJs = require("../../plugins/react.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;
+}
+// Mock `ReactDOM.flushSync` to call `act` to flush updates from DOM mutations.
+jest.mock("react-dom", ()=>({
+        ...jest.requireActual("react-dom"),
+        flushSync: (fn)=>(0, _react.act)(fn)
+    }));
+const schema = new _prosemirrorModel.Schema({
+    nodes: {
+        doc: {
+            content: "block+"
+        },
+        list: {
+            group: "block",
+            content: "list_item+"
+        },
+        list_item: {
+            content: "inline*"
+        },
+        text: {
+            group: "inline"
+        }
+    }
+});
+const state = _prosemirrorState.EditorState.create({
+    doc: schema.topNodeType.create(null, schema.nodes.list.createAndFill()),
+    schema,
+    plugins: [
+        (0, _reactJs.react)()
+    ]
+});
+describe("useNodeViews", ()=>{
+    it("should render node views", ()=>{
+        function List(param) {
+            let { children  } = param;
+            return /*#__PURE__*/ _react1.default.createElement(_react1.default.Fragment, null, /*#__PURE__*/ _react1.default.createElement("span", {
+                contentEditable: false
+            }, "list"), /*#__PURE__*/ _react1.default.createElement("ul", null, children));
+        }
+        function ListItem(param) {
+            let { children  } = param;
+            return /*#__PURE__*/ _react1.default.createElement(_react1.default.Fragment, null, /*#__PURE__*/ _react1.default.createElement("span", {
+                contentEditable: false
+            }, "list item"), /*#__PURE__*/ _react1.default.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] = (0, _react1.useState)(null);
+            return /*#__PURE__*/ _react1.default.createElement(_proseMirrorJs.ProseMirror, {
+                mount: mount,
+                nodeViews: nodeViews,
+                defaultState: state
+            }, /*#__PURE__*/ _react1.default.createElement("div", {
+                ref: setMount
+            }));
+        }
+        (0, _react.render)(/*#__PURE__*/ _react1.default.createElement(TestEditor, null));
+        expect(_react.screen.getByText("list")).toBeTruthy();
+        expect(_react.screen.getByText("list item")).toBeTruthy();
+    });
+    it("should render child node views as children of their parents", ()=>{
+        const TestContext = /*#__PURE__*/ (0, _react1.createContext)("default");
+        function List(param) {
+            let { children  } = param;
+            return /*#__PURE__*/ _react1.default.createElement(TestContext.Provider, {
+                value: "overriden"
+            }, /*#__PURE__*/ _react1.default.createElement("ul", null, children));
+        }
+        function ListItem(param) {
+            let { children  } = param;
+            const testContextValue = (0, _react1.useContext)(TestContext);
+            return /*#__PURE__*/ _react1.default.createElement(_react1.default.Fragment, null, /*#__PURE__*/ _react1.default.createElement("span", {
+                contentEditable: false
+            }, testContextValue), /*#__PURE__*/ _react1.default.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] = (0, _react1.useState)(null);
+            return /*#__PURE__*/ _react1.default.createElement(_proseMirrorJs.ProseMirror, {
+                mount: mount,
+                nodeViews: nodeViews,
+                defaultState: state
+            }, /*#__PURE__*/ _react1.default.createElement("div", {
+                ref: setMount
+            }));
+        }
+        (0, _react.render)(/*#__PURE__*/ _react1.default.createElement(TestEditor, null));
+        expect(_react.screen.getByText("overriden")).toBeTruthy();
+    });
+});

package/dist/cjs/hooks/useEditor.js

@@ -68,10 +68,8 @@ let ReactEditorView = class ReactEditorView extends _prosemirrorview.EditorView
         const cleanup = (0, _ssr.setSsrStubs)();
         super(place, {
             state: _prosemirrorstate.EditorState.create({
-                schema: props.state.schema,
-                plugins: props.state.plugins
-            }),
-            plugins: props.plugins
+                schema: props.state.schema
+            })
         });
         cleanup();
         this.ready = props.ready;

package/dist/cjs/hooks/useEditorView.js

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useEditorView", {
+    enumerable: true,
+    get: ()=>useEditorView
+});
+const _prosemirrorModel = require("prosemirror-model");
+const _prosemirrorState = require("prosemirror-state");
+const _prosemirrorView = require("prosemirror-view");
+const _react = require("react");
+const _reactDom = require("react-dom");
+const _useComponentEventListenersJs = require("./useComponentEventListeners.js");
+const EMPTY_SCHEMA = new _prosemirrorModel.Schema({
+    nodes: {
+        doc: {
+            content: "text*"
+        },
+        text: {
+            inline: true
+        }
+    }
+});
+const EMPTY_STATE = _prosemirrorState.EditorState.create({
+    schema: EMPTY_SCHEMA
+});
+let didWarnValueDefaultValue = false;
+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] = (0, _react.useState)(defaultState);
+    const state = options.state ?? _state;
+    const { componentEventListenersPlugin , registerEventListener , unregisterEventListener  } = (0, _useComponentEventListenersJs.useComponentEventListeners)();
+    const plugins = (0, _react.useMemo)(()=>[
+            ...options.plugins ?? [],
+            componentEventListenersPlugin
+        ], [
+        options.plugins,
+        componentEventListenersPlugin
+    ]);
+    function dispatchTransaction(tr) {
+        (0, _reactDom.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] = (0, _react.useState)(null);
+    const view = options.view ?? _view;
+    (0, _react.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
+    (0, _react.useLayoutEffect)(()=>{
+        if (_view) {
+            if (_view.dom === mount) {
+                _view.setProps(directEditorProps);
+            } else {
+                setView(null);
+            }
+        } else if (mount) {
+            setView(new _prosemirrorView.EditorView({
+                mount
+            }, directEditorProps));
+        }
+    });
+    return (0, _react.useMemo)(()=>({
+            editorState: state,
+            editorView: view,
+            registerEventListener,
+            unregisterEventListener
+        }), [
+        state,
+        _view,
+        registerEventListener,
+        unregisterEventListener
+    ]);
+}

package/dist/cjs/hooks/useNodePos.js

@@ -0,0 +1,69 @@
+"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, {
+    NodePosProvider: ()=>NodePosProvider,
+    useNodePos: ()=>useNodePos
+});
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _reactJs = require("../plugins/react.js");
+const _useEditorStateJs = require("./useEditorState.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 NodePosContext = /*#__PURE__*/ (0, _react.createContext)(null);
+function NodePosProvider(param) {
+    let { nodeKey , children  } = param;
+    const editorState = (0, _useEditorStateJs.useEditorState)();
+    const pluginState = _reactJs.reactPluginKey.getState(editorState);
+    if (!pluginState) return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, children);
+    return /*#__PURE__*/ _react.default.createElement(NodePosContext.Provider, {
+        value: pluginState.keyToPos.get(nodeKey) ?? 0
+    }, children);
+}
+function useNodePos() {
+    return (0, _react.useContext)(NodePosContext);
+}

package/dist/cjs/hooks/useNodeViews.js

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useNodeViews", {
+    enumerable: true,
+    get: ()=>useNodeViews
+});
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _nodeViewsJs = require("../components/NodeViews.js");
+const _createReactNodeViewConstructorJs = require("../nodeViews/createReactNodeViewConstructor.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;
+}
+function useNodeViews(nodeViews) {
+    const [portals, setPortals] = (0, _react.useState)({});
+    const registerPortal = (0, _react.useCallback)((view, getPos, portal)=>{
+        const nearestAncestorKey = (0, _createReactNodeViewConstructorJs.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 = (0, _react.useMemo)(()=>{
+        const nodeViewEntries = Object.entries(nodeViews ?? {});
+        const wrappedNodeViewEntries = nodeViewEntries.map((param)=>{
+            let [name, constructor] = param;
+            return [
+                name,
+                (0, _createReactNodeViewConstructorJs.createReactNodeViewConstructor)(constructor, registerPortal)
+            ];
+        });
+        return Object.fromEntries(wrappedNodeViewEntries);
+    }, [
+        nodeViews,
+        registerPortal
+    ]);
+    return {
+        nodeViews: wrappedNodeViews,
+        nodeViewsComponent: /*#__PURE__*/ _react.default.createElement(_nodeViewsJs.NodeViews, {
+            portals: portals
+        })
+    };
+}