slate-react 0.126.0 → 0.126.3

package/dist/index.js

@@ -7,8 +7,8 @@ var React = require('react');
 var scrollIntoView = require('scroll-into-view-if-needed');
 var slate = require('slate');
 var slateDom = require('slate-dom');
-var resizeObserver = require('@juggle/resize-observer');
 var ReactDOM = require('react-dom');
+var resizeObserver = require('@juggle/resize-observer');
 
 function unwrapExports (x) {
 	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -231,6 +231,14 @@ function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var t
 var RESOLVE_DELAY = 25;
 // Time with no user interaction before the current user action is considered as done.
 var FLUSH_DELAY = 200;
+// Time with no composition input after which a composition that never ended is
+// treated as stale. Long enough that pausing mid-word does not cut a live
+// composition short.
+var COMPOSITION_IDLE_TIMEOUT = 5000;
+// How often a deferred flush re-checks whether the composition is still live.
+// Only bounds how quickly the value catches up with a composition that ended
+// without firing `compositionend`; one that ends normally flushes immediately.
+var COMPOSITION_RECHECK_DELAY = 50;
 // Replace with `const debug = console.log` to debug
 var debug = function debug() {};
 // Type guard to check if a value is a DataTransfer
@@ -245,6 +253,8 @@ function createAndroidInputManager(_ref) {
   var compositionEndTimeoutId = null;
   var flushTimeoutId = null;
   var actionTimeoutId = null;
+  var lastCompositionActivity = 0;
+  var compositionCleared = false;
   var idCounter = 0;
   var insertPositionHint = false;
   var applyPendingSelection = function applyPendingSelection() {
@@ -276,6 +286,43 @@ function createAndroidInputManager(_ref) {
     }
     action.run();
   };
+  // `compositionend` is not fired reliably in every browser, which Slate
+  // already works around on keydown. Deferring flushes on a composition that
+  // never ends would strand the typed text outside the value, so a composition
+  // that has gone quiet, or that has lost focus, no longer holds flushes back.
+  var isCompositionLive = function isCompositionLive() {
+    if (!slateDom.IS_COMPOSING.get(editor) || compositionCleared) {
+      return false;
+    }
+    try {
+      var editable = ReactEditor.toDOMNode(editor, editor);
+      var activeElement = ReactEditor.getWindow(editor).document.activeElement;
+      if (activeElement !== editable && !editable.contains(activeElement)) {
+        return false;
+      }
+    } catch (_unused) {
+      // Fall back to the idle check below if the editable can't be resolved.
+    }
+    return Date.now() - lastCompositionActivity < COMPOSITION_IDLE_TIMEOUT;
+  };
+  // A leaf that Slate models as empty renders as a zero-width string, which on
+  // Android is a `<br>` rather than a text node. When the IME composes the
+  // first character into such a leaf, the browser creates a text node for the
+  // composition. Applying the pending diffs re-renders that leaf as a text
+  // leaf, which unmounts the zero-width span and takes the text node the IME is
+  // composing in with it, silently cancelling the composition.
+  var hasPendingDiffsInEmptyLeaf = function hasPendingDiffsInEmptyLeaf() {
+    var _EDITOR_TO_PENDING_DI;
+    return !!((_EDITOR_TO_PENDING_DI = slateDom.EDITOR_TO_PENDING_DIFFS.get(editor)) !== null && _EDITOR_TO_PENDING_DI !== void 0 && _EDITOR_TO_PENDING_DI.some(function (_ref2) {
+      var path = _ref2.path;
+      try {
+        return slate.Node.leaf(editor, path).text.length === 0;
+      } catch (_unused2) {
+        // The path may no longer resolve if the editor changed underneath us.
+        return false;
+      }
+    }));
+  };
   var flush = function flush() {
     if (flushTimeoutId) {
       clearTimeout(flushTimeoutId);
@@ -285,6 +332,15 @@ function createAndroidInputManager(_ref) {
       clearTimeout(actionTimeoutId);
       actionTimeoutId = null;
     }
+    // Defer flushing until the composition ends, so that the re-render that
+    // would replace the composing text node cannot happen mid-composition.
+    // Composing into a leaf that already has text is unaffected: applying the
+    // diff there only updates `textContent`, so the value still updates on
+    // every `compositionupdate`.
+    if (isCompositionLive() && hasPendingDiffsInEmptyLeaf()) {
+      flushTimeoutId = setTimeout(flush, COMPOSITION_RECHECK_DELAY);
+      return;
+    }
     if (!hasPendingDiffs() && !hasPendingAction()) {
       applyPendingSelection();
       return;
@@ -305,8 +361,8 @@ function createAndroidInputManager(_ref) {
     debug('flush', slateDom.EDITOR_TO_PENDING_ACTION.get(editor), slateDom.EDITOR_TO_PENDING_DIFFS.get(editor));
     var scheduleSelectionChange = hasPendingDiffs();
     var diff;
-    while (diff = (_EDITOR_TO_PENDING_DI = slateDom.EDITOR_TO_PENDING_DIFFS.get(editor)) === null || _EDITOR_TO_PENDING_DI === void 0 ? void 0 : _EDITOR_TO_PENDING_DI[0]) {
-      var _EDITOR_TO_PENDING_DI, _EDITOR_TO_PENDING_DI2;
+    while (diff = (_EDITOR_TO_PENDING_DI2 = slateDom.EDITOR_TO_PENDING_DIFFS.get(editor)) === null || _EDITOR_TO_PENDING_DI2 === void 0 ? void 0 : _EDITOR_TO_PENDING_DI2[0]) {
+      var _EDITOR_TO_PENDING_DI2, _EDITOR_TO_PENDING_DI3;
       var pendingMarks = slateDom.EDITOR_TO_PENDING_INSERTION_MARKS.get(editor);
       if (pendingMarks !== undefined) {
         slateDom.EDITOR_TO_PENDING_INSERTION_MARKS["delete"](editor);
@@ -326,8 +382,8 @@ function createAndroidInputManager(_ref) {
       }
       // Remove diff only after we have applied it to account for it when transforming
       // pending ranges.
-      slateDom.EDITOR_TO_PENDING_DIFFS.set(editor, (_EDITOR_TO_PENDING_DI2 = slateDom.EDITOR_TO_PENDING_DIFFS.get(editor)) === null || _EDITOR_TO_PENDING_DI2 === void 0 ? void 0 : _EDITOR_TO_PENDING_DI2.filter(function (_ref2) {
-        var id = _ref2.id;
+      slateDom.EDITOR_TO_PENDING_DIFFS.set(editor, (_EDITOR_TO_PENDING_DI3 = slateDom.EDITOR_TO_PENDING_DIFFS.get(editor)) === null || _EDITOR_TO_PENDING_DI3 === void 0 ? void 0 : _EDITOR_TO_PENDING_DI3.filter(function (_ref3) {
+        var id = _ref3.id;
         return id !== diff.id;
       }));
       if (!slateDom.verifyDiffState(editor, diff)) {
@@ -371,13 +427,35 @@ function createAndroidInputManager(_ref) {
     if (compositionEndTimeoutId) {
       clearTimeout(compositionEndTimeoutId);
     }
+    // Diffs deferred by `flush` have to be applied synchronously here. IMEs
+    // that compose one syllable at a time (Hangul, kana) start the next
+    // composition in the same tick as this event, so an asynchronous render
+    // would replace the text node that composition has already started in.
+    if (hasPendingDiffsInEmptyLeaf() && !flushing) {
+      ReactDOM.flushSync(function () {
+        slateDom.IS_COMPOSING.set(editor, false);
+        flush();
+      });
+      updatePlaceholderVisibility();
+      return;
+    }
     compositionEndTimeoutId = setTimeout(function () {
       slateDom.IS_COMPOSING.set(editor, false);
       flush();
+      if (compositionCleared) {
+        var _EDITOR_TO_FORCE_REND;
+        // A cancelled composition can take the empty leaf's text node with
+        // it. A forced render lets RestoreDOM put the leaf's DOM back, so the
+        // next composition starts from a clean state instead of a bare <br>.
+        (_EDITOR_TO_FORCE_REND = slateDom.EDITOR_TO_FORCE_RENDER.get(editor)) === null || _EDITOR_TO_FORCE_REND === void 0 || _EDITOR_TO_FORCE_REND();
+      }
+      updatePlaceholderVisibility();
     }, RESOLVE_DELAY);
   };
   var handleCompositionStart = function handleCompositionStart(_event) {
     slateDom.IS_COMPOSING.set(editor, true);
+    lastCompositionActivity = Date.now();
+    compositionCleared = false;
     if (compositionEndTimeoutId) {
       clearTimeout(compositionEndTimeoutId);
       compositionEndTimeoutId = null;
@@ -396,8 +474,8 @@ function createAndroidInputManager(_ref) {
     placeholderElement.style.removeProperty('display');
   };
   var storeDiff = function storeDiff(path, diff) {
-    var _EDITOR_TO_PENDING_DI3;
-    var pendingDiffs = (_EDITOR_TO_PENDING_DI3 = slateDom.EDITOR_TO_PENDING_DIFFS.get(editor)) !== null && _EDITOR_TO_PENDING_DI3 !== void 0 ? _EDITOR_TO_PENDING_DI3 : [];
+    var _EDITOR_TO_PENDING_DI4;
+    var pendingDiffs = (_EDITOR_TO_PENDING_DI4 = slateDom.EDITOR_TO_PENDING_DIFFS.get(editor)) !== null && _EDITOR_TO_PENDING_DI4 !== void 0 ? _EDITOR_TO_PENDING_DI4 : [];
     slateDom.EDITOR_TO_PENDING_DIFFS.set(editor, pendingDiffs);
     var target = slate.Node.leaf(editor, path);
     var idx = pendingDiffs.findIndex(function (change) {
@@ -426,8 +504,8 @@ function createAndroidInputManager(_ref) {
     });
   };
   var scheduleAction = function scheduleAction(run) {
-    var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      at = _ref3.at;
+    var _ref4 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      at = _ref4.at;
     insertPositionHint = false;
     slateDom.EDITOR_TO_PENDING_SELECTION["delete"](editor);
     scheduleOnDOMSelectionChange.cancel();
@@ -454,6 +532,34 @@ function createAndroidInputManager(_ref) {
       return;
     }
     var type = event.inputType;
+    if (type === 'insertCompositionText' || type === 'deleteCompositionText') {
+      lastCompositionActivity = Date.now();
+      if (event.data) {
+        compositionCleared = false;
+      } else {
+        // The IME threw away what it was composing. The deferred text never
+        // reached the value, so the value is already in the desired state -
+        // drop the deferral instead of applying and re-deleting it, which
+        // would churn the DOM mid-composition and can make Android close the
+        // keyboard.
+        compositionCleared = true;
+        var deferredDiffs = slateDom.EDITOR_TO_PENDING_DIFFS.get(editor);
+        if (deferredDiffs !== null && deferredDiffs !== void 0 && deferredDiffs.length) {
+          var allInEmptyLeaves = deferredDiffs.every(function (_ref5) {
+            var path = _ref5.path;
+            try {
+              return slate.Node.leaf(editor, path).text.length === 0;
+            } catch (_unused3) {
+              return false;
+            }
+          });
+          if (allInEmptyLeaves) {
+            slateDom.EDITOR_TO_PENDING_DIFFS.set(editor, []);
+            slateDom.EDITOR_TO_PENDING_SELECTION["delete"](editor);
+          }
+        }
+      }
+    }
     var targetRange = null;
     var data = event.dataTransfer || event.data || undefined;
     if (insertPositionHint !== false && type !== 'insertText' && type !== 'insertCompositionText') {
@@ -827,8 +933,8 @@ function createAndroidInputManager(_ref) {
     return !!slateDom.EDITOR_TO_PENDING_ACTION.get(editor);
   };
   var hasPendingDiffs = function hasPendingDiffs() {
-    var _EDITOR_TO_PENDING_DI4;
-    return !!((_EDITOR_TO_PENDING_DI4 = slateDom.EDITOR_TO_PENDING_DIFFS.get(editor)) !== null && _EDITOR_TO_PENDING_DI4 !== void 0 && _EDITOR_TO_PENDING_DI4.length);
+    var _EDITOR_TO_PENDING_DI5;
+    return !!((_EDITOR_TO_PENDING_DI5 = slateDom.EDITOR_TO_PENDING_DIFFS.get(editor)) !== null && _EDITOR_TO_PENDING_DI5 !== void 0 && _EDITOR_TO_PENDING_DI5.length);
   };
   var hasPendingChanges = function hasPendingChanges() {
     return hasPendingAction() || hasPendingDiffs();
@@ -883,10 +989,10 @@ function createAndroidInputManager(_ref) {
     if (mutations.some(function (mutation) {
       return slateDom.isTrackedMutation(editor, mutation, mutations);
     })) {
-      var _EDITOR_TO_FORCE_REND;
+      var _EDITOR_TO_FORCE_REND2;
       // Cause a re-render to restore the dom state if we encounter tracked mutations without
       // a corresponding pending action.
-      (_EDITOR_TO_FORCE_REND = slateDom.EDITOR_TO_FORCE_RENDER.get(editor)) === null || _EDITOR_TO_FORCE_REND === void 0 || _EDITOR_TO_FORCE_REND();
+      (_EDITOR_TO_FORCE_REND2 = slateDom.EDITOR_TO_FORCE_RENDER.get(editor)) === null || _EDITOR_TO_FORCE_REND2 === void 0 || _EDITOR_TO_FORCE_REND2();
     }
   };
   return {
@@ -1034,6 +1140,7 @@ var TextString = function TextString(props) {
   var text = props.text,
     _props$isTrailing = props.isTrailing,
     isTrailing = _props$isTrailing === void 0 ? false : _props$isTrailing;
+  var editor = useSlateStatic();
   var ref = React.useRef(null);
   var getTextContent = function getTextContent() {
     return "".concat(text !== null && text !== void 0 ? text : '').concat(isTrailing ? '\n' : '');
@@ -1053,6 +1160,18 @@ var TextString = function TextString(props) {
     // null coalescing text to make sure we're not outputing "null" as a string in the extreme case it is nullish at runtime
     var textWithTrailing = getTextContent();
     if (ref.current && ref.current.textContent !== textWithTrailing) {
+      // On Android the DOM intentionally runs ahead of the value while the IME
+      // composes, since input is buffered as pending diffs. Writing
+      // `textContent` here would replace the text node the composition lives in
+      // and cancel it; the pending diffs reconcile this span when the
+      // composition ends.
+      if (slateDom.IS_ANDROID && slateDom.IS_COMPOSING.get(editor)) {
+        var _ReactEditor$getWindo;
+        var composingNode = (_ReactEditor$getWindo = ReactEditor.getWindow(editor).getSelection()) === null || _ReactEditor$getWindo === void 0 ? void 0 : _ReactEditor$getWindo.anchorNode;
+        if (composingNode && ref.current.contains(composingNode)) {
+          return;
+        }
+      }
       ref.current.textContent = textWithTrailing;
     }
     // intentionally not specifying dependencies, so that this effect runs on every render
@@ -1095,7 +1214,13 @@ var ZeroWidthString = function ZeroWidthString(props) {
   // be because accepting an IME suggestion when at the start of a block (no
   // preceding \uFEFF) removes one or more DOM elements that `toSlateRange`
   // depends on. (https://github.com/ianstormtaylor/slate/issues/5703)
-  return /*#__PURE__*/React.createElement("span", _objectSpread$6({}, attributes), !slateDom.IS_ANDROID || !isLineBreak ? "\uFEFF" : null, isLineBreak ? /*#__PURE__*/React.createElement("br", null) : null);
+  // A leaf with no text node at all forces the IME to create one when the
+  // first character is composed there, and no re-render can then touch the
+  // leaf without cancelling the composition. Rendering the zero-width space on
+  // Android too gives the composition a React-owned text node to live in; the
+  // wrapper keeps its data-slate-zero-width attributes, so selection mapping
+  // is unchanged.
+  return /*#__PURE__*/React.createElement("span", _objectSpread$6({}, attributes), "\uFEFF", isLineBreak ? /*#__PURE__*/React.createElement("br", null) : null);
 };
 
 function ownKeys$5(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }