slate-react 0.70.2 → 0.71.1-20211141648

package/dist/slate-react.js

@@ -973,7 +973,7 @@
 	 */
 
 	var EDITOR_TO_ON_CHANGE = new WeakMap();
-	var EDITOR_TO_RESTORE_DOM = new WeakMap();
+	var NODE_TO_RESTORE_DOM = new WeakMap();
 	/**
 	 * Symbols.
 	 */
@@ -1130,6 +1130,42 @@
 	  return true;
 	};
 
+	function useContentKey(node) {
+	  var contentKeyRef = React.useRef(0);
+	  var updateAnimationFrameRef = React.useRef(null);
+
+	  var _useState = React.useState(0),
+	      _useState2 = _slicedToArray(_useState, 2),
+	      setForceRerenderCounter = _useState2[1];
+
+	  React.useEffect(function () {
+	    NODE_TO_RESTORE_DOM.set(node, function () {
+	      // Update is already queued and node hasn't re-render yet
+	      if (updateAnimationFrameRef.current) {
+	        return;
+	      }
+
+	      updateAnimationFrameRef.current = requestAnimationFrame(function () {
+	        setForceRerenderCounter(function (state) {
+	          return state + 1;
+	        });
+	        updateAnimationFrameRef.current = null;
+	      });
+	      contentKeyRef.current++;
+	    });
+	    return function () {
+	      NODE_TO_RESTORE_DOM["delete"](node);
+	    };
+	  }, [node]); // Node was restored => clear scheduled update
+
+	  if (updateAnimationFrameRef.current) {
+	    cancelAnimationFrame(updateAnimationFrameRef.current);
+	    updateAnimationFrameRef.current = null;
+	  }
+
+	  return contentKeyRef.current;
+	}
+
 	/**
 	 * Text.
 	 */
@@ -1173,9 +1209,11 @@
 	      NODE_TO_ELEMENT["delete"](text);
 	    }
 	  });
+	  var contentKey = IS_ANDROID ? useContentKey(text) : undefined;
 	  return /*#__PURE__*/React__default['default'].createElement("span", {
 	    "data-slate-node": "text",
-	    ref: ref
+	    ref: ref,
+	    key: contentKey
 	  }, children);
 	};
 
@@ -1279,11 +1317,20 @@
 	      NODE_TO_ELEMENT["delete"](element);
 	    }
 	  });
-	  return renderElement({
+	  var content = renderElement({
 	    attributes: attributes,
 	    children: children,
 	    element: element
 	  });
+
+	  if (IS_ANDROID) {
+	    var contentKey = useContentKey(element);
+	    return /*#__PURE__*/React__default['default'].createElement(React.Fragment, {
+	      key: contentKey
+	    }, content);
+	  }
+
+	  return content;
 	};
 
 	var MemoizedElement = /*#__PURE__*/React__default['default'].memo(Element, function (prev, next) {
@@ -2489,9 +2536,12 @@
 	  }, attributes, {
 	    // COMPAT: Certain browsers don't support the `beforeinput` event, so we'd
 	    // have to use hacks to make these replacement-based features work.
-	    spellCheck: !HAS_BEFORE_INPUT_SUPPORT ? false : attributes.spellCheck,
-	    autoCorrect: !HAS_BEFORE_INPUT_SUPPORT ? 'false' : attributes.autoCorrect,
-	    autoCapitalize: !HAS_BEFORE_INPUT_SUPPORT ? 'false' : attributes.autoCapitalize,
+	    // For SSR situations HAS_BEFORE_INPUT_SUPPORT is false and results in prop
+	    // mismatch warning app moves to browser. Pass-through consumer props when
+	    // not CAN_USE_DOM (SSR) and default to falsy value
+	    spellCheck: HAS_BEFORE_INPUT_SUPPORT || !CAN_USE_DOM ? attributes.spellCheck : false,
+	    autoCorrect: HAS_BEFORE_INPUT_SUPPORT || !CAN_USE_DOM ? attributes.autoCorrect : 'false',
+	    autoCapitalize: HAS_BEFORE_INPUT_SUPPORT || !CAN_USE_DOM ? attributes.autoCapitalize : 'false',
 	    "data-slate-editor": true,
 	    "data-slate-node": "value",
 	    // explicitly set this
@@ -4175,19 +4225,6 @@
 	  return removedNodes.length > 0 && addedNodes.length === 0 && characterDataMutations.length > 0;
 	};
 
-	function restoreDOM(editor) {
-	  try {
-	    var onRestoreDOM = EDITOR_TO_RESTORE_DOM.get(editor);
-
-	    if (onRestoreDOM) {
-	      onRestoreDOM();
-	    }
-	  } catch (err) {
-	    // eslint-disable-next-line no-console
-	    console.error(err);
-	  }
-	}
-
 	function _createForOfIteratorHelper$1(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$1(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, 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 normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 
 	function _unsupportedIterableToArray$1(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$1(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen); }
@@ -4218,15 +4255,17 @@
 	 * - Line breaks
 	 *
 	 * @param editor
+	 * @param restoreDOM
 	 */
 
 
-	var AndroidInputManager = function AndroidInputManager(editor) {
+	var AndroidInputManager = function AndroidInputManager(editor, restoreDOM) {
 	  var _this = this;
 
 	  _classCallCheck(this, AndroidInputManager);
 
 	  this.editor = editor;
+	  this.restoreDOM = restoreDOM;
 	  /**
 	   * Handle MutationObserver flush
 	   *
@@ -4241,7 +4280,7 @@
 	      // eslint-disable-next-line no-console
 	      console.error(err); // Failed to reconcile mutations, restore DOM to its previous state
 
-	      restoreDOM(_this.editor);
+	      _this.restoreDOM();
 	    }
 	  };
 	  /**
@@ -4309,10 +4348,9 @@
 
 	  this.insertBreak = function () {
 	    var selection = _this.editor.selection;
-	    slate.Editor.insertBreak(_this.editor); // To-do: Need a more granular solution to restoring only a specific portion
-	    // of the document. Restoring the entire document is expensive.
+	    slate.Editor.insertBreak(_this.editor);
 
-	    restoreDOM(_this.editor);
+	    _this.restoreDOM();
 
 	    if (selection) {
 	      // Compat: Move selection to the newly inserted block if it has not moved
@@ -4337,7 +4375,7 @@
 	      slate.Editor.insertText(_this.editor, text);
 	    }
 
-	    restoreDOM(_this.editor);
+	    _this.restoreDOM();
 	  };
 	  /**
 	   * Handle `backspace` that merges blocks
@@ -4347,7 +4385,8 @@
 	  this.deleteBackward = function () {
 	    slate.Editor.deleteBackward(_this.editor);
 	    ReactEditor.focus(_this.editor);
-	    restoreDOM(_this.editor);
+
+	    _this.restoreDOM();
 	  };
 	  /**
 	   * Handle mutations that remove specific leaves
@@ -4368,7 +4407,8 @@
 	          slate.Transforms["delete"](_this.editor, {
 	            at: path
 	          });
-	          restoreDOM(_this.editor);
+
+	          _this.restoreDOM();
 	        }
 	      }
 	    } catch (err) {
@@ -4379,6 +4419,7 @@
 	  };
 
 	  this.editor = editor;
+	  this.restoreDOM = restoreDOM;
 	};
 
 	function useMutationObserver(node, callback, options) {
@@ -4404,6 +4445,72 @@
 	  });
 	}
 
+	var MUTATION_OBSERVER_CONFIG$1 = {
+	  childList: true,
+	  characterData: true,
+	  subtree: true
+	};
+
+	function findClosestKnowSlateNode(domNode) {
+	  var _domEl;
+
+	  var domEl = isDOMElement(domNode) ? domNode : domNode.parentElement;
+
+	  if (domEl && !domEl.hasAttribute('data-slate-node')) {
+	    domEl = domEl.closest("[data-slate-node]");
+	  }
+
+	  var slateNode = domEl && ELEMENT_TO_NODE.get(domEl);
+
+	  if (slateNode) {
+	    return slateNode;
+	  } // Unknown dom element with a slate-slate-node attribute => the IME
+	  // most likely duplicated the node so we have to restore the parent
+
+
+	  return (_domEl = domEl) !== null && _domEl !== void 0 && _domEl.parentElement ? findClosestKnowSlateNode(domEl.parentElement) : null;
+	}
+
+	function useRestoreDom(node, receivedUserInput) {
+	  var editor = useSlateStatic();
+	  var mutatedNodes = React.useRef(new Set());
+	  var handleDOMMutation = React.useCallback(function (mutations) {
+	    if (!receivedUserInput.current) {
+	      return;
+	    }
+
+	    mutations.forEach(function (_ref) {
+	      var target = _ref.target;
+	      var slateNode = findClosestKnowSlateNode(target);
+
+	      if (!slateNode) {
+	        return;
+	      }
+
+	      return mutatedNodes.current.add(slateNode);
+	    });
+	  }, []);
+	  useMutationObserver(node, handleDOMMutation, MUTATION_OBSERVER_CONFIG$1); // Clear mutated nodes on every render
+
+	  mutatedNodes.current.clear();
+	  var restore = React.useCallback(function () {
+	    var mutated = Array.from(mutatedNodes.current.values()); // Filter out child nodes of nodes that will be restored anyway
+
+	    var nodesToRestore = mutated.filter(function (n) {
+	      return !mutated.some(function (m) {
+	        return slate.Path.isParent(ReactEditor.findPath(editor, m), ReactEditor.findPath(editor, n));
+	      });
+	    });
+	    nodesToRestore.forEach(function (n) {
+	      var _NODE_TO_RESTORE_DOM$;
+
+	      (_NODE_TO_RESTORE_DOM$ = NODE_TO_RESTORE_DOM.get(n)) === null || _NODE_TO_RESTORE_DOM$ === void 0 ? void 0 : _NODE_TO_RESTORE_DOM$();
+	    });
+	    mutatedNodes.current.clear();
+	  }, []);
+	  return restore;
+	}
+
 	function useTrackUserInput() {
 	  var editor = useSlateStatic();
 	  var receivedUserInput = React.useRef(false);
@@ -4444,16 +4551,14 @@
 	function useAndroidInputManager(node) {
 	  var editor = useSlateStatic();
 
-	  var _useState = React.useState(function () {
-	    return new AndroidInputManager(editor);
-	  }),
-	      _useState2 = _slicedToArray(_useState, 1),
-	      inputManager = _useState2[0];
-
 	  var _useTrackUserInput = useTrackUserInput(),
 	      receivedUserInput = _useTrackUserInput.receivedUserInput,
 	      onUserInput = _useTrackUserInput.onUserInput;
 
+	  var restoreDom = useRestoreDom(node, receivedUserInput);
+	  var inputManager = React.useMemo(function () {
+	    return new AndroidInputManager(editor, restoreDom);
+	  }, [restoreDom, editor]);
 	  var timeoutId = React.useRef(null);
 	  var isReconciling = React.useRef(false);
 	  var flush = React.useCallback(function (mutations) {
@@ -4521,17 +4626,7 @@
 	      latestElement: null
 	    };
 	  }, []);
-
-	  var _useState = React.useState(0),
-	      _useState2 = _slicedToArray(_useState, 2),
-	      contentKey = _useState2[0],
-	      setContentKey = _useState2[1];
-
-	  var onRestoreDOM = React.useCallback(function () {
-	    setContentKey(function (prev) {
-	      return prev + 1;
-	    });
-	  }, [contentKey]); // Whenever the editor updates...
+	  var contentKey = useContentKey(editor); // Whenever the editor updates...
 
 	  useIsomorphicLayoutEffect(function () {
 	    // Update element-related weak maps with the DOM element ref.
@@ -4542,10 +4637,8 @@
 	      EDITOR_TO_ELEMENT.set(editor, ref.current);
 	      NODE_TO_ELEMENT.set(editor, ref.current);
 	      ELEMENT_TO_NODE.set(ref.current, editor);
-	      EDITOR_TO_RESTORE_DOM.set(editor, onRestoreDOM);
 	    } else {
 	      NODE_TO_ELEMENT["delete"](editor);
-	      EDITOR_TO_RESTORE_DOM["delete"](editor);
 	    }
 
 	    try {