@stesura/react-prosemirror 3.2.11-stesura.1

package/dist/esm/components/ChildNodeViews.js

@@ -0,0 +1,359 @@
+import React, { cloneElement, createElement, memo, useCallback, useContext, useRef } from "react";
+import { ChildDescriptionsContext } from "../contexts/ChildDescriptionsContext.js";
+import { EditorContext } from "../contexts/EditorContext.js";
+import { iterDeco } from "../decorations/iterDeco.js";
+import { reactKeysPluginKey } from "../plugins/reactKeys.js";
+import { htmlAttrsToReactProps, mergeReactProps } from "../props.js";
+import { sameOuterDeco } from "../viewdesc.js";
+import { NativeWidgetView } from "./NativeWidgetView.js";
+import { SeparatorHackView } from "./SeparatorHackView.js";
+import { TextNodeView } from "./TextNodeView.js";
+import { TrailingHackView } from "./TrailingHackView.js";
+import { WidgetView } from "./WidgetView.js";
+import { MarkView } from "./marks/MarkView.js";
+import { RemountableNodeView } from "./nodes/NodeView.js";
+export function wrapInDeco(reactNode, deco) {
+    const { nodeName, ...attrs } = deco.type.attrs;
+    const props = htmlAttrsToReactProps(attrs);
+    // We auto-wrap text nodes in spans so that we can apply attributes
+    // and styles, but we want to avoid double-wrapping the same
+    // text node
+    if (nodeName || typeof reactNode === "string") {
+        return /*#__PURE__*/ createElement(nodeName ?? "span", props, reactNode);
+    }
+    return /*#__PURE__*/ cloneElement(reactNode, mergeReactProps(reactNode.props, props));
+}
+function areChildrenEqual(a, b) {
+    return a.type === b.type && a.marks.every((mark)=>mark.isInSet(b.marks)) && b.marks.every((mark)=>mark.isInSet(a.marks)) && a.key === b.key && (a.type !== "node" || b.type !== "node" || a.node.eq(b.node) && sameOuterDeco(a.outerDeco, b.outerDeco) && a.innerDeco.eq(b.innerDeco)) && a.widget === b.widget;
+}
+const ChildView = /*#__PURE__*/ memo(function ChildView(param) {
+    let { child, getInnerPos } = param;
+    const { view } = useContext(EditorContext);
+    const childRef = useRef(child);
+    childRef.current = child;
+    const getPos = useCallback(()=>{
+        return getInnerPos() + childRef.current.offset;
+    }, [
+        getInnerPos
+    ]);
+    return child.type === "widget" ? /*#__PURE__*/ React.createElement(WidgetView, {
+        key: child.key,
+        widget: child.widget,
+        getPos: getPos
+    }) : child.type === "native-widget" ? /*#__PURE__*/ React.createElement(NativeWidgetView, {
+        key: child.key,
+        widget: child.widget,
+        getPos: getPos
+    }) : child.type === "hack" ? /*#__PURE__*/ React.createElement(child.component, {
+        key: child.key,
+        getPos: getPos
+    }) : child.node.isText ? /*#__PURE__*/ React.createElement(ChildDescriptionsContext.Consumer, {
+        key: child.key
+    }, (param)=>{
+        let { siblingsRef, parentRef } = param;
+        return /*#__PURE__*/ React.createElement(TextNodeView, {
+            view: view,
+            node: child.node,
+            getPos: getPos,
+            siblingsRef: siblingsRef,
+            parentRef: parentRef,
+            decorations: child.outerDeco
+        });
+    }) : /*#__PURE__*/ React.createElement(RemountableNodeView, {
+        key: child.key,
+        node: child.node,
+        getPos: getPos,
+        outerDeco: child.outerDeco,
+        innerDeco: child.innerDeco
+    });
+});
+const InlinePartition = /*#__PURE__*/ memo(function InlinePartition(param) {
+    let { childViews, getInnerPos } = param;
+    const firstChild = childViews[0];
+    const firstChildRef = useRef(firstChild);
+    firstChildRef.current = firstChild;
+    const getPos = useCallback(()=>{
+        return getInnerPos() + firstChildRef.current.offset;
+    }, [
+        getInnerPos
+    ]);
+    const firstMark = firstChild.marks[0];
+    if (!firstMark) {
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, childViews.map((child)=>{
+            return /*#__PURE__*/ React.createElement(ChildView, {
+                key: child.key,
+                child: child,
+                getInnerPos: getInnerPos
+            });
+        }));
+    }
+    return /*#__PURE__*/ React.createElement(MarkView, {
+        key: firstChild.key,
+        mark: firstMark,
+        getPos: getPos,
+        inline: true
+    }, /*#__PURE__*/ React.createElement(InlineView, {
+        key: firstChild.key,
+        getInnerPos: getInnerPos,
+        childViews: childViews.map((child)=>({
+                ...child,
+                marks: child.marks.slice(1)
+            }))
+    }));
+});
+const InlineView = /*#__PURE__*/ memo(function InlineView(param) {
+    let { getInnerPos, childViews } = param;
+    // const editorState = useEditorState();
+    const partitioned = childViews.reduce((acc, child)=>{
+        const lastPartition = acc[acc.length - 1];
+        if (!lastPartition) {
+            return [
+                [
+                    child
+                ]
+            ];
+        }
+        const lastChild = lastPartition[lastPartition.length - 1];
+        if (!lastChild) {
+            return [
+                ...acc.slice(0, acc.length),
+                [
+                    child
+                ]
+            ];
+        }
+        if (!child.marks.length && !lastChild.marks.length || child.marks.length && lastChild.marks.length && // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        child.marks[0]?.eq(lastChild.marks[0])) {
+            return [
+                ...acc.slice(0, acc.length - 1),
+                [
+                    ...lastPartition.slice(0, lastPartition.length),
+                    child
+                ]
+            ];
+        }
+        return [
+            ...acc,
+            [
+                child
+            ]
+        ];
+    }, []);
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, partitioned.map((childViews)=>{
+        const firstChild = childViews[0];
+        if (!firstChild) return null;
+        return /*#__PURE__*/ React.createElement(InlinePartition, {
+            key: firstChild.key,
+            childViews: childViews,
+            getInnerPos: getInnerPos
+        });
+    }));
+});
+function createKey(innerPos, offset, index, type, posToKey, widget) {
+    const pos = innerPos + offset;
+    const key = posToKey?.get(pos);
+    if (type === "widget" || type === "native-widget") {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (widget.type.spec.key) // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return widget.type.spec.key;
+        if (type === "widget") {
+            // eslint-disable-next-line no-console
+            console.warn(`Widget at position ${pos} doesn't have a key specified. React ProseMirror will generate a key partially based on this widget’s index into its parent’s children. This can cause issues if there are multiple adjacent widgets.`);
+        }
+        return `${key}-${index}`;
+    }
+    if (key) return key;
+    // if (!doc) return pos;
+    const parentPos = innerPos - 1;
+    const parentKey = posToKey?.get(parentPos);
+    if (parentKey) return `${parentKey}-${offset}`;
+    return pos;
+}
+function adjustWidgetMarksForward(lastNodeChild, widgetChild) {
+    if (!widgetChild || // Using internal Decoration property, "type"
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    widgetChild.widget.type.side >= 0) return;
+    if (!lastNodeChild || !lastNodeChild.node.isInline) return;
+    const marksToSpread = lastNodeChild.marks;
+    widgetChild.marks = widgetChild.marks.reduce((acc, mark)=>mark.addToSet(acc), marksToSpread);
+}
+function adjustWidgetMarksBack(widgetChildren, nodeChild) {
+    if (!nodeChild.node.isInline) return;
+    const marksToSpread = nodeChild.marks;
+    for(let i = widgetChildren.length - 1; i >= 0; i--){
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const child = widgetChildren[i];
+        if (// Using internal Decoration property, "type"
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        child.widget.type.side < 0 || // Using internal Decoration property, "type"
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        child.widget.type.spec.marks) {
+            continue;
+        }
+        child.marks = child.marks.reduce((acc, mark)=>mark.addToSet(acc), marksToSpread);
+    }
+}
+const ChildElement = /*#__PURE__*/ memo(function ChildElement(param) {
+    let { child, getInnerPos } = param;
+    const childRef = useRef(child);
+    childRef.current = child;
+    const getPos = useCallback(()=>{
+        return getInnerPos() + childRef.current.offset;
+    }, [
+        getInnerPos
+    ]);
+    if (child.type === "node") {
+        return child.marks.reduce((element, mark)=>/*#__PURE__*/ React.createElement(MarkView, {
+                mark: mark,
+                getPos: getPos,
+                inline: false
+            }, element), /*#__PURE__*/ React.createElement(RemountableNodeView, {
+            key: child.key,
+            outerDeco: child.outerDeco,
+            node: child.node,
+            innerDeco: child.innerDeco,
+            getPos: getPos
+        }));
+    } else {
+        return /*#__PURE__*/ React.createElement(InlineView, {
+            key: child.key,
+            childViews: [
+                child
+            ],
+            getInnerPos: getInnerPos
+        });
+    }
+});
+function createChildElements(children, getInnerPos) {
+    if (!children.length) return [];
+    if (children.every((child)=>child.type !== "node" || child.node.isInline)) {
+        return [
+            /*#__PURE__*/ React.createElement(InlineView, {
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+                key: children[0].key,
+                childViews: children,
+                getInnerPos: getInnerPos
+            })
+        ];
+    }
+    return children.map((child)=>{
+        return /*#__PURE__*/ React.createElement(ChildElement, {
+            key: child.key,
+            child: child,
+            getInnerPos: getInnerPos
+        });
+    });
+}
+export const ChildNodeViews = /*#__PURE__*/ memo(function ChildNodeViews(param) {
+    let { getPos, node, innerDecorations } = param;
+    const { view } = useContext(EditorContext);
+    const getInnerPos = useCallback(()=>getPos() + 1, [
+        getPos
+    ]);
+    const childMap = useRef(new Map()).current;
+    if (!node) return null;
+    const keysSeen = new Map();
+    let widgetChildren = [];
+    let lastNodeChild = null;
+    iterDeco(node, innerDecorations, (widget, isNative, offset, index)=>{
+        const posToKey = reactKeysPluginKey.getState(view.state)?.posToKey;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const widgetMarks = widget.type.spec.marks ?? [];
+        let key;
+        if (isNative) {
+            key = createKey(getInnerPos(), offset, index, "native-widget", posToKey, widget);
+            const child = {
+                type: "native-widget",
+                widget,
+                marks: widgetMarks,
+                offset,
+                index,
+                key
+            };
+            const prevChild = childMap.get(key);
+            if (prevChild && areChildrenEqual(prevChild, child)) {
+                prevChild.offset = offset;
+            } else {
+                childMap.set(key, child);
+            }
+            keysSeen.set(key, keysSeen.size);
+        } else {
+            key = createKey(getInnerPos(), offset, index, "widget", posToKey, widget);
+            const child = {
+                type: "widget",
+                widget: widget,
+                marks: widgetMarks,
+                offset,
+                index,
+                key
+            };
+            const prevChild = childMap.get(key);
+            if (prevChild && areChildrenEqual(prevChild, child)) {
+                prevChild.offset = offset;
+            } else {
+                childMap.set(key, child);
+            }
+            keysSeen.set(key, keysSeen.size);
+        }
+        const child = childMap.get(key);
+        widgetChildren.push(child);
+        adjustWidgetMarksForward(lastNodeChild, childMap.get(key));
+    }, (childNode, outerDeco, innerDeco, offset, index)=>{
+        const posToKey = reactKeysPluginKey.getState(view.state)?.posToKey;
+        const key = createKey(getInnerPos(), offset, index, "node", posToKey);
+        const child = {
+            type: "node",
+            node: childNode,
+            marks: childNode.marks,
+            innerDeco,
+            outerDeco,
+            offset,
+            index,
+            key
+        };
+        const prevChild = childMap.get(key);
+        if (prevChild && areChildrenEqual(prevChild, child)) {
+            prevChild.offset = offset;
+            lastNodeChild = prevChild;
+        } else {
+            childMap.set(key, child);
+            lastNodeChild = child;
+        }
+        keysSeen.set(key, keysSeen.size);
+        adjustWidgetMarksBack(widgetChildren, lastNodeChild);
+        widgetChildren = [];
+    });
+    for (const key of childMap.keys()){
+        if (!keysSeen.has(key)) {
+            childMap.delete(key);
+        }
+    }
+    const children = Array.from(childMap.values()).sort(// We already ensured that these existed in keysSeen in the previous
+    // step
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    (a, b)=>keysSeen.get(a.key) - keysSeen.get(b.key));
+    if (node.isTextblock) {
+        const lastChild = children[children.length - 1];
+        if (!lastChild || lastChild.type !== "node" || lastChild.node.isInline && !lastChild.node.isText || // RegExp.test actually handles undefined just fine
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        /\n$/.test(lastChild.node.text)) {
+            children.push({
+                type: "hack",
+                component: SeparatorHackView,
+                marks: [],
+                offset: lastChild?.offset ?? 0,
+                index: (lastChild?.index ?? 0) + 1,
+                key: "trailing-hack-img"
+            }, {
+                type: "hack",
+                component: TrailingHackView,
+                marks: [],
+                offset: lastChild?.offset ?? 0,
+                index: (lastChild?.index ?? 0) + 2,
+                key: "trailing-hack-br"
+            });
+        }
+    }
+    const childElements = createChildElements(children, getInnerPos);
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, childElements);
+});

package/dist/esm/components/CursorWrapper.js

@@ -0,0 +1,33 @@
+import React, { forwardRef, useImperativeHandle, useRef } from "react";
+import { ReactEditorView } from "../ReactEditorView.js";
+import { domIndex } from "../dom.js";
+import { useEditorEffect } from "../hooks/useEditorEffect.js";
+export const CursorWrapper = /*#__PURE__*/ forwardRef(function CursorWrapper(param, ref) {
+    let { widget, getPos, ...props } = param;
+    const innerRef = useRef(null);
+    useImperativeHandle(ref, ()=>{
+        return innerRef.current;
+    }, []);
+    useEditorEffect((view)=>{
+        if (!(view instanceof ReactEditorView) || !innerRef.current) return;
+        view.domObserver.disconnectSelection();
+        const domSel = view.domSelection();
+        if (!domSel.isCollapsed) return;
+        const node = innerRef.current;
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        domSel.collapse(node.parentNode, domIndex(node) + 1);
+        view.cursorWrapped = true;
+        view.domObserver.connectSelection();
+        return ()=>{
+            view.cursorWrapped = false;
+        };
+    }, []);
+    return /*#__PURE__*/ React.createElement("img", {
+        ref: innerRef,
+        className: "ProseMirror-separator",
+        // eslint-disable-next-line react/no-unknown-property
+        "mark-placeholder": "true",
+        alt: "",
+        ...props
+    });
+});

package/dist/esm/components/EditorStateSelectorsProvider.js

@@ -0,0 +1,31 @@
+import React, { useContext, useLayoutEffect, useMemo } from "react";
+import { EditorStateStoreContext, createEditorStateStore } from "../contexts/EditorStateStoreContext.js";
+import { useEditorState } from "../hooks/useEditorState.js";
+export function EditorStateSelectorsRegistrar(param) {
+    let { children } = param;
+    const store = useMemo(()=>createEditorStateStore(), []);
+    return /*#__PURE__*/ React.createElement(EditorStateStoreContext.Provider, {
+        value: store
+    }, children);
+}
+export function EditorStateSelectorsProvider(param) {
+    let { children } = param;
+    const editorState = useEditorState();
+    const store = useContext(EditorStateStoreContext);
+    // This _must_ be set during render so that child components
+    // get the latest values from their selectors during render,
+    // if they happen to render before store.notifyListeners()
+    // is called
+    store.setState(editorState);
+    // This means that we get a double-render whenever the selectors update,
+    // but everything is consistent during both renders.
+    // Only components with new selector values will render on
+    // the second render cycle
+    useLayoutEffect(()=>{
+        store.notifyListeners();
+    }, [
+        editorState,
+        store
+    ]);
+    return children;
+}

package/dist/esm/components/LayoutGroup.js

@@ -0,0 +1,67 @@
+/* Copyright (c) The New York Times Company */ import React, { useCallback, useRef } from "react";
+import { LayoutGroupContext } from "../contexts/LayoutGroupContext.js";
+import { useClientLayoutEffect } from "../hooks/useClientLayoutEffect.js";
+import { useForceUpdate } from "../hooks/useForceUpdate.js";
+/**
+ * Provides a boundary for grouping layout effects.
+ *
+ * Descendant components can invoke the `useLayoutGroupEffect` hook to register
+ * effects that run after all descendants within the group have processed their
+ * regular layout effects.
+ */ export function LayoutGroup(param) {
+    let { children } = param;
+    const createQueue = useRef(new Set()).current;
+    const destroyQueue = useRef(new Set()).current;
+    const isMounted = useRef(false);
+    const forceUpdate = useForceUpdate();
+    const isUpdatePending = useRef(true);
+    const ensureFlush = useCallback(()=>{
+        if (!isUpdatePending.current) {
+            forceUpdate();
+            isUpdatePending.current = true;
+        }
+    }, [
+        forceUpdate
+    ]);
+    const register = useCallback((effect)=>{
+        let destroy;
+        const create = ()=>{
+            destroy = effect();
+        };
+        createQueue.add(create);
+        ensureFlush();
+        return ()=>{
+            createQueue.delete(create);
+            if (destroy) {
+                if (isMounted.current) {
+                    destroyQueue.add(destroy);
+                    ensureFlush();
+                } else {
+                    destroy();
+                }
+            }
+        };
+    }, [
+        createQueue,
+        destroyQueue,
+        ensureFlush
+    ]);
+    useClientLayoutEffect(()=>{
+        isUpdatePending.current = false;
+        createQueue.forEach((create)=>create());
+        createQueue.clear();
+        return ()=>{
+            destroyQueue.forEach((destroy)=>destroy());
+            destroyQueue.clear();
+        };
+    });
+    useClientLayoutEffect(()=>{
+        isMounted.current = true;
+        return ()=>{
+            isMounted.current = false;
+        };
+    }, []);
+    return /*#__PURE__*/ React.createElement(LayoutGroupContext.Provider, {
+        value: register
+    }, children);
+}

package/dist/esm/components/NativeWidgetView.js

@@ -0,0 +1,57 @@
+import React, { useContext, useRef } from "react";
+import { ChildDescriptionsContext } from "../contexts/ChildDescriptionsContext.js";
+import { useClientLayoutEffect } from "../hooks/useClientLayoutEffect.js";
+import { useEditorEffect } from "../hooks/useEditorEffect.js";
+import { WidgetViewDesc, placeViewDesc } from "../viewdesc.js";
+export function NativeWidgetView(param) {
+    let { widget, getPos } = param;
+    const { siblingsRef, parentRef } = useContext(ChildDescriptionsContext);
+    const viewDescRef = useRef(null);
+    const rootDomRef = useRef(null);
+    useClientLayoutEffect(()=>{
+        const siblings = siblingsRef.current;
+        return ()=>{
+            if (!viewDescRef.current) return;
+            if (siblings.includes(viewDescRef.current)) {
+                const index = siblings.indexOf(viewDescRef.current);
+                siblings.splice(index, 1);
+            }
+        };
+    }, [
+        siblingsRef
+    ]);
+    useEditorEffect((view)=>{
+        if (!rootDomRef.current) return;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const toDOM = widget.type.toDOM;
+        let dom = typeof toDOM === "function" ? toDOM(view, getPos) : toDOM;
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        if (!widget.type.spec.raw) {
+            if (dom.nodeType != 1) {
+                const wrap = document.createElement("span");
+                wrap.appendChild(dom);
+                dom = wrap;
+            }
+            if (!dom.hasAttribute("contenteditable")) {
+                dom.contentEditable = "false";
+            }
+            dom.classList.add("ProseMirror-widget");
+        }
+        if (rootDomRef.current.firstElementChild === dom) return;
+        rootDomRef.current.replaceChildren(dom);
+    });
+    useClientLayoutEffect(()=>{
+        if (!rootDomRef.current) return;
+        if (!viewDescRef.current) {
+            viewDescRef.current = new WidgetViewDesc(parentRef.current, getPos, widget, rootDomRef.current);
+        } else {
+            viewDescRef.current.parent = parentRef.current;
+            viewDescRef.current.widget = widget;
+            viewDescRef.current.dom = rootDomRef.current;
+        }
+        placeViewDesc(siblingsRef.current, viewDescRef.current);
+    });
+    return /*#__PURE__*/ React.createElement("span", {
+        ref: rootDomRef
+    });
+}

package/dist/esm/components/OutputSpec.js

@@ -0,0 +1,71 @@
+import React, { createElement, forwardRef, memo } from "react";
+import { htmlAttrsToReactProps, mergeReactProps } from "../props.js";
+import { useMergedDOMRefs } from "../refs.js";
+/**
+ * Whether an output spec contains a hole
+ */ function hasHole(outputSpec) {
+    if (!Array.isArray(outputSpec)) {
+        throw new Error("@handlewithcare/react-prosemirror only supports strings and arrays in toDOM");
+    }
+    const attrs = outputSpec[1];
+    let start = 1;
+    if (attrs && typeof attrs === "object" && attrs.nodeType == null && !Array.isArray(attrs)) {
+        start = 2;
+    }
+    for(let i = start; i < outputSpec.length; i++){
+        const child = outputSpec[i];
+        if (child === 0) {
+            return true;
+        }
+        if (hasHole(child)) return true;
+    }
+    return false;
+}
+const ForwardedOutputSpec = /*#__PURE__*/ memo(/*#__PURE__*/ forwardRef(function OutputSpec(param, ref) {
+    let { outputSpec, isMark, contentDOMRef, children, ...propOverrides } = param;
+    const mergedRef = useMergedDOMRefs(ref, contentDOMRef);
+    if (typeof outputSpec === "string") {
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, outputSpec);
+    }
+    if (!Array.isArray(outputSpec)) {
+        throw new Error("@handlewithcare/react-prosemirror only supports strings and arrays in toDOM");
+    }
+    const tagSpec = outputSpec[0];
+    const tagName = tagSpec.replace(" ", ":");
+    const attrs = outputSpec[1];
+    let props = {
+        ref,
+        ...propOverrides
+    };
+    let start = 1;
+    if (attrs && typeof attrs === "object" && attrs.nodeType == null && !Array.isArray(attrs)) {
+        start = 2;
+        props = mergeReactProps(htmlAttrsToReactProps(attrs), props);
+    }
+    const content = [];
+    for(let i = start; i < outputSpec.length; i++){
+        const child = outputSpec[i];
+        if (child === 0) {
+            if (i < outputSpec.length - 1 || i > start) {
+                throw new RangeError("Content hole must be the only child of its parent node");
+            }
+            return /*#__PURE__*/ createElement(tagName, {
+                ...props,
+                ref: ref ? mergedRef : contentDOMRef
+            }, children);
+        }
+        content.push(/*#__PURE__*/ React.createElement(ForwardedOutputSpec, {
+            outputSpec: child,
+            contentDOMRef: contentDOMRef
+        }, children));
+    }
+    // https://prosemirror.net/docs/ref/#model.MarkSpec.toDOM
+    // When the resulting spec contains a hole, that is where the
+    // marked content is placed. Otherwise, it is appended to the top node.
+    if (isMark && !hasHole(outputSpec)) {
+        content.push(children);
+        props.ref = mergedRef;
+    }
+    return /*#__PURE__*/ createElement(tagName, props, ...content);
+}));
+export { ForwardedOutputSpec as OutputSpec };