@handlewithcare/react-prosemirror 2.0.0

package/dist/esm/hooks/useEditor.js

@@ -0,0 +1,278 @@
+import { Schema } from "prosemirror-model";
+import { EditorState } from "prosemirror-state";
+import { DecorationSet, EditorView } from "prosemirror-view";
+import { useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { flushSync } from "react-dom";
+import { beforeInputPlugin } from "../plugins/beforeInputPlugin.js";
+import { SelectionDOMObserver } from "../selection/SelectionDOMObserver.js";
+import { setSsrStubs } from "../ssr.js";
+import { NodeViewDesc } from "../viewdesc.js";
+import { useComponentEventListeners } from "./useComponentEventListeners.js";
+import { useForceUpdate } from "./useForceUpdate.js";
+function buildNodeViews(view) {
+    const result = Object.create(null);
+    function add(obj) {
+        for(const prop in obj)if (!Object.prototype.hasOwnProperty.call(result, prop)) // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        result[prop] = obj[prop];
+    }
+    view.someProp("nodeViews", add);
+    view.someProp("markViews", add);
+    return result;
+}
+function changedNodeViews(a, b) {
+    let nA = 0, nB = 0;
+    for(const prop in a){
+        if (a[prop] != b[prop]) return true;
+        nA++;
+    }
+    for(const _ in b)nB++;
+    return nA != nB;
+}
+function changedProps(a, b) {
+    for (const prop of Object.keys(a)){
+        if (a[prop] !== b[prop]) return true;
+    }
+    return false;
+}
+function getEditable(view) {
+    return !view.someProp("editable", (value)=>value(view.state) === false);
+}
+// @ts-expect-error We're making use of knowledge of internal methods here
+export class ReactEditorView extends EditorView {
+    shouldUpdatePluginViews = false;
+    oldProps;
+    _props;
+    constructor(place, props){
+        // Call the superclass constructor with an empty
+        // document and limited props. We'll set everything
+        // else ourselves.
+        const cleanup = setSsrStubs();
+        super(place, {
+            state: EditorState.create({
+                schema: props.state.schema,
+                plugins: props.state.plugins
+            }),
+            plugins: props.plugins
+        });
+        cleanup();
+        this.shouldUpdatePluginViews = true;
+        this._props = props;
+        this.oldProps = {
+            state: props.state
+        };
+        this.state = props.state;
+        // @ts-expect-error We're making use of knowledge of internal attributes here
+        this.domObserver.stop();
+        // @ts-expect-error We're making use of knowledge of internal attributes here
+        this.domObserver = new SelectionDOMObserver(this);
+        // @ts-expect-error We're making use of knowledge of internal attributes here
+        this.domObserver.start();
+        this.editable = getEditable(this);
+        // Destroy the DOM created by the default
+        // ProseMirror ViewDesc implementation; we
+        // have a NodeViewDesc from React instead.
+        // @ts-expect-error We're making use of knowledge of internal attributes here
+        this.docView.dom.replaceChildren();
+        // @ts-expect-error We're making use of knowledge of internal attributes here
+        this.docView = props.docView;
+    }
+    /**
+   * Whether the EditorView's updateStateInner method thinks that the
+   * docView needs to be blown away and redrawn.
+   *
+   * @privateremarks
+   *
+   * When ProseMirror View detects that the EditorState has been reconfigured
+   * to provide new custom node views, it calls an internal function that
+   * we can't override in order to recreate the entire editor DOM.
+   *
+   * This property mimics that check, so that we can replace the EditorView
+   * with another of our own, preventing ProseMirror View from taking over
+   * DOM management responsibility.
+   */ get needsRedraw() {
+        if (this.oldProps.state.plugins === this._props.state.plugins && this._props.plugins === this.oldProps.plugins) {
+            return false;
+        }
+        const newNodeViews = buildNodeViews(this);
+        // @ts-expect-error Internal property
+        return changedNodeViews(this.nodeViews, newNodeViews);
+    }
+    /**
+   * Like setProps, but without executing any side effects.
+   * Safe to use in a component render method.
+   */ pureSetProps(props) {
+        // this.oldProps = this.props;
+        this._props = {
+            ...this._props,
+            ...props
+        };
+        this.state = this._props.state;
+        this.editable = getEditable(this);
+    }
+    /**
+   * Triggers any side effects that have been queued by previous
+   * calls to pureSetProps.
+   */ runPendingEffects() {
+        if (changedProps(this.props, this.oldProps)) {
+            const newProps = this.props;
+            this._props = this.oldProps;
+            this.state = this._props.state;
+            this.update(newProps);
+        }
+    }
+    update(props) {
+        super.update(props);
+        // Ensure that side effects aren't re-triggered until
+        // pureSetProps is called again
+        this.oldProps = props;
+    }
+    updatePluginViews(prevState) {
+        if (this.shouldUpdatePluginViews) {
+            // @ts-expect-error We're making use of knowledge of internal methods here
+            super.updatePluginViews(prevState);
+        }
+    }
+    // We want to trigger the default EditorView cleanup, but without
+    // the actual view.dom cleanup (which React will have already handled).
+    // So we give the EditorView a dummy DOM element and ask it to clean up
+    destroy() {
+        // @ts-expect-error we're intentionally overwriting this property
+        // to prevent side effects
+        this.dom = document.createElement("div");
+        super.destroy();
+    }
+}
+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 `useEditorViewEvent` and
+ * `useEditorViewLayoutEffect` hooks.
+ */ export function useEditor(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 [cursorWrapper, _setCursorWrapper] = useState(null);
+    const forceUpdate = useForceUpdate();
+    const defaultState = options.defaultState ?? EMPTY_STATE;
+    const [_state, setState] = useState(defaultState);
+    const state = options.state ?? _state;
+    const { componentEventListenersPlugin, registerEventListener, unregisterEventListener } = useComponentEventListeners();
+    const setCursorWrapper = useCallback((deco)=>{
+        flushSync(()=>{
+            _setCursorWrapper(deco);
+        });
+    }, []);
+    const plugins = useMemo(()=>[
+            ...options.plugins ?? [],
+            componentEventListenersPlugin,
+            beforeInputPlugin(setCursorWrapper)
+        ], [
+        options.plugins,
+        componentEventListenersPlugin,
+        setCursorWrapper
+    ]);
+    const dispatchTransaction = useCallback(function dispatchTransaction(tr) {
+        flushSync(()=>{
+            if (!options.state) {
+                setState((s)=>s.apply(tr));
+            }
+            if (options.dispatchTransaction) {
+                options.dispatchTransaction.call(this, tr);
+            }
+        });
+    }, [
+        options.dispatchTransaction,
+        options.state
+    ]);
+    const cleanup = setSsrStubs();
+    const tempDom = document.createElement("div");
+    cleanup();
+    const docViewDescRef = useRef(new NodeViewDesc(undefined, [], ()=>-1, state.doc, [], DecorationSet.empty, tempDom, null, tempDom, ()=>false, ()=>{
+    /* The doc node can't have a node selection*/ }, ()=>{
+    /* The doc node can't have a node selection*/ }));
+    const directEditorProps = {
+        ...options,
+        state,
+        plugins,
+        dispatchTransaction,
+        docView: docViewDescRef.current
+    };
+    const [view, setView] = useState(// During the initial render, we create something of a dummy
+    // EditorView. This allows us to ensure that the first render actually
+    // renders the document, which is necessary for SSR.
+    ()=>new ReactEditorView(null, directEditorProps));
+    useLayoutEffect(()=>{
+        return ()=>{
+            view?.destroy();
+        };
+    }, [
+        view
+    ]);
+    // This rule is concerned about infinite updates due to the
+    // call to setView. These calls are deliberately conditional,
+    // so this is not a concern.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useLayoutEffect(()=>{
+        if (!mount) {
+            setView(null);
+            return;
+        }
+        if (!view || view.dom !== mount) {
+            const newView = new ReactEditorView({
+                mount
+            }, directEditorProps);
+            setView(newView);
+            newView.dom.addEventListener("compositionend", forceUpdate);
+            return;
+        }
+        // TODO: We should be able to put this in previous branch,
+        // but we need to convince EditorView's constructor not to
+        // clear out the DOM when passed a mount that already has
+        // content in it, otherwise React blows up when it tries
+        // to clean up.
+        if (view.needsRedraw) {
+            setView(null);
+            return;
+        }
+        // @ts-expect-error Internal property - domObserver
+        view?.domObserver.selectionToDOM();
+        view?.runPendingEffects();
+    });
+    view?.pureSetProps(directEditorProps);
+    const editor = useMemo(()=>({
+            view: view,
+            registerEventListener,
+            unregisterEventListener,
+            cursorWrapper,
+            docViewDescRef
+        }), [
+        view,
+        registerEventListener,
+        unregisterEventListener,
+        cursorWrapper
+    ]);
+    return {
+        editor,
+        state
+    };
+}

package/dist/esm/hooks/useEditorEffect.js

@@ -0,0 +1,38 @@
+/* Copyright (c) The New York Times Company */ import { useContext } from "react";
+import { EditorContext } from "../contexts/EditorContext.js";
+import { useLayoutGroupEffect } from "./useLayoutGroupEffect.js";
+/**
+ * Registers a layout effect to run after the EditorView has
+ * been updated with the latest EditorState and Decorations.
+ *
+ * Effects can take an EditorView instance as an argument.
+ * This hook should be used to execute layout effects that
+ * depend on the EditorView, such as for positioning DOM
+ * nodes based on ProseMirror positions.
+ *
+ * Layout effects registered with this hook still fire
+ * synchronously after all DOM mutations, but they do so
+ * _after_ the EditorView has been updated, even when the
+ * EditorView lives in an ancestor component.
+ */ export function useEditorEffect(effect, dependencies) {
+    const { view } = useContext(EditorContext);
+    // The rules of hooks want `effect` to be included in the
+    // dependency list, but dependency issues for `effect` will
+    // be caught by the linter at the call-site for
+    // `useEditorViewLayoutEffect`.
+    // Note: we specifically don't want to re-run the effect
+    // every time it changes, because it will most likely
+    // be defined inline and run on every re-render.
+    useLayoutGroupEffect(()=>{
+        if (view) {
+            return effect(view);
+        }
+    }, // The rules of hooks want to be able to statically
+    // verify the dependencies for the effect, but this will
+    // have already happened at the call-site.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    dependencies && [
+        view,
+        ...dependencies
+    ]);
+}

package/dist/esm/hooks/useEditorEventCallback.js

@@ -0,0 +1,35 @@
+/* Copyright (c) The New York Times Company */ import { useCallback, useContext, useRef } from "react";
+import { EditorContext } from "../contexts/EditorContext.js";
+import { useEditorEffect } from "./useEditorEffect.js";
+/**
+ * Returns a stable function reference to be used as an
+ * event handler callback.
+ *
+ * The callback will be called with the EditorView instance
+ * as its first argument.
+ *
+ * This hook is dependent on both the
+ * `EditorViewContext.Provider` and the
+ * `DeferredLayoutEffectProvider`. It can only be used in a
+ * component that is mounted as a child of both of these
+ * providers.
+ */ export function useEditorEventCallback(callback) {
+    const ref = useRef(callback);
+    const { view } = useContext(EditorContext);
+    useEditorEffect(()=>{
+        ref.current = callback;
+    }, [
+        callback
+    ]);
+    return useCallback(function() {
+        for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
+            args[_key] = arguments[_key];
+        }
+        if (view) {
+            return ref.current(view, ...args);
+        }
+        return;
+    }, [
+        view
+    ]);
+}

package/dist/esm/hooks/useEditorEventListener.js

@@ -0,0 +1,28 @@
+/* Copyright (c) The New York Times Company */ import { useCallback, useContext, useRef } from "react";
+import { EditorContext } from "../contexts/EditorContext.js";
+import { useEditorEffect } from "./useEditorEffect.js";
+/**
+ * Attaches an event listener at the `EditorView`'s DOM node. See
+ * [the ProseMirror docs](https://prosemirror.net/docs/ref/#view.EditorProps.handleDOMEvents)
+ * for more details.
+ */ export function useEditorEventListener(eventType, handler) {
+    const { registerEventListener, unregisterEventListener } = useContext(EditorContext);
+    const ref = useRef(handler);
+    useEditorEffect(()=>{
+        ref.current = handler;
+    }, [
+        handler
+    ]);
+    const eventHandler = useCallback(function(view, event) {
+        return ref.current.call(this, view, event);
+    }, []);
+    useEditorEffect(()=>{
+        registerEventListener(eventType, eventHandler);
+        return ()=>unregisterEventListener(eventType, eventHandler);
+    }, [
+        eventHandler,
+        eventType,
+        registerEventListener,
+        unregisterEventListener
+    ]);
+}

package/dist/esm/hooks/useEditorState.js

@@ -0,0 +1,8 @@
+/* Copyright (c) The New York Times Company */ import { useContext } from "react";
+import { EditorStateContext } from "../contexts/EditorStateContext.js";
+/**
+ * Provides access to the current EditorState value.
+ */ export function useEditorState() {
+    const editorState = useContext(EditorStateContext);
+    return editorState;
+}

package/dist/esm/hooks/useForceUpdate.js

@@ -0,0 +1,8 @@
+/* Copyright (c) The New York Times Company */ import { useReducer } from "react";
+/**
+ * Provides a function that forces an update of the
+ * component.
+ */ export function useForceUpdate() {
+    const [, forceUpdate] = useReducer((x)=>x + 1, 0);
+    return forceUpdate;
+}

package/dist/esm/hooks/useLayoutGroupEffect.js

@@ -0,0 +1,9 @@
+/* Copyright (c) The New York Times Company */ import { useContext, useLayoutEffect } from "react";
+import { LayoutGroupContext } from "../contexts/LayoutGroupContext.js";
+/** Registers a layout effect to run at the nearest `LayoutGroup` boundary. */ export function useLayoutGroupEffect(effect, deps) {
+    const register = useContext(LayoutGroupContext);
+    // The rule for hooks wants to statically verify the deps,
+    // but the dependencies are up to the caller, not this implementation.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useLayoutEffect(()=>register(effect), deps);
+}

package/dist/esm/hooks/useNodeViewDescriptor.js

@@ -0,0 +1,105 @@
+import { useCallback, useContext, useLayoutEffect, useRef, useState } from "react";
+import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
+import { EditorContext } from "../contexts/EditorContext.js";
+import { CompositionViewDesc, NodeViewDesc, sortViewDescs } from "../viewdesc.js";
+export function useNodeViewDescriptor(node, getPos, domRef, nodeDomRef, innerDecorations, outerDecorations, viewDesc, contentDOMRef) {
+    const { view } = useContext(EditorContext);
+    const [hasContentDOM, setHasContentDOM] = useState(true);
+    const nodeViewDescRef = useRef(viewDesc);
+    const stopEvent = useRef(()=>false);
+    const setStopEvent = useCallback((newStopEvent)=>{
+        stopEvent.current = newStopEvent;
+    }, []);
+    const selectNode = useRef(()=>{
+        if (!nodeDomRef.current || !node) return;
+        if (nodeDomRef.current.nodeType == 1) nodeDomRef.current.classList.add("ProseMirror-selectednode");
+        if (contentDOMRef?.current || !node.type.spec.draggable) (domRef?.current ?? nodeDomRef.current).draggable = true;
+    });
+    const deselectNode = useRef(()=>{
+        if (!nodeDomRef.current || !node) return;
+        if (nodeDomRef.current.nodeType == 1) {
+            nodeDomRef.current.classList.remove("ProseMirror-selectednode");
+            if (contentDOMRef?.current || !node.type.spec.draggable) (domRef?.current ?? nodeDomRef.current).removeAttribute("draggable");
+        }
+    });
+    const setSelectNode = useCallback((newSelectNode, newDeselectNode)=>{
+        selectNode.current = newSelectNode;
+        deselectNode.current = newDeselectNode;
+    }, []);
+    const { siblingsRef, parentRef } = useContext(ChildDescriptorsContext);
+    const childDescriptors = useRef([]);
+    useLayoutEffect(()=>{
+        const siblings = siblingsRef.current;
+        return ()=>{
+            if (!nodeViewDescRef.current) return;
+            if (siblings.includes(nodeViewDescRef.current)) {
+                const index = siblings.indexOf(nodeViewDescRef.current);
+                siblings.splice(index, 1);
+            }
+        };
+    }, [
+        siblingsRef
+    ]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useLayoutEffect(()=>{
+        if (!node || !nodeDomRef.current) return;
+        const firstChildDesc = childDescriptors.current[0];
+        if (!nodeViewDescRef.current) {
+            nodeViewDescRef.current = new NodeViewDesc(parentRef.current, childDescriptors.current, getPos, node, outerDecorations, innerDecorations, domRef?.current ?? nodeDomRef.current, firstChildDesc?.dom.parentElement ?? null, nodeDomRef.current, (event)=>!!stopEvent.current(event), ()=>selectNode.current(), ()=>deselectNode.current());
+        } else {
+            nodeViewDescRef.current.parent = parentRef.current;
+            nodeViewDescRef.current.children = childDescriptors.current;
+            nodeViewDescRef.current.node = node;
+            nodeViewDescRef.current.getPos = getPos;
+            nodeViewDescRef.current.outerDeco = outerDecorations;
+            nodeViewDescRef.current.innerDeco = innerDecorations;
+            nodeViewDescRef.current.dom = domRef?.current ?? nodeDomRef.current;
+            // @ts-expect-error We have our own ViewDesc implementations
+            nodeViewDescRef.current.dom.pmViewDesc = nodeViewDescRef.current;
+            nodeViewDescRef.current.contentDOM = // If there's already a contentDOM, we can just
+            // keep it; it won't have changed. This is especially
+            // important during compositions, where the
+            // firstChildDesc might not have a correct dom node set yet.
+            contentDOMRef?.current ?? nodeViewDescRef.current.contentDOM ?? firstChildDesc?.dom.parentElement ?? null;
+            nodeViewDescRef.current.nodeDOM = nodeDomRef.current;
+        }
+        setHasContentDOM(nodeViewDescRef.current.contentDOM !== null);
+        if (!siblingsRef.current.includes(nodeViewDescRef.current)) {
+            siblingsRef.current.push(nodeViewDescRef.current);
+        }
+        siblingsRef.current.sort(sortViewDescs);
+        for (const childDesc of childDescriptors.current){
+            childDesc.parent = nodeViewDescRef.current;
+            // Because TextNodeViews can't locate the DOM nodes
+            // for compositions, we need to override them here
+            if (childDesc instanceof CompositionViewDesc) {
+                const compositionTopDOM = nodeViewDescRef.current.contentDOM?.firstChild;
+                if (!compositionTopDOM) throw new Error(`Started a composition but couldn't find the text node it belongs to.`);
+                let textDOM = compositionTopDOM;
+                while(textDOM.firstChild){
+                    textDOM = textDOM.firstChild;
+                }
+                if (!textDOM || !(textDOM instanceof Text)) throw new Error(`Started a composition but couldn't find the text node it belongs to.`);
+                childDesc.dom = compositionTopDOM;
+                childDesc.textDOM = textDOM;
+                childDesc.text = textDOM.data;
+                // @ts-expect-error ???
+                childDesc.textDOM.pmViewDesc = childDesc;
+                // @ts-expect-error ???
+                view?.input.compositionNodes.push(childDesc);
+            }
+        }
+        return ()=>{
+            if (nodeViewDescRef.current?.children[0] instanceof CompositionViewDesc && !view?.composing) {
+                nodeViewDescRef.current?.children[0].dom.parentNode?.removeChild(nodeViewDescRef.current?.children[0].dom);
+            }
+        };
+    });
+    return {
+        hasContentDOM,
+        childDescriptors,
+        nodeViewDescRef,
+        setStopEvent,
+        setSelectNode
+    };
+}

package/dist/esm/hooks/useReactKeys.js

@@ -0,0 +1,7 @@
+import { useContext } from "react";
+import { EditorContext } from "../contexts/EditorContext.js";
+import { reactKeysPluginKey } from "../plugins/reactKeys.js";
+export function useReactKeys() {
+    const { view } = useContext(EditorContext);
+    return view && reactKeysPluginKey.getState(view.state);
+}

package/dist/esm/hooks/useSelectNode.js

@@ -0,0 +1,18 @@
+import { useContext } from "react";
+import { SelectNodeContext } from "../contexts/SelectNodeContext.js";
+import { useEditorEffect } from "./useEditorEffect.js";
+import { useEditorEventCallback } from "./useEditorEventCallback.js";
+export function useSelectNode(selectNode, deselectNode) {
+    const register = useContext(SelectNodeContext);
+    const selectNodeMemo = useEditorEventCallback(selectNode);
+    const deselectNodeMemo = useEditorEventCallback(deselectNode ?? (()=>{
+    // empty
+    }));
+    return useEditorEffect(()=>{
+        register(selectNodeMemo, deselectNodeMemo);
+    }, [
+        deselectNodeMemo,
+        register,
+        selectNodeMemo
+    ]);
+}

package/dist/esm/hooks/useStopEvent.js

@@ -0,0 +1,14 @@
+import { useContext } from "react";
+import { StopEventContext } from "../contexts/StopEventContext.js";
+import { useEditorEffect } from "./useEditorEffect.js";
+import { useEditorEventCallback } from "./useEditorEventCallback.js";
+export function useStopEvent(stopEvent) {
+    const register = useContext(StopEventContext);
+    const stopEventMemo = useEditorEventCallback(stopEvent);
+    useEditorEffect(()=>{
+        register(stopEventMemo);
+    }, [
+        register,
+        stopEventMemo
+    ]);
+}

package/dist/esm/index.js

@@ -0,0 +1,11 @@
+/* Copyright (c) The New York Times Company */ "use client";
+export { ProseMirror } from "./components/ProseMirror.js";
+export { ProseMirrorDoc } from "./components/ProseMirrorDoc.js";
+export { useEditorEffect } from "./hooks/useEditorEffect.js";
+export { useEditorEventCallback } from "./hooks/useEditorEventCallback.js";
+export { useEditorEventListener } from "./hooks/useEditorEventListener.js";
+export { useEditorState } from "./hooks/useEditorState.js";
+export { useStopEvent } from "./hooks/useStopEvent.js";
+export { useSelectNode } from "./hooks/useSelectNode.js";
+export { reactKeys } from "./plugins/reactKeys.js";
+export { widget } from "./decorations/ReactWidgetType.js";

package/dist/esm/plugins/__tests__/reactKeys.test.js

@@ -0,0 +1,77 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */ import { Schema } from "prosemirror-model";
+import { EditorState } from "prosemirror-state";
+import { reactKeys, reactKeysPluginKey } from "../reactKeys.js";
+const schema = new Schema({
+    nodes: {
+        doc: {
+            content: "block+"
+        },
+        paragraph: {
+            group: "block",
+            content: "inline*"
+        },
+        list: {
+            group: "block",
+            content: "list_item+"
+        },
+        list_item: {
+            content: "inline*"
+        },
+        text: {
+            group: "inline"
+        }
+    }
+});
+describe("reactNodeViewPlugin", ()=>{
+    it("should create a unique key for each node", ()=>{
+        const editorState = EditorState.create({
+            doc: schema.topNodeType.create(null, [
+                schema.nodes.paragraph.create(),
+                schema.nodes.paragraph.create(),
+                schema.nodes.paragraph.create()
+            ]),
+            plugins: [
+                reactKeys()
+            ]
+        });
+        const pluginState = reactKeysPluginKey.getState(editorState);
+        expect(pluginState.posToKey.size).toBe(3);
+    });
+    it("should maintain key stability when possible", ()=>{
+        const initialEditorState = EditorState.create({
+            doc: schema.topNodeType.create(null, [
+                schema.nodes.paragraph.create({}, schema.text("Hello")),
+                schema.nodes.paragraph.create(),
+                schema.nodes.paragraph.create()
+            ]),
+            plugins: [
+                reactKeys()
+            ]
+        });
+        const initialPluginState = reactKeysPluginKey.getState(initialEditorState);
+        const nextEditorState = initialEditorState.apply(initialEditorState.tr.insertText(", world!", 6));
+        const nextPluginState = reactKeysPluginKey.getState(nextEditorState);
+        expect(Array.from(initialPluginState.keyToPos.keys())).toEqual(Array.from(nextPluginState.keyToPos.keys()));
+    });
+    it("should create unique keys for new nodes", ()=>{
+        const initialEditorState = EditorState.create({
+            doc: schema.topNodeType.create(null, [
+                schema.nodes.paragraph.create(),
+                schema.nodes.paragraph.create(),
+                schema.nodes.paragraph.create()
+            ]),
+            plugins: [
+                reactKeys()
+            ]
+        });
+        const initialPluginState = reactKeysPluginKey.getState(initialEditorState);
+        const nextEditorState = initialEditorState.apply(initialEditorState.tr.insert(0, schema.nodes.list.createAndFill()));
+        const nextPluginState = reactKeysPluginKey.getState(nextEditorState);
+        // Adds new keys for new nodes
+        expect(nextPluginState.keyToPos.size).toBe(5);
+        // Maintains keys for previous nodes that are still there
+        Array.from(initialPluginState.keyToPos.keys()).forEach((key)=>{
+            expect(Array.from(nextPluginState.keyToPos.keys())).toContain(key);
+        });
+    });
+});