slate-react 0.133.0 → 0.133.2-20261010231908

package/dist/index.js

@@ -2837,6 +2837,93 @@ function useTrackUserInput() {
   };
 }
 
+var createRestoreDomManager = function createRestoreDomManager(editor, receivedUserInput) {
+  var bufferedMutations = [];
+  var clear = function clear() {
+    bufferedMutations = [];
+  };
+  var registerMutations = function registerMutations(mutations) {
+    var _bufferedMutations;
+    if (!receivedUserInput.current) {
+      return;
+    }
+    var trackedMutations = mutations.filter(function (mutation) {
+      return slateDom.isTrackedMutation(editor, mutation, mutations);
+    });
+    (_bufferedMutations = bufferedMutations).push.apply(_bufferedMutations, _toConsumableArray(trackedMutations));
+  };
+  function restoreDOM() {
+    if (bufferedMutations.length > 0) {
+      bufferedMutations.reverse().forEach(function (mutation) {
+        if (mutation.type === 'characterData') {
+          // We don't want to restore the DOM for characterData mutations
+          // because this interrupts the composition.
+          return;
+        }
+        mutation.removedNodes.forEach(function (node) {
+          mutation.target.insertBefore(node, mutation.nextSibling);
+        });
+        mutation.addedNodes.forEach(function (node) {
+          mutation.target.removeChild(node);
+        });
+      });
+      // Clear buffered mutations to ensure we don't undo them twice
+      clear();
+    }
+  }
+  return {
+    registerMutations: registerMutations,
+    restoreDOM: restoreDOM,
+    clear: clear
+  };
+};
+
+var useCompositionDOM = function useCompositionDOM(editor) {
+  var compositionDOM = React.useMemo(function () {
+    var manager = createRestoreDomManager(editor, {
+      current: true
+    });
+    var observer = null;
+    var clear = function clear() {
+      var _observer;
+      (_observer = observer) === null || _observer === void 0 || _observer.disconnect();
+      observer = null;
+      manager.clear();
+    };
+    var track = function track(text) {
+      if (!observer) {
+        if (!(text !== null && text !== void 0 && text.includes('\n'))) return;
+        observer = new MutationObserver(manager.registerMutations);
+      }
+      observer.observe(ReactEditor.toDOMNode(editor, editor), {
+        childList: true,
+        subtree: true
+      });
+    };
+    var pause = function pause() {
+      if (!observer) return;
+      manager.registerMutations(observer.takeRecords());
+      observer.disconnect();
+    };
+    var restore = function restore() {
+      pause();
+      manager.restoreDOM();
+    };
+    return {
+      track: track,
+      pause: pause,
+      restore: restore,
+      clear: clear
+    };
+  }, [editor]);
+  React.useEffect(function () {
+    return function () {
+      return compositionDOM.clear();
+    };
+  }, [compositionDOM]);
+  return compositionDOM;
+};
+
 function _createForOfIteratorHelper$1(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray$1(r)) || e) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: true } : { done: false, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = true, u = false; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = true, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray$1(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray$1(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray$1(r, a) : void 0; } }
 function _arrayLikeToArray$1(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
@@ -2964,47 +3051,6 @@ module.exports = _inherits, module.exports.__esModule = true, module.exports["de
 
 var _inherits = unwrapExports(inherits);
 
-var createRestoreDomManager = function createRestoreDomManager(editor, receivedUserInput) {
-  var bufferedMutations = [];
-  var clear = function clear() {
-    bufferedMutations = [];
-  };
-  var registerMutations = function registerMutations(mutations) {
-    var _bufferedMutations;
-    if (!receivedUserInput.current) {
-      return;
-    }
-    var trackedMutations = mutations.filter(function (mutation) {
-      return slateDom.isTrackedMutation(editor, mutation, mutations);
-    });
-    (_bufferedMutations = bufferedMutations).push.apply(_bufferedMutations, _toConsumableArray(trackedMutations));
-  };
-  function restoreDOM() {
-    if (bufferedMutations.length > 0) {
-      bufferedMutations.reverse().forEach(function (mutation) {
-        if (mutation.type === 'characterData') {
-          // We don't want to restore the DOM for characterData mutations
-          // because this interrupts the composition.
-          return;
-        }
-        mutation.removedNodes.forEach(function (node) {
-          mutation.target.insertBefore(node, mutation.nextSibling);
-        });
-        mutation.addedNodes.forEach(function (node) {
-          mutation.target.removeChild(node);
-        });
-      });
-      // Clear buffered mutations to ensure we don't undo them twice
-      clear();
-    }
-  }
-  return {
-    registerMutations: registerMutations,
-    restoreDOM: restoreDOM,
-    clear: clear
-  };
-};
-
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var MUTATION_OBSERVER_CONFIG = {
@@ -3164,6 +3210,7 @@ var Editable = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
     placeholderHeight = _useState4[0],
     setPlaceholderHeight = _useState4[1];
   var processing = React.useRef(false);
+  var compositionDOM = useCompositionDOM(editor);
   var _useTrackUserInput = useTrackUserInput(),
     onUserInput = _useTrackUserInput.onUserInput,
     receivedUserInput = _useTrackUserInput.receivedUserInput;
@@ -3485,6 +3532,9 @@ var Editable = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
       // COMPAT: use composition change events as a hint to where we should insert
       // composition text if we aren't composing to work around https://github.com/ianstormtaylor/slate/issues/5038
       if (isCompositionChange && ReactEditor.isComposing(editor)) {
+        if (slateDom.IS_CHROME) {
+          compositionDOM.track(event.data);
+        }
         return;
       }
       var _native = false;
@@ -3709,7 +3759,7 @@ var Editable = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
         slate.Transforms.select(editor, toRestore);
       }
     }
-  }, [editor, onDOMSelectionChange, onUserInput, propsOnDOMBeforeInput, readOnly, scheduleOnDOMSelectionChange]);
+  }, [editor, onDOMSelectionChange, onUserInput, propsOnDOMBeforeInput, compositionDOM, readOnly, scheduleOnDOMSelectionChange]);
   var callbackRef = React.useCallback(function (node) {
     if (node == null) {
       onDOMSelectionChange.cancel();
@@ -3904,6 +3954,7 @@ var Editable = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
       }
     }, [attributes.onBeforeInput, editor, readOnly]),
     onInput: React.useCallback(function (event) {
+      compositionDOM.pause();
       if (isEventHandled(event, attributes.onInput)) {
         return;
       }
@@ -3935,7 +3986,7 @@ var Editable = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
       if (!ReactEditor.isFocused(editor)) {
         handleNativeHistoryEvents(editor, event.nativeEvent);
       }
-    }, [attributes.onInput, editor]),
+    }, [attributes.onInput, editor, compositionDOM]),
     onBlur: React.useCallback(function (event) {
       if (readOnly || state.isUpdatingSelection || !ReactEditor.hasSelectableTarget(editor, event.target) || isEventHandled(event, attributes.onBlur)) {
         return;
@@ -4046,6 +4097,7 @@ var Editable = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
         }
         (_androidInputManagerR3 = androidInputManagerRef.current) === null || _androidInputManagerR3 === void 0 || _androidInputManagerR3.handleCompositionEnd(event);
         if (isEventHandled(event, attributes.onCompositionEnd) || slateDom.IS_ANDROID) {
+          compositionDOM.clear();
           return;
         }
         // COMPAT: In Chrome, `beforeinput` events for compositions
@@ -4060,6 +4112,7 @@ var Editable = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
             slateDom.EDITOR_TO_USER_MARKS.set(editor, editor.marks);
             editor.marks = placeholderMarks;
           }
+          compositionDOM.restore();
           slate.Editor.insertText(editor, event.data);
           var userMarks = slateDom.EDITOR_TO_USER_MARKS.get(editor);
           slateDom.EDITOR_TO_USER_MARKS["delete"](editor);
@@ -4067,8 +4120,9 @@ var Editable = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
             editor.marks = userMarks;
           }
         }
+        compositionDOM.clear();
       }
-    }, [attributes.onCompositionEnd, editor]),
+    }, [attributes.onCompositionEnd, editor, compositionDOM]),
     onCompositionUpdate: React.useCallback(function (event) {
       if (ReactEditor.hasSelectableTarget(editor, event.target) && !isEventHandled(event, attributes.onCompositionUpdate) && !isDOMEventTargetInput(event)) {
         if (!ReactEditor.isComposing(editor)) {
@@ -4087,6 +4141,7 @@ var Editable = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
         if (isEventHandled(event, attributes.onCompositionStart) || slateDom.IS_ANDROID) {
           return;
         }
+        compositionDOM.clear();
         setIsComposing(true);
         var selection = editor.selection;
         if (selection && slate.Range.isExpanded(selection)) {
@@ -4094,7 +4149,7 @@ var Editable = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
           return;
         }
       }
-    }, [attributes.onCompositionStart, editor]),
+    }, [attributes.onCompositionStart, editor, compositionDOM]),
     onCopy: React.useCallback(function (event) {
       if (ReactEditor.hasSelectableTarget(editor, event.target) && !isEventHandled(event, attributes.onCopy) && !isDOMEventTargetInput(event)) {
         event.preventDefault();