@handlewithcare/react-prosemirror 3.0.3 → 3.0.5

package/README.md

@@ -95,6 +95,7 @@ import "prosemirror-view/style/prosemirror.css";
     - [When should I use this?](#when-should-i-use-this)
 - [Migrations](#migrations)
 - [Looking for someone to collaborate with?](#looking-for-someone-to-collaborate-with)
+- [Sponsors](#sponsors)
 
 <!-- tocstop -->
 
@@ -818,3 +819,28 @@ Reach out to [Handle with Care](https://handlewithcare.dev/#get-in-touch)! We're
 a product development collective with years of experience bringing excellent
 ideas to life. We love React and ProseMirror, and we're always looking for new
 folks to work with!
+
+<!-- NOTE: This section is autogenerated. Do not manually edit.-->
+<!--sponsorsstart-->
+
+## Sponsors
+
+The following companies, organizations, and individuals support Pitter Patter's
+ongoing development.
+
+Sponsors receive regular updates about development progress, including previews
+of upcoming features, priority getting issues addressed as we release features,
+and a direct line of communication to us for support. Funders above a certain
+threshold join our steering committee — a lightweight governance model where
+significant contributors help shape our roadmap priorities.
+
+[Become a Sponsor](https://handlewithcare.dev/pitter-patter/#become-a-sponsor)
+
+<h3>Sponsors</h3>
+<p>
+<a href="https://www.moment.dev/"><img src="https://media.githubusercontent.com/media/handlewithcarecollective/pitter-patter-sponsors/main/logos/Moment.png" alt="Moment" height="128"></a>
+<a href="https://www.lingco.io/"><img src="https://media.githubusercontent.com/media/handlewithcarecollective/pitter-patter-sponsors/main/logos/Lingco.png" alt="Lingco" height="128"></a>
+<a href="https://dskrpt.de/"><img src="https://media.githubusercontent.com/media/handlewithcarecollective/pitter-patter-sponsors/main/logos/Dskrpt.png" alt="Dskrpt" height="128"></a>
+<a href="https://github.com/fastrepl/"><img src="https://media.githubusercontent.com/media/handlewithcarecollective/pitter-patter-sponsors/main/logos/Fastrepl.png" alt="Fastrepl" height="128"></a>
+</p>
+<!--sponsorsend-->

package/dist/cjs/components/ChildNodeViews.js

@@ -244,7 +244,9 @@ function adjustWidgetMarksBack(widgetChildren, nodeChild) {
         const child = widgetChildren[i];
         if (// Using internal Decoration property, "type"
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        child.widget.type.side < 0) {
+        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);

package/dist/cjs/components/CursorWrapper.js

@@ -54,7 +54,6 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 const CursorWrapper = /*#__PURE__*/ (0, _react.forwardRef)(function CursorWrapper(param, ref) {
     let { widget, getPos, ...props } = param;
-    const [shouldRender, setShouldRender] = (0, _react.useState)(true);
     const innerRef = (0, _react.useRef)(null);
     (0, _react.useImperativeHandle)(ref, ()=>{
         return innerRef.current;
@@ -65,27 +64,23 @@ const CursorWrapper = /*#__PURE__*/ (0, _react.forwardRef)(function CursorWrappe
         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, (0, _dom.domIndex)(node) + 1);
+        if (img) {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            domSel.collapse(node.parentNode, (0, _dom.domIndex)(node) + 1);
         } else {
-            range.setEnd(node, 0);
+            domSel.collapse(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.default.createElement("img", {
+    return /*#__PURE__*/ _react.default.createElement("img", {
         ref: innerRef,
         className: "ProseMirror-separator",
         // eslint-disable-next-line react/no-unknown-property
         "mark-placeholder": "true",
         alt: "",
         ...props
-    }) : null;
+    });
 });

package/dist/cjs/components/ProseMirror.js

@@ -73,7 +73,7 @@ const rootChildDescriptionsContextValue = {
 function ProseMirrorInner(param) {
     let { children, nodeViewComponents, markViewComponents, ...props } = param;
     const [mount, setMount] = (0, _react.useState)(null);
-    const { editor, state } = (0, _useEditor.useEditor)(mount, props);
+    const { editor, cursorWrapper, state } = (0, _useEditor.useEditor)(mount, props);
     const nodeViewConstructors = editor.view.nodeViews;
     const nodeViewContextValue = (0, _react.useMemo)(()=>{
         return {
@@ -90,7 +90,7 @@ function ProseMirrorInner(param) {
     ]);
     const node = state.doc;
     const decorations = (0, _computeDocDeco.computeDocDeco)(editor.view);
-    const innerDecorations = (0, _viewDecorations.viewDecorations)(editor.view, editor.cursorWrapper);
+    const innerDecorations = (0, _viewDecorations.viewDecorations)(editor.view, cursorWrapper);
     const docNodeViewContextValue = (0, _react.useMemo)(()=>({
             setMount,
             node,

package/dist/cjs/hooks/useEditor.js

@@ -109,13 +109,11 @@ function useEditor(mount, options) {
     view.update(directEditorProps);
     const editor = (0, _react.useMemo)(()=>({
             view,
-            cursorWrapper,
             flushSyncRef,
             registerEventListener,
             unregisterEventListener,
             isStatic: options.static ?? false
         }), [
-        cursorWrapper,
         options.static,
         registerEventListener,
         unregisterEventListener,
@@ -123,6 +121,7 @@ function useEditor(mount, options) {
     ]);
     return {
         editor,
+        cursorWrapper,
         state
     };
 }

package/dist/cjs/hooks/useMarkViewDescription.js

@@ -38,6 +38,13 @@ function useMarkViewDescription(getDOM, getContentDOM, constructor, props) {
         const children = childrenRef.current;
         const contentDOM = getContentDOM(markView);
         const viewDesc = new _viewdesc.ReactMarkViewDesc(parent, children, getPos, mark, dom, contentDOM ?? markView.dom, markView);
+        // When create() runs after a destroy() (either here in a layout
+        // effect or in refUpdated), the inherited children still reference
+        // the just-destroyed desc. Re-parent them onto this fresh desc
+        // before any other code can observe the stale pointer.
+        for (const child of children){
+            child.parent = viewDesc;
+        }
         contentDOMRef.current = contentDOM;
         return viewDesc;
     });

package/dist/cjs/hooks/useNodeViewDescription.js

@@ -39,6 +39,9 @@ function useNodeViewDescription(getDOM, getContentDOM, constructor, props) {
         const contentDOM = getContentDOM(nodeView);
         const nodeDOM = nodeView.dom;
         const viewDesc = new _viewdesc.ReactNodeViewDesc(parent, children, getPos, node, decorations, innerDecorations, dom, contentDOM, nodeDOM, nodeView);
+        for (const child of children){
+            child.parent = viewDesc;
+        }
         const siblings = siblingsRef.current;
         if (!siblings.includes(viewDesc)) {
             siblings.push(viewDesc);

package/dist/cjs/plugins/beforeInputPlugin.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "beforeInputPlugin", {
         return beforeInputPlugin;
     }
 });
+const _prosemirrormodel = require("prosemirror-model");
 const _prosemirrorstate = require("prosemirror-state");
 const _CursorWrapper = require("../components/CursorWrapper.js");
 const _ReactWidgetType = require("../decorations/ReactWidgetType.js");
@@ -25,6 +26,34 @@ function insertText(view, eventData) {
     view.dispatch(tr);
     return true;
 }
+// Taken from https://github.com/ProseMirror/prosemirror-gapcursor/blob/master/src/index.ts#L67-L84
+// This is a hack that, when a composition starts while a gap cursor
+// is active, quickly creates an inline context for the composition to
+// happen in, to avoid it being aborted by the DOM selection being
+// moved into a valid position.
+//
+// We can't rely on the actual hack from prosemirror-gapcursor, because
+// it happens too late. We snapshot the DOM during compositionstart, but
+// the gapcursor hack runs in beforeinput (after compositionstart).
+function handleGapCursorComposition(view) {
+    // @ts-expect-error Internal property - jsonID
+    if (!(view.state.selection.jsonID === "gapcursor")) {
+        return;
+    }
+    const { $from } = view.state.selection;
+    const insert = $from.parent.contentMatchAt($from.index())// All schemas _must_ have a text node type
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    .findWrapping(view.state.schema.nodes.text);
+    if (!insert) return;
+    let fragment = _prosemirrormodel.Fragment.empty;
+    for(let i = insert.length - 1; i >= 0; i--){
+        fragment = _prosemirrormodel.Fragment.from(// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        insert[i].createAndFill(null, fragment));
+    }
+    const tr = view.state.tr.replace($from.pos, $from.pos, new _prosemirrormodel.Slice(fragment, 0, 0));
+    tr.setSelection(_prosemirrorstate.TextSelection.near(tr.doc.resolve($from.pos + 1)));
+    view.dispatch(tr);
+}
 function beforeInputPlugin(setCursorWrapper) {
     let compositionMarks = null;
     let precompositionSnapshot = null;
@@ -32,10 +61,11 @@ function beforeInputPlugin(setCursorWrapper) {
         props: {
             handleDOMEvents: {
                 compositionstart (view) {
+                    compositionMarks = view.state.storedMarks ?? view.state.selection.$from.marks();
+                    view.dispatch(view.state.tr.deleteSelection());
+                    handleGapCursorComposition(view);
                     const { state } = view;
-                    view.dispatch(state.tr.deleteSelection());
                     const $pos = state.selection.$from;
-                    compositionMarks = state.storedMarks ?? $pos.marks();
                     if (compositionMarks) {
                         setCursorWrapper((0, _ReactWidgetType.widget)(state.selection.from, _CursorWrapper.CursorWrapper, {
                             key: "cursor-wrapper",

package/dist/cjs/testing/editorViewTestHelpers.js

@@ -51,7 +51,7 @@ function tempEditor(param) {
     const state = _prosemirrorstate.EditorState.create({
         doc: startDoc,
         schema: _prosemirrortestbuilder.schema,
-        selection: selection ?? startDoc.tag?.a ? _prosemirrorstate.TextSelection.create(startDoc, startDoc.tag.a, startDoc.tag?.b) : undefined,
+        selection: selection ?? (startDoc.tag?.a ? _prosemirrorstate.TextSelection.create(startDoc, startDoc.tag.a, startDoc.tag?.b) : undefined),
         plugins: [
             ...plugins ?? [],
             (0, _reactKeys.reactKeys)()

package/dist/esm/components/ChildNodeViews.js

@@ -185,7 +185,9 @@ function adjustWidgetMarksBack(widgetChildren, nodeChild) {
         const child = widgetChildren[i];
         if (// Using internal Decoration property, "type"
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        child.widget.type.side < 0) {
+        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);

package/dist/esm/components/CursorWrapper.js

@@ -1,9 +1,8 @@
-import React, { forwardRef, useImperativeHandle, useRef, useState } from "react";
+import React, { forwardRef, useImperativeHandle, useRef } 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;
@@ -14,27 +13,23 @@ export const CursorWrapper = /*#__PURE__*/ forwardRef(function CursorWrapper(par
         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);
+        if (img) {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            domSel.collapse(node.parentNode, domIndex(node) + 1);
         } else {
-            range.setEnd(node, 0);
+            domSel.collapse(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", {
+    return /*#__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/ProseMirror.js

@@ -22,7 +22,7 @@ const rootChildDescriptionsContextValue = {
 function ProseMirrorInner(param) {
     let { children, nodeViewComponents, markViewComponents, ...props } = param;
     const [mount, setMount] = useState(null);
-    const { editor, state } = useEditor(mount, props);
+    const { editor, cursorWrapper, state } = useEditor(mount, props);
     const nodeViewConstructors = editor.view.nodeViews;
     const nodeViewContextValue = useMemo(()=>{
         return {
@@ -39,7 +39,7 @@ function ProseMirrorInner(param) {
     ]);
     const node = state.doc;
     const decorations = computeDocDeco(editor.view);
-    const innerDecorations = viewDecorations(editor.view, editor.cursorWrapper);
+    const innerDecorations = viewDecorations(editor.view, cursorWrapper);
     const docNodeViewContextValue = useMemo(()=>({
             setMount,
             node,

package/dist/esm/hooks/useEditor.js

@@ -107,13 +107,11 @@ let didWarnValueDefaultValue = false;
     view.update(directEditorProps);
     const editor = useMemo(()=>({
             view,
-            cursorWrapper,
             flushSyncRef,
             registerEventListener,
             unregisterEventListener,
             isStatic: options.static ?? false
         }), [
-        cursorWrapper,
         options.static,
         registerEventListener,
         unregisterEventListener,
@@ -121,6 +119,7 @@ let didWarnValueDefaultValue = false;
     ]);
     return {
         editor,
+        cursorWrapper,
         state
     };
 }

package/dist/esm/hooks/useMarkViewDescription.js

@@ -28,6 +28,13 @@ export function useMarkViewDescription(getDOM, getContentDOM, constructor, props
         const children = childrenRef.current;
         const contentDOM = getContentDOM(markView);
         const viewDesc = new ReactMarkViewDesc(parent, children, getPos, mark, dom, contentDOM ?? markView.dom, markView);
+        // When create() runs after a destroy() (either here in a layout
+        // effect or in refUpdated), the inherited children still reference
+        // the just-destroyed desc. Re-parent them onto this fresh desc
+        // before any other code can observe the stale pointer.
+        for (const child of children){
+            child.parent = viewDesc;
+        }
         contentDOMRef.current = contentDOM;
         return viewDesc;
     });

package/dist/esm/hooks/useNodeViewDescription.js

@@ -29,6 +29,9 @@ export function useNodeViewDescription(getDOM, getContentDOM, constructor, props
         const contentDOM = getContentDOM(nodeView);
         const nodeDOM = nodeView.dom;
         const viewDesc = new ReactNodeViewDesc(parent, children, getPos, node, decorations, innerDecorations, dom, contentDOM, nodeDOM, nodeView);
+        for (const child of children){
+            child.parent = viewDesc;
+        }
         const siblings = siblingsRef.current;
         if (!siblings.includes(viewDesc)) {
             siblings.push(viewDesc);

package/dist/esm/plugins/beforeInputPlugin.js

@@ -1,4 +1,5 @@
-import { Plugin } from "prosemirror-state";
+import { Fragment, Slice } from "prosemirror-model";
+import { Plugin, TextSelection } from "prosemirror-state";
 import { CursorWrapper } from "../components/CursorWrapper.js";
 import { widget } from "../decorations/ReactWidgetType.js";
 function insertText(view, eventData) {
@@ -15,6 +16,34 @@ function insertText(view, eventData) {
     view.dispatch(tr);
     return true;
 }
+// Taken from https://github.com/ProseMirror/prosemirror-gapcursor/blob/master/src/index.ts#L67-L84
+// This is a hack that, when a composition starts while a gap cursor
+// is active, quickly creates an inline context for the composition to
+// happen in, to avoid it being aborted by the DOM selection being
+// moved into a valid position.
+//
+// We can't rely on the actual hack from prosemirror-gapcursor, because
+// it happens too late. We snapshot the DOM during compositionstart, but
+// the gapcursor hack runs in beforeinput (after compositionstart).
+function handleGapCursorComposition(view) {
+    // @ts-expect-error Internal property - jsonID
+    if (!(view.state.selection.jsonID === "gapcursor")) {
+        return;
+    }
+    const { $from } = view.state.selection;
+    const insert = $from.parent.contentMatchAt($from.index())// All schemas _must_ have a text node type
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    .findWrapping(view.state.schema.nodes.text);
+    if (!insert) return;
+    let fragment = Fragment.empty;
+    for(let i = insert.length - 1; i >= 0; i--){
+        fragment = Fragment.from(// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        insert[i].createAndFill(null, fragment));
+    }
+    const tr = view.state.tr.replace($from.pos, $from.pos, new Slice(fragment, 0, 0));
+    tr.setSelection(TextSelection.near(tr.doc.resolve($from.pos + 1)));
+    view.dispatch(tr);
+}
 export function beforeInputPlugin(setCursorWrapper) {
     let compositionMarks = null;
     let precompositionSnapshot = null;
@@ -22,10 +51,11 @@ export function beforeInputPlugin(setCursorWrapper) {
         props: {
             handleDOMEvents: {
                 compositionstart (view) {
+                    compositionMarks = view.state.storedMarks ?? view.state.selection.$from.marks();
+                    view.dispatch(view.state.tr.deleteSelection());
+                    handleGapCursorComposition(view);
                     const { state } = view;
-                    view.dispatch(state.tr.deleteSelection());
                     const $pos = state.selection.$from;
-                    compositionMarks = state.storedMarks ?? $pos.marks();
                     if (compositionMarks) {
                         setCursorWrapper(widget(state.selection.from, CursorWrapper, {
                             key: "cursor-wrapper",

package/dist/esm/testing/editorViewTestHelpers.js

@@ -28,7 +28,7 @@ export function tempEditor(param) {
     const state = EditorState.create({
         doc: startDoc,
         schema,
-        selection: selection ?? startDoc.tag?.a ? TextSelection.create(startDoc, startDoc.tag.a, startDoc.tag?.b) : undefined,
+        selection: selection ?? (startDoc.tag?.a ? TextSelection.create(startDoc, startDoc.tag.a, startDoc.tag?.b) : undefined),
         plugins: [
             ...plugins ?? [],
             reactKeys()