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

package/dist/cjs/ReactEditorView.js

@@ -33,7 +33,6 @@ let ReactEditorView = class ReactEditorView extends _prosemirrorview.EditorView
     nextProps;
     prevState;
     _destroyed;
-    deferPendingEffects;
     constructor(place, props){
         // Prevent the base class from destroying the React-managed nodes.
         // Restore them below after invoking the base class constructor.
@@ -86,7 +85,6 @@ let ReactEditorView = class ReactEditorView extends _prosemirrorview.EditorView
         // @ts-expect-error this violates the typing but class does it, too.
         this.docView = null;
         this._destroyed = false;
-        this.deferPendingEffects = false;
     }
     get props() {
         return this.nextProps;

package/dist/cjs/components/ChildNodeViews.js

@@ -110,18 +110,13 @@ const ChildView = /*#__PURE__*/ (0, _react.memo)(function ChildView(param) {
         key: child.key
     }, (param)=>{
         let { siblingsRef, parentRef } = param;
-        return /*#__PURE__*/ _react.default.createElement(_EditorContext.EditorContext.Consumer, null, (param)=>{
-            let { registerEventListener, unregisterEventListener } = param;
-            return /*#__PURE__*/ _react.default.createElement(_TextNodeView.TextNodeView, {
-                view: view,
-                node: child.node,
-                getPos: getPos,
-                siblingsRef: siblingsRef,
-                parentRef: parentRef,
-                decorations: child.outerDeco,
-                registerEventListener: registerEventListener,
-                unregisterEventListener: unregisterEventListener
-            });
+        return /*#__PURE__*/ _react.default.createElement(_TextNodeView.TextNodeView, {
+            view: view,
+            node: child.node,
+            getPos: getPos,
+            siblingsRef: siblingsRef,
+            parentRef: parentRef,
+            decorations: child.outerDeco
         });
     }) : /*#__PURE__*/ _react.default.createElement(_NodeView.NodeView, {
         key: child.key,
@@ -404,14 +399,14 @@ const ChildNodeViews = /*#__PURE__*/ (0, _react.memo)(function ChildNodeViews(pa
                 component: _SeparatorHackView.SeparatorHackView,
                 marks: [],
                 offset: lastChild?.offset ?? 0,
-                index: (lastChild?.index ?? 0) + 1,
+                index: (lastChild?.index ?? 0) + 2,
                 key: "trailing-hack-img"
             }, {
                 type: "hack",
                 component: _TrailingHackView.TrailingHackView,
                 marks: [],
                 offset: lastChild?.offset ?? 0,
-                index: (lastChild?.index ?? 0) + 2,
+                index: (lastChild?.index ?? 0) + 1,
                 key: "trailing-hack-br"
             });
         }

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;
@@ -66,18 +65,22 @@ const CursorWrapper = /*#__PURE__*/ (0, _react.forwardRef)(function CursorWrappe
         // @ts-expect-error Internal property - domSelection
         const domSel = view.domSelection();
         const node = innerRef.current;
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        domSel.collapse(node.parentNode, (0, _dom.domIndex)(node) + 1);
+        const img = node.nodeName == "IMG";
+        if (img) {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            domSel.collapse(node.parentNode, (0, _dom.domIndex)(node) + 1);
+        } else {
+            domSel.collapse(node, 0);
+        }
         // @ts-expect-error Internal property - domObserver
         view.domObserver.connectSelection();
-        setShouldRender(false);
     }, []);
-    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/TextNodeView.js

@@ -8,10 +8,8 @@ Object.defineProperty(exports, "TextNodeView", {
         return TextNodeView;
     }
 });
-const _prosemirrorstate = require("prosemirror-state");
 const _prosemirrorview = require("prosemirror-view");
 const _react = require("react");
-const _ReactEditorView = require("../ReactEditorView.js");
 const _findDOMNode = require("../findDOMNode.js");
 const _viewdesc = require("../viewdesc.js");
 const _ChildNodeViews = require("./ChildNodeViews.js");
@@ -40,141 +38,72 @@ function shallowEqual(objA, objB) {
 let TextNodeView = class TextNodeView extends _react.Component {
     viewDescRef = null;
     renderRef = null;
-    wasProtecting = false;
-    containsCompositionNodeText = true;
-    // This is basically NodeViewDesc.localCompositionInfo
-    // from prosemirror-view. It's been slightly adjusted so that
-    // it can be used accurately during render, before we've
-    // necessarily found (or even let the browser create)
-    // view.input.compositionNode
-    shouldProtect(props) {
-        const { view, getPos, node } = props;
-        if (!(view instanceof _ReactEditorView.ReactEditorView)) return false;
-        if (!view.composing) {
-            return false;
-        }
-        const pos = getPos();
-        const { from, to } = view.state.selection;
-        if (!(view.state.selection instanceof _prosemirrorstate.TextSelection) || from < pos || to > pos + node.nodeSize) {
-            return false;
-        }
-        return this.containsCompositionNodeText;
-    }
-    handleCompositionEnd = ()=>{
-        if (!this.wasProtecting) return;
-        this.forceUpdate();
-        return;
-    };
-    create() {
+    updateEffect() {
         const { view, decorations, siblingsRef, parentRef, getPos, node } = this.props;
+        // There simply is no other way to ref a text node
+        // eslint-disable-next-line react/no-find-dom-node
         const dom = (0, _findDOMNode.findDOMNode)(this);
-        if (!dom && !view.composing) return null;
-        let textNode = dom;
-        while(textNode?.firstChild){
-            textNode = textNode.firstChild;
-        }
-        if (!(textNode instanceof Text)) {
-            textNode = null;
-        }
-        let viewDesc;
-        if (this.shouldProtect(this.props)) {
-            viewDesc = new _viewdesc.CompositionViewDesc(parentRef.current, getPos, // If we can't
-            // actually find the correct DOM nodes from here (
-            // which is the case in a composition in a newly
-            // created text node), we let our parent do it.
+        // We only need to explicitly create a CompositionViewDesc
+        // when a composition was started that produces a new text node.
+        // Otherwise we just rely on re-rendering the renderRef
+        if (!dom) {
+            if (!view.composing) return;
+            this.viewDescRef = new _viewdesc.CompositionViewDesc(parentRef.current, getPos, // These are just placeholders/dummies. We can't
+            // actually find the correct DOM nodes from here,
+            // so we let our parent do it.
             // Passing a valid element here just so that the
             // ViewDesc constructor doesn't blow up.
-            dom ?? document.createElement("div"), textNode ?? document.createTextNode(node.text ?? ""), node.text ?? "");
-        } else {
-            if (!dom || !textNode) return null;
-            viewDesc = new _viewdesc.TextViewDesc(parentRef.current, [], getPos, node, decorations, _prosemirrorview.DecorationSet.empty, dom, textNode);
-        }
-        siblingsRef.current.push(viewDesc);
-        siblingsRef.current.sort(_viewdesc.sortViewDescs);
-        return viewDesc;
-    }
-    update() {
-        const { view, node, decorations } = this.props;
-        if (!(view instanceof _ReactEditorView.ReactEditorView)) return false;
-        const viewDesc = this.viewDescRef;
-        if (!viewDesc) return false;
-        if (this.shouldProtect(this.props) !== viewDesc instanceof _viewdesc.CompositionViewDesc) {
-            return false;
-        }
-        if (viewDesc instanceof _viewdesc.CompositionViewDesc) return false;
-        const dom = (0, _findDOMNode.findDOMNode)(this);
-        if (!dom || dom !== viewDesc.dom) return false;
-        if (!dom.contains(viewDesc.nodeDOM)) return false;
-        return viewDesc.matchesNode(node, decorations, _prosemirrorview.DecorationSet.empty) || viewDesc.update(node, decorations, _prosemirrorview.DecorationSet.empty, view);
-    }
-    destroy() {
-        const viewDesc = this.viewDescRef;
-        if (!viewDesc) return;
-        viewDesc.destroy();
-        const siblings = this.props.siblingsRef.current;
-        if (siblings.includes(viewDesc)) {
-            const index = siblings.indexOf(viewDesc);
-            siblings.splice(index, 1);
+            document.createElement("div"), document.createTextNode(node.text ?? ""), node.text ?? "");
+            return;
         }
-    }
-    updateEffect() {
-        if (!this.update()) {
-            this.destroy();
-            this.viewDescRef = this.create();
+        let textNode = dom;
+        while(textNode.firstChild){
+            textNode = textNode.firstChild;
         }
-        const { view, node } = this.props;
-        if (!(view instanceof _ReactEditorView.ReactEditorView)) {
-            this.containsCompositionNodeText = true;
-            return;
+        if (!this.viewDescRef || this.viewDescRef instanceof _viewdesc.CompositionViewDesc) {
+            this.viewDescRef = new _viewdesc.TextViewDesc(undefined, [], getPos, node, decorations, _prosemirrorview.DecorationSet.empty, dom, textNode);
+        } else {
+            this.viewDescRef.parent = parentRef.current;
+            this.viewDescRef.children = [];
+            this.viewDescRef.node = node;
+            this.viewDescRef.outerDeco = decorations;
+            this.viewDescRef.innerDeco = _prosemirrorview.DecorationSet.empty;
+            this.viewDescRef.dom = dom;
+            this.viewDescRef.dom.pmViewDesc = this.viewDescRef;
+            this.viewDescRef.nodeDOM = textNode;
         }
-        const textNode = view.input.compositionNode;
-        if (!textNode) {
-            this.containsCompositionNodeText = true;
-            return;
+        if (!siblingsRef.current.includes(this.viewDescRef)) {
+            siblingsRef.current.push(this.viewDescRef);
         }
-        // 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;
+        siblingsRef.current.sort(_viewdesc.sortViewDescs);
     }
     shouldComponentUpdate(nextProps) {
-        // When leaving the protected state, force a re-render so React's
-        // virtual DOM resyncs with whatever the IME wrote into the real DOM
-        // while we were returning a stale renderRef.
-        if (this.wasProtecting && !this.shouldProtect(nextProps)) {
-            return true;
-        }
         return !shallowEqual(this.props, nextProps);
     }
     componentDidMount() {
-        this.viewDescRef = null;
-        // After a composition, force an update so that we re-check whether we need
-        // to be protecting our rendered content and allow React to re-sync with the
-        // DOM.
-        const { registerEventListener } = this.props;
-        registerEventListener("compositionend", this.handleCompositionEnd);
         this.updateEffect();
     }
     componentDidUpdate() {
         this.updateEffect();
     }
     componentWillUnmount() {
-        const { unregisterEventListener } = this.props;
-        unregisterEventListener("compositionend", this.handleCompositionEnd);
-        this.destroy();
+        const { siblingsRef } = this.props;
+        if (!this.viewDescRef) return;
+        if (siblingsRef.current.includes(this.viewDescRef)) {
+            const index = siblingsRef.current.indexOf(this.viewDescRef);
+            siblingsRef.current.splice(index, 1);
+        }
     }
     render() {
-        const { node, decorations } = this.props;
+        const { view, getPos, node, decorations } = this.props;
         // During a composition, it's crucial that we don't try to
         // update the DOM that the user is working in. If there's
         // an active composition and the selection is in this node,
         // we freeze the DOM of this element so that it doesn't
         // interrupt the composition
-        if (this.shouldProtect(this.props)) {
-            this.wasProtecting = true;
+        if (view.composing && view.state.selection.from >= getPos() && view.state.selection.from <= getPos() + node.nodeSize) {
             return this.renderRef;
         }
-        this.wasProtecting = false;
         this.renderRef = decorations.reduce(_ChildNodeViews.wrapInDeco, node.text);
         return this.renderRef;
     }

package/dist/cjs/components/TrailingHackView.js

@@ -11,8 +11,6 @@ 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;
@@ -57,7 +55,6 @@ 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);
@@ -86,32 +83,6 @@ 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/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

@@ -10,16 +10,8 @@ Object.defineProperty(exports, "useComponentEventListeners", {
 });
 const _react = require("react");
 const _reactdom = require("react-dom");
-function useComponentEventListeners(existingHandlers) {
-    const [registry, setRegistry] = (0, _react.useState)(new Map(Object.entries(existingHandlers ?? {}).map((param)=>{
-        let [eventName, handler] = param;
-        return [
-            eventName,
-            handler ? [
-                handler
-            ] : []
-        ];
-    })));
+function useComponentEventListeners(handleDOMEventsProp) {
+    const [registry, setRegistry] = (0, _react.useState)(new Map());
     const registerEventListener = (0, _react.useCallback)((eventType, handler)=>{
         const handlers = registry.get(eventType) ?? [];
         handlers.unshift(handler);
@@ -37,19 +29,19 @@ function useComponentEventListeners(existingHandlers) {
         registry
     ]);
     (0, _react.useLayoutEffect)(()=>{
-        if (!existingHandlers) return;
-        for (const [eventType, handler] of Object.entries(existingHandlers)){
+        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(existingHandlers)){
+            for (const [eventType, handler] of Object.entries(handleDOMEventsProp)){
                 if (!handler) return;
                 unregisterEventListener(eventType, handler);
             }
         };
     }, [
-        existingHandlers,
+        handleDOMEventsProp,
         registerEventListener,
         unregisterEventListener
     ]);

package/dist/cjs/hooks/useNodeViewDescription.js

@@ -10,10 +10,8 @@ Object.defineProperty(exports, "useNodeViewDescription", {
 });
 const _react = require("react");
 const _ReactEditorView = require("../ReactEditorView.js");
-const _CursorWrapper = require("../components/CursorWrapper.js");
 const _ChildDescriptionsContext = require("../contexts/ChildDescriptionsContext.js");
 const _EditorContext = require("../contexts/EditorContext.js");
-const _ReactWidgetType = require("../decorations/ReactWidgetType.js");
 const _viewdesc = require("../viewdesc.js");
 const _useClientLayoutEffect = require("./useClientLayoutEffect.js");
 const _useEffectEvent = require("./useEffectEvent.js");
@@ -143,44 +141,25 @@ function useNodeViewDescription(getDOM, getContentDOM, constructor, props) {
         children.sort(_viewdesc.sortViewDescs);
         for (const child of children){
             child.parent = viewDesc;
-        }
-        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;
+            // Because TextNodeViews can't locate the DOM nodes
+            // for compositions, we need to override them here
+            if (child instanceof _viewdesc.CompositionViewDesc) {
+                const compositionTopDOM = viewDesc?.contentDOM?.firstChild;
+                if (!compositionTopDOM) throw new Error(`Started a composition but couldn't find the text node it belongs to.`);
+                let textDOM = compositionTopDOM;
+                while(textDOM.firstChild){
+                    textDOM = textDOM.firstChild;
                 }
+                if (!textDOM || !(textDOM instanceof Text)) throw new Error(`Started a composition but couldn't find the text node it belongs to.`);
+                child.dom = compositionTopDOM;
+                child.textDOM = textDOM;
+                child.text = textDOM.data;
+                child.textDOM.pmViewDesc = child;
+                // It should not be possible to be in a composition because one could
+                // not start between the renders that switch the view type.
+                view.input.compositionNodes.push(child);
             }
         }
-        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

@@ -10,7 +10,6 @@ Object.defineProperty(exports, "beforeInputPlugin", {
 });
 const _prosemirrormodel = require("prosemirror-model");
 const _prosemirrorstate = require("prosemirror-state");
-const _ReactEditorView = require("../ReactEditorView.js");
 const _CursorWrapper = require("../components/CursorWrapper.js");
 const _ReactWidgetType = require("../decorations/ReactWidgetType.js");
 function insertText(view, eventData) {
@@ -57,41 +56,68 @@ function handleGapCursorComposition(view) {
 }
 function beforeInputPlugin(setCursorWrapper) {
     let compositionMarks = null;
+    let precompositionSnapshot = null;
     return new _prosemirrorstate.Plugin({
         props: {
             handleDOMEvents: {
                 compositionstart (view) {
-                    if (!(view instanceof _ReactEditorView.ReactEditorView)) return false;
-                    view.input.composing = true;
-                    compositionMarks = view.state.storedMarks;
-                    const tr = view.state.tr.deleteSelection().setStoredMarks(null);
-                    view.dispatch(tr);
+                    compositionMarks = view.state.storedMarks ?? view.state.selection.$from.marks();
+                    view.dispatch(view.state.tr.deleteSelection());
                     handleGapCursorComposition(view);
                     const { state } = view;
-                    if (compositionMarks?.length) {
+                    const $pos = state.selection.$from;
+                    if (compositionMarks) {
                         setCursorWrapper((0, _ReactWidgetType.widget)(state.selection.from, _CursorWrapper.CursorWrapper, {
                             key: "cursor-wrapper",
-                            marks: compositionMarks,
-                            side: 1
+                            marks: compositionMarks
                         }));
                     }
+                    // Snapshot the siblings of the node that contains the
+                    // current cursor. We'll restore this later, so that React
+                    // doesn't panic about unknown DOM nodes.
+                    const { node: parent } = view.domAtPos($pos.pos);
+                    precompositionSnapshot = [];
+                    for (const node of parent.childNodes){
+                        precompositionSnapshot.push(node);
+                    }
+                    // @ts-expect-error Internal property - input
+                    view.input.composing = true;
                     return true;
                 },
                 compositionupdate () {
                     return true;
                 },
                 compositionend (view, event) {
-                    if (!(view instanceof _ReactEditorView.ReactEditorView)) return false;
-                    if (!view.composing) return false;
+                    // @ts-expect-error Internal property - input
                     view.input.composing = false;
+                    const { state } = view;
+                    const { node: parent } = view.domAtPos(state.selection.from);
+                    if (precompositionSnapshot) {
+                        // Restore the snapshot of the parent node's children
+                        // from before the composition started. This gives us a
+                        // clean slate from which to dispatch our transaction
+                        // and trigger a React update.
+                        precompositionSnapshot.forEach((prevNode, i)=>{
+                            if (parent.childNodes.length <= i) {
+                                parent.appendChild(prevNode);
+                                return;
+                            }
+                            parent.replaceChild(prevNode, parent.childNodes.item(i));
+                        });
+                        if (parent.childNodes.length > precompositionSnapshot.length) {
+                            for(let i = precompositionSnapshot.length; i < parent.childNodes.length; i++){
+                                parent.removeChild(parent.childNodes.item(i));
+                            }
+                        }
+                    }
+                    if (event.data) {
+                        insertText(view, event.data, {
+                            marks: compositionMarks
+                        });
+                    }
                     compositionMarks = null;
+                    precompositionSnapshot = null;
                     setCursorWrapper(null);
-                    if (view.input.compositionNode && !view.input.compositionNode.pmViewDesc) {
-                        view.input.compositionNode.remove();
-                    }
-                    view.input.compositionEndedAt = event.timeStamp;
-                    view.input.compositionNode = null;
-                    view.input.compositionID++;
                     return true;
                 },
                 beforeinput (view, event) {
@@ -140,30 +166,6 @@ function beforeInputPlugin(setCursorWrapper) {
                                 insertText(view, event.data);
                                 break;
                             }
-                        case "insertCompositionText":
-                            {
-                                const { tr } = view.state;
-                                // There's always a range on insertCompositionText beforeinput events
-                                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                                const range = event.getTargetRanges()[0];
-                                const start = view.posAtDOM(range.startContainer, range.startOffset);
-                                const end = view.posAtDOM(range.endContainer, range.endOffset, 1);
-                                if (view.state.doc.textBetween(start, end, "**", "*") === event.data) {
-                                    return;
-                                }
-                                if (event.data) {
-                                    if (compositionMarks) tr.ensureMarks(compositionMarks);
-                                    tr.insertText(event.data, start, end);
-                                } else {
-                                    tr.delete(start, end);
-                                }
-                                view.dom.addEventListener("input", ()=>{
-                                    view.dispatch(tr);
-                                }, {
-                                    once: true
-                                });
-                                break;
-                            }
                         case "deleteWordBackward":
                         case "deleteHardLineBackward":
                         case "deleteSoftLineBackward":

package/dist/cjs/plugins/componentEventListeners.js

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "componentEventListeners", {
         return componentEventListeners;
     }
 });
-const _prosemirrorstate = require("prosemirror-state");
 const _reactdom = require("react-dom");
 function componentEventListeners(eventHandlerRegistry) {
     const domEventHandlers = {};
@@ -17,7 +16,7 @@ function componentEventListeners(eventHandlerRegistry) {
             for (const handler of handlers){
                 let handled = false;
                 (0, _reactdom.unstable_batchedUpdates)(()=>{
-                    handled = !!handler.call(this, view, event);
+                    handled = !!handler(view, event);
                 });
                 if (handled || event.defaultPrevented) return true;
             }
@@ -25,11 +24,5 @@ function componentEventListeners(eventHandlerRegistry) {
         }
         domEventHandlers[eventType] = handleEvent;
     }
-    const plugin = new _prosemirrorstate.Plugin({
-        key: new _prosemirrorstate.PluginKey("@handlewithcare/react-prosemirror/componentEventListeners"),
-        props: {
-            handleDOMEvents: domEventHandlers
-        }
-    });
-    return plugin;
+    return domEventHandlers;
 }