@handlewithcare/react-prosemirror 3.1.1 → 3.1.3

package/README.md

@@ -90,6 +90,7 @@ import "prosemirror-view/style/prosemirror.css";
   - [`useIgnoreMutation`](#useignoremutation)
   - [`useSelectNode`](#useselectnode)
   - [`useIsNodeSelected`](#useisnodeselected)
+  - [`useIsComposingIn`](#useiscomposingin)
   - [`widget`](#widget)
   - [`reorderSiblings`](#reordersiblings)
     - [When should I use this?](#when-should-i-use-this)
@@ -764,6 +765,15 @@ This hook can be used within a node view component to subscribe to a boolean
 value determining whether this node is selected. The hook will return true when
 a NodeSelection is created whose node is this one.
 
+### `useIsComposingIn`
+
+```tsx
+type useIsComposingIn = (): boolean
+```
+
+This hook can be used within a node view component to subscribe to a boolean
+value determining whether an IME composition is active inside the node.
+
 ### `widget`
 
 ```ts

package/dist/cjs/components/ChildNodeViews.js

@@ -20,7 +20,7 @@ const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
 const _ChildDescriptionsContext = require("../contexts/ChildDescriptionsContext.js");
 const _EditorContext = require("../contexts/EditorContext.js");
 const _iterDeco = require("../decorations/iterDeco.js");
-const _useReactKeys = require("../hooks/useReactKeys.js");
+const _reactKeys = require("../plugins/reactKeys.js");
 const _props = require("../props.js");
 const _viewdesc = require("../viewdesc.js");
 const _NativeWidgetView = require("./NativeWidgetView.js");
@@ -305,7 +305,7 @@ function createChildElements(children, getInnerPos) {
 }
 const ChildNodeViews = /*#__PURE__*/ (0, _react.memo)(function ChildNodeViews(param) {
     let { getPos, node, innerDecorations } = param;
-    const reactKeys = (0, _useReactKeys.useReactKeys)();
+    const { view } = (0, _react.useContext)(_EditorContext.EditorContext);
     const getInnerPos = (0, _react.useCallback)(()=>getPos() + 1, [
         getPos
     ]);
@@ -315,11 +315,12 @@ const ChildNodeViews = /*#__PURE__*/ (0, _react.memo)(function ChildNodeViews(pa
     let widgetChildren = [];
     let lastNodeChild = null;
     (0, _iterDeco.iterDeco)(node, innerDecorations, (widget, isNative, offset, index)=>{
+        const posToKey = _reactKeys.reactKeysPluginKey.getState(view.state)?.posToKey;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const widgetMarks = widget.type.spec.marks ?? [];
         let key;
         if (isNative) {
-            key = createKey(getInnerPos(), offset, index, "native-widget", reactKeys?.posToKey, widget);
+            key = createKey(getInnerPos(), offset, index, "native-widget", posToKey, widget);
             const child = {
                 type: "native-widget",
                 widget,
@@ -336,7 +337,7 @@ const ChildNodeViews = /*#__PURE__*/ (0, _react.memo)(function ChildNodeViews(pa
             }
             keysSeen.set(key, keysSeen.size);
         } else {
-            key = createKey(getInnerPos(), offset, index, "widget", reactKeys?.posToKey, widget);
+            key = createKey(getInnerPos(), offset, index, "widget", posToKey, widget);
             const child = {
                 type: "widget",
                 widget: widget,
@@ -357,7 +358,8 @@ const ChildNodeViews = /*#__PURE__*/ (0, _react.memo)(function ChildNodeViews(pa
         widgetChildren.push(child);
         adjustWidgetMarksForward(lastNodeChild, childMap.get(key));
     }, (childNode, outerDeco, innerDeco, offset, index)=>{
-        const key = createKey(getInnerPos(), offset, index, "node", reactKeys?.posToKey);
+        const posToKey = _reactKeys.reactKeysPluginKey.getState(view.state)?.posToKey;
+        const key = createKey(getInnerPos(), offset, index, "node", posToKey);
         const child = {
             type: "node",
             node: childNode,

package/dist/cjs/hooks/useIsComposingIn.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useIsComposingIn", {
+    enumerable: true,
+    get: function() {
+        return useIsComposingIn;
+    }
+});
+const _react = require("react");
+const _NodeView = require("../components/nodes/NodeView.js");
+const _index = require("../index.js");
+function useIsComposingIn() {
+    const [isComposing, setIsComposing] = (0, _react.useState)(false);
+    const getPos = (0, _react.useContext)(_NodeView.GetPosContext);
+    (0, _index.useEditorEventListener)("compositionstart", (view)=>{
+        const compositionRoot = view.state.selection.$from.before();
+        setIsComposing(compositionRoot === getPos());
+    });
+    (0, _index.useEditorEventListener)("compositionend", ()=>{
+        setIsComposing(false);
+    });
+    return isComposing;
+}

package/dist/cjs/index.js

@@ -37,6 +37,9 @@ _export(exports, {
     useIgnoreMutation: function() {
         return _useIgnoreMutation.useIgnoreMutation;
     },
+    useIsComposingIn: function() {
+        return _useIsComposingIn.useIsComposingIn;
+    },
     useIsEditorStatic: function() {
         return _useIsEditorStatic.useIsEditorStatic;
     },
@@ -62,6 +65,7 @@ _export(exports, {
 const _ProseMirror = require("./components/ProseMirror.js");
 const _ProseMirrorDoc = require("./components/ProseMirrorDoc.js");
 const _reorderSiblings = require("./commands/reorderSiblings.js");
+const _useIsComposingIn = require("./hooks/useIsComposingIn.js");
 const _useEditorEffect = require("./hooks/useEditorEffect.js");
 const _useEditorEventCallback = require("./hooks/useEditorEventCallback.js");
 const _useEditorEventListener = require("./hooks/useEditorEventListener.js");

package/dist/cjs/plugins/beforeInputPlugin.js

@@ -219,7 +219,19 @@ function beforeInputPlugin() {
                             }
                         case "insertText":
                             {
-                                insertText(view, event.data);
+                                const ranges = event.getTargetRanges();
+                                if (ranges.length === 0 || ranges.length === 1 && ranges[0] && ranges[0].collapsed) {
+                                    insertText(view, event.data);
+                                } else {
+                                    for (const range of ranges){
+                                        const from = view.posAtDOM(range.startContainer, range.startOffset, 1);
+                                        const to = view.posAtDOM(range.endContainer, range.endOffset, 1);
+                                        insertText(view, event.data, {
+                                            from,
+                                            to
+                                        });
+                                    }
+                                }
                                 break;
                             }
                         case "deleteWordBackward":

package/dist/esm/components/ChildNodeViews.js

@@ -2,7 +2,7 @@ import React, { cloneElement, createElement, memo, useCallback, useContext, useR
 import { ChildDescriptionsContext } from "../contexts/ChildDescriptionsContext.js";
 import { EditorContext } from "../contexts/EditorContext.js";
 import { iterDeco } from "../decorations/iterDeco.js";
-import { useReactKeys } from "../hooks/useReactKeys.js";
+import { reactKeysPluginKey } from "../plugins/reactKeys.js";
 import { htmlAttrsToReactProps, mergeReactProps } from "../props.js";
 import { sameOuterDeco } from "../viewdesc.js";
 import { NativeWidgetView } from "./NativeWidgetView.js";
@@ -246,7 +246,7 @@ function createChildElements(children, getInnerPos) {
 }
 export const ChildNodeViews = /*#__PURE__*/ memo(function ChildNodeViews(param) {
     let { getPos, node, innerDecorations } = param;
-    const reactKeys = useReactKeys();
+    const { view } = useContext(EditorContext);
     const getInnerPos = useCallback(()=>getPos() + 1, [
         getPos
     ]);
@@ -256,11 +256,12 @@ export const ChildNodeViews = /*#__PURE__*/ memo(function ChildNodeViews(param)
     let widgetChildren = [];
     let lastNodeChild = null;
     iterDeco(node, innerDecorations, (widget, isNative, offset, index)=>{
+        const posToKey = reactKeysPluginKey.getState(view.state)?.posToKey;
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const widgetMarks = widget.type.spec.marks ?? [];
         let key;
         if (isNative) {
-            key = createKey(getInnerPos(), offset, index, "native-widget", reactKeys?.posToKey, widget);
+            key = createKey(getInnerPos(), offset, index, "native-widget", posToKey, widget);
             const child = {
                 type: "native-widget",
                 widget,
@@ -277,7 +278,7 @@ export const ChildNodeViews = /*#__PURE__*/ memo(function ChildNodeViews(param)
             }
             keysSeen.set(key, keysSeen.size);
         } else {
-            key = createKey(getInnerPos(), offset, index, "widget", reactKeys?.posToKey, widget);
+            key = createKey(getInnerPos(), offset, index, "widget", posToKey, widget);
             const child = {
                 type: "widget",
                 widget: widget,
@@ -298,7 +299,8 @@ export const ChildNodeViews = /*#__PURE__*/ memo(function ChildNodeViews(param)
         widgetChildren.push(child);
         adjustWidgetMarksForward(lastNodeChild, childMap.get(key));
     }, (childNode, outerDeco, innerDeco, offset, index)=>{
-        const key = createKey(getInnerPos(), offset, index, "node", reactKeys?.posToKey);
+        const posToKey = reactKeysPluginKey.getState(view.state)?.posToKey;
+        const key = createKey(getInnerPos(), offset, index, "node", posToKey);
         const child = {
             type: "node",
             node: childNode,

package/dist/esm/hooks/useIsComposingIn.js

@@ -0,0 +1,17 @@
+import { useContext, useState } from "react";
+import { GetPosContext } from "../components/nodes/NodeView.js";
+import { useEditorEventListener } from "../index.js";
+/**
+ * Returns true while an IME composition is active inside the current node.
+ */ export function useIsComposingIn() {
+    const [isComposing, setIsComposing] = useState(false);
+    const getPos = useContext(GetPosContext);
+    useEditorEventListener("compositionstart", (view)=>{
+        const compositionRoot = view.state.selection.$from.before();
+        setIsComposing(compositionRoot === getPos());
+    });
+    useEditorEventListener("compositionend", ()=>{
+        setIsComposing(false);
+    });
+    return isComposing;
+}

package/dist/esm/index.js

@@ -2,6 +2,7 @@
 export { ProseMirror } from "./components/ProseMirror.js";
 export { ProseMirrorDoc } from "./components/ProseMirrorDoc.js";
 export { reorderSiblings } from "./commands/reorderSiblings.js";
+export { useIsComposingIn } from "./hooks/useIsComposingIn.js";
 export { useEditorEffect } from "./hooks/useEditorEffect.js";
 export { useEditorEventCallback } from "./hooks/useEditorEventCallback.js";
 export { useEditorEventListener } from "./hooks/useEditorEventListener.js";

package/dist/esm/plugins/beforeInputPlugin.js

@@ -209,7 +209,19 @@ export function beforeInputPlugin() {
                             }
                         case "insertText":
                             {
-                                insertText(view, event.data);
+                                const ranges = event.getTargetRanges();
+                                if (ranges.length === 0 || ranges.length === 1 && ranges[0] && ranges[0].collapsed) {
+                                    insertText(view, event.data);
+                                } else {
+                                    for (const range of ranges){
+                                        const from = view.posAtDOM(range.startContainer, range.startOffset, 1);
+                                        const to = view.posAtDOM(range.endContainer, range.endOffset, 1);
+                                        insertText(view, event.data, {
+                                            from,
+                                            to
+                                        });
+                                    }
+                                }
                                 break;
                             }
                         case "deleteWordBackward":