@handlewithcare/react-prosemirror 2.0.0

package/dist/esm/plugins/beforeInputPlugin.js

@@ -0,0 +1,133 @@
+import { Plugin } from "prosemirror-state";
+import { CursorWrapper } from "../components/CursorWrapper.js";
+import { widget } from "../decorations/ReactWidgetType.js";
+import { reactKeysPluginKey } from "./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 = reactKeysPluginKey.getState(view.state)?.posToKey.get(sharedAncestorPos - 1);
+        tr.setMeta(reactKeysPluginKey, {
+            type: "bustKey",
+            payload: {
+                key: parentKey
+            }
+        });
+    }
+    view.dispatch(tr);
+    return true;
+}
+export function beforeInputPlugin(setCursorWrapper) {
+    let compositionText = null;
+    let compositionMarks = null;
+    return new 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(widget(state.selection.from, 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/esm/plugins/componentEventListeners.js

@@ -0,0 +1,25 @@
+import { Plugin, PluginKey } from "prosemirror-state";
+import { unstable_batchedUpdates as batch } from "react-dom";
+export function componentEventListeners(eventHandlerRegistry) {
+    const domEventHandlers = {};
+    for (const [eventType, handlers] of eventHandlerRegistry.entries()){
+        function handleEvent(view, event) {
+            for (const handler of handlers){
+                let handled = false;
+                batch(()=>{
+                    handled = !!handler.call(this, view, event);
+                });
+                if (handled || event.defaultPrevented) return true;
+            }
+            return false;
+        }
+        domEventHandlers[eventType] = handleEvent;
+    }
+    const plugin = new Plugin({
+        key: new PluginKey("@nytimes/react-prosemirror/componentEventListeners"),
+        props: {
+            handleDOMEvents: domEventHandlers
+        }
+    });
+    return plugin;
+}

package/dist/esm/plugins/componentEventListenersPlugin.js

@@ -0,0 +1,25 @@
+/* Copyright (c) The New York Times Company */ import { Plugin, PluginKey } from "prosemirror-state";
+import { unstable_batchedUpdates as batch } from "react-dom";
+export function createComponentEventListenersPlugin(eventHandlerRegistry) {
+    const domEventHandlers = {};
+    for (const [eventType, handlers] of eventHandlerRegistry.entries()){
+        function handleEvent(view, event) {
+            for (const handler of handlers){
+                let handled = false;
+                batch(()=>{
+                    handled = !!handler.call(this, view, event);
+                });
+                if (handled || event.defaultPrevented) return true;
+            }
+            return false;
+        }
+        domEventHandlers[eventType] = handleEvent;
+    }
+    const plugin = new Plugin({
+        key: new PluginKey("componentEventListeners"),
+        props: {
+            handleDOMEvents: domEventHandlers
+        }
+    });
+    return plugin;
+}

package/dist/esm/plugins/reactKeys.js

@@ -0,0 +1,81 @@
+import { Plugin, PluginKey } from "prosemirror-state";
+export function createNodeKey() {
+    const key = Math.floor(Math.random() * 0xffffffffffff).toString(16);
+    return key;
+}
+export const reactKeysPluginKey = new PluginKey("@nytimes/react-prosemirror/reactKeys");
+/**
+ * Tracks a unique key for each (non-text) node in the
+ * document, identified by its current position. Keys are
+ * (mostly) stable across transaction applications. The
+ * key for a given node can be accessed by that node's
+ * current position in the document, and vice versa.
+ */ export function reactKeys() {
+    let composing = false;
+    return new 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;
+                }
+            }
+        }
+    });
+}

package/dist/esm/props.js

@@ -0,0 +1,251 @@
+import cx from "classnames";
+export function kebabCaseToCamelCase(str) {
+    return str.replaceAll(/-[a-z]/g, (g)=>g[1]?.toUpperCase() ?? "");
+}
+/**
+ * Converts a CSS style string to an object
+ * that can be passed to a React component's
+ * `style` prop.
+ */ export function cssToStyles(css) {
+    const stylesheet = new CSSStyleSheet();
+    stylesheet.insertRule(`* { ${css} }`);
+    const insertedRule = stylesheet.cssRules[0];
+    const declaration = insertedRule.style;
+    const styles = {};
+    for(let i = 0; i < declaration.length; i++){
+        const property = declaration.item(i);
+        const value = declaration.getPropertyValue(property);
+        const camelCasePropertyName = property.startsWith("--") ? property : kebabCaseToCamelCase(property);
+        styles[camelCasePropertyName] = value;
+    }
+    return styles;
+}
+/**
+ * Merges two sets of React props. Class names
+ * will be concatenated and style objects
+ * will be merged.
+ */ export function mergeReactProps(a, b) {
+    return {
+        ...a,
+        ...b,
+        className: cx(a.className, b.className),
+        style: {
+            ...a.style,
+            ...b.style
+        }
+    };
+}
+/**
+ * Given a record of HTML attributes, returns tho
+ * equivalent React props.
+ */ export function htmlAttrsToReactProps(attrs) {
+    const props = {};
+    for (const [attrName, attrValue] of Object.entries(attrs)){
+        switch(attrName.toLowerCase()){
+            case "class":
+                {
+                    props.className = attrValue;
+                    break;
+                }
+            case "style":
+                {
+                    props.style = cssToStyles(attrValue);
+                    break;
+                }
+            case "autocapitalize":
+                {
+                    props.autoCapitalize = attrValue;
+                    break;
+                }
+            case "contenteditable":
+                {
+                    if (attrValue === "" || attrValue === "true") {
+                        props.contentEditable = true;
+                        break;
+                    }
+                    if (attrValue === "false") {
+                        props.contentEditable = false;
+                        break;
+                    }
+                    if (attrValue === "plaintext-only") {
+                        props.contentEditable = "plaintext-only";
+                        break;
+                    }
+                    props.contentEditable = null;
+                    break;
+                }
+            case "draggable":
+                {
+                    props.draggable = attrValue != null;
+                    break;
+                }
+            case "enterkeyhint":
+                {
+                    props.enterKeyHint = attrValue;
+                    break;
+                }
+            case "for":
+                {
+                    props.htmlFor = attrValue;
+                    break;
+                }
+            case "hidden":
+                {
+                    props.hidden = attrValue;
+                    break;
+                }
+            case "inputmode":
+                {
+                    props.inputMode = attrValue;
+                    break;
+                }
+            case "itemprop":
+                {
+                    props.itemProp = attrValue;
+                    break;
+                }
+            case "spellcheck":
+                {
+                    if (attrValue === "" || attrValue === "true") {
+                        props.spellCheck = true;
+                        break;
+                    }
+                    if (attrValue === "false") {
+                        props.spellCheck = false;
+                        break;
+                    }
+                    props.spellCheck = null;
+                    break;
+                }
+            case "tabindex":
+                {
+                    const numValue = parseInt(attrValue, 10);
+                    if (!Number.isNaN(numValue)) {
+                        props.tabIndex = numValue;
+                    }
+                    break;
+                }
+            case "autocomplete":
+                {
+                    props.autoComplete = attrValue;
+                    break;
+                }
+            case "autofocus":
+                {
+                    props.autoFocus = attrValue != null;
+                    break;
+                }
+            case "formaction":
+                {
+                    props.formAction = attrValue;
+                    break;
+                }
+            case "formenctype":
+                {
+                    props.formEnctype = attrValue;
+                    break;
+                }
+            case "formmethod":
+                {
+                    props.formMethod = attrValue;
+                    break;
+                }
+            case "formnovalidate":
+                {
+                    props.formNoValidate = attrValue;
+                    break;
+                }
+            case "formtarget":
+                {
+                    props.formTarget = attrValue;
+                    break;
+                }
+            case "maxlength":
+                {
+                    const numValue = parseInt(attrValue, 10);
+                    if (!Number.isNaN(numValue)) {
+                        props.maxLength = attrValue;
+                    }
+                    break;
+                }
+            case "minlength":
+                {
+                    const numValue = parseInt(attrValue, 10);
+                    if (!Number.isNaN(numValue)) {
+                        props.minLength = attrValue;
+                    }
+                    break;
+                }
+            case "max":
+                {
+                    const numValue = parseInt(attrValue, 10);
+                    if (!Number.isNaN(numValue)) {
+                        props.max = attrValue;
+                    }
+                    break;
+                }
+            case "min":
+                {
+                    const numValue = parseInt(attrValue, 10);
+                    if (!Number.isNaN(numValue)) {
+                        props.min = attrValue;
+                    }
+                    break;
+                }
+            case "multiple":
+                {
+                    props.multiple = attrValue != null;
+                    break;
+                }
+            case "readonly":
+                {
+                    props.readOnly = attrValue != null;
+                    break;
+                }
+            case "required":
+                {
+                    props.required = attrValue != null;
+                    break;
+                }
+            case "size":
+                {
+                    const numValue = parseInt(attrValue, 10);
+                    if (!Number.isNaN(numValue)) {
+                        props.size = attrValue;
+                    }
+                    break;
+                }
+            case "step":
+                {
+                    if (attrValue === "any") {
+                        props.step = attrValue;
+                        break;
+                    }
+                    const numValue = parseInt(attrValue, 10);
+                    if (!Number.isNaN(numValue) && numValue > 0) {
+                        props.step = attrValue;
+                    }
+                    break;
+                }
+            case "disabled":
+                {
+                    props.disabled = attrValue != null;
+                    break;
+                }
+            case "rows":
+                {
+                    const numValue = parseInt(attrValue, 10);
+                    if (!Number.isNaN(numValue)) {
+                        props.rows = attrValue;
+                    }
+                    break;
+                }
+            default:
+                {
+                    props[attrName] = attrValue;
+                    break;
+                }
+        }
+    }
+    return props;
+}

package/dist/esm/selection/SelectionDOMObserver.js

@@ -0,0 +1,164 @@
+import { Selection } from "prosemirror-state";
+import { browser } from "../browser.js";
+import { parentNode, selectionCollapsed } from "../dom.js";
+import { hasFocusAndSelection } from "./hasFocusAndSelection.js";
+import { selectionFromDOM } from "./selectionFromDOM.js";
+import { isEquivalentPosition, selectionToDOM } from "./selectionToDOM.js";
+let SelectionState = class SelectionState {
+    anchorNode = null;
+    anchorOffset = 0;
+    focusNode = null;
+    focusOffset = 0;
+    set(sel) {
+        this.anchorNode = sel.anchorNode;
+        this.anchorOffset = sel.anchorOffset;
+        this.focusNode = sel.focusNode;
+        this.focusOffset = sel.focusOffset;
+    }
+    clear() {
+        this.anchorNode = this.focusNode = null;
+    }
+    eq(sel) {
+        return sel.anchorNode == this.anchorNode && sel.anchorOffset == this.anchorOffset && sel.focusNode == this.focusNode && sel.focusOffset == this.focusOffset;
+    }
+};
+export class SelectionDOMObserver {
+    view;
+    flushingSoon;
+    currentSelection;
+    suppressingSelectionUpdates;
+    constructor(view){
+        this.view = view;
+        this.flushingSoon = -1;
+        this.currentSelection = new SelectionState();
+        this.suppressingSelectionUpdates = false;
+        this.view = view;
+        this.onSelectionChange = this.onSelectionChange.bind(this);
+    }
+    connectSelection() {
+        this.view.dom.ownerDocument.addEventListener("selectionchange", this.onSelectionChange);
+    }
+    disconnectSelection() {
+        this.view.dom.ownerDocument.removeEventListener("selectionchange", this.onSelectionChange);
+    }
+    stop() {
+        this.disconnectSelection();
+    }
+    start() {
+        this.connectSelection();
+    }
+    suppressSelectionUpdates() {
+        this.suppressingSelectionUpdates = true;
+        setTimeout(()=>this.suppressingSelectionUpdates = false, 50);
+    }
+    setCurSelection() {
+        // @ts-expect-error Internal method
+        this.currentSelection.set(this.view.domSelectionRange());
+    }
+    ignoreSelectionChange(sel) {
+        if (!sel.focusNode) return true;
+        const ancestors = new Set();
+        let container;
+        for(let scan = sel.focusNode; scan; scan = parentNode(scan))ancestors.add(scan);
+        for(let scan = sel.anchorNode; scan; scan = parentNode(scan))if (ancestors.has(scan)) {
+            container = scan;
+            break;
+        }
+        // @ts-expect-error Internal property (docView)
+        const desc = container && this.view.docView.nearestDesc(container);
+        if (desc && desc.ignoreMutation({
+            type: "selection",
+            target: container?.nodeType == 3 ? container?.parentNode : container
+        })) {
+            this.setCurSelection();
+            return true;
+        }
+        return;
+    }
+    registerMutation() {
+    // pass
+    }
+    flushSoon() {
+        if (this.flushingSoon < 0) this.flushingSoon = window.setTimeout(()=>{
+            this.flushingSoon = -1;
+            this.flush();
+        }, 20);
+    }
+    updateSelection() {
+        const { view } = this;
+        const compositionID = // @ts-expect-error Internal property (input)
+        view.input.compositionPendingChanges || // @ts-expect-error Internal property (input)
+        (view.composing ? view.input.compositionID : 0);
+        // @ts-expect-error Internal property (input)
+        view.input.compositionPendingChanges = 0;
+        const origin = // @ts-expect-error Internal property (input)
+        view.input.lastSelectionTime > Date.now() - 50 ? view.input.lastSelectionOrigin : null;
+        const newSel = selectionFromDOM(view, origin);
+        if (newSel && !view.state.selection.eq(newSel)) {
+            const tr = view.state.tr.setSelection(newSel);
+            if (origin == "pointer") tr.setMeta("pointer", true);
+            else if (origin == "key") tr.scrollIntoView();
+            if (compositionID) tr.setMeta("composition", compositionID);
+            view.dispatch(tr);
+        }
+    }
+    selectionToDOM() {
+        const { view } = this;
+        selectionToDOM(view);
+        // @ts-expect-error Internal property (domSelectionRange)
+        const sel = view.domSelectionRange();
+        this.currentSelection.set(sel);
+    }
+    flush() {
+        const { view } = this;
+        // @ts-expect-error Internal property (docView)
+        if (!view.docView || this.flushingSoon > -1) return;
+        // @ts-expect-error Internal property (domSelectionRange)
+        const sel = view.domSelectionRange();
+        const newSel = !this.suppressingSelectionUpdates && !this.currentSelection.eq(sel) && hasFocusAndSelection(view) && !this.ignoreSelectionChange(sel);
+        let readSel = null;
+        // If it looks like the browser has reset the selection to the
+        // start of the document after focus, restore the selection from
+        // the state
+        if (newSel && // @ts-expect-error Internal property (input)
+        view.input.lastFocus > Date.now() - 200 && // @ts-expect-error Internal property (input)
+        Math.max(view.input.lastTouch, view.input.lastClick.time) < Date.now() - 300 && selectionCollapsed(sel) && (readSel = selectionFromDOM(view)) && readSel.eq(Selection.near(view.state.doc.resolve(0), 1))) {
+            // @ts-expect-error Internal property (input)
+            view.input.lastFocus = 0;
+            selectionToDOM(view);
+            this.currentSelection.set(sel);
+            // @ts-expect-error Internal property (scrollToSelection)
+            view.scrollToSelection();
+        } else if (newSel) {
+            this.updateSelection();
+            if (!this.currentSelection.eq(sel)) selectionToDOM(view);
+            this.currentSelection.set(sel);
+        }
+    }
+    selectionChanged(sel) {
+        return !this.suppressingSelectionUpdates && !this.currentSelection.eq(sel) && hasFocusAndSelection(this.view) && !this.ignoreSelectionChange(sel);
+    }
+    forceFlush() {
+        if (this.flushingSoon > -1) {
+            window.clearTimeout(this.flushingSoon);
+            this.flushingSoon = -1;
+            this.flush();
+        }
+    }
+    onSelectionChange() {
+        if (!hasFocusAndSelection(this.view)) return;
+        if (this.view.composing) return;
+        if (this.suppressingSelectionUpdates) return selectionToDOM(this.view);
+        // Deletions on IE11 fire their events in the wrong order, giving
+        // us a selection change event before the DOM changes are
+        // reported.
+        if (browser.ie && browser.ie_version <= 11 && !this.view.state.selection.empty) {
+            // @ts-expect-error Internal method
+            const sel = this.view.domSelectionRange();
+            // Selection.isCollapsed isn't reliable on IE
+            if (sel.focusNode && isEquivalentPosition(sel.focusNode, sel.focusOffset, // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            sel.anchorNode, sel.anchorOffset)) return this.flushSoon();
+        }
+        this.flush();
+    }
+}