@handlewithcare/react-prosemirror 3.1.6 → 3.2.1

package/README.md

@@ -85,6 +85,7 @@ import "prosemirror-view/style/prosemirror.css";
   - [`useEditorEventListener`](#useeditoreventlistener-1)
   - [`useEditorEffect`](#useeditoreffect-1)
   - [`NodeViewComponentProps`](#nodeviewcomponentprops)
+  - [`useEditorStateSelector`](#useeditorstateselector)
   - [`useNodePos`](#usenodepos)
   - [`useStopEvent`](#usestopevent)
   - [`useIgnoreMutation`](#useignoremutation)
@@ -701,6 +702,17 @@ ref to their top-level DOM element. All node view components that render their
 
 [See the above example](#building-node-views-with-react) for more details.
 
+### `useEditorStateSelector`
+
+```ts
+type useEditorStateSelector<Result> = (selector: (state: EditorState) => Result): Result
+```
+
+Select a piece of the EditorState, a la Redux’s `useSelector`.
+
+This hook will only trigger a re-render of the consuming component if the return
+value of the selector changes.
+
 ### `useNodePos`
 
 ```ts

package/dist/cjs/ReactEditorView.js

@@ -190,10 +190,10 @@ let ReactEditorView = class ReactEditorView extends _prosemirrorview.EditorView
         const nextSelection = this.nextProps.state.selection;
         const currentSelection = this.prevState.selection;
         const selectionChanged = !nextSelection.eq(currentSelection);
-        if (selectionChanged && !this.composing) {
+        if (selectionChanged) {
             super.update(this.nextProps);
         } else {
-            // If the selection hasn't changed between renders or we're composing, force
+            // If the selection hasn't changed between renders, force
             // prosemirror-view to skip the selectionToDOM call. If a render happens after a DOM
             // selection change but before the "selectionchange" event fired, calling
             // selectionToDOM will cause the selection to be reset to its previous position.

package/dist/cjs/components/EditorStateSelectorsProvider.js

@@ -0,0 +1,90 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    EditorStateSelectorsProvider: function() {
+        return EditorStateSelectorsProvider;
+    },
+    EditorStateSelectorsRegistrar: function() {
+        return EditorStateSelectorsRegistrar;
+    }
+});
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _EditorStateStoreContext = require("../contexts/EditorStateStoreContext.js");
+const _useEditorState = require("../hooks/useEditorState.js");
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function EditorStateSelectorsRegistrar(param) {
+    let { children } = param;
+    const store = (0, _react.useMemo)(()=>(0, _EditorStateStoreContext.createEditorStateStore)(), []);
+    return /*#__PURE__*/ _react.default.createElement(_EditorStateStoreContext.EditorStateStoreContext.Provider, {
+        value: store
+    }, children);
+}
+function EditorStateSelectorsProvider(param) {
+    let { children } = param;
+    const editorState = (0, _useEditorState.useEditorState)();
+    const store = (0, _react.useContext)(_EditorStateStoreContext.EditorStateStoreContext);
+    // This _must_ be set during render so that child components
+    // get the latest values from their selectors during render,
+    // if they happen to render before store.notifyListeners()
+    // is called
+    store.setState(editorState);
+    // This means that we get a double-render whenever the selectors update,
+    // but everything is consistent during both renders.
+    // Only components with new selector values will render on
+    // the second render cycle
+    (0, _react.useLayoutEffect)(()=>{
+        store.notifyListeners();
+    }, [
+        editorState,
+        store
+    ]);
+    return children;
+}

package/dist/cjs/components/ProseMirror.js

@@ -10,14 +10,13 @@ Object.defineProperty(exports, "ProseMirror", {
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _ChildDescriptionsContext = require("../contexts/ChildDescriptionsContext.js");
-const _CompositionContext = require("../contexts/CompositionContext.js");
 const _EditorContext = require("../contexts/EditorContext.js");
 const _EditorStateContext = require("../contexts/EditorStateContext.js");
 const _NodeViewContext = require("../contexts/NodeViewContext.js");
 const _computeDocDeco = require("../decorations/computeDocDeco.js");
 const _viewDecorations = require("../decorations/viewDecorations.js");
 const _useEditor = require("../hooks/useEditor.js");
-const _reactKeys = require("../plugins/reactKeys.js");
+const _EditorStateSelectorsProvider = require("./EditorStateSelectorsProvider.js");
 const _LayoutGroup = require("./LayoutGroup.js");
 const _ProseMirrorDoc = require("./ProseMirrorDoc.js");
 function _getRequireWildcardCache(nodeInterop) {
@@ -104,26 +103,18 @@ function ProseMirrorInner(param) {
         decorations,
         innerDecorations
     ]);
-    const freezeFrom = _reactKeys.reactKeysPluginKey.getState(state)?.freezeFrom ?? null;
-    const compositionContextValue = (0, _react.useMemo)(()=>({
-            freezeFrom
-        }), [
-        freezeFrom
-    ]);
     return /*#__PURE__*/ _react.default.createElement(_EditorContext.EditorContext.Provider, {
         value: editor
     }, /*#__PURE__*/ _react.default.createElement(_EditorStateContext.EditorStateContext.Provider, {
         value: state
-    }, /*#__PURE__*/ _react.default.createElement(_NodeViewContext.NodeViewContext.Provider, {
+    }, /*#__PURE__*/ _react.default.createElement(_EditorStateSelectorsProvider.EditorStateSelectorsProvider, null, /*#__PURE__*/ _react.default.createElement(_NodeViewContext.NodeViewContext.Provider, {
         value: nodeViewContextValue
     }, /*#__PURE__*/ _react.default.createElement(_ChildDescriptionsContext.ChildDescriptionsContext.Provider, {
         value: rootChildDescriptionsContextValue
-    }, /*#__PURE__*/ _react.default.createElement(_CompositionContext.CompositionContext.Provider, {
-        value: compositionContextValue
     }, /*#__PURE__*/ _react.default.createElement(_ProseMirrorDoc.DocNodeViewContext.Provider, {
         value: docNodeViewContextValue
     }, children))))));
 }
 function ProseMirror(props) {
-    return /*#__PURE__*/ _react.default.createElement(_LayoutGroup.LayoutGroup, null, /*#__PURE__*/ _react.default.createElement(ProseMirrorInner, props));
+    return /*#__PURE__*/ _react.default.createElement(_LayoutGroup.LayoutGroup, null, /*#__PURE__*/ _react.default.createElement(_EditorStateSelectorsProvider.EditorStateSelectorsRegistrar, null, /*#__PURE__*/ _react.default.createElement(ProseMirrorInner, props)));
 }

package/dist/cjs/components/nodes/NodeView.js

@@ -20,8 +20,9 @@ _export(exports, {
     }
 });
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _CompositionContext = require("../../contexts/CompositionContext.js");
 const _NodeViewContext = require("../../contexts/NodeViewContext.js");
+const _useEditorStateSelector = require("../../hooks/useEditorStateSelector.js");
+const _reactKeys = require("../../plugins/reactKeys.js");
 const _DefaultNodeView = require("./DefaultNodeView.js");
 const _NodeViewConstructorView = require("./NodeViewConstructorView.js");
 const _ReactNodeView = require("./ReactNodeView.js");
@@ -69,7 +70,7 @@ function _interop_require_wildcard(obj, nodeInterop) {
 const NodeView = /*#__PURE__*/ (0, _react.memo)(function NodeView(param) {
     let { forceRemount, ...props } = param;
     const renderRef = (0, _react.useRef)(null);
-    const { freezeFrom } = (0, _react.useContext)(_CompositionContext.CompositionContext);
+    const frozen = (0, _useEditorStateSelector.useEditorStateSelector)((state)=>_reactKeys.reactKeysPluginKey.getState(state)?.freezeFrom === props.getPos());
     const { components, constructors } = (0, _react.useContext)(_NodeViewContext.NodeViewContext);
     const committedFrozenRef = (0, _react.useRef)(false);
     const component = components[props.node.type.name] ?? _DefaultNodeView.DefaultNodeView;
@@ -98,11 +99,6 @@ const NodeView = /*#__PURE__*/ (0, _react.memo)(function NodeView(param) {
         constructor,
         component
     ]);
-    // It's not generally safe to access getPos during render, because the
-    // component may not re-render when its return value would change. Here it's
-    // safe because we only use it to _suppress_ commits that would otherwise
-    // have happened.
-    const frozen = props.getPos() === freezeFrom;
     // Protect content while frozen, and also through the single render where we
     // leave the frozen state: `committedFrozenRef` still reflects the previous
     // commit, so we keep returning the exact same cached element reference.

package/dist/cjs/contexts/EditorStateStoreContext.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    EditorStateStoreContext: function() {
+        return EditorStateStoreContext;
+    },
+    createEditorStateStore: function() {
+        return createEditorStateStore;
+    }
+});
+const _react = require("react");
+function createEditorStateStore() {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let state = null;
+    let pendingNotify = false;
+    const listeners = new Set();
+    return {
+        getState: ()=>state,
+        subscribe: (listener)=>{
+            listeners.add(listener);
+            return ()=>listeners.delete(listener);
+        },
+        setState: (newState)=>{
+            if (state !== newState) {
+                state = newState;
+                pendingNotify = true;
+            }
+        },
+        notifyListeners: ()=>{
+            if (pendingNotify) {
+                pendingNotify = false;
+                listeners.forEach((l)=>l());
+            }
+        }
+    };
+}
+const EditorStateStoreContext = (0, _react.createContext)(null);

package/dist/cjs/hooks/useEditorStateSelector.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useEditorStateSelector", {
+    enumerable: true,
+    get: function() {
+        return useEditorStateSelector;
+    }
+});
+const _react = require("react");
+const _EditorStateStoreContext = require("../contexts/EditorStateStoreContext.js");
+function useEditorStateSelector(selector) {
+    const store = (0, _react.useContext)(_EditorStateStoreContext.EditorStateStoreContext);
+    const selectorRef = (0, _react.useRef)(selector);
+    selectorRef.current = selector;
+    const getSnapshot = ()=>selectorRef.current(store.getState());
+    return (0, _react.useSyncExternalStore)(store.subscribe, getSnapshot, getSnapshot);
+}

package/dist/cjs/index.js

@@ -34,6 +34,9 @@ _export(exports, {
     useEditorState: function() {
         return _useEditorState.useEditorState;
     },
+    useEditorStateSelector: function() {
+        return _useEditorStateSelector.useEditorStateSelector;
+    },
     useIgnoreMutation: function() {
         return _useIgnoreMutation.useIgnoreMutation;
     },
@@ -71,6 +74,7 @@ const _useEditorEventCallback = require("./hooks/useEditorEventCallback.js");
 const _useEditorEventListener = require("./hooks/useEditorEventListener.js");
 const _useEditorState = require("./hooks/useEditorState.js");
 const _useNodePos = require("./hooks/useNodePos.js");
+const _useEditorStateSelector = require("./hooks/useEditorStateSelector.js");
 const _useStopEvent = require("./hooks/useStopEvent.js");
 const _useSelectNode = require("./hooks/useSelectNode.js");
 const _useIgnoreMutation = require("./hooks/useIgnoreMutation.js");

package/dist/cjs/plugins/beforeInputPlugin.js

@@ -11,6 +11,7 @@ Object.defineProperty(exports, "beforeInputPlugin", {
 const _prosemirrormodel = require("prosemirror-model");
 const _prosemirrorstate = require("prosemirror-state");
 const _ReactEditorView = require("../ReactEditorView.js");
+const _browser = require("../browser.js");
 const _CursorWrapper = require("../components/CursorWrapper.js");
 const _ReactWidgetType = require("../decorations/ReactWidgetType.js");
 const _viewdesc = require("../viewdesc.js");
@@ -93,6 +94,13 @@ function beforeInputPlugin() {
         view.input.compositionNodes = [];
         view.input.compositionID++;
     }
+    function teardownCompositionAndUnfreeze(view, event) {
+        teardownComposition(view, event.timeStamp);
+        view.dispatch(view.state.tr.setMeta(_reactKeys.reactKeysPluginKey, {
+            cursorWrapper: null,
+            freezeFrom: null
+        }));
+    }
     return new _prosemirrorstate.Plugin({
         view () {
             return {
@@ -112,11 +120,17 @@ function beforeInputPlugin() {
                     const storedMarks = view.state.selection.empty ? view.state.storedMarks : view.state.storedMarks ?? (view.state.selection instanceof _prosemirrorstate.TextSelection ? view.state.selection.$from.marksAcross(view.state.selection.$to) : null);
                     view.dispatch(view.state.tr.deleteSelection().setStoredMarks(storedMarks));
                     handleGapCursorComposition(view);
-                    if (storedMarks != null) {
+                    const { selection } = view.state;
+                    const tr = view.state.tr.delete(selection.from, selection.to);
+                    const $from = tr.doc.resolve(tr.mapping.map(selection.from));
+                    const isEmptyTextblock = $from.parent.isTextblock && $from.parent.childCount === 0;
+                    if (storedMarks != null || _browser.browser.safari && isEmptyTextblock) {
                         view.dispatch(view.state.tr.setMeta(_reactKeys.reactKeysPluginKey, {
                             cursorWrapper: (0, _ReactWidgetType.widget)(view.state.selection.from, _CursorWrapper.CursorWrapper, {
                                 key: "cursor-wrapper",
-                                marks: storedMarks,
+                                ...storedMarks !== null && {
+                                    marks: storedMarks
+                                },
                                 side: 0,
                                 raw: true
                             })
@@ -167,13 +181,27 @@ function beforeInputPlugin() {
                 compositionend (view, event) {
                     if (!(view instanceof _ReactEditorView.ReactEditorView)) return false;
                     if (!view.composing) return false;
-                    teardownComposition(view, event.timeStamp);
-                    view.dispatch(view.state.tr.setMeta(_reactKeys.reactKeysPluginKey, {
-                        cursorWrapper: null,
-                        freezeFrom: null
-                    }));
+                    teardownCompositionAndUnfreeze(view, event);
                     return true;
                 },
+                contextmenu (view, event) {
+                    if (!(view instanceof _ReactEditorView.ReactEditorView)) return false;
+                    if (!view.composing) return false;
+                    teardownCompositionAndUnfreeze(view, event);
+                    return false;
+                },
+                mousedown (view, event) {
+                    if (!(view instanceof _ReactEditorView.ReactEditorView)) return false;
+                    if (!view.composing) return false;
+                    teardownCompositionAndUnfreeze(view, event);
+                    return false;
+                },
+                touchstart (view, event) {
+                    if (!(view instanceof _ReactEditorView.ReactEditorView)) return false;
+                    if (!view.composing) return false;
+                    teardownCompositionAndUnfreeze(view, event);
+                    return false;
+                },
                 beforeinput (view, event) {
                     if (event.inputType !== "insertFromComposition") {
                         event.preventDefault();

package/dist/cjs/viewdesc.js

@@ -370,6 +370,7 @@ let ViewDesc = class ViewDesc {
     // case we just use whatever domFromPos produces as a best effort.
     setSelection(anchor, head, view) {
         let force = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : false;
+        if (view.composing) return;
         // If the selection falls entirely in a child, give it to that child
         const from = Math.min(anchor, head), to = Math.max(anchor, head);
         for(let i = 0, offset = 0; i < this.children.length; i++){

package/dist/esm/ReactEditorView.js

@@ -190,10 +190,10 @@ function changedNodeViews(a, b) {
         const nextSelection = this.nextProps.state.selection;
         const currentSelection = this.prevState.selection;
         const selectionChanged = !nextSelection.eq(currentSelection);
-        if (selectionChanged && !this.composing) {
+        if (selectionChanged) {
             super.update(this.nextProps);
         } else {
-            // If the selection hasn't changed between renders or we're composing, force
+            // If the selection hasn't changed between renders, force
             // prosemirror-view to skip the selectionToDOM call. If a render happens after a DOM
             // selection change but before the "selectionchange" event fired, calling
             // selectionToDOM will cause the selection to be reset to its previous position.

package/dist/esm/components/EditorStateSelectorsProvider.js

@@ -0,0 +1,31 @@
+import React, { useContext, useLayoutEffect, useMemo } from "react";
+import { EditorStateStoreContext, createEditorStateStore } from "../contexts/EditorStateStoreContext.js";
+import { useEditorState } from "../hooks/useEditorState.js";
+export function EditorStateSelectorsRegistrar(param) {
+    let { children } = param;
+    const store = useMemo(()=>createEditorStateStore(), []);
+    return /*#__PURE__*/ React.createElement(EditorStateStoreContext.Provider, {
+        value: store
+    }, children);
+}
+export function EditorStateSelectorsProvider(param) {
+    let { children } = param;
+    const editorState = useEditorState();
+    const store = useContext(EditorStateStoreContext);
+    // This _must_ be set during render so that child components
+    // get the latest values from their selectors during render,
+    // if they happen to render before store.notifyListeners()
+    // is called
+    store.setState(editorState);
+    // This means that we get a double-render whenever the selectors update,
+    // but everything is consistent during both renders.
+    // Only components with new selector values will render on
+    // the second render cycle
+    useLayoutEffect(()=>{
+        store.notifyListeners();
+    }, [
+        editorState,
+        store
+    ]);
+    return children;
+}

package/dist/esm/components/ProseMirror.js

@@ -1,13 +1,12 @@
 import React, { useMemo, useState } from "react";
 import { ChildDescriptionsContext } from "../contexts/ChildDescriptionsContext.js";
-import { CompositionContext } from "../contexts/CompositionContext.js";
 import { EditorContext } from "../contexts/EditorContext.js";
 import { EditorStateContext } from "../contexts/EditorStateContext.js";
 import { NodeViewContext } from "../contexts/NodeViewContext.js";
 import { computeDocDeco } from "../decorations/computeDocDeco.js";
 import { viewDecorations } from "../decorations/viewDecorations.js";
 import { useEditor } from "../hooks/useEditor.js";
-import { reactKeysPluginKey } from "../plugins/reactKeys.js";
+import { EditorStateSelectorsProvider, EditorStateSelectorsRegistrar } from "./EditorStateSelectorsProvider.js";
 import { LayoutGroup } from "./LayoutGroup.js";
 import { DocNodeViewContext } from "./ProseMirrorDoc.js";
 function getPos() {
@@ -53,26 +52,18 @@ function ProseMirrorInner(param) {
         decorations,
         innerDecorations
     ]);
-    const freezeFrom = reactKeysPluginKey.getState(state)?.freezeFrom ?? null;
-    const compositionContextValue = useMemo(()=>({
-            freezeFrom
-        }), [
-        freezeFrom
-    ]);
     return /*#__PURE__*/ React.createElement(EditorContext.Provider, {
         value: editor
     }, /*#__PURE__*/ React.createElement(EditorStateContext.Provider, {
         value: state
-    }, /*#__PURE__*/ React.createElement(NodeViewContext.Provider, {
+    }, /*#__PURE__*/ React.createElement(EditorStateSelectorsProvider, null, /*#__PURE__*/ React.createElement(NodeViewContext.Provider, {
         value: nodeViewContextValue
     }, /*#__PURE__*/ React.createElement(ChildDescriptionsContext.Provider, {
         value: rootChildDescriptionsContextValue
-    }, /*#__PURE__*/ React.createElement(CompositionContext.Provider, {
-        value: compositionContextValue
     }, /*#__PURE__*/ React.createElement(DocNodeViewContext.Provider, {
         value: docNodeViewContextValue
     }, children))))));
 }
 export function ProseMirror(props) {
-    return /*#__PURE__*/ React.createElement(LayoutGroup, null, /*#__PURE__*/ React.createElement(ProseMirrorInner, props));
+    return /*#__PURE__*/ React.createElement(LayoutGroup, null, /*#__PURE__*/ React.createElement(EditorStateSelectorsRegistrar, null, /*#__PURE__*/ React.createElement(ProseMirrorInner, props)));
 }

package/dist/esm/components/nodes/NodeView.js

@@ -1,13 +1,14 @@
 import React, { createContext, memo, useContext, useLayoutEffect, useMemo, useReducer, useRef } from "react";
-import { CompositionContext } from "../../contexts/CompositionContext.js";
 import { NodeViewContext } from "../../contexts/NodeViewContext.js";
+import { useEditorStateSelector } from "../../hooks/useEditorStateSelector.js";
+import { reactKeysPluginKey } from "../../plugins/reactKeys.js";
 import { DefaultNodeView } from "./DefaultNodeView.js";
 import { NodeViewConstructorView } from "./NodeViewConstructorView.js";
 import { ReactNodeView } from "./ReactNodeView.js";
 export const NodeView = /*#__PURE__*/ memo(function NodeView(param) {
     let { forceRemount, ...props } = param;
     const renderRef = useRef(null);
-    const { freezeFrom } = useContext(CompositionContext);
+    const frozen = useEditorStateSelector((state)=>reactKeysPluginKey.getState(state)?.freezeFrom === props.getPos());
     const { components, constructors } = useContext(NodeViewContext);
     const committedFrozenRef = useRef(false);
     const component = components[props.node.type.name] ?? DefaultNodeView;
@@ -36,11 +37,6 @@ export const NodeView = /*#__PURE__*/ memo(function NodeView(param) {
         constructor,
         component
     ]);
-    // It's not generally safe to access getPos during render, because the
-    // component may not re-render when its return value would change. Here it's
-    // safe because we only use it to _suppress_ commits that would otherwise
-    // have happened.
-    const frozen = props.getPos() === freezeFrom;
     // Protect content while frozen, and also through the single render where we
     // leave the frozen state: `committedFrozenRef` still reflects the previous
     // commit, so we keep returning the exact same cached element reference.

package/dist/esm/contexts/EditorStateStoreContext.js

@@ -0,0 +1,27 @@
+import { createContext } from "react";
+export function createEditorStateStore() {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    let state = null;
+    let pendingNotify = false;
+    const listeners = new Set();
+    return {
+        getState: ()=>state,
+        subscribe: (listener)=>{
+            listeners.add(listener);
+            return ()=>listeners.delete(listener);
+        },
+        setState: (newState)=>{
+            if (state !== newState) {
+                state = newState;
+                pendingNotify = true;
+            }
+        },
+        notifyListeners: ()=>{
+            if (pendingNotify) {
+                pendingNotify = false;
+                listeners.forEach((l)=>l());
+            }
+        }
+    };
+}
+export const EditorStateStoreContext = createContext(null);

package/dist/esm/hooks/useEditorStateSelector.js

@@ -0,0 +1,16 @@
+import { useContext, useRef, useSyncExternalStore } from "react";
+import { EditorStateStoreContext } from "../contexts/EditorStateStoreContext.js";
+/**
+ * Select a piece of the EditorState, a la Redux’s
+ * `useSelector`.
+ *
+ * This hook will only trigger a re-render of the
+ * consuming component if the return value of the selector
+ * changes.
+ */ export function useEditorStateSelector(selector) {
+    const store = useContext(EditorStateStoreContext);
+    const selectorRef = useRef(selector);
+    selectorRef.current = selector;
+    const getSnapshot = ()=>selectorRef.current(store.getState());
+    return useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}

package/dist/esm/index.js

@@ -8,6 +8,7 @@ export { useEditorEventCallback } from "./hooks/useEditorEventCallback.js";
 export { useEditorEventListener } from "./hooks/useEditorEventListener.js";
 export { useEditorState } from "./hooks/useEditorState.js";
 export { useNodePos } from "./hooks/useNodePos.js";
+export { useEditorStateSelector } from "./hooks/useEditorStateSelector.js";
 export { useStopEvent } from "./hooks/useStopEvent.js";
 export { useSelectNode } from "./hooks/useSelectNode.js";
 export { useIgnoreMutation } from "./hooks/useIgnoreMutation.js";

package/dist/esm/plugins/beforeInputPlugin.js

@@ -1,6 +1,7 @@
 import { Fragment, Slice } from "prosemirror-model";
 import { Plugin, TextSelection } from "prosemirror-state";
 import { ReactEditorView } from "../ReactEditorView.js";
+import { browser } from "../browser.js";
 import { CursorWrapper } from "../components/CursorWrapper.js";
 import { widget } from "../decorations/ReactWidgetType.js";
 import { CompositionViewDesc, TextViewDesc, findTextInFragment } from "../viewdesc.js";
@@ -83,6 +84,13 @@ export function beforeInputPlugin() {
         view.input.compositionNodes = [];
         view.input.compositionID++;
     }
+    function teardownCompositionAndUnfreeze(view, event) {
+        teardownComposition(view, event.timeStamp);
+        view.dispatch(view.state.tr.setMeta(reactKeysPluginKey, {
+            cursorWrapper: null,
+            freezeFrom: null
+        }));
+    }
     return new Plugin({
         view () {
             return {
@@ -102,11 +110,17 @@ export function beforeInputPlugin() {
                     const storedMarks = view.state.selection.empty ? view.state.storedMarks : view.state.storedMarks ?? (view.state.selection instanceof TextSelection ? view.state.selection.$from.marksAcross(view.state.selection.$to) : null);
                     view.dispatch(view.state.tr.deleteSelection().setStoredMarks(storedMarks));
                     handleGapCursorComposition(view);
-                    if (storedMarks != null) {
+                    const { selection } = view.state;
+                    const tr = view.state.tr.delete(selection.from, selection.to);
+                    const $from = tr.doc.resolve(tr.mapping.map(selection.from));
+                    const isEmptyTextblock = $from.parent.isTextblock && $from.parent.childCount === 0;
+                    if (storedMarks != null || browser.safari && isEmptyTextblock) {
                         view.dispatch(view.state.tr.setMeta(reactKeysPluginKey, {
                             cursorWrapper: widget(view.state.selection.from, CursorWrapper, {
                                 key: "cursor-wrapper",
-                                marks: storedMarks,
+                                ...storedMarks !== null && {
+                                    marks: storedMarks
+                                },
                                 side: 0,
                                 raw: true
                             })
@@ -157,13 +171,27 @@ export function beforeInputPlugin() {
                 compositionend (view, event) {
                     if (!(view instanceof ReactEditorView)) return false;
                     if (!view.composing) return false;
-                    teardownComposition(view, event.timeStamp);
-                    view.dispatch(view.state.tr.setMeta(reactKeysPluginKey, {
-                        cursorWrapper: null,
-                        freezeFrom: null
-                    }));
+                    teardownCompositionAndUnfreeze(view, event);
                     return true;
                 },
+                contextmenu (view, event) {
+                    if (!(view instanceof ReactEditorView)) return false;
+                    if (!view.composing) return false;
+                    teardownCompositionAndUnfreeze(view, event);
+                    return false;
+                },
+                mousedown (view, event) {
+                    if (!(view instanceof ReactEditorView)) return false;
+                    if (!view.composing) return false;
+                    teardownCompositionAndUnfreeze(view, event);
+                    return false;
+                },
+                touchstart (view, event) {
+                    if (!(view instanceof ReactEditorView)) return false;
+                    if (!view.composing) return false;
+                    teardownCompositionAndUnfreeze(view, event);
+                    return false;
+                },
                 beforeinput (view, event) {
                     if (event.inputType !== "insertFromComposition") {
                         event.preventDefault();

package/dist/esm/viewdesc.js

@@ -336,6 +336,7 @@ export class ViewDesc {
     // case we just use whatever domFromPos produces as a best effort.
     setSelection(anchor, head, view) {
         let force = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : false;
+        if (view.composing) return;
         // If the selection falls entirely in a child, give it to that child
         const from = Math.min(anchor, head), to = Math.max(anchor, head);
         for(let i = 0, offset = 0; i < this.children.length; i++){