@handlewithcare/react-prosemirror 2.0.0

package/dist/esm/components/NodeView.js

@@ -0,0 +1,145 @@
+import React, { cloneElement, memo, useContext, useLayoutEffect, useMemo, useRef } from "react";
+import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
+import { EditorContext } from "../contexts/EditorContext.js";
+import { NodeViewContext } from "../contexts/NodeViewContext.js";
+import { SelectNodeContext } from "../contexts/SelectNodeContext.js";
+import { StopEventContext } from "../contexts/StopEventContext.js";
+import { useNodeViewDescriptor } from "../hooks/useNodeViewDescriptor.js";
+import { ChildNodeViews, wrapInDeco } from "./ChildNodeViews.js";
+import { CustomNodeView } from "./CustomNodeView.js";
+import { OutputSpec } from "./OutputSpec.js";
+export const NodeView = /*#__PURE__*/ memo(function NodeView(param) {
+    let { outerDeco, getPos, node, innerDeco, ...props } = param;
+    const domRef = useRef(null);
+    const nodeDomRef = useRef(null);
+    const contentDomRef = useRef(null);
+    const getPosFunc = useRef(()=>getPos.current()).current;
+    // this is ill-conceived; should revisit
+    const initialNode = useRef(node);
+    const initialOuterDeco = useRef(outerDeco);
+    const initialInnerDeco = useRef(innerDeco);
+    const customNodeViewRootRef = useRef(null);
+    const customNodeViewRef = useRef(null);
+    // const state = useEditorState();
+    const { nodeViews } = useContext(NodeViewContext);
+    const { view } = useContext(EditorContext);
+    let element = null;
+    const Component = nodeViews[node.type.name];
+    const outputSpec = useMemo(()=>node.type.spec.toDOM?.(node), [
+        node
+    ]);
+    // TODO: Would be great to pull all of the custom node view stuff into
+    // a hook
+    const customNodeView = view?.someProp("nodeViews", (nodeViews)=>nodeViews?.[node.type.name]);
+    useLayoutEffect(()=>{
+        if (!customNodeViewRef.current || !customNodeViewRootRef.current) return;
+        const { dom } = customNodeViewRef.current;
+        nodeDomRef.current = customNodeViewRootRef.current;
+        customNodeViewRootRef.current.appendChild(dom);
+        return ()=>{
+            customNodeViewRef.current?.destroy?.();
+        };
+    }, []);
+    useLayoutEffect(()=>{
+        if (!customNodeView || !customNodeViewRef.current) return;
+        const { destroy, update } = customNodeViewRef.current;
+        const updated = update?.call(customNodeViewRef.current, node, outerDeco, innerDeco) ?? true;
+        if (updated) return;
+        destroy?.call(customNodeViewRef.current);
+        if (!customNodeViewRootRef.current) return;
+        initialNode.current = node;
+        initialOuterDeco.current = outerDeco;
+        initialInnerDeco.current = innerDeco;
+        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 { dom } = customNodeViewRef.current;
+        nodeDomRef.current = customNodeViewRootRef.current;
+        customNodeViewRootRef.current.appendChild(dom);
+    }, [
+        customNodeView,
+        view,
+        innerDeco,
+        node,
+        outerDeco,
+        getPos
+    ]);
+    const { hasContentDOM, childDescriptors, setStopEvent, setSelectNode, nodeViewDescRef } = useNodeViewDescriptor(node, ()=>getPos.current(), domRef, nodeDomRef, innerDeco, outerDeco, undefined, contentDomRef);
+    const finalProps = {
+        ...props,
+        ...!hasContentDOM && {
+            contentEditable: false
+        }
+    };
+    const nodeProps = useMemo(()=>({
+            node: node,
+            getPos: getPosFunc,
+            decorations: outerDeco,
+            innerDecorations: innerDeco
+        }), [
+        getPosFunc,
+        innerDeco,
+        node,
+        outerDeco
+    ]);
+    if (Component) {
+        element = /*#__PURE__*/ React.createElement(Component, {
+            ...finalProps,
+            ref: nodeDomRef,
+            nodeProps: nodeProps
+        }, /*#__PURE__*/ React.createElement(ChildNodeViews, {
+            getPos: getPos,
+            node: node,
+            innerDecorations: innerDeco
+        }));
+    } else if (customNodeView) {
+        element = /*#__PURE__*/ React.createElement(CustomNodeView, {
+            contentDomRef: contentDomRef,
+            customNodeView: customNodeView,
+            customNodeViewRef: customNodeViewRef,
+            customNodeViewRootRef: customNodeViewRootRef,
+            initialInnerDeco: initialInnerDeco,
+            initialNode: initialNode,
+            initialOuterDeco: initialOuterDeco,
+            node: node,
+            getPos: getPos,
+            innerDeco: innerDeco
+        });
+    } else {
+        if (outputSpec) {
+            element = /*#__PURE__*/ React.createElement(OutputSpec, {
+                ...finalProps,
+                ref: nodeDomRef,
+                outputSpec: outputSpec
+            }, /*#__PURE__*/ React.createElement(ChildNodeViews, {
+                getPos: getPos,
+                node: node,
+                innerDecorations: innerDeco
+            }));
+        }
+    }
+    if (!element) {
+        throw new Error(`Node spec for ${node.type.name} is missing toDOM`);
+    }
+    const decoratedElement = /*#__PURE__*/ cloneElement(outerDeco.reduce(wrapInDeco, element), // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    outerDeco.some((d)=>d.type.attrs.nodeName) ? {
+        ref: domRef
+    } : // we've already passed the domRef to the NodeView component
+    // as a prop
+    undefined);
+    const childContextValue = useMemo(()=>({
+            parentRef: nodeViewDescRef,
+            siblingsRef: childDescriptors
+        }), [
+        childDescriptors,
+        nodeViewDescRef
+    ]);
+    return /*#__PURE__*/ React.createElement(SelectNodeContext.Provider, {
+        value: setSelectNode
+    }, /*#__PURE__*/ React.createElement(StopEventContext.Provider, {
+        value: setStopEvent
+    }, /*#__PURE__*/ React.createElement(ChildDescriptorsContext.Provider, {
+        value: childContextValue
+    }, decoratedElement)));
+});

package/dist/esm/components/NodeViewComponentProps.js

@@ -0,0 +1 @@
+export { };

package/dist/esm/components/OutputSpec.js

@@ -0,0 +1,38 @@
+import React, { createElement, forwardRef, memo } from "react";
+import { htmlAttrsToReactProps, mergeReactProps } from "../props.js";
+const ForwardedOutputSpec = /*#__PURE__*/ memo(/*#__PURE__*/ forwardRef(function OutputSpec(param, ref) {
+    let { outputSpec, children, ...propOverrides } = param;
+    if (typeof outputSpec === "string") {
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, outputSpec);
+    }
+    if (!Array.isArray(outputSpec)) {
+        throw new Error("@nytimes/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, children);
+        }
+        content.push(/*#__PURE__*/ React.createElement(ForwardedOutputSpec, {
+            outputSpec: child
+        }, children));
+    }
+    return /*#__PURE__*/ createElement(tagName, props, ...content);
+}));
+export { ForwardedOutputSpec as OutputSpec };

package/dist/esm/components/ProseMirror.js

@@ -0,0 +1,52 @@
+import { DecorationSet } from "prosemirror-view";
+import React, { useMemo, useState } from "react";
+import { EditorContext } from "../contexts/EditorContext.js";
+import { EditorStateContext } from "../contexts/EditorStateContext.js";
+import { NodeViewContext } from "../contexts/NodeViewContext.js";
+import { computeDocDeco } from "../decorations/computeDocDeco.js";
+import { viewDecorations } from "../decorations/viewDecorations.js";
+import { useEditor } from "../hooks/useEditor.js";
+import { LayoutGroup } from "./LayoutGroup.js";
+import { DocNodeViewContext } from "./ProseMirrorDoc.js";
+const EMPTY_OUTER_DECOS = [];
+function ProseMirrorInner(param) {
+    let { className, children, nodeViews, customNodeViews, ...props } = param;
+    const [mount, setMount] = useState(null);
+    const { editor, state } = useEditor(mount, {
+        ...props,
+        nodeViews: customNodeViews
+    });
+    const innerDecos = editor.view ? viewDecorations(editor.view, editor.cursorWrapper) : DecorationSet.empty;
+    const outerDecos = editor.view ? computeDocDeco(editor.view) : EMPTY_OUTER_DECOS;
+    const nodeViewContextValue = useMemo(()=>({
+            nodeViews: nodeViews ?? {}
+        }), [
+        nodeViews
+    ]);
+    const docNodeViewContextValue = useMemo(()=>({
+            className: className,
+            setMount: setMount,
+            node: editor.view?.state.doc,
+            innerDeco: innerDecos,
+            outerDeco: outerDecos,
+            viewDesc: editor.docViewDescRef.current
+        }), [
+        className,
+        editor.docViewDescRef,
+        editor.view?.state.doc,
+        innerDecos,
+        outerDecos
+    ]);
+    return /*#__PURE__*/ React.createElement(EditorContext.Provider, {
+        value: editor
+    }, /*#__PURE__*/ React.createElement(EditorStateContext.Provider, {
+        value: state
+    }, /*#__PURE__*/ React.createElement(NodeViewContext.Provider, {
+        value: nodeViewContextValue
+    }, /*#__PURE__*/ React.createElement(DocNodeViewContext.Provider, {
+        value: docNodeViewContextValue
+    }, children))));
+}
+export function ProseMirror(props) {
+    return /*#__PURE__*/ React.createElement(LayoutGroup, null, /*#__PURE__*/ React.createElement(ProseMirrorInner, props));
+}

package/dist/esm/components/ProseMirrorDoc.js

@@ -0,0 +1,34 @@
+import React, { createContext, forwardRef, useContext, useImperativeHandle, useMemo, useRef } from "react";
+import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
+import { DocNodeView } from "./DocNodeView.js";
+export const DocNodeViewContext = /*#__PURE__*/ createContext(null);
+function ProseMirrorDoc(param, ref) {
+    let { as, ...props } = param;
+    const childDescriptors = useRef([]);
+    const innerRef = useRef(null);
+    const { setMount, ...docProps } = useContext(DocNodeViewContext);
+    const viewDescRef = useRef(undefined);
+    useImperativeHandle(ref, ()=>{
+        return innerRef.current;
+    }, []);
+    const childContextValue = useMemo(()=>({
+            parentRef: viewDescRef,
+            siblingsRef: childDescriptors
+        }), [
+        childDescriptors,
+        viewDescRef
+    ]);
+    return /*#__PURE__*/ React.createElement(ChildDescriptorsContext.Provider, {
+        value: childContextValue
+    }, /*#__PURE__*/ React.createElement(DocNodeView, {
+        ref: (el)=>{
+            innerRef.current = el;
+            setMount(el);
+        },
+        ...props,
+        ...docProps,
+        as: as
+    }));
+}
+const ForwardedProseMirrorDoc = /*#__PURE__*/ forwardRef(ProseMirrorDoc);
+export { ForwardedProseMirrorDoc as ProseMirrorDoc };

package/dist/esm/components/SeparatorHackView.js

@@ -0,0 +1,49 @@
+import React, { useContext, useLayoutEffect, useRef, useState } from "react";
+import { browser } from "../browser.js";
+import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
+import { TrailingHackViewDesc, sortViewDescs } from "../viewdesc.js";
+export function SeparatorHackView(param) {
+    let { getPos } = param;
+    const { siblingsRef, parentRef } = useContext(ChildDescriptorsContext);
+    const viewDescRef = useRef(null);
+    const ref = useRef(null);
+    const [shouldRender, setShouldRender] = useState(false);
+    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
+    ]);
+    // There's no risk of an infinite loop here, because
+    // we call setShouldRender conditionally
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useLayoutEffect(()=>{
+        const lastSibling = siblingsRef.current[siblingsRef.current.length - 1];
+        if ((browser.safari || browser.chrome) && lastSibling?.dom?.contentEditable == "false") {
+            setShouldRender(true);
+            return;
+        }
+        if (!ref.current) return;
+        if (!viewDescRef.current) {
+            viewDescRef.current = new TrailingHackViewDesc(parentRef.current, [], ()=>getPos.current(), ref.current, null);
+        } else {
+            viewDescRef.current.parent = parentRef.current;
+            viewDescRef.current.dom = ref.current;
+            viewDescRef.current.getPos = ()=>getPos.current();
+        }
+        if (!siblingsRef.current.includes(viewDescRef.current)) {
+            siblingsRef.current.push(viewDescRef.current);
+        }
+        siblingsRef.current.sort(sortViewDescs);
+    });
+    return shouldRender ? /*#__PURE__*/ React.createElement("img", {
+        ref: ref,
+        className: "ProseMirror-separator"
+    }) : null;
+}

package/dist/esm/components/TextNodeView.js

@@ -0,0 +1,102 @@
+import { DecorationSet } from "prosemirror-view";
+import { Component } from "react";
+import { findDOMNode } from "react-dom";
+import { CompositionViewDesc, TextViewDesc, sortViewDescs } from "../viewdesc.js";
+import { wrapInDeco } from "./ChildNodeViews.js";
+function shallowEqual(objA, objB) {
+    if (objA === objB) {
+        return true;
+    }
+    if (!objA || !objB) {
+        return false;
+    }
+    const aKeys = Object.keys(objA);
+    const bKeys = Object.keys(objB);
+    const len = aKeys.length;
+    if (bKeys.length !== len) {
+        return false;
+    }
+    for(let i = 0; i < len; i++){
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const key = aKeys[i];
+        if (objA[key] !== objB[key] || !Object.prototype.hasOwnProperty.call(objB, key)) {
+            return false;
+        }
+    }
+    return true;
+}
+export class TextNodeView extends Component {
+    viewDescRef = null;
+    renderRef = null;
+    updateEffect() {
+        const { view, decorations, siblingsRef, parentRef, getPos, node } = this.props;
+        // There simply is no other way to ref a text node
+        // eslint-disable-next-line react/no-find-dom-node
+        const dom = findDOMNode(this);
+        // We only need to explicitly create a CompositionViewDesc
+        // when a composition was started that produces a new text node.
+        // Otherwise we just rely on re-rendering the renderRef
+        if (!dom) {
+            if (!view?.composing) return;
+            this.viewDescRef = new CompositionViewDesc(parentRef.current, ()=>getPos.current(), // These are just placeholders/dummies. We can't
+            // actually find the correct DOM nodes from here,
+            // so we let our parent do it.
+            // Passing a valid element here just so that the
+            // ViewDesc constructor doesn't blow up.
+            document.createElement("div"), document.createTextNode(node.text ?? ""), node.text ?? "");
+            return;
+        }
+        let textNode = dom;
+        while(textNode.firstChild){
+            textNode = textNode.firstChild;
+        }
+        if (!this.viewDescRef || this.viewDescRef instanceof CompositionViewDesc) {
+            this.viewDescRef = new TextViewDesc(undefined, [], ()=>getPos.current(), node, decorations, DecorationSet.empty, dom, textNode);
+        } else {
+            this.viewDescRef.parent = parentRef.current;
+            this.viewDescRef.children = [];
+            this.viewDescRef.node = node;
+            this.viewDescRef.getPos = ()=>getPos.current();
+            this.viewDescRef.outerDeco = decorations;
+            this.viewDescRef.innerDeco = DecorationSet.empty;
+            this.viewDescRef.dom = dom;
+            // @ts-expect-error We have our own ViewDesc implementations
+            this.viewDescRef.dom.pmViewDesc = this.viewDescRef;
+            this.viewDescRef.nodeDOM = textNode;
+        }
+        if (!siblingsRef.current.includes(this.viewDescRef)) {
+            siblingsRef.current.push(this.viewDescRef);
+        }
+        siblingsRef.current.sort(sortViewDescs);
+    }
+    shouldComponentUpdate(nextProps) {
+        return !shallowEqual(this.props, nextProps);
+    }
+    componentDidMount() {
+        this.updateEffect();
+    }
+    componentDidUpdate() {
+        this.updateEffect();
+    }
+    componentWillUnmount() {
+        const { siblingsRef } = this.props;
+        if (!this.viewDescRef) return;
+        if (siblingsRef.current.includes(this.viewDescRef)) {
+            const index = siblingsRef.current.indexOf(this.viewDescRef);
+            siblingsRef.current.splice(index, 1);
+        }
+    }
+    render() {
+        const { view, getPos, node, decorations } = this.props;
+        // During a composition, it's crucial that we don't try to
+        // update the DOM that the user is working in. If there's
+        // an active composition and the selection is in this node,
+        // we freeze the DOM of this element so that it doesn't
+        // interrupt the composition
+        if (view?.composing && view.state.selection.from >= getPos.current() && view.state.selection.from <= getPos.current() + node.nodeSize) {
+            return this.renderRef;
+        }
+        this.renderRef = decorations.reduce(wrapInDeco, node.text);
+        return this.renderRef;
+    }
+}

package/dist/esm/components/TrailingHackView.js

@@ -0,0 +1,39 @@
+import React, { useContext, useLayoutEffect, useRef } from "react";
+import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
+import { TrailingHackViewDesc, sortViewDescs } from "../viewdesc.js";
+export function TrailingHackView(param) {
+    let { getPos } = param;
+    const { siblingsRef, parentRef } = useContext(ChildDescriptorsContext);
+    const viewDescRef = useRef(null);
+    const ref = 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
+    ]);
+    useLayoutEffect(()=>{
+        if (!ref.current) return;
+        if (!viewDescRef.current) {
+            viewDescRef.current = new TrailingHackViewDesc(parentRef.current, [], ()=>getPos.current(), ref.current, null);
+        } else {
+            viewDescRef.current.parent = parentRef.current;
+            viewDescRef.current.dom = ref.current;
+            viewDescRef.current.getPos = ()=>getPos.current();
+        }
+        if (!siblingsRef.current.includes(viewDescRef.current)) {
+            siblingsRef.current.push(viewDescRef.current);
+        }
+        siblingsRef.current.sort(sortViewDescs);
+    });
+    return /*#__PURE__*/ React.createElement("br", {
+        ref: ref,
+        className: "ProseMirror-trailingBreak"
+    });
+}

package/dist/esm/components/WidgetView.js

@@ -0,0 +1,44 @@
+import React, { useContext, useLayoutEffect, useRef } from "react";
+import { ChildDescriptorsContext } from "../contexts/ChildDescriptorsContext.js";
+import { WidgetViewDesc, sortViewDescs } from "../viewdesc.js";
+export function WidgetView(param) {
+    let { widget, getPos } = param;
+    const { siblingsRef, parentRef } = useContext(ChildDescriptorsContext);
+    const viewDescRef = useRef(null);
+    const getPosFunc = useRef(()=>getPos.current()).current;
+    const domRef = 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
+    ]);
+    useLayoutEffect(()=>{
+        if (!domRef.current) return;
+        if (!viewDescRef.current) {
+            viewDescRef.current = new WidgetViewDesc(parentRef.current, ()=>getPos.current(), widget, domRef.current);
+        } else {
+            viewDescRef.current.parent = parentRef.current;
+            viewDescRef.current.widget = widget;
+            viewDescRef.current.getPos = ()=>getPos.current();
+            viewDescRef.current.dom = domRef.current;
+        }
+        if (!siblingsRef.current.includes(viewDescRef.current)) {
+            siblingsRef.current.push(viewDescRef.current);
+        }
+        siblingsRef.current.sort(sortViewDescs);
+    });
+    const { Component } = widget.type;
+    return Component && /*#__PURE__*/ React.createElement(Component, {
+        ref: domRef,
+        widget: widget,
+        getPos: getPosFunc,
+        contentEditable: false
+    });
+}

package/dist/esm/components/WidgetViewComponentProps.js

@@ -0,0 +1 @@
+export { };