slate-react 0.147.1 → 0.147.2

package/dist/slate-react.js

@@ -7207,6 +7207,75 @@
 	  return compositionDOM;
 	};
 
+	var revertMutation = function revertMutation(mutation) {
+	  var target = mutation.target;
+	  if (mutation.type === 'characterData') {
+	    target.nodeValue = mutation.oldValue;
+	  } else if (mutation.type === 'attributes' && isDOMElement(target)) {
+	    var name = mutation.attributeName;
+	    if (mutation.oldValue === null) {
+	      target.removeAttribute(name);
+	    } else {
+	      target.setAttribute(name, mutation.oldValue);
+	    }
+	  } else {
+	    mutation.addedNodes.forEach(function (node) {
+	      var _node$parentNode;
+	      return (_node$parentNode = node.parentNode) === null || _node$parentNode === void 0 ? void 0 : _node$parentNode.removeChild(node);
+	    });
+	    mutation.removedNodes.forEach(function (node) {
+	      return target.insertBefore(node, mutation.nextSibling);
+	    });
+	  }
+	};
+	var useNativeFormatDOM = function useNativeFormatDOM(editor) {
+	  var nativeFormatDOM = React.useMemo(function () {
+	    var delivered = [];
+	    var observer = null;
+	    var deliver = function deliver(mutations) {
+	      var _delivered;
+	      if (delivered.length === 0) {
+	        setTimeout(function () {
+	          delivered = [];
+	        });
+	      }
+	      (_delivered = delivered).push.apply(_delivered, _toConsumableArray(mutations));
+	    };
+	    var observe = function observe() {
+	      observer !== null && observer !== void 0 ? observer : observer = new MutationObserver(deliver);
+	      observer.observe(ReactEditor.toDOMNode(editor, editor), {
+	        attributes: true,
+	        attributeOldValue: true,
+	        characterData: true,
+	        characterDataOldValue: true,
+	        childList: true,
+	        subtree: true
+	      });
+	    };
+	    var disconnect = function disconnect() {
+	      var _observer;
+	      (_observer = observer) === null || _observer === void 0 || _observer.disconnect();
+	      delivered = [];
+	    };
+	    var revert = function revert() {
+	      var _observer$takeRecords, _observer2;
+	      var mutations = [].concat(_toConsumableArray(delivered), _toConsumableArray((_observer$takeRecords = (_observer2 = observer) === null || _observer2 === void 0 ? void 0 : _observer2.takeRecords()) !== null && _observer$takeRecords !== void 0 ? _observer$takeRecords : []));
+	      delivered = [];
+	      mutations.reverse().forEach(revertMutation);
+	    };
+	    return {
+	      observe: observe,
+	      disconnect: disconnect,
+	      revert: revert
+	    };
+	  }, [editor]);
+	  React.useEffect(function () {
+	    nativeFormatDOM.observe();
+	    return nativeFormatDOM.disconnect;
+	  }, [nativeFormatDOM]);
+	  return nativeFormatDOM;
+	};
+
 	var caretTop = function caretTop(editor, point) {
 	  var range = ReactEditor.resolveDOMRange(editor, {
 	    anchor: point,
@@ -7601,6 +7670,7 @@
 	    setPlaceholderHeight = _useState4[1];
 	  var processing = React.useRef(false);
 	  var compositionDOM = useCompositionDOM(editor);
+	  var nativeFormatDOM = useNativeFormatDOM(editor);
 	  var deleteOnCompositionEndRef = React.useRef(false);
 	  var _useTrackUserInput = useTrackUserInput(),
 	    onUserInput = _useTrackUserInput.onUserInput,
@@ -8407,6 +8477,7 @@
 	      }
 	    }, [attributes.onBeforeInput, editor, readOnly]),
 	    onInput: React.useCallback(function (event) {
+	      var _event$nativeEvent$in;
 	      if (readOnly) {
 	        isEventHandled(event, attributes.onInput);
 	        return;
@@ -8422,6 +8493,16 @@
 	        androidInputManagerRef.current.handleInput();
 	        return;
 	      }
+	      if ((_event$nativeEvent$in = event.nativeEvent.inputType) !== null && _event$nativeEvent$in !== void 0 && _event$nativeEvent$in.startsWith('format')) {
+	        var domSelection = getSelection(ReactEditor.findDocumentOrShadowRoot(editor));
+	        var range = domSelection && ReactEditor.resolveSlateRange(editor, domSelection);
+	        nativeFormatDOM.revert();
+	        if (domSelection && range) {
+	          slate.Transforms.select(editor, range);
+	          restoreDomSelection(editor, domSelection, state);
+	        }
+	        return;
+	      }
 	      // Flush native operations, as native events will have propogated
 	      // and we can correctly compare DOM text values in components
 	      // to stop rendering, so that browser functions like autocorrect
@@ -8464,7 +8545,7 @@
 	      if (!ReactEditor.isFocused(editor)) {
 	        handleNativeHistoryEvents(editor, event.nativeEvent);
 	      }
-	    }, [readOnly, attributes.onInput, editor, compositionDOM]),
+	    }, [readOnly, attributes.onInput, editor, compositionDOM, nativeFormatDOM]),
 	    onBlur: React.useCallback(function (event) {
 	      if (readOnly) {
 	        isEventHandled(event, attributes.onBlur);