@handlewithcare/react-prosemirror 2.4.12 → 2.5.1

package/dist/cjs/AbstractEditorView.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/dist/cjs/ReactEditorView.js

@@ -0,0 +1,156 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ReactEditorView", {
+    enumerable: true,
+    get: function() {
+        return ReactEditorView;
+    }
+});
+const _prosemirrorview = require("prosemirror-view");
+const _constants = require("./constants.js");
+function buildNodeViews(view) {
+    const result = Object.create(null);
+    function add(obj) {
+        for(const prop in obj)if (!Object.prototype.hasOwnProperty.call(result, prop)) // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        result[prop] = obj[prop];
+    }
+    view.someProp("nodeViews", add);
+    view.someProp("markViews", add);
+    return result;
+}
+function changedNodeViews(a, b) {
+    let nA = 0, nB = 0;
+    for(const prop in a){
+        if (a[prop] != b[prop]) return true;
+        nA++;
+    }
+    for(const _ in b)nB++;
+    return nA != nB;
+}
+let ReactEditorView = class ReactEditorView extends _prosemirrorview.EditorView {
+    nextProps;
+    prevState;
+    constructor(place, props){
+        // Prevent the base class from destroying the React-managed nodes.
+        // Restore them below after invoking the base class constructor.
+        const reactContent = [
+            ...place.mount.childNodes
+        ];
+        // Prevent the base class from mutating the React-managed attributes.
+        // Restore them below after invoking the base class constructor.
+        const reactAttrs = [
+            ...place.mount.attributes
+        ];
+        for (const attr of reactAttrs){
+            place.mount.removeAttributeNode(attr);
+        }
+        try {
+            // Call the superclass constructor with only a state and no plugins.
+            // We'll set everything else ourselves and apply props during layout.
+            super(place, {
+                state: _constants.EMPTY_STATE
+            });
+            this.domObserver.stop();
+            this.domObserver.observer = null;
+            this.domObserver.queue = [];
+        } finally{
+            place.mount.replaceChildren(...reactContent);
+            for (const attr of place.mount.attributes){
+                place.mount.removeAttributeNode(attr);
+            }
+            for (const attr of reactAttrs){
+                place.mount.setAttributeNode(attr);
+            }
+        }
+        this.prevState = _constants.EMPTY_STATE;
+        this.nextProps = props;
+        this.state = props.state;
+        this.nodeViews = buildNodeViews(this);
+        // Destroy the document view description that the base class makes.
+        // A React document view will assign itself to this attribute later.
+        this.docView.destroy();
+        // @ts-expect-error this violates the typing but class does it, too.
+        this.docView = null;
+    }
+    get props() {
+        return this.nextProps;
+    }
+    setProps(props) {
+        this.update({
+            ...this.props,
+            ...props
+        });
+    }
+    update(props) {
+        const prevProps = this.nextProps;
+        this.nextProps = props;
+        this.state = props.state;
+        if (prevProps.state.plugins !== props.state.plugins || prevProps.plugins !== props.plugins || prevProps.nodeViews !== props.nodeViews) {
+            const nodeViews = buildNodeViews(this);
+            if (changedNodeViews(this.nodeViews, nodeViews)) {
+                this.nodeViews = nodeViews;
+            }
+        }
+        this.editable = !this.someProp("editable", (value)=>value(this.state) === false);
+    }
+    updateState(state) {
+        this.setProps({
+            state
+        });
+    }
+    someProp(propName, f) {
+        if (!this.props) {
+            // The base class constructor calls this method before props are set.
+            return undefined;
+        }
+        const prop = this.props[propName];
+        if (prop) {
+            const result = f ? f(prop) : prop;
+            if (result) {
+                return result;
+            }
+        }
+        for (const plugin of this.props.plugins ?? []){
+            const prop = plugin.props[propName];
+            if (prop) {
+                const result = f ? f(prop) : prop;
+                if (result) {
+                    return result;
+                }
+            }
+        }
+        for (const plugin of this.state.plugins){
+            const prop = plugin.props[propName];
+            if (prop) {
+                const result = f ? f(prop) : prop;
+                if (result) {
+                    return result;
+                }
+            }
+        }
+        return undefined;
+    }
+    /**
+   * Commit effects by appling the pending props and state.
+   *
+   * Ensures the DOM selection is correct and updates plugin views.
+   *
+   * @privateRemarks
+   *
+   * The correctness of this depends on the pure update function ensuring that
+   * the node view set is up to date so that it does not try to redraw.
+   */ commitPendingEffects() {
+        // This class tracks state eagerly but the base class does it lazily.
+        // Temporarily roll it back so the base class can handle the updates.
+        this.state = this.prevState;
+        // Force the base class to try to update the document. React updated it, but
+        // this ensures that the base class validates the DOM selection and invokes
+        // node view selection callbacks.
+        this.docView.markDirty(-1, -1);
+        super.update(this.nextProps);
+        // Store the new previous state.
+        this.prevState = this.state;
+    }
+};

package/dist/cjs/StaticEditorView.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "StaticEditorView", {
+    enumerable: true,
+    get: function() {
+        return StaticEditorView;
+    }
+});
+let StaticEditorView = class StaticEditorView {
+    props;
+    nodeViews;
+    constructor(props){
+        this.props = props;
+        this.nodeViews = {};
+    }
+    get composing() {
+        return false;
+    }
+    get dom() {
+        return null;
+    }
+    get editable() {
+        return false;
+    }
+    get state() {
+        return this.props.state;
+    }
+    setProps(props) {
+        return this.update({
+            ...this.props,
+            ...props
+        });
+    }
+    update(props) {
+        this.props = props;
+    }
+    updateState(state) {
+        this.setProps({
+            state
+        });
+    }
+    someProp(propName, f) {
+        const prop = this.props[propName];
+        if (prop) {
+            const result = f ? f(prop) : prop;
+            if (result) {
+                return result;
+            }
+        }
+        for (const plugin of this.props.plugins ?? []){
+            const prop = plugin.props[propName];
+            if (prop) {
+                const result = f ? f(prop) : prop;
+                if (result) {
+                    return result;
+                }
+            }
+        }
+        for (const plugin of this.state.plugins){
+            const prop = plugin.props[propName];
+            if (prop) {
+                const result = f ? f(prop) : prop;
+                if (result) {
+                    return result;
+                }
+            }
+        }
+        return undefined;
+    }
+    destroy() {
+    // pass
+    }
+    domSelectionRange() {
+        return {
+            anchorNode: null,
+            anchorOffset: 0,
+            focusNode: null,
+            focusOffset: 0
+        };
+    }
+    domSelection() {
+        return null;
+    }
+};

package/dist/cjs/components/ChildNodeViews.js

@@ -82,21 +82,30 @@ function wrapInDeco(reactNode, deco) {
     return /*#__PURE__*/ (0, _react.cloneElement)(reactNode, (0, _props.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;
+    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 && // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            prevDeco.type.eq(nextDeco.type))) && a.innerDeco.eq(b.innerDeco) : true) && a.node === b.node && a.widget === b.widget;
 }
 const ChildView = /*#__PURE__*/ (0, _react.memo)(function ChildView(param) {
     let { child, getInnerPos } = param;
     const { view } = (0, _react.useContext)(_EditorContext.EditorContext);
-    const getChildPos = (0, _react.useRef)(()=>getInnerPos.current() + child.offset);
-    getChildPos.current = ()=>getInnerPos.current() + child.offset;
+    const childRef = (0, _react.useRef)(child);
+    childRef.current = child;
+    const getPos = (0, _react.useCallback)(()=>{
+        return getInnerPos() + childRef.current.offset;
+    }, [
+        getInnerPos
+    ]);
     return child.type === "widget" ? /*#__PURE__*/ _react.default.createElement(_WidgetView.WidgetView, {
         key: child.key,
         widget: child.widget,
-        getPos: getChildPos
+        getPos: getPos
     }) : child.type === "native-widget" ? /*#__PURE__*/ _react.default.createElement(_NativeWidgetView.NativeWidgetView, {
         key: child.key,
         widget: child.widget,
-        getPos: getChildPos
+        getPos: getPos
+    }) : child.type === "hack" ? /*#__PURE__*/ _react.default.createElement(child.component, {
+        key: child.key,
+        getPos: getPos
     }) : child.node.isText ? /*#__PURE__*/ _react.default.createElement(_ChildDescriptorsContext.ChildDescriptorsContext.Consumer, {
         key: child.key
     }, (param)=>{
@@ -104,7 +113,7 @@ const ChildView = /*#__PURE__*/ (0, _react.memo)(function ChildView(param) {
         return /*#__PURE__*/ _react.default.createElement(_TextNodeView.TextNodeView, {
             view: view,
             node: child.node,
-            getPos: getChildPos,
+            getPos: getPos,
             siblingsRef: siblingsRef,
             parentRef: parentRef,
             decorations: child.outerDeco
@@ -112,7 +121,7 @@ const ChildView = /*#__PURE__*/ (0, _react.memo)(function ChildView(param) {
     }) : /*#__PURE__*/ _react.default.createElement(_NodeView.NodeView, {
         key: child.key,
         node: child.node,
-        getPos: getChildPos,
+        getPos: getPos,
         outerDeco: child.outerDeco,
         innerDeco: child.innerDeco
     });
@@ -120,8 +129,13 @@ const ChildView = /*#__PURE__*/ (0, _react.memo)(function ChildView(param) {
 const InlinePartition = /*#__PURE__*/ (0, _react.memo)(function InlinePartition(param) {
     let { childViews, getInnerPos } = param;
     const firstChild = childViews[0];
-    const getFirstChildPos = (0, _react.useRef)(()=>getInnerPos.current() + firstChild.offset);
-    getFirstChildPos.current = ()=>getInnerPos.current() + firstChild.offset;
+    const firstChildRef = (0, _react.useRef)(firstChild);
+    firstChildRef.current = firstChild;
+    const getPos = (0, _react.useCallback)(()=>{
+        return getInnerPos() + firstChildRef.current.offset;
+    }, [
+        getInnerPos
+    ]);
     const firstMark = firstChild.marks[0];
     if (!firstMark) {
         return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, childViews.map((child)=>{
@@ -133,9 +147,9 @@ const InlinePartition = /*#__PURE__*/ (0, _react.memo)(function InlinePartition(
         }));
     }
     return /*#__PURE__*/ _react.default.createElement(_MarkView.MarkView, {
-        getPos: getFirstChildPos,
         key: firstChild.key,
-        mark: firstMark
+        mark: firstMark,
+        getPos: getPos
     }, /*#__PURE__*/ _react.default.createElement(InlineView, {
         key: firstChild.key,
         getInnerPos: getInnerPos,
@@ -193,7 +207,7 @@ const InlineView = /*#__PURE__*/ (0, _react.memo)(function InlineView(param) {
         });
     }));
 });
-function createKey(innerPos, offset, type, posToKey, widget, index) {
+function createKey(innerPos, offset, index, type, posToKey, widget) {
     const pos = innerPos + offset;
     const key = posToKey?.get(pos);
     if (type === "widget" || type === "native-widget") {
@@ -237,18 +251,23 @@ function adjustWidgetMarksBack(widgetChildren, nodeChild) {
 }
 const ChildElement = /*#__PURE__*/ (0, _react.memo)(function ChildElement(param) {
     let { child, getInnerPos } = param;
-    const getNodePos = (0, _react.useRef)(()=>getInnerPos.current() + child.offset);
-    getNodePos.current = ()=>getInnerPos.current() + child.offset;
+    const childRef = (0, _react.useRef)(child);
+    childRef.current = child;
+    const getPos = (0, _react.useCallback)(()=>{
+        return getInnerPos() + childRef.current.offset;
+    }, [
+        getInnerPos
+    ]);
     if (child.type === "node") {
         return child.marks.reduce((element, mark)=>/*#__PURE__*/ _react.default.createElement(_MarkView.MarkView, {
-                getPos: getNodePos,
-                mark: mark
+                mark: mark,
+                getPos: getPos
             }, element), /*#__PURE__*/ _react.default.createElement(_NodeView.NodeView, {
             key: child.key,
             outerDeco: child.outerDeco,
             node: child.node,
             innerDeco: child.innerDeco,
-            getPos: getNodePos
+            getPos: getPos
         }));
     } else {
         return /*#__PURE__*/ _react.default.createElement(InlineView, {
@@ -282,9 +301,10 @@ function createChildElements(children, getInnerPos) {
 }
 const ChildNodeViews = /*#__PURE__*/ (0, _react.memo)(function ChildNodeViews(param) {
     let { getPos, node, innerDecorations } = param;
-    // const editorState = useEditorState();
     const reactKeys = (0, _useReactKeys.useReactKeys)();
-    const getInnerPos = (0, _react.useRef)(()=>getPos.current() + 1);
+    const getInnerPos = (0, _react.useCallback)(()=>getPos() + 1, [
+        getPos
+    ]);
     const childMap = (0, _react.useRef)(new Map()).current;
     if (!node) return null;
     const keysSeen = new Map();
@@ -295,7 +315,7 @@ const ChildNodeViews = /*#__PURE__*/ (0, _react.memo)(function ChildNodeViews(pa
         const widgetMarks = widget.type.spec.marks ?? [];
         let key;
         if (isNative) {
-            key = createKey(getInnerPos.current(), offset, "native-widget", reactKeys?.posToKey, widget, index);
+            key = createKey(getInnerPos(), offset, index, "native-widget", reactKeys?.posToKey, widget);
             const child = {
                 type: "native-widget",
                 widget,
@@ -312,7 +332,7 @@ const ChildNodeViews = /*#__PURE__*/ (0, _react.memo)(function ChildNodeViews(pa
             }
             keysSeen.set(key, keysSeen.size);
         } else {
-            key = createKey(getInnerPos.current(), offset, "widget", reactKeys?.posToKey, widget, index);
+            key = createKey(getInnerPos(), offset, index, "widget", reactKeys?.posToKey, widget);
             const child = {
                 type: "widget",
                 widget: widget,
@@ -332,8 +352,8 @@ const ChildNodeViews = /*#__PURE__*/ (0, _react.memo)(function ChildNodeViews(pa
         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);
+    }, (childNode, outerDeco, innerDeco, offset, index)=>{
+        const key = createKey(getInnerPos(), offset, index, "node", reactKeys?.posToKey);
         const child = {
             type: "node",
             node: childNode,
@@ -341,6 +361,7 @@ const ChildNodeViews = /*#__PURE__*/ (0, _react.memo)(function ChildNodeViews(pa
             innerDeco,
             outerDeco,
             offset,
+            index,
             key
         };
         const prevChild = childMap.get(key);
@@ -364,20 +385,28 @@ const ChildNodeViews = /*#__PURE__*/ (0, _react.memo)(function ChildNodeViews(pa
     // step
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     (a, b)=>keysSeen.get(a.key) - keysSeen.get(b.key));
-    const childElements = createChildElements(children, getInnerPos);
     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)) {
-            childElements.push(/*#__PURE__*/ _react.default.createElement(_SeparatorHackView.SeparatorHackView, {
-                getPos: getInnerPos,
+            children.push({
+                type: "hack",
+                component: _SeparatorHackView.SeparatorHackView,
+                marks: [],
+                offset: lastChild?.offset ?? 0,
+                index: (lastChild?.index ?? 0) + 2,
                 key: "trailing-hack-img"
-            }), /*#__PURE__*/ _react.default.createElement(_TrailingHackView.TrailingHackView, {
-                getPos: getInnerPos,
+            }, {
+                type: "hack",
+                component: _TrailingHackView.TrailingHackView,
+                marks: [],
+                offset: lastChild?.offset ?? 0,
+                index: (lastChild?.index ?? 0) + 1,
                 key: "trailing-hack-br"
-            }));
+            });
         }
     }
+    const childElements = createChildElements(children, getInnerPos);
     return /*#__PURE__*/ _react.default.createElement(_react.default.Fragment, null, childElements);
 });