slate-react 0.102.0 → 0.104.0

package/dist/index.js

@@ -221,6 +221,7 @@ var useSlateStatic = function useSlateStatic() {
   return editor;
 };
 
+var _navigator$userAgent$, _navigator$userAgent$2;
 var REACT_MAJOR_VERSION = parseInt(React.version.split('.')[0], 10);
 var IS_IOS = typeof navigator !== 'undefined' && typeof window !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
 var IS_APPLE = typeof navigator !== 'undefined' && /Mac OS X/.test(navigator.userAgent);
@@ -243,6 +244,8 @@ var IS_WECHATBROWSER = typeof navigator !== 'undefined' && /.*Wechat/.test(navig
 // Check if DOM is available as React does internally.
 // https://github.com/facebook/react/blob/master/packages/shared/ExecutionEnvironment.js
 var CAN_USE_DOM = !!(typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined');
+// Check if the browser is Safari and older than 17
+var IS_SAFARI_LEGACY = typeof navigator !== 'undefined' && /Safari/.test(navigator.userAgent) && /Version\/(\d+)/.test(navigator.userAgent) && ((_navigator$userAgent$ = navigator.userAgent.match(/Version\/(\d+)/)) !== null && _navigator$userAgent$ !== void 0 && _navigator$userAgent$[1] ? parseInt((_navigator$userAgent$2 = navigator.userAgent.match(/Version\/(\d+)/)) === null || _navigator$userAgent$2 === void 0 ? void 0 : _navigator$userAgent$2[1], 10) < 17 : false);
 // COMPAT: Firefox/Edge Legacy don't support the `beforeinput` event
 // Chrome Legacy doesn't support `beforeinput` correctly
 var HAS_BEFORE_INPUT_SUPPORT = (!IS_CHROME_LEGACY || !IS_ANDROID_CHROME_LEGACY) && !IS_EDGE_LEGACY &&
@@ -556,6 +559,17 @@ var isTrackedMutation = function isTrackedMutation(editor, mutation, batch) {
   // Target add/remove is tracked. Track the mutation if we track the parent mutation.
   return isTrackedMutation(editor, parentMutation, batch);
 };
+/**
+ * Retrieves the deepest active element in the DOM, considering nested shadow DOMs.
+ */
+var getActiveElement = function getActiveElement() {
+  var activeElement = document.activeElement;
+  while ((_activeElement = activeElement) !== null && _activeElement !== void 0 && _activeElement.shadowRoot && (_activeElement$shadow = activeElement.shadowRoot) !== null && _activeElement$shadow !== void 0 && _activeElement$shadow.activeElement) {
+    var _activeElement, _activeElement$shadow, _activeElement2;
+    activeElement = (_activeElement2 = activeElement) === null || _activeElement2 === void 0 || (_activeElement2 = _activeElement2.shadowRoot) === null || _activeElement2 === void 0 ? void 0 : _activeElement2.activeElement;
+  }
+  return activeElement;
+};
 
 var createClass = createCommonjsModule(function (module) {
 function _defineProperties(target, props) {
@@ -3252,6 +3266,7 @@ var Editable = function Editable(props) {
     _useState4 = _slicedToArray(_useState3, 2),
     placeholderHeight = _useState4[0],
     setPlaceholderHeight = _useState4[1];
+  var processing = React.useRef(false);
   var _useTrackUserInput = useTrackUserInput(),
     onUserInput = _useTrackUserInput.onUserInput,
     receivedUserInput = _useTrackUserInput.receivedUserInput;
@@ -3293,13 +3308,26 @@ var Editable = function Editable(props) {
   // while a selection is being dragged.
   var onDOMSelectionChange = React.useMemo(function () {
     return throttle(function () {
+      var el = ReactEditor.toDOMNode(editor, editor);
+      var root = el.getRootNode();
+      if (IS_SAFARI_LEGACY && !processing.current && IS_WEBKIT && root instanceof ShadowRoot) {
+        processing.current = true;
+        var active = getActiveElement();
+        if (active) {
+          document.execCommand('indent');
+        } else {
+          slate.Transforms.deselect(editor);
+        }
+        processing.current = false;
+        return;
+      }
       var androidInputManager = androidInputManagerRef.current;
       if ((IS_ANDROID || !ReactEditor.isComposing(editor)) && (!state.isUpdatingSelection || androidInputManager !== null && androidInputManager !== void 0 && androidInputManager.isFlushing()) && !state.isDraggingInternally) {
-        var root = ReactEditor.findDocumentOrShadowRoot(editor);
-        var activeElement = root.activeElement;
-        var el = ReactEditor.toDOMNode(editor, editor);
-        var domSelection = root.getSelection();
-        if (activeElement === el) {
+        var _root = ReactEditor.findDocumentOrShadowRoot(editor);
+        var activeElement = _root.activeElement;
+        var _el = ReactEditor.toDOMNode(editor, editor);
+        var domSelection = _root.getSelection();
+        if (activeElement === _el) {
           state.latestElement = activeElement;
           IS_FOCUSED.set(editor, true);
         } else {
@@ -3485,6 +3513,24 @@ var Editable = function Editable(props) {
   // to the real event sadly. (2019/11/01)
   // https://github.com/facebook/react/issues/11211
   var onDOMBeforeInput = React.useCallback(function (event) {
+    var el = ReactEditor.toDOMNode(editor, editor);
+    var root = el.getRootNode();
+    if (IS_SAFARI_LEGACY && processing !== null && processing !== void 0 && processing.current && IS_WEBKIT && root instanceof ShadowRoot) {
+      var ranges = event.getTargetRanges();
+      var range = ranges[0];
+      var newRange = new window.Range();
+      newRange.setStart(range.startContainer, range.startOffset);
+      newRange.setEnd(range.endContainer, range.endOffset);
+      // Translate the DOM Range into a Slate Range
+      var slateRange = ReactEditor.toSlateRange(editor, newRange, {
+        exactMatch: false,
+        suppressThrow: false
+      });
+      slate.Transforms.select(editor, slateRange);
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      return;
+    }
     onUserInput();
     if (!readOnly && ReactEditor.hasEditableTarget(editor, event.target) && !isDOMEventHandled(event, propsOnDOMBeforeInput)) {
       var _EDITOR_TO_USER_SELEC;
@@ -3531,18 +3577,18 @@ var Editable = function Editable(props) {
           node = _ReactEditor$toDOMPoi2[0],
           offset = _ReactEditor$toDOMPoi2[1];
         var anchorNode = (_node$parentElement = node.parentElement) === null || _node$parentElement === void 0 ? void 0 : _node$parentElement.closest('a');
-        var window = ReactEditor.getWindow(editor);
+        var _window = ReactEditor.getWindow(editor);
         if (_native && anchorNode && ReactEditor.hasDOMNode(editor, anchorNode)) {
           var _lastText$textContent;
           // Find the last text node inside the anchor.
-          var lastText = window === null || window === void 0 ? void 0 : window.document.createTreeWalker(anchorNode, NodeFilter.SHOW_TEXT).lastChild();
+          var lastText = _window === null || _window === void 0 ? void 0 : _window.document.createTreeWalker(anchorNode, NodeFilter.SHOW_TEXT).lastChild();
           if (lastText === node && ((_lastText$textContent = lastText.textContent) === null || _lastText$textContent === void 0 ? void 0 : _lastText$textContent.length) === offset) {
             _native = false;
           }
         }
         // Chrome has issues with the presence of tab characters inside elements with whiteSpace = 'pre'
         // causing abnormal insert behavior: https://bugs.chromium.org/p/chromium/issues/detail?id=1219139
-        if (_native && node.parentElement && (window === null || window === void 0 || (_window$getComputedSt = window.getComputedStyle(node.parentElement)) === null || _window$getComputedSt === void 0 ? void 0 : _window$getComputedSt.whiteSpace) === 'pre') {
+        if (_native && node.parentElement && (_window === null || _window === void 0 || (_window$getComputedSt = _window.getComputedStyle(node.parentElement)) === null || _window$getComputedSt === void 0 ? void 0 : _window$getComputedSt.whiteSpace) === 'pre') {
           var block = slate.Editor.above(editor, {
             at: anchor.path,
             match: function match(n) {
@@ -3562,14 +3608,14 @@ var Editable = function Editable(props) {
           _event$getTargetRange2 = _slicedToArray(_event$getTargetRange, 1),
           targetRange = _event$getTargetRange2[0];
         if (targetRange) {
-          var range = ReactEditor.toSlateRange(editor, targetRange, {
+          var _range = ReactEditor.toSlateRange(editor, targetRange, {
             exactMatch: false,
             suppressThrow: false
           });
-          if (!selection || !slate.Range.equals(selection, range)) {
+          if (!selection || !slate.Range.equals(selection, _range)) {
             _native = false;
             var selectionRef = !isCompositionChange && editor.selection && slate.Editor.rangeRef(editor, editor.selection);
-            slate.Transforms.select(editor, range);
+            slate.Transforms.select(editor, _range);
             if (selectionRef) {
               EDITOR_TO_USER_SELECTION.set(editor, selectionRef);
             }
@@ -3967,8 +4013,8 @@ var Editable = function Editable(props) {
           at: end
         });
         if (startVoid && endVoid && slate.Path.equals(startVoid[1], endVoid[1])) {
-          var _range = slate.Editor.range(editor, _start);
-          slate.Transforms.select(editor, _range);
+          var _range2 = slate.Editor.range(editor, _start);
+          slate.Transforms.select(editor, _range2);
         }
       }
     }, [editor, attributes.onClick, readOnly]),