@handlewithcare/react-prosemirror 2.0.0

package/dist/cjs/index.js

@@ -0,0 +1,53 @@
+/* Copyright (c) The New York Times Company */ "use client";
+"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, {
+    ProseMirror: function() {
+        return _ProseMirror.ProseMirror;
+    },
+    ProseMirrorDoc: function() {
+        return _ProseMirrorDoc.ProseMirrorDoc;
+    },
+    reactKeys: function() {
+        return _reactKeys.reactKeys;
+    },
+    useEditorEffect: function() {
+        return _useEditorEffect.useEditorEffect;
+    },
+    useEditorEventCallback: function() {
+        return _useEditorEventCallback.useEditorEventCallback;
+    },
+    useEditorEventListener: function() {
+        return _useEditorEventListener.useEditorEventListener;
+    },
+    useEditorState: function() {
+        return _useEditorState.useEditorState;
+    },
+    useSelectNode: function() {
+        return _useSelectNode.useSelectNode;
+    },
+    useStopEvent: function() {
+        return _useStopEvent.useStopEvent;
+    },
+    widget: function() {
+        return _ReactWidgetType.widget;
+    }
+});
+const _ProseMirror = require("./components/ProseMirror.js");
+const _ProseMirrorDoc = require("./components/ProseMirrorDoc.js");
+const _useEditorEffect = require("./hooks/useEditorEffect.js");
+const _useEditorEventCallback = require("./hooks/useEditorEventCallback.js");
+const _useEditorEventListener = require("./hooks/useEditorEventListener.js");
+const _useEditorState = require("./hooks/useEditorState.js");
+const _useStopEvent = require("./hooks/useStopEvent.js");
+const _useSelectNode = require("./hooks/useSelectNode.js");
+const _reactKeys = require("./plugins/reactKeys.js");
+const _ReactWidgetType = require("./decorations/ReactWidgetType.js");

package/dist/cjs/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

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

@@ -0,0 +1,81 @@
+/* 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 _reactKeysJs = require("../reactKeys.js");
+const schema = new _prosemirrorModel.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 = _prosemirrorState.EditorState.create({
+            doc: schema.topNodeType.create(null, [
+                schema.nodes.paragraph.create(),
+                schema.nodes.paragraph.create(),
+                schema.nodes.paragraph.create()
+            ]),
+            plugins: [
+                (0, _reactKeysJs.reactKeys)()
+            ]
+        });
+        const pluginState = _reactKeysJs.reactKeysPluginKey.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.text("Hello")),
+                schema.nodes.paragraph.create(),
+                schema.nodes.paragraph.create()
+            ]),
+            plugins: [
+                (0, _reactKeysJs.reactKeys)()
+            ]
+        });
+        const initialPluginState = _reactKeysJs.reactKeysPluginKey.getState(initialEditorState);
+        const nextEditorState = initialEditorState.apply(initialEditorState.tr.insertText(", world!", 6));
+        const nextPluginState = _reactKeysJs.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 = _prosemirrorState.EditorState.create({
+            doc: schema.topNodeType.create(null, [
+                schema.nodes.paragraph.create(),
+                schema.nodes.paragraph.create(),
+                schema.nodes.paragraph.create()
+            ]),
+            plugins: [
+                (0, _reactKeysJs.reactKeys)()
+            ]
+        });
+        const initialPluginState = _reactKeysJs.reactKeysPluginKey.getState(initialEditorState);
+        const nextEditorState = initialEditorState.apply(initialEditorState.tr.insert(0, schema.nodes.list.createAndFill()));
+        const nextPluginState = _reactKeysJs.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);
+        });
+    });
+});

package/dist/cjs/plugins/beforeInputPlugin.js

@@ -0,0 +1,143 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "beforeInputPlugin", {
+    enumerable: true,
+    get: function() {
+        return beforeInputPlugin;
+    }
+});
+const _prosemirrorstate = require("prosemirror-state");
+const _CursorWrapper = require("../components/CursorWrapper.js");
+const _ReactWidgetType = require("../decorations/ReactWidgetType.js");
+const _reactKeys = require("./reactKeys.js");
+function insertText(view, eventData) {
+    let options = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {};
+    if (eventData === null) return false;
+    const from = options.from ?? view.state.selection.from;
+    const to = options.to ?? view.state.selection.to;
+    if (view.someProp("handleTextInput", (f)=>f(view, from, to, eventData))) {
+        return true;
+    }
+    const { tr } = view.state;
+    if (options.marks) tr.ensureMarks(options.marks);
+    tr.insertText(eventData, from, to);
+    if (options.bust) {
+        const $from = view.state.doc.resolve(from);
+        const sharedAncestorDepth = $from.sharedDepth(to);
+        const sharedAncestorPos = $from.start(sharedAncestorDepth);
+        const parentKey = _reactKeys.reactKeysPluginKey.getState(view.state)?.posToKey.get(sharedAncestorPos - 1);
+        tr.setMeta(_reactKeys.reactKeysPluginKey, {
+            type: "bustKey",
+            payload: {
+                key: parentKey
+            }
+        });
+    }
+    view.dispatch(tr);
+    return true;
+}
+function beforeInputPlugin(setCursorWrapper) {
+    let compositionText = null;
+    let compositionMarks = null;
+    return new _prosemirrorstate.Plugin({
+        props: {
+            handleDOMEvents: {
+                compositionstart (view) {
+                    const { state } = view;
+                    view.dispatch(state.tr.deleteSelection());
+                    const $pos = state.selection.$from;
+                    if (state.selection.empty && (state.storedMarks || !$pos.textOffset && $pos.parentOffset && $pos.nodeBefore?.marks.some((m)=>m.type.spec.inclusive === false))) {
+                        setCursorWrapper((0, _ReactWidgetType.widget)(state.selection.from, _CursorWrapper.CursorWrapper, {
+                            key: "cursor-wrapper",
+                            marks: state.storedMarks ?? $pos.marks()
+                        }));
+                    }
+                    compositionMarks = state.storedMarks ?? $pos.marks();
+                    // @ts-expect-error Internal property - input
+                    view.input.composing = true;
+                    return true;
+                },
+                compositionupdate () {
+                    return true;
+                },
+                compositionend (view) {
+                    // @ts-expect-error Internal property - input
+                    view.input.composing = false;
+                    if (compositionText === null) return;
+                    insertText(view, compositionText, {
+                        // TODO: Rather than busting the reactKey cache here,
+                        // which is pretty blunt and doesn't work for
+                        // multi-node replacements, we should attempt to
+                        // snapshot the selected DOM during compositionstart
+                        // and restore it before we end the composition.
+                        // This should allow React to successfully clean up
+                        // and insert the newly composed text, without requiring
+                        // any remounts
+                        bust: true,
+                        marks: compositionMarks
+                    });
+                    compositionText = null;
+                    compositionMarks = null;
+                    setCursorWrapper(null);
+                    return true;
+                },
+                beforeinput (view, event) {
+                    event.preventDefault();
+                    switch(event.inputType){
+                        case "insertCompositionText":
+                            {
+                                if (event.data === null) break;
+                                compositionText = event.data;
+                                break;
+                            }
+                        case "insertReplacementText":
+                            {
+                                const ranges = event.getTargetRanges();
+                                event.dataTransfer?.items[0]?.getAsString((data)=>{
+                                    for (const range of ranges){
+                                        const from = view.posAtDOM(range.startContainer, range.startOffset, 1);
+                                        const to = view.posAtDOM(range.endContainer, range.endOffset, 1);
+                                        insertText(view, data, {
+                                            from,
+                                            to
+                                        });
+                                    }
+                                });
+                                break;
+                            }
+                        case "insertText":
+                            {
+                                insertText(view, event.data);
+                                break;
+                            }
+                        case "deleteWordBackward":
+                        case "deleteContentBackward":
+                        case "deleteWordForward":
+                        case "deleteContentForward":
+                        case "deleteContent":
+                            {
+                                const targetRanges = event.getTargetRanges();
+                                const { tr } = view.state;
+                                for (const range of targetRanges){
+                                    const start = view.posAtDOM(range.startContainer, range.startOffset);
+                                    const end = view.posAtDOM(range.endContainer, range.endOffset);
+                                    const { doc } = view.state;
+                                    const storedMarks = doc.resolve(start).marksAcross(doc.resolve(end));
+                                    tr.delete(start, end).setStoredMarks(storedMarks);
+                                }
+                                view.dispatch(tr);
+                                break;
+                            }
+                        default:
+                            {
+                                break;
+                            }
+                    }
+                    return true;
+                }
+            }
+        }
+    });
+}

package/dist/cjs/plugins/componentEventListeners.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "componentEventListeners", {
+    enumerable: true,
+    get: function() {
+        return componentEventListeners;
+    }
+});
+const _prosemirrorstate = require("prosemirror-state");
+const _reactdom = require("react-dom");
+function componentEventListeners(eventHandlerRegistry) {
+    const domEventHandlers = {};
+    for (const [eventType, handlers] of eventHandlerRegistry.entries()){
+        function handleEvent(view, event) {
+            for (const handler of handlers){
+                let handled = false;
+                (0, _reactdom.unstable_batchedUpdates)(()=>{
+                    handled = !!handler.call(this, view, event);
+                });
+                if (handled || event.defaultPrevented) return true;
+            }
+            return false;
+        }
+        domEventHandlers[eventType] = handleEvent;
+    }
+    const plugin = new _prosemirrorstate.Plugin({
+        key: new _prosemirrorstate.PluginKey("@nytimes/react-prosemirror/componentEventListeners"),
+        props: {
+            handleDOMEvents: domEventHandlers
+        }
+    });
+    return plugin;
+}

package/dist/cjs/plugins/componentEventListenersPlugin.js

@@ -0,0 +1,35 @@
+/* Copyright (c) The New York Times Company */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "createComponentEventListenersPlugin", {
+    enumerable: true,
+    get: function() {
+        return createComponentEventListenersPlugin;
+    }
+});
+const _prosemirrorstate = require("prosemirror-state");
+const _reactdom = require("react-dom");
+function createComponentEventListenersPlugin(eventHandlerRegistry) {
+    const domEventHandlers = {};
+    for (const [eventType, handlers] of eventHandlerRegistry.entries()){
+        function handleEvent(view, event) {
+            for (const handler of handlers){
+                let handled = false;
+                (0, _reactdom.unstable_batchedUpdates)(()=>{
+                    handled = !!handler.call(this, view, event);
+                });
+                if (handled || event.defaultPrevented) return true;
+            }
+            return false;
+        }
+        domEventHandlers[eventType] = handleEvent;
+    }
+    const plugin = new _prosemirrorstate.Plugin({
+        key: new _prosemirrorstate.PluginKey("componentEventListeners"),
+        props: {
+            handleDOMEvents: domEventHandlers
+        }
+    });
+    return plugin;
+}

package/dist/cjs/plugins/reactKeys.js

@@ -0,0 +1,96 @@
+"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, {
+    createNodeKey: function() {
+        return createNodeKey;
+    },
+    reactKeys: function() {
+        return reactKeys;
+    },
+    reactKeysPluginKey: function() {
+        return reactKeysPluginKey;
+    }
+});
+const _prosemirrorstate = require("prosemirror-state");
+function createNodeKey() {
+    const key = Math.floor(Math.random() * 0xffffffffffff).toString(16);
+    return key;
+}
+const reactKeysPluginKey = new _prosemirrorstate.PluginKey("@nytimes/react-prosemirror/reactKeys");
+function reactKeys() {
+    let composing = false;
+    return new _prosemirrorstate.Plugin({
+        key: reactKeysPluginKey,
+        state: {
+            init (_, state) {
+                const next = {
+                    posToKey: new Map(),
+                    keyToPos: new Map()
+                };
+                state.doc.descendants((_, pos)=>{
+                    const key = createNodeKey();
+                    next.posToKey.set(pos, key);
+                    next.keyToPos.set(key, pos);
+                    return true;
+                });
+                return next;
+            },
+            /**
+       * Keeps node keys stable across transactions.
+       *
+       * To accomplish this, we map each node position forwards
+       * through the transaction to identify its current position,
+       * and assign its key to that new position, dropping it if the
+       * node was deleted.
+       */ apply (tr, value, _, newState) {
+                if (!tr.docChanged || composing) return value;
+                const meta = tr.getMeta(reactKeysPluginKey);
+                const keyToBust = meta?.type === "bustKey" && meta.payload.key;
+                const next = {
+                    posToKey: new Map(),
+                    keyToPos: new Map()
+                };
+                const posToKeyEntries = Array.from(value.posToKey.entries()).sort((param, param1)=>{
+                    let [a] = param, [b] = param1;
+                    return a - b;
+                });
+                for (const [pos, key] of posToKeyEntries){
+                    const { pos: newPos, deleted } = tr.mapping.mapResult(pos);
+                    if (deleted) continue;
+                    let newKey = key;
+                    if (keyToBust === key) {
+                        newKey = createNodeKey();
+                    }
+                    next.posToKey.set(newPos, newKey);
+                    next.keyToPos.set(newKey, newPos);
+                }
+                newState.doc.descendants((_, pos)=>{
+                    if (next.posToKey.has(pos)) return true;
+                    const key = createNodeKey();
+                    next.posToKey.set(pos, key);
+                    next.keyToPos.set(key, pos);
+                    return true;
+                });
+                return next;
+            }
+        },
+        props: {
+            handleDOMEvents: {
+                compositionstart: ()=>{
+                    composing = true;
+                },
+                compositionend: ()=>{
+                    composing = false;
+                }
+            }
+        }
+    });
+}