slate-react 0.133.0 → 0.133.2-20261010231908

package/dist/components/editable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editable.d.ts","sourceRoot":"","sources":["../../../../packages/slate-react/src/components/editable.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"editable.d.ts","sourceRoot":"","sources":["../../../../packages/slate-react/src/components/editable.tsx"],"names":[],"mappings":"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"}

package/dist/hooks/use-composition-dom.d.ts

@@ -0,0 +1,8 @@
+import { ReactEditor } from '../plugin/react-editor';
+export declare const useCompositionDOM: (editor: ReactEditor) => {
+    track: (text: string | null) => void;
+    pause: () => void;
+    restore: () => void;
+    clear: () => void;
+};
+//# sourceMappingURL=use-composition-dom.d.ts.map

package/dist/hooks/use-composition-dom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-composition-dom.d.ts","sourceRoot":"","sources":["../../../../packages/slate-react/src/hooks/use-composition-dom.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAGpD,eAAO,MAAM,iBAAiB,WAAY,WAAW;kBAW5B,MAAM,GAAG,IAAI;;;;CA4BrC,CAAA"}

package/dist/index.es.js

@@ -4,7 +4,7 @@ import throttle from 'lodash/throttle';
 import React, { useContext, createContext, useRef, useEffect, useLayoutEffect, useState, memo, forwardRef, useCallback, useReducer, useMemo, Fragment, Component } from 'react';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import { Node, Range, Editor, Path, Transforms, Location, Text as Text$1, Point, Scrubber } from 'slate';
-import { DOMEditor, isTrackedMutation, EDITOR_TO_FORCE_RENDER, IS_NODE_MAP_DIRTY, EDITOR_TO_PENDING_DIFFS, EDITOR_TO_PENDING_SELECTION, applyStringDiff, EDITOR_TO_PENDING_INSERTION_MARKS, isDOMSelection, IS_COMPOSING, EDITOR_TO_PENDING_ACTION, EDITOR_TO_USER_MARKS, targetRange, verifyDiffState, EDITOR_TO_PLACEHOLDER_ELEMENT, normalizeStringDiff, mergeStringDiffs, normalizeRange, normalizePoint, CAN_USE_DOM, IS_ANDROID, EDITOR_TO_SCHEDULE_FLUSH, MARK_PLACEHOLDER_SYMBOL, PLACEHOLDER_SYMBOL, IS_WEBKIT, isTextDecorationsEqual, isElementDecorationsEqual, EDITOR_TO_KEY_TO_ELEMENT, NODE_TO_ELEMENT, ELEMENT_TO_NODE, NODE_TO_INDEX, NODE_TO_PARENT, Key, splitDecorationsByChild, IS_READ_ONLY, getActiveElement, getSelection, IS_FOCUSED, isDOMNode, getDefaultView, EDITOR_TO_WINDOW, EDITOR_TO_ELEMENT, IS_FIREFOX, containsShadowAware, EDITOR_TO_USER_SELECTION, HAS_BEFORE_INPUT_SUPPORT, isPlainTextOnlyPaste, Hotkeys, IS_CHROME, IS_FIREFOX_LEGACY, IS_IOS, IS_WECHATBROWSER, IS_UC_MOBILE, TRIPLE_CLICK, isDOMElement, EDITOR_TO_ON_CHANGE, withDOM } from 'slate-dom';
+import { DOMEditor, isTrackedMutation, EDITOR_TO_FORCE_RENDER, IS_NODE_MAP_DIRTY, EDITOR_TO_PENDING_DIFFS, EDITOR_TO_PENDING_SELECTION, applyStringDiff, EDITOR_TO_PENDING_INSERTION_MARKS, isDOMSelection, IS_COMPOSING, EDITOR_TO_PENDING_ACTION, EDITOR_TO_USER_MARKS, targetRange, verifyDiffState, EDITOR_TO_PLACEHOLDER_ELEMENT, normalizeStringDiff, mergeStringDiffs, normalizeRange, normalizePoint, CAN_USE_DOM, IS_ANDROID, EDITOR_TO_SCHEDULE_FLUSH, MARK_PLACEHOLDER_SYMBOL, PLACEHOLDER_SYMBOL, IS_WEBKIT, isTextDecorationsEqual, isElementDecorationsEqual, EDITOR_TO_KEY_TO_ELEMENT, NODE_TO_ELEMENT, ELEMENT_TO_NODE, NODE_TO_INDEX, NODE_TO_PARENT, Key, splitDecorationsByChild, IS_READ_ONLY, getActiveElement, getSelection, IS_FOCUSED, isDOMNode, getDefaultView, EDITOR_TO_WINDOW, EDITOR_TO_ELEMENT, IS_FIREFOX, containsShadowAware, IS_CHROME, EDITOR_TO_USER_SELECTION, HAS_BEFORE_INPUT_SUPPORT, isPlainTextOnlyPaste, Hotkeys, IS_FIREFOX_LEGACY, IS_IOS, IS_WECHATBROWSER, IS_UC_MOBILE, TRIPLE_CLICK, isDOMElement, EDITOR_TO_ON_CHANGE, withDOM } from 'slate-dom';
 export { NODE_TO_INDEX, NODE_TO_PARENT } from 'slate-dom';
 import ReactDOM from 'react-dom';
 import { ResizeObserver } from '@juggle/resize-observer';
@@ -2493,6 +2493,86 @@ function useTrackUserInput() {
   };
 }
 
+const createRestoreDomManager = (editor, receivedUserInput) => {
+  let bufferedMutations = [];
+  const clear = () => {
+    bufferedMutations = [];
+  };
+  const registerMutations = mutations => {
+    if (!receivedUserInput.current) {
+      return;
+    }
+    const trackedMutations = mutations.filter(mutation => isTrackedMutation(editor, mutation, mutations));
+    bufferedMutations.push(...trackedMutations);
+  };
+  function restoreDOM() {
+    if (bufferedMutations.length > 0) {
+      bufferedMutations.reverse().forEach(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(node => {
+          mutation.target.insertBefore(node, mutation.nextSibling);
+        });
+        mutation.addedNodes.forEach(node => {
+          mutation.target.removeChild(node);
+        });
+      });
+      // Clear buffered mutations to ensure we don't undo them twice
+      clear();
+    }
+  }
+  return {
+    registerMutations,
+    restoreDOM,
+    clear
+  };
+};
+
+const useCompositionDOM = editor => {
+  const compositionDOM = useMemo(() => {
+    const manager = createRestoreDomManager(editor, {
+      current: true
+    });
+    let observer = null;
+    const clear = () => {
+      var _observer;
+      (_observer = observer) === null || _observer === void 0 || _observer.disconnect();
+      observer = null;
+      manager.clear();
+    };
+    const 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
+      });
+    };
+    const pause = () => {
+      if (!observer) return;
+      manager.registerMutations(observer.takeRecords());
+      observer.disconnect();
+    };
+    const restore = () => {
+      pause();
+      manager.restoreDOM();
+    };
+    return {
+      track,
+      pause,
+      restore,
+      clear
+    };
+  }, [editor]);
+  useEffect(() => () => compositionDOM.clear(), [compositionDOM]);
+  return compositionDOM;
+};
+
 const blockPathAt = (editor, point) => {
   var _Editor$above;
   return (_Editor$above = Editor.above(editor, {
@@ -2536,44 +2616,6 @@ const deleteMovedRange = (editor, range) => {
   }
 };
 
-const createRestoreDomManager = (editor, receivedUserInput) => {
-  let bufferedMutations = [];
-  const clear = () => {
-    bufferedMutations = [];
-  };
-  const registerMutations = mutations => {
-    if (!receivedUserInput.current) {
-      return;
-    }
-    const trackedMutations = mutations.filter(mutation => isTrackedMutation(editor, mutation, mutations));
-    bufferedMutations.push(...trackedMutations);
-  };
-  function restoreDOM() {
-    if (bufferedMutations.length > 0) {
-      bufferedMutations.reverse().forEach(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(node => {
-          mutation.target.insertBefore(node, mutation.nextSibling);
-        });
-        mutation.addedNodes.forEach(node => {
-          mutation.target.removeChild(node);
-        });
-      });
-      // Clear buffered mutations to ensure we don't undo them twice
-      clear();
-    }
-  }
-  return {
-    registerMutations,
-    restoreDOM,
-    clear
-  };
-};
-
 const MUTATION_OBSERVER_CONFIG = {
   subtree: true,
   childList: true,
@@ -2693,6 +2735,7 @@ const Editable = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const deferredOperations = useRef([]);
   const [placeholderHeight, setPlaceholderHeight] = useState();
   const processing = useRef(false);
+  const compositionDOM = useCompositionDOM(editor);
   const {
     onUserInput,
     receivedUserInput
@@ -3015,6 +3058,9 @@ const Editable = /*#__PURE__*/forwardRef((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 (IS_CHROME) {
+          compositionDOM.track(event.data);
+        }
         return;
       }
       let native = false;
@@ -3232,7 +3278,7 @@ const Editable = /*#__PURE__*/forwardRef((props, forwardedRef) => {
         Transforms.select(editor, toRestore);
       }
     }
-  }, [editor, onDOMSelectionChange, onUserInput, propsOnDOMBeforeInput, readOnly, scheduleOnDOMSelectionChange]);
+  }, [editor, onDOMSelectionChange, onUserInput, propsOnDOMBeforeInput, compositionDOM, readOnly, scheduleOnDOMSelectionChange]);
   const callbackRef = useCallback(node => {
     if (node == null) {
       onDOMSelectionChange.cancel();
@@ -3444,6 +3490,7 @@ const Editable = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       }
     }, [attributes.onBeforeInput, editor, readOnly]),
     onInput: useCallback(event => {
+      compositionDOM.pause();
       if (isEventHandled(event, attributes.onInput)) {
         return;
       }
@@ -3466,7 +3513,7 @@ const Editable = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       if (!ReactEditor.isFocused(editor)) {
         handleNativeHistoryEvents(editor, event.nativeEvent);
       }
-    }, [attributes.onInput, editor]),
+    }, [attributes.onInput, editor, compositionDOM]),
     onBlur: useCallback(event => {
       if (readOnly || state.isUpdatingSelection || !ReactEditor.hasSelectableTarget(editor, event.target) || isEventHandled(event, attributes.onBlur)) {
         return;
@@ -3579,6 +3626,7 @@ const Editable = /*#__PURE__*/forwardRef((props, forwardedRef) => {
         }
         (_androidInputManagerR3 = androidInputManagerRef.current) === null || _androidInputManagerR3 === void 0 || _androidInputManagerR3.handleCompositionEnd(event);
         if (isEventHandled(event, attributes.onCompositionEnd) || IS_ANDROID) {
+          compositionDOM.clear();
           return;
         }
         // COMPAT: In Chrome, `beforeinput` events for compositions
@@ -3593,6 +3641,7 @@ const Editable = /*#__PURE__*/forwardRef((props, forwardedRef) => {
             EDITOR_TO_USER_MARKS.set(editor, editor.marks);
             editor.marks = placeholderMarks;
           }
+          compositionDOM.restore();
           Editor.insertText(editor, event.data);
           const userMarks = EDITOR_TO_USER_MARKS.get(editor);
           EDITOR_TO_USER_MARKS.delete(editor);
@@ -3600,8 +3649,9 @@ const Editable = /*#__PURE__*/forwardRef((props, forwardedRef) => {
             editor.marks = userMarks;
           }
         }
+        compositionDOM.clear();
       }
-    }, [attributes.onCompositionEnd, editor]),
+    }, [attributes.onCompositionEnd, editor, compositionDOM]),
     onCompositionUpdate: useCallback(event => {
       if (ReactEditor.hasSelectableTarget(editor, event.target) && !isEventHandled(event, attributes.onCompositionUpdate) && !isDOMEventTargetInput(event)) {
         if (!ReactEditor.isComposing(editor)) {
@@ -3620,6 +3670,7 @@ const Editable = /*#__PURE__*/forwardRef((props, forwardedRef) => {
         if (isEventHandled(event, attributes.onCompositionStart) || IS_ANDROID) {
           return;
         }
+        compositionDOM.clear();
         setIsComposing(true);
         const {
           selection
@@ -3629,7 +3680,7 @@ const Editable = /*#__PURE__*/forwardRef((props, forwardedRef) => {
           return;
         }
       }
-    }, [attributes.onCompositionStart, editor]),
+    }, [attributes.onCompositionStart, editor, compositionDOM]),
     onCopy: useCallback(event => {
       if (ReactEditor.hasSelectableTarget(editor, event.target) && !isEventHandled(event, attributes.onCopy) && !isDOMEventTargetInput(event)) {
         event.preventDefault();