@handlewithcare/react-prosemirror 2.0.0

package/dist/esm/browser.js

@@ -0,0 +1,43 @@
+const nav = typeof navigator != "undefined" ? navigator : null;
+const doc = typeof document != "undefined" ? document : null;
+const agent = nav && nav.userAgent || "";
+const ie_edge = /Edge\/(\d+)/.exec(agent);
+const ie_upto10 = /MSIE \d/.exec(agent);
+const ie_11up = /Trident\/(?:[7-9]|\d{2,})\..*rv:(\d+)/.exec(agent);
+const ie = !!(ie_upto10 || ie_11up || ie_edge);
+const ie_version = ie_upto10 ? document.documentMode : ie_11up ? +ie_11up[1] : ie_edge ? +ie_edge[1] : 0;
+const gecko = !ie && /gecko\/(\d+)/i.test(agent);
+const gecko_version = gecko && +(/Firefox\/(\d+)/.exec(agent) || [
+    0,
+    0
+])[1];
+const _chrome = !ie && /Chrome\/(\d+)/.exec(agent);
+const chrome = !!_chrome;
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+const chrome_version = _chrome ? +_chrome[1] : 0;
+const safari = !ie && !!nav && /Apple Computer/.test(nav.vendor);
+// Is true for both iOS and iPadOS for convenience
+const ios = safari && (/Mobile\/\w+/.test(agent) || !!nav && nav.maxTouchPoints > 2);
+const mac = ios || (nav ? /Mac/.test(nav.platform) : false);
+const windows = nav ? /Win/.test(nav.platform) : false;
+const android = /Android \d/.test(agent);
+const webkit = !!doc && "webkitFontSmoothing" in doc.documentElement.style;
+const webkit_version = webkit ? +(/\bAppleWebKit\/(\d+)/.exec(navigator.userAgent) || [
+    0,
+    0
+])[1] : 0;
+export const browser = {
+    ie,
+    ie_version,
+    gecko,
+    gecko_version,
+    chrome,
+    chrome_version,
+    safari,
+    ios,
+    mac,
+    windows,
+    android,
+    webkit,
+    webkit_version
+};

package/dist/esm/components/ChildNodeViews.js

@@ -0,0 +1,318 @@
+import React, { cloneElement, createElement, memo, useContext, useRef } from "react";
+import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
+import { EditorContext } from "../contexts/EditorContext.js";
+import { iterDeco } from "../decorations/iterDeco.js";
+// import { useEditorState } from "../hooks/useEditorState.js";
+import { useReactKeys } from "../hooks/useReactKeys.js";
+import { htmlAttrsToReactProps, mergeReactProps } from "../props.js";
+import { MarkView } from "./MarkView.js";
+import { NativeWidgetView } from "./NativeWidgetView.js";
+import { NodeView } from "./NodeView.js";
+import { SeparatorHackView } from "./SeparatorHackView.js";
+import { TextNodeView } from "./TextNodeView.js";
+import { TrailingHackView } from "./TrailingHackView.js";
+import { WidgetView } from "./WidgetView.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" ? a.outerDeco?.length === b.outerDeco?.length && a.outerDeco?.every((prevDeco)=>b.outerDeco?.some((nextDeco)=>prevDeco.from === nextDeco.from && prevDeco.to && nextDeco.to && prevDeco.type.eq(nextDeco.type))) && a.innerDeco.eq(b.innerDeco) : true) && a.node === b.node && a.widget === b.widget;
+}
+const ChildView = /*#__PURE__*/ memo(function ChildView(param) {
+    let { child, getInnerPos } = param;
+    const { view } = useContext(EditorContext);
+    const getChildPos = useRef(()=>getInnerPos.current() + child.offset);
+    getChildPos.current = ()=>getInnerPos.current() + child.offset;
+    return child.type === "widget" ? /*#__PURE__*/ React.createElement(WidgetView, {
+        key: child.key,
+        widget: child.widget,
+        getPos: getChildPos
+    }) : child.type === "native-widget" ? /*#__PURE__*/ React.createElement(NativeWidgetView, {
+        key: child.key,
+        widget: child.widget,
+        getPos: getChildPos
+    }) : child.node.isText ? /*#__PURE__*/ React.createElement(ChildDescriptorsContext.Consumer, {
+        key: child.key
+    }, (param)=>{
+        let { siblingsRef, parentRef } = param;
+        return /*#__PURE__*/ React.createElement(TextNodeView, {
+            view: view,
+            node: child.node,
+            getPos: getChildPos,
+            siblingsRef: siblingsRef,
+            parentRef: parentRef,
+            decorations: child.outerDeco
+        });
+    }) : /*#__PURE__*/ React.createElement(NodeView, {
+        key: child.key,
+        node: child.node,
+        getPos: getChildPos,
+        outerDeco: child.outerDeco,
+        innerDeco: child.innerDeco
+    });
+});
+const InlinePartition = /*#__PURE__*/ memo(function InlinePartition(param) {
+    let { childViews, getInnerPos } = param;
+    const firstChild = childViews[0];
+    const getFirstChildPos = useRef(()=>getInnerPos.current() + firstChild.offset);
+    getFirstChildPos.current = ()=>getInnerPos.current() + firstChild.offset;
+    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, {
+        getPos: getFirstChildPos,
+        key: firstChild.key,
+        mark: firstMark
+    }, /*#__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, type, posToKey, widget, index) {
+    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;
+        // eslint-disable-next-line no-console
+        console.warn(`Widget at position ${pos} doesn't have a key specified. This may cause issues.`);
+        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) {
+            continue;
+        }
+        child.marks = child.marks.reduce((acc, mark)=>mark.addToSet(acc), marksToSpread);
+    }
+}
+const ChildElement = /*#__PURE__*/ memo(function ChildElement(param) {
+    let { child, getInnerPos } = param;
+    const getNodePos = useRef(()=>getInnerPos.current() + child.offset);
+    getNodePos.current = ()=>getInnerPos.current() + child.offset;
+    if (child.type === "node") {
+        return child.marks.reduce((element, mark)=>/*#__PURE__*/ React.createElement(MarkView, {
+                getPos: getNodePos,
+                mark: mark
+            }, element), /*#__PURE__*/ React.createElement(NodeView, {
+            key: child.key,
+            outerDeco: child.outerDeco,
+            node: child.node,
+            innerDeco: child.innerDeco,
+            getPos: getNodePos
+        }));
+    } 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 editorState = useEditorState();
+    const reactKeys = useReactKeys();
+    const getInnerPos = useRef(()=>getPos.current() + 1);
+    const childMap = useRef(new Map()).current;
+    if (!node) return null;
+    const keysSeen = new Set();
+    let widgetChildren = [];
+    let lastNodeChild = null;
+    iterDeco(node, innerDecorations, (widget, isNative, offset, index)=>{
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const widgetMarks = widget.type.spec.marks ?? [];
+        let key;
+        if (isNative) {
+            key = createKey(getInnerPos.current(), offset, "native-widget", reactKeys?.posToKey, widget, index);
+            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.add(key);
+        } else {
+            key = createKey(getInnerPos.current(), offset, "widget", reactKeys?.posToKey, widget, index);
+            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.add(key);
+        }
+        const child = childMap.get(key);
+        widgetChildren.push(child);
+        adjustWidgetMarksForward(lastNodeChild, childMap.get(key));
+    }, (childNode, outerDeco, innerDeco, offset)=>{
+        const key = createKey(getInnerPos.current(), offset, "node", reactKeys?.posToKey);
+        const child = {
+            type: "node",
+            node: childNode,
+            marks: childNode.marks,
+            innerDeco,
+            outerDeco,
+            offset,
+            key
+        };
+        const prevChild = childMap.get(key);
+        if (prevChild && areChildrenEqual(prevChild, child)) {
+            prevChild.offset = offset;
+            lastNodeChild = prevChild;
+        } else {
+            childMap.set(key, child);
+            lastNodeChild = child;
+        }
+        keysSeen.add(key);
+        adjustWidgetMarksBack(widgetChildren, lastNodeChild);
+        widgetChildren = [];
+    });
+    for (const key of childMap.keys()){
+        if (!keysSeen.has(key)) {
+            childMap.delete(key);
+        }
+    }
+    const children = Array.from(childMap.values()).sort((a, b)=>a.offset - b.offset);
+    const childElements = createChildElements(children, getInnerPos);
+    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)) {
+        childElements.push(/*#__PURE__*/ React.createElement(SeparatorHackView, {
+            getPos: getInnerPos,
+            key: "trailing-hack-img"
+        }), /*#__PURE__*/ React.createElement(TrailingHackView, {
+            getPos: getInnerPos,
+            key: "trailing-hack-br"
+        }));
+    }
+    return /*#__PURE__*/ React.createElement(React.Fragment, null, childElements);
+});

package/dist/esm/components/CursorWrapper.js

@@ -0,0 +1,40 @@
+import React, { forwardRef, useImperativeHandle, useRef, useState } from "react";
+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 [shouldRender, setShouldRender] = useState(true);
+    const innerRef = useRef(null);
+    useImperativeHandle(ref, ()=>{
+        return innerRef.current;
+    }, []);
+    useEditorEffect((view)=>{
+        if (!view || !innerRef.current) return;
+        // @ts-expect-error Internal property - domObserver
+        view.domObserver.disconnectSelection();
+        // @ts-expect-error Internal property - domSelection
+        const domSel = view.domSelection();
+        const range = document.createRange();
+        const node = innerRef.current;
+        const img = node.nodeName == "IMG";
+        if (img && node.parentNode) {
+            range.setEnd(node.parentNode, domIndex(node) + 1);
+        } else {
+            range.setEnd(node, 0);
+        }
+        range.collapse(false);
+        domSel.removeAllRanges();
+        domSel.addRange(range);
+        setShouldRender(false);
+        // @ts-expect-error Internal property - domObserver
+        view.domObserver.connectSelection();
+    }, []);
+    return shouldRender ? /*#__PURE__*/ React.createElement("img", {
+        ref: innerRef,
+        className: "ProseMirror-separator",
+        // eslint-disable-next-line react/no-unknown-property
+        "mark-placeholder": "true",
+        alt: "",
+        ...props
+    }) : null;
+});

package/dist/esm/components/CustomNodeView.js

@@ -0,0 +1,28 @@
+import React, { createElement, useContext } from "react";
+import { createPortal } from "react-dom";
+import { EditorContext } from "../contexts/EditorContext.js";
+import { useClientOnly } from "../hooks/useClientOnly.js";
+import { ChildNodeViews } from "./ChildNodeViews.js";
+export function CustomNodeView(param) {
+    let { contentDomRef, customNodeViewRef, customNodeViewRootRef, customNodeView, initialNode, node, getPos, initialOuterDeco, initialInnerDeco, innerDeco } = param;
+    const { view } = useContext(EditorContext);
+    const shouldRender = useClientOnly();
+    if (!shouldRender) return null;
+    if (!customNodeViewRef.current) {
+        customNodeViewRef.current = customNodeView(initialNode.current, // customNodeView will only be set if view is set, and we can only reach
+        // this line if customNodeView is set
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        view, ()=>getPos.current(), initialOuterDeco.current, initialInnerDeco.current);
+    }
+    const { contentDOM } = customNodeViewRef.current;
+    contentDomRef.current = contentDOM ?? null;
+    return /*#__PURE__*/ createElement(node.isInline ? "span" : "div", {
+        ref: customNodeViewRootRef,
+        contentEditable: !!contentDOM,
+        suppressContentEditableWarning: true
+    }, contentDOM && /*#__PURE__*/ createPortal(/*#__PURE__*/ React.createElement(ChildNodeViews, {
+        getPos: getPos,
+        node: node,
+        innerDecorations: innerDeco
+    }), contentDOM));
+}

package/dist/esm/components/DocNodeView.js

@@ -0,0 +1,53 @@
+// TODO: I must be missing something, but I do not know why
+// this linting rule is only broken in this file
+/* eslint-disable react/prop-types */ import React, { cloneElement, createElement, forwardRef, memo, useImperativeHandle, useMemo, useRef } from "react";
+import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
+import { useNodeViewDescriptor } from "../hooks/useNodeViewDescriptor.js";
+import { ChildNodeViews, wrapInDeco } from "./ChildNodeViews.js";
+const getPos = {
+    current () {
+        return -1;
+    }
+};
+export const DocNodeView = /*#__PURE__*/ memo(/*#__PURE__*/ forwardRef(function DocNodeView(param, ref) {
+    let { className, node, innerDeco, outerDeco, as, viewDesc, ...elementProps } = param;
+    const innerRef = useRef(null);
+    useImperativeHandle(ref, ()=>{
+        return innerRef.current;
+    }, []);
+    const { childDescriptors, nodeViewDescRef } = useNodeViewDescriptor(node, ()=>getPos.current(), innerRef, innerRef, innerDeco, outerDeco, viewDesc);
+    const childContextValue = useMemo(()=>({
+            parentRef: nodeViewDescRef,
+            siblingsRef: childDescriptors
+        }), [
+        childDescriptors,
+        nodeViewDescRef
+    ]);
+    const props = {
+        ...elementProps,
+        ref: innerRef,
+        className,
+        suppressContentEditableWarning: true
+    };
+    const element = as ? /*#__PURE__*/ cloneElement(as, props, /*#__PURE__*/ React.createElement(ChildDescriptorsContext.Provider, {
+        value: childContextValue
+    }, /*#__PURE__*/ React.createElement(ChildNodeViews, {
+        getPos: getPos,
+        node: node,
+        innerDecorations: innerDeco
+    }))) : /*#__PURE__*/ createElement("div", props, /*#__PURE__*/ React.createElement(ChildDescriptorsContext.Provider, {
+        value: childContextValue
+    }, /*#__PURE__*/ React.createElement(ChildNodeViews, {
+        getPos: getPos,
+        node: node,
+        innerDecorations: innerDeco
+    })));
+    if (!node) return element;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const nodeDecorations = outerDeco.filter((deco)=>!deco.inline);
+    if (!nodeDecorations.length) {
+        return element;
+    }
+    const wrapped = nodeDecorations.reduce(wrapInDeco, element);
+    return wrapped;
+}));

package/dist/esm/components/LayoutGroup.js

@@ -0,0 +1,66 @@
+/* Copyright (c) The New York Times Company */ import React, { useCallback, useLayoutEffect, useRef } from "react";
+import { LayoutGroupContext } from "../contexts/LayoutGroupContext.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
+    ]);
+    useLayoutEffect(()=>{
+        isUpdatePending.current = false;
+        createQueue.forEach((create)=>create());
+        createQueue.clear();
+        return ()=>{
+            destroyQueue.forEach((destroy)=>destroy());
+            destroyQueue.clear();
+        };
+    });
+    useLayoutEffect(()=>{
+        isMounted.current = true;
+        return ()=>{
+            isMounted.current = false;
+        };
+    }, []);
+    return /*#__PURE__*/ React.createElement(LayoutGroupContext.Provider, {
+        value: register
+    }, children);
+}

package/dist/esm/components/MarkView.js

@@ -0,0 +1,64 @@
+import React, { forwardRef, memo, useContext, useImperativeHandle, useLayoutEffect, useMemo, useRef } from "react";
+import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
+import { MarkViewDesc, sortViewDescs } from "../viewdesc.js";
+import { OutputSpec } from "./OutputSpec.js";
+export const MarkView = /*#__PURE__*/ memo(/*#__PURE__*/ forwardRef(function MarkView(param, ref) {
+    let { mark, getPos, children } = param;
+    const { siblingsRef, parentRef } = useContext(ChildDescriptorsContext);
+    const viewDescRef = useRef(undefined);
+    const childDescriptors = useRef([]);
+    const domRef = useRef(null);
+    useImperativeHandle(ref, ()=>{
+        return domRef.current;
+    }, []);
+    const outputSpec = useMemo(()=>mark.type.spec.toDOM?.(mark, true), [
+        mark
+    ]);
+    if (!outputSpec) throw new Error(`Mark spec for ${mark.type.name} is missing toDOM`);
+    useLayoutEffect(()=>{
+        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
+    ]);
+    useLayoutEffect(()=>{
+        if (!domRef.current) return;
+        const firstChildDesc = childDescriptors.current[0];
+        if (!viewDescRef.current) {
+            viewDescRef.current = new MarkViewDesc(parentRef.current, childDescriptors.current, ()=>getPos.current(), mark, domRef.current, firstChildDesc?.dom.parentElement ?? domRef.current);
+        } else {
+            viewDescRef.current.parent = parentRef.current;
+            viewDescRef.current.dom = domRef.current;
+            viewDescRef.current.children = childDescriptors.current;
+            viewDescRef.current.contentDOM = firstChildDesc?.dom.parentElement ?? domRef.current;
+            viewDescRef.current.mark = mark;
+            viewDescRef.current.getPos = ()=>getPos.current();
+        }
+        if (!siblingsRef.current.includes(viewDescRef.current)) {
+            siblingsRef.current.push(viewDescRef.current);
+        }
+        siblingsRef.current.sort(sortViewDescs);
+        for (const childDesc of childDescriptors.current){
+            childDesc.parent = viewDescRef.current;
+        }
+    });
+    const childContextValue = useMemo(()=>({
+            parentRef: viewDescRef,
+            siblingsRef: childDescriptors
+        }), [
+        childDescriptors,
+        viewDescRef
+    ]);
+    return /*#__PURE__*/ React.createElement(OutputSpec, {
+        ref: domRef,
+        outputSpec: outputSpec
+    }, /*#__PURE__*/ React.createElement(ChildDescriptorsContext.Provider, {
+        value: childContextValue
+    }, children));
+}));

package/dist/esm/components/NativeWidgetView.js

@@ -0,0 +1,58 @@
+import React, { useContext, useLayoutEffect, useRef } from "react";
+import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
+import { useEditorEffect } from "../hooks/useEditorEffect.js";
+import { WidgetViewDesc, sortViewDescs } from "../viewdesc.js";
+export function NativeWidgetView(param) {
+    let { widget, getPos } = param;
+    const { siblingsRef, parentRef } = useContext(ChildDescriptorsContext);
+    const viewDescRef = useRef(null);
+    const rootDomRef = useRef(null);
+    useLayoutEffect(()=>{
+        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.current()) : 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;
+            }
+            dom.contentEditable = "false";
+            dom.classList.add("ProseMirror-widget");
+        }
+        if (rootDomRef.current.firstElementChild === dom) return;
+        rootDomRef.current.replaceChildren(dom);
+    });
+    useLayoutEffect(()=>{
+        if (!rootDomRef.current) return;
+        if (!viewDescRef.current) {
+            viewDescRef.current = new WidgetViewDesc(parentRef.current, ()=>getPos.current(), widget, rootDomRef.current);
+        } else {
+            viewDescRef.current.parent = parentRef.current;
+            viewDescRef.current.widget = widget;
+            viewDescRef.current.getPos = ()=>getPos.current();
+            viewDescRef.current.dom = rootDomRef.current;
+        }
+        if (!siblingsRef.current.includes(viewDescRef.current)) {
+            siblingsRef.current.push(viewDescRef.current);
+        }
+        siblingsRef.current.sort(sortViewDescs);
+    });
+    return /*#__PURE__*/ React.createElement("span", {
+        ref: rootDomRef
+    });
+}