@handlewithcare/react-prosemirror 3.0.4 → 3.0.6

package/README.md

@@ -837,10 +837,40 @@ 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>
+
+<table>
+  <tbody>
+    <tr>
+      <td align="center" valign="top" >
+        <a href="https://moment.dev/">
+          <img src="https://media.githubusercontent.com/media/handlewithcarecollective/pitter-patter-sponsors/main/logos/Moment.png" alt="Moment" height="128">
+          <br>
+          Moment
+        </a>
+      </td>
+      <td align="center" valign="top" >
+        <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">
+          <br>
+          Lingco
+        </a>
+      </td>
+      <td align="center" valign="top" >
+        <a href="https://dskrpt.de/">
+          <img src="https://media.githubusercontent.com/media/handlewithcarecollective/pitter-patter-sponsors/main/logos/Dskrpt.png" alt="dskrpt" height="128">
+          <br>
+          dskrpt
+        </a>
+      </td>
+      <td align="center" valign="top" >
+        <a href="https://char.com/">
+          <img src="https://media.githubusercontent.com/media/handlewithcarecollective/pitter-patter-sponsors/main/logos/Fastrepl.png" alt="Fastrepl" height="128">
+          <br>
+          Fastrepl
+        </a>
+      </td>
+    </tr>
+  </tbody>
+</table>
+
 <!--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/components/WidgetView.js

@@ -78,6 +78,7 @@ function WidgetView(param) {
             viewDescRef.current.parent = parentRef.current;
             viewDescRef.current.widget = widget;
             viewDescRef.current.dom = domRef.current;
+            viewDescRef.current.dom.pmViewDesc = viewDescRef.current;
         }
         if (!siblingsRef.current.includes(viewDescRef.current)) {
             siblingsRef.current.push(viewDescRef.current);

package/dist/cjs/hooks/useComponentEventListeners.js

@@ -9,8 +9,8 @@ Object.defineProperty(exports, "useComponentEventListeners", {
     }
 });
 const _react = require("react");
-const _componentEventListeners = require("../plugins/componentEventListeners.js");
-function useComponentEventListeners() {
+const _reactdom = require("react-dom");
+function useComponentEventListeners(handleDOMEventsProp) {
     const [registry, setRegistry] = (0, _react.useState)(new Map());
     const registerEventListener = (0, _react.useCallback)((eventType, handler)=>{
         const handlers = registry.get(eventType) ?? [];
@@ -28,12 +28,45 @@ function useComponentEventListeners() {
     }, [
         registry
     ]);
-    const componentEventListenersPlugin = (0, _react.useMemo)(()=>(0, _componentEventListeners.componentEventListeners)(registry), [
+    (0, _react.useLayoutEffect)(()=>{
+        if (!handleDOMEventsProp) return;
+        for (const [eventType, handler] of Object.entries(handleDOMEventsProp)){
+            if (!handler) return;
+            registerEventListener(eventType, handler);
+        }
+        return ()=>{
+            for (const [eventType, handler] of Object.entries(handleDOMEventsProp)){
+                if (!handler) return;
+                unregisterEventListener(eventType, handler);
+            }
+        };
+    }, [
+        handleDOMEventsProp,
+        registerEventListener,
+        unregisterEventListener
+    ]);
+    const handleDOMEvents = (0, _react.useMemo)(()=>{
+        const domEventHandlers = {};
+        for (const [eventType, handlers] of registry.entries()){
+            function handleEvent(view, event) {
+                for (const handler of handlers){
+                    let handled = false;
+                    (0, _reactdom.unstable_batchedUpdates)(()=>{
+                        handled = !!handler(view, event);
+                    });
+                    if (handled || event.defaultPrevented) return true;
+                }
+                return false;
+            }
+            domEventHandlers[eventType] = handleEvent;
+        }
+        return domEventHandlers;
+    }, [
         registry
     ]);
     return {
         registerEventListener,
         unregisterEventListener,
-        componentEventListenersPlugin
+        handleDOMEvents
     };
 }

package/dist/cjs/hooks/useEditor.js

@@ -32,7 +32,7 @@ function useEditor(mount, options) {
     const defaultState = options.defaultState ?? _constants.EMPTY_STATE;
     const [_state, setState] = (0, _react.useState)(defaultState);
     const state = options.state ?? _state;
-    const { componentEventListenersPlugin, registerEventListener, unregisterEventListener } = (0, _useComponentEventListeners.useComponentEventListeners)();
+    const { handleDOMEvents, registerEventListener, unregisterEventListener } = (0, _useComponentEventListeners.useComponentEventListeners)(options.handleDOMEvents);
     const setCursorWrapper = (0, _react.useCallback)((deco)=>{
         (0, _reactdom.flushSync)(()=>{
             _setCursorWrapper(deco);
@@ -40,11 +40,9 @@ function useEditor(mount, options) {
     }, []);
     const plugins = (0, _react.useMemo)(()=>[
             ...options.plugins ?? [],
-            componentEventListenersPlugin,
             (0, _beforeInputPlugin.beforeInputPlugin)(setCursorWrapper)
         ], [
         options.plugins,
-        componentEventListenersPlugin,
         setCursorWrapper
     ]);
     const dispatchTransaction = (0, _react.useCallback)(function dispatchTransaction(tr) {
@@ -73,7 +71,8 @@ function useEditor(mount, options) {
         ...options,
         state,
         plugins,
-        dispatchTransaction
+        dispatchTransaction,
+        handleDOMEvents
     };
     const [view, setView] = (0, _react.useState)(()=>{
         return new _StaticEditorView.StaticEditorView(directEditorProps);
@@ -109,13 +108,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 +120,7 @@ function useEditor(mount, options) {
     ]);
     return {
         editor,
+        cursorWrapper,
         state
     };
 }

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/components/WidgetView.js

@@ -27,6 +27,7 @@ export function WidgetView(param) {
             viewDescRef.current.parent = parentRef.current;
             viewDescRef.current.widget = widget;
             viewDescRef.current.dom = domRef.current;
+            viewDescRef.current.dom.pmViewDesc = viewDescRef.current;
         }
         if (!siblingsRef.current.includes(viewDescRef.current)) {
             siblingsRef.current.push(viewDescRef.current);

package/dist/esm/hooks/useComponentEventListeners.js

@@ -1,5 +1,5 @@
-/* Copyright (c) The New York Times Company */ import { useCallback, useMemo, useState } from "react";
-import { componentEventListeners } from "../plugins/componentEventListeners.js";
+/* Copyright (c) The New York Times Company */ import { useCallback, useLayoutEffect, useMemo, useState } from "react";
+import { unstable_batchedUpdates as batch } from "react-dom";
 /**
  * Produces a plugin that can be used with ProseMirror to handle DOM
  * events at the EditorView.dom element.
@@ -14,18 +14,18 @@ import { componentEventListeners } from "../plugins/componentEventListeners.js";
  * @privateRemarks
  *
  * This hook uses a combination of mutable and immutable updates to give
- * us precise control over when we re-create the ProseMirror plugin.
+ * us precise control over when we re-create the event listeners.
  *
- * The plugin has a mutable reference to the set of handlers for each
+ * The hook has a mutable reference to the set of handlers for each
  * event type, but the set of event types is static. This means that we
- * need to produce a new ProseMirror plugin whenever a new event type is
- * registered. We avoid producing a new ProseMirrer plugin in any other
- * scenario to avoid the performance overhead of reconfiguring the plugins
- * in the EditorView.
+ * need to produce a new handleDOMEVents record whenever a new event type is
+ * registered. We avoid producing a new record in any other
+ * scenario to avoid the performance overhead of re-registering the event
+ * listeners in the EditorView.
  *
  * To accomplish this, we shallowly clone the registry whenever a new event
  * type is registered.
- */ export function useComponentEventListeners() {
+ */ export function useComponentEventListeners(handleDOMEventsProp) {
     const [registry, setRegistry] = useState(new Map());
     const registerEventListener = useCallback((eventType, handler)=>{
         const handlers = registry.get(eventType) ?? [];
@@ -43,12 +43,45 @@ import { componentEventListeners } from "../plugins/componentEventListeners.js";
     }, [
         registry
     ]);
-    const componentEventListenersPlugin = useMemo(()=>componentEventListeners(registry), [
+    useLayoutEffect(()=>{
+        if (!handleDOMEventsProp) return;
+        for (const [eventType, handler] of Object.entries(handleDOMEventsProp)){
+            if (!handler) return;
+            registerEventListener(eventType, handler);
+        }
+        return ()=>{
+            for (const [eventType, handler] of Object.entries(handleDOMEventsProp)){
+                if (!handler) return;
+                unregisterEventListener(eventType, handler);
+            }
+        };
+    }, [
+        handleDOMEventsProp,
+        registerEventListener,
+        unregisterEventListener
+    ]);
+    const handleDOMEvents = useMemo(()=>{
+        const domEventHandlers = {};
+        for (const [eventType, handlers] of registry.entries()){
+            function handleEvent(view, event) {
+                for (const handler of handlers){
+                    let handled = false;
+                    batch(()=>{
+                        handled = !!handler(view, event);
+                    });
+                    if (handled || event.defaultPrevented) return true;
+                }
+                return false;
+            }
+            domEventHandlers[eventType] = handleEvent;
+        }
+        return domEventHandlers;
+    }, [
         registry
     ]);
     return {
         registerEventListener,
         unregisterEventListener,
-        componentEventListenersPlugin
+        handleDOMEvents
     };
 }

package/dist/esm/hooks/useEditor.js

@@ -30,7 +30,7 @@ let didWarnValueDefaultValue = false;
     const defaultState = options.defaultState ?? EMPTY_STATE;
     const [_state, setState] = useState(defaultState);
     const state = options.state ?? _state;
-    const { componentEventListenersPlugin, registerEventListener, unregisterEventListener } = useComponentEventListeners();
+    const { handleDOMEvents, registerEventListener, unregisterEventListener } = useComponentEventListeners(options.handleDOMEvents);
     const setCursorWrapper = useCallback((deco)=>{
         flushSync(()=>{
             _setCursorWrapper(deco);
@@ -38,11 +38,9 @@ let didWarnValueDefaultValue = false;
     }, []);
     const plugins = useMemo(()=>[
             ...options.plugins ?? [],
-            componentEventListenersPlugin,
             beforeInputPlugin(setCursorWrapper)
         ], [
         options.plugins,
-        componentEventListenersPlugin,
         setCursorWrapper
     ]);
     const dispatchTransaction = useCallback(function dispatchTransaction(tr) {
@@ -71,7 +69,8 @@ let didWarnValueDefaultValue = false;
         ...options,
         state,
         plugins,
-        dispatchTransaction
+        dispatchTransaction,
+        handleDOMEvents
     };
     const [view, setView] = useState(()=>{
         return new StaticEditorView(directEditorProps);
@@ -107,13 +106,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 +118,7 @@ let didWarnValueDefaultValue = false;
     ]);
     return {
         editor,
+        cursorWrapper,
         state
     };
 }

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()