@handlewithcare/react-prosemirror 3.1.0-tiptap.50 → 3.1.0-tiptap.51

package/dist/cjs/components/ChildNodeViews.js

@@ -404,14 +404,14 @@ const ChildNodeViews = /*#__PURE__*/ (0, _react.memo)(function ChildNodeViews(pa
                 component: _SeparatorHackView.SeparatorHackView,
                 marks: [],
                 offset: lastChild?.offset ?? 0,
-                index: (lastChild?.index ?? 0) + 2,
+                index: (lastChild?.index ?? 0) + 1,
                 key: "trailing-hack-img"
             }, {
                 type: "hack",
                 component: _TrailingHackView.TrailingHackView,
                 marks: [],
                 offset: lastChild?.offset ?? 0,
-                index: (lastChild?.index ?? 0) + 1,
+                index: (lastChild?.index ?? 0) + 2,
                 key: "trailing-hack-br"
             });
         }

package/dist/cjs/components/CursorWrapper.js

@@ -70,9 +70,7 @@ const CursorWrapper = /*#__PURE__*/ (0, _react.forwardRef)(function CursorWrappe
         domSel.collapse(node.parentNode, (0, _dom.domIndex)(node) + 1);
         // @ts-expect-error Internal property - domObserver
         view.domObserver.connectSelection();
-        setTimeout(()=>{
-            setShouldRender(false);
-        });
+        setShouldRender(false);
     }, []);
     return shouldRender ? /*#__PURE__*/ _react.default.createElement("img", {
         ref: innerRef,

package/dist/cjs/components/TextNodeView.js

@@ -55,8 +55,7 @@ let TextNodeView = class TextNodeView extends _react.Component {
         }
         const pos = getPos();
         const { from, to } = view.state.selection;
-        if (!(view.state.selection instanceof _prosemirrorstate.TextSelection) || from < pos || // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        to > pos + node.nodeSize) {
+        if (!(view.state.selection instanceof _prosemirrorstate.TextSelection) || from < pos || to > pos + node.nodeSize) {
             return false;
         }
         return this.containsCompositionNodeText;
@@ -123,22 +122,20 @@ let TextNodeView = class TextNodeView extends _react.Component {
             this.destroy();
             this.viewDescRef = this.create();
         }
-        setTimeout(()=>{
-            const { view, node } = this.props;
-            if (!(view instanceof _ReactEditorView.ReactEditorView)) {
-                this.containsCompositionNodeText = true;
-                return;
-            }
-            const textNode = view.input.compositionNode;
-            if (!textNode) {
-                this.containsCompositionNodeText = true;
-                return;
-            }
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            const text = textNode.nodeValue;
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            this.containsCompositionNodeText = node.text === text;
-        });
+        const { view, node } = this.props;
+        if (!(view instanceof _ReactEditorView.ReactEditorView)) {
+            this.containsCompositionNodeText = true;
+            return;
+        }
+        const textNode = view.input.compositionNode;
+        if (!textNode) {
+            this.containsCompositionNodeText = true;
+            return;
+        }
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const text = textNode.nodeValue;
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        this.containsCompositionNodeText = node.text === text;
     }
     shouldComponentUpdate(nextProps) {
         // When leaving the protected state, force a re-render so React's

package/dist/cjs/components/TrailingHackView.js

@@ -11,6 +11,8 @@ Object.defineProperty(exports, "TrailingHackView", {
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _ChildDescriptionsContext = require("../contexts/ChildDescriptionsContext.js");
 const _useClientLayoutEffect = require("../hooks/useClientLayoutEffect.js");
+const _useEditorEffect = require("../hooks/useEditorEffect.js");
+const _useEditorEventListener = require("../hooks/useEditorEventListener.js");
 const _viewdesc = require("../viewdesc.js");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
@@ -55,6 +57,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
 }
 function TrailingHackView(param) {
     let { getPos } = param;
+    const [shouldRender, setShouldRender] = (0, _react.useState)(true);
     const { siblingsRef, parentRef } = (0, _react.useContext)(_ChildDescriptionsContext.ChildDescriptionsContext);
     const viewDescRef = (0, _react.useRef)(null);
     const ref = (0, _react.useRef)(null);
@@ -83,6 +86,32 @@ function TrailingHackView(param) {
         }
         siblingsRef.current.sort(_viewdesc.sortViewDescs);
     });
+    // At the start of a composition, the browser will automatically delete
+    // the trailing hack br element. We need to unmount ourselves _before_
+    // that happens, so that React doesn't try to remove the already-removed
+    // br node when this component gets unmounted
+    (0, _useEditorEventListener.useEditorEventListener)("compositionstart", (view)=>{
+        const { from } = view.state.selection;
+        if (from === getPos()) {
+            setShouldRender(false);
+        }
+    });
+    // We need to run the same composition check when we first get mounted,
+    // in case we got mounted in the same render batch as the beginning of
+    // a composition
+    (0, _useEditorEffect.useEditorEffect)((view)=>{
+        if (!view.composing) return;
+        const { from } = view.state.selection;
+        if (from === getPos()) {
+            setShouldRender(false);
+        }
+    }, [
+        getPos
+    ]);
+    (0, _useEditorEventListener.useEditorEventListener)("compositionend", ()=>{
+        setShouldRender(true);
+    });
+    if (!shouldRender) return null;
     return /*#__PURE__*/ _react.default.createElement("br", {
         ref: ref,
         className: "ProseMirror-trailingBreak"

package/dist/cjs/hooks/useEditor.js

@@ -102,20 +102,9 @@ function useEditor(mount, options) {
         // running effects. Running effects will reattach selection
         // change listeners if the EditorView has been destroyed.
         if (view instanceof _ReactEditorView.ReactEditorView && !view.isDestroyed) {
-            if (view.deferPendingEffects) {
-                setTimeout(()=>{
-                    // Plugins might dispatch transactions from their
-                    // view update lifecycle hooks
-                    flushSyncRef.current = false;
-                    view.commitPendingEffects();
-                    flushSyncRef.current = true;
-                });
-            } else {
-                flushSyncRef.current = false;
-                view.commitPendingEffects();
-                flushSyncRef.current = true;
-            }
+            flushSyncRef.current = false;
             view.commitPendingEffects();
+            flushSyncRef.current = true;
         }
     });
     view.update(directEditorProps);

package/dist/cjs/hooks/useNodeViewDescription.js

@@ -144,45 +144,43 @@ function useNodeViewDescription(getDOM, getContentDOM, constructor, props) {
         for (const child of children){
             child.parent = viewDesc;
         }
-        setTimeout(()=>{
-            // Because TextNodeViews can't locate the DOM nodes
-            // for compositions, we need to override them here
-            if (!viewDescRef.current?.contentDOM) return;
-            const children = viewDescRef.current?.children;
-            const compositionChildIndex = children.findIndex((child)=>child instanceof _viewdesc.CompositionViewDesc);
-            if (compositionChildIndex === -1) return;
-            const compositionViewDesc = children[compositionChildIndex];
-            if (!(compositionViewDesc instanceof _viewdesc.CompositionViewDesc)) return;
-            let compositionTopDOM = null;
-            let search = children[compositionChildIndex - 1];
-            while(search instanceof _viewdesc.MarkViewDesc){
-                search = search.children[0];
-            }
-            if (search instanceof _viewdesc.WidgetViewDesc && search.widget.type instanceof _ReactWidgetType.ReactWidgetType && search.widget.type.Component === _CursorWrapper.CursorWrapper) {
-                compositionTopDOM = search.dom.nextSibling;
-            } else {
-                for (const childNode of viewDescRef.current.contentDOM.childNodes){
-                    if (children.every((child)=>child.dom !== childNode)) {
-                        compositionTopDOM = childNode;
-                        break;
-                    }
+        if (!props.node.isTextblock) return;
+        // Because TextNodeViews can't locate the DOM nodes
+        // for compositions, we need to override them here
+        if (!viewDescRef.current?.contentDOM) return;
+        const compositionChildIndex = children.findIndex((child)=>child instanceof _viewdesc.CompositionViewDesc);
+        if (compositionChildIndex === -1) return;
+        const compositionViewDesc = children[compositionChildIndex];
+        if (!(compositionViewDesc instanceof _viewdesc.CompositionViewDesc)) return;
+        let compositionTopDOM = null;
+        let search = children[compositionChildIndex - 1];
+        while(search instanceof _viewdesc.MarkViewDesc){
+            search = search.children[0];
+        }
+        if (search instanceof _viewdesc.WidgetViewDesc && search.widget.type instanceof _ReactWidgetType.ReactWidgetType && search.widget.type.Component === _CursorWrapper.CursorWrapper) {
+            compositionTopDOM = search.dom.nextSibling;
+        } else {
+            for (const childNode of viewDescRef.current.contentDOM.childNodes){
+                if (children.every((child)=>child.dom !== childNode)) {
+                    compositionTopDOM = childNode;
+                    break;
                 }
             }
-            if (!compositionTopDOM) return;
-            let textDOM = compositionTopDOM;
-            while(textDOM.firstChild){
-                textDOM = textDOM.firstChild;
-            }
-            if (!textDOM || !(textDOM instanceof Text)) {
-                console.error(compositionTopDOM, textDOM);
-                throw new Error(`Started a composition but couldn't find the text node it belongs to.`);
-            }
-            compositionViewDesc.dom = compositionTopDOM;
-            compositionViewDesc.textDOM = textDOM;
-            compositionViewDesc.text = textDOM.data;
-            compositionViewDesc.textDOM.pmViewDesc = compositionViewDesc;
-            view.input.compositionNodes.push(compositionViewDesc);
-        });
+        }
+        if (!compositionTopDOM) return;
+        let textDOM = compositionTopDOM;
+        while(textDOM.firstChild){
+            textDOM = textDOM.firstChild;
+        }
+        if (!textDOM || !(textDOM instanceof Text)) {
+            console.error(compositionTopDOM, textDOM);
+            throw new Error(`Started a composition but couldn't find the text node it belongs to.`);
+        }
+        compositionViewDesc.dom = compositionTopDOM;
+        compositionViewDesc.textDOM = textDOM;
+        compositionViewDesc.text = textDOM.data;
+        compositionViewDesc.textDOM.pmViewDesc = compositionViewDesc;
+        view.input.compositionNodes.push(compositionViewDesc);
     });
     const childContextValue = (0, _react.useMemo)(()=>({
             parentRef: viewDescRef,

package/dist/cjs/plugins/beforeInputPlugin.js

@@ -62,11 +62,12 @@ function beforeInputPlugin(setCursorWrapper) {
             handleDOMEvents: {
                 compositionstart (view) {
                     if (!(view instanceof _ReactEditorView.ReactEditorView)) return false;
+                    view.input.composing = true;
                     compositionMarks = view.state.storedMarks;
-                    view.dispatch(view.state.tr.deleteSelection());
+                    const tr = view.state.tr.deleteSelection().setStoredMarks(null);
+                    view.dispatch(tr);
                     handleGapCursorComposition(view);
                     const { state } = view;
-                    // const $pos = state.selection.$from;
                     if (compositionMarks?.length) {
                         setCursorWrapper((0, _ReactWidgetType.widget)(state.selection.from, _CursorWrapper.CursorWrapper, {
                             key: "cursor-wrapper",
@@ -74,7 +75,6 @@ function beforeInputPlugin(setCursorWrapper) {
                             side: 1
                         }));
                     }
-                    view.input.composing = true;
                     return true;
                 },
                 compositionupdate () {
@@ -86,7 +86,7 @@ function beforeInputPlugin(setCursorWrapper) {
                     view.input.composing = false;
                     compositionMarks = null;
                     setCursorWrapper(null);
-                    if (view.input.compositionNode && !view.input.compositionNode.pmViewDesc && (view.input.compositionNode instanceof Text || view.input.compositionNode instanceof Element)) {
+                    if (view.input.compositionNode && !view.input.compositionNode.pmViewDesc) {
                         view.input.compositionNode.remove();
                     }
                     view.input.compositionEndedAt = event.timeStamp;
@@ -157,19 +157,11 @@ function beforeInputPlugin(setCursorWrapper) {
                                 } else {
                                     tr.delete(start, end);
                                 }
-                                // When we insert the text that corresponds to an ongoing composition,
-                                // the relevant TextNodeView will pause re-rendering so that React doesn't
-                                // clobber the composition in the DOM. This means that we have to wait for
-                                // the browser to update the DOM itself before attempting to reconcile
-                                // the selection, so we specifically defer pending effects to the next
-                                // macro task
-                                if (view instanceof _ReactEditorView.ReactEditorView) {
-                                    view.deferPendingEffects = true;
-                                }
-                                view.dispatch(tr);
-                                if (view instanceof _ReactEditorView.ReactEditorView) {
-                                    view.deferPendingEffects = false;
-                                }
+                                view.dom.addEventListener("input", ()=>{
+                                    view.dispatch(tr);
+                                }, {
+                                    once: true
+                                });
                                 break;
                             }
                         case "deleteWordBackward":

package/dist/esm/components/ChildNodeViews.js

@@ -345,14 +345,14 @@ export const ChildNodeViews = /*#__PURE__*/ memo(function ChildNodeViews(param)
                 component: SeparatorHackView,
                 marks: [],
                 offset: lastChild?.offset ?? 0,
-                index: (lastChild?.index ?? 0) + 2,
+                index: (lastChild?.index ?? 0) + 1,
                 key: "trailing-hack-img"
             }, {
                 type: "hack",
                 component: TrailingHackView,
                 marks: [],
                 offset: lastChild?.offset ?? 0,
-                index: (lastChild?.index ?? 0) + 1,
+                index: (lastChild?.index ?? 0) + 2,
                 key: "trailing-hack-br"
             });
         }

package/dist/esm/components/CursorWrapper.js

@@ -19,9 +19,7 @@ export const CursorWrapper = /*#__PURE__*/ forwardRef(function CursorWrapper(par
         domSel.collapse(node.parentNode, domIndex(node) + 1);
         // @ts-expect-error Internal property - domObserver
         view.domObserver.connectSelection();
-        setTimeout(()=>{
-            setShouldRender(false);
-        });
+        setShouldRender(false);
     }, []);
     return shouldRender ? /*#__PURE__*/ React.createElement("img", {
         ref: innerRef,

package/dist/esm/components/TextNodeView.js

@@ -45,8 +45,7 @@ export class TextNodeView extends Component {
         }
         const pos = getPos();
         const { from, to } = view.state.selection;
-        if (!(view.state.selection instanceof TextSelection) || from < pos || // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        to > pos + node.nodeSize) {
+        if (!(view.state.selection instanceof TextSelection) || from < pos || to > pos + node.nodeSize) {
             return false;
         }
         return this.containsCompositionNodeText;
@@ -113,22 +112,20 @@ export class TextNodeView extends Component {
             this.destroy();
             this.viewDescRef = this.create();
         }
-        setTimeout(()=>{
-            const { view, node } = this.props;
-            if (!(view instanceof ReactEditorView)) {
-                this.containsCompositionNodeText = true;
-                return;
-            }
-            const textNode = view.input.compositionNode;
-            if (!textNode) {
-                this.containsCompositionNodeText = true;
-                return;
-            }
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            const text = textNode.nodeValue;
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            this.containsCompositionNodeText = node.text === text;
-        });
+        const { view, node } = this.props;
+        if (!(view instanceof ReactEditorView)) {
+            this.containsCompositionNodeText = true;
+            return;
+        }
+        const textNode = view.input.compositionNode;
+        if (!textNode) {
+            this.containsCompositionNodeText = true;
+            return;
+        }
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const text = textNode.nodeValue;
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        this.containsCompositionNodeText = node.text === text;
     }
     shouldComponentUpdate(nextProps) {
         // When leaving the protected state, force a re-render so React's

package/dist/esm/components/TrailingHackView.js

@@ -1,9 +1,12 @@
-import React, { useContext, useRef } from "react";
+import React, { useContext, useRef, useState } from "react";
 import { ChildDescriptionsContext } from "../contexts/ChildDescriptionsContext.js";
 import { useClientLayoutEffect } from "../hooks/useClientLayoutEffect.js";
+import { useEditorEffect } from "../hooks/useEditorEffect.js";
+import { useEditorEventListener } from "../hooks/useEditorEventListener.js";
 import { TrailingHackViewDesc, sortViewDescs } from "../viewdesc.js";
 export function TrailingHackView(param) {
     let { getPos } = param;
+    const [shouldRender, setShouldRender] = useState(true);
     const { siblingsRef, parentRef } = useContext(ChildDescriptionsContext);
     const viewDescRef = useRef(null);
     const ref = useRef(null);
@@ -32,6 +35,32 @@ export function TrailingHackView(param) {
         }
         siblingsRef.current.sort(sortViewDescs);
     });
+    // At the start of a composition, the browser will automatically delete
+    // the trailing hack br element. We need to unmount ourselves _before_
+    // that happens, so that React doesn't try to remove the already-removed
+    // br node when this component gets unmounted
+    useEditorEventListener("compositionstart", (view)=>{
+        const { from } = view.state.selection;
+        if (from === getPos()) {
+            setShouldRender(false);
+        }
+    });
+    // We need to run the same composition check when we first get mounted,
+    // in case we got mounted in the same render batch as the beginning of
+    // a composition
+    useEditorEffect((view)=>{
+        if (!view.composing) return;
+        const { from } = view.state.selection;
+        if (from === getPos()) {
+            setShouldRender(false);
+        }
+    }, [
+        getPos
+    ]);
+    useEditorEventListener("compositionend", ()=>{
+        setShouldRender(true);
+    });
+    if (!shouldRender) return null;
     return /*#__PURE__*/ React.createElement("br", {
         ref: ref,
         className: "ProseMirror-trailingBreak"

package/dist/esm/hooks/useEditor.js

@@ -100,20 +100,9 @@ let didWarnValueDefaultValue = false;
         // running effects. Running effects will reattach selection
         // change listeners if the EditorView has been destroyed.
         if (view instanceof ReactEditorView && !view.isDestroyed) {
-            if (view.deferPendingEffects) {
-                setTimeout(()=>{
-                    // Plugins might dispatch transactions from their
-                    // view update lifecycle hooks
-                    flushSyncRef.current = false;
-                    view.commitPendingEffects();
-                    flushSyncRef.current = true;
-                });
-            } else {
-                flushSyncRef.current = false;
-                view.commitPendingEffects();
-                flushSyncRef.current = true;
-            }
+            flushSyncRef.current = false;
             view.commitPendingEffects();
+            flushSyncRef.current = true;
         }
     });
     view.update(directEditorProps);

package/dist/esm/hooks/useNodeViewDescription.js

@@ -134,45 +134,43 @@ export function useNodeViewDescription(getDOM, getContentDOM, constructor, props
         for (const child of children){
             child.parent = viewDesc;
         }
-        setTimeout(()=>{
-            // Because TextNodeViews can't locate the DOM nodes
-            // for compositions, we need to override them here
-            if (!viewDescRef.current?.contentDOM) return;
-            const children = viewDescRef.current?.children;
-            const compositionChildIndex = children.findIndex((child)=>child instanceof CompositionViewDesc);
-            if (compositionChildIndex === -1) return;
-            const compositionViewDesc = children[compositionChildIndex];
-            if (!(compositionViewDesc instanceof CompositionViewDesc)) return;
-            let compositionTopDOM = null;
-            let search = children[compositionChildIndex - 1];
-            while(search instanceof MarkViewDesc){
-                search = search.children[0];
-            }
-            if (search instanceof WidgetViewDesc && search.widget.type instanceof ReactWidgetType && search.widget.type.Component === CursorWrapper) {
-                compositionTopDOM = search.dom.nextSibling;
-            } else {
-                for (const childNode of viewDescRef.current.contentDOM.childNodes){
-                    if (children.every((child)=>child.dom !== childNode)) {
-                        compositionTopDOM = childNode;
-                        break;
-                    }
+        if (!props.node.isTextblock) return;
+        // Because TextNodeViews can't locate the DOM nodes
+        // for compositions, we need to override them here
+        if (!viewDescRef.current?.contentDOM) return;
+        const compositionChildIndex = children.findIndex((child)=>child instanceof CompositionViewDesc);
+        if (compositionChildIndex === -1) return;
+        const compositionViewDesc = children[compositionChildIndex];
+        if (!(compositionViewDesc instanceof CompositionViewDesc)) return;
+        let compositionTopDOM = null;
+        let search = children[compositionChildIndex - 1];
+        while(search instanceof MarkViewDesc){
+            search = search.children[0];
+        }
+        if (search instanceof WidgetViewDesc && search.widget.type instanceof ReactWidgetType && search.widget.type.Component === CursorWrapper) {
+            compositionTopDOM = search.dom.nextSibling;
+        } else {
+            for (const childNode of viewDescRef.current.contentDOM.childNodes){
+                if (children.every((child)=>child.dom !== childNode)) {
+                    compositionTopDOM = childNode;
+                    break;
                 }
             }
-            if (!compositionTopDOM) return;
-            let textDOM = compositionTopDOM;
-            while(textDOM.firstChild){
-                textDOM = textDOM.firstChild;
-            }
-            if (!textDOM || !(textDOM instanceof Text)) {
-                console.error(compositionTopDOM, textDOM);
-                throw new Error(`Started a composition but couldn't find the text node it belongs to.`);
-            }
-            compositionViewDesc.dom = compositionTopDOM;
-            compositionViewDesc.textDOM = textDOM;
-            compositionViewDesc.text = textDOM.data;
-            compositionViewDesc.textDOM.pmViewDesc = compositionViewDesc;
-            view.input.compositionNodes.push(compositionViewDesc);
-        });
+        }
+        if (!compositionTopDOM) return;
+        let textDOM = compositionTopDOM;
+        while(textDOM.firstChild){
+            textDOM = textDOM.firstChild;
+        }
+        if (!textDOM || !(textDOM instanceof Text)) {
+            console.error(compositionTopDOM, textDOM);
+            throw new Error(`Started a composition but couldn't find the text node it belongs to.`);
+        }
+        compositionViewDesc.dom = compositionTopDOM;
+        compositionViewDesc.textDOM = textDOM;
+        compositionViewDesc.text = textDOM.data;
+        compositionViewDesc.textDOM.pmViewDesc = compositionViewDesc;
+        view.input.compositionNodes.push(compositionViewDesc);
     });
     const childContextValue = useMemo(()=>({
             parentRef: viewDescRef,

package/dist/esm/plugins/beforeInputPlugin.js

@@ -52,11 +52,12 @@ export function beforeInputPlugin(setCursorWrapper) {
             handleDOMEvents: {
                 compositionstart (view) {
                     if (!(view instanceof ReactEditorView)) return false;
+                    view.input.composing = true;
                     compositionMarks = view.state.storedMarks;
-                    view.dispatch(view.state.tr.deleteSelection());
+                    const tr = view.state.tr.deleteSelection().setStoredMarks(null);
+                    view.dispatch(tr);
                     handleGapCursorComposition(view);
                     const { state } = view;
-                    // const $pos = state.selection.$from;
                     if (compositionMarks?.length) {
                         setCursorWrapper(widget(state.selection.from, CursorWrapper, {
                             key: "cursor-wrapper",
@@ -64,7 +65,6 @@ export function beforeInputPlugin(setCursorWrapper) {
                             side: 1
                         }));
                     }
-                    view.input.composing = true;
                     return true;
                 },
                 compositionupdate () {
@@ -76,7 +76,7 @@ export function beforeInputPlugin(setCursorWrapper) {
                     view.input.composing = false;
                     compositionMarks = null;
                     setCursorWrapper(null);
-                    if (view.input.compositionNode && !view.input.compositionNode.pmViewDesc && (view.input.compositionNode instanceof Text || view.input.compositionNode instanceof Element)) {
+                    if (view.input.compositionNode && !view.input.compositionNode.pmViewDesc) {
                         view.input.compositionNode.remove();
                     }
                     view.input.compositionEndedAt = event.timeStamp;
@@ -147,19 +147,11 @@ export function beforeInputPlugin(setCursorWrapper) {
                                 } else {
                                     tr.delete(start, end);
                                 }
-                                // When we insert the text that corresponds to an ongoing composition,
-                                // the relevant TextNodeView will pause re-rendering so that React doesn't
-                                // clobber the composition in the DOM. This means that we have to wait for
-                                // the browser to update the DOM itself before attempting to reconcile
-                                // the selection, so we specifically defer pending effects to the next
-                                // macro task
-                                if (view instanceof ReactEditorView) {
-                                    view.deferPendingEffects = true;
-                                }
-                                view.dispatch(tr);
-                                if (view instanceof ReactEditorView) {
-                                    view.deferPendingEffects = false;
-                                }
+                                view.dom.addEventListener("input", ()=>{
+                                    view.dispatch(tr);
+                                }, {
+                                    once: true
+                                });
                                 break;
                             }
                         case "deleteWordBackward":