slate-react 0.147.1 → 0.147.2

package/dist/index.js

@@ -3078,6 +3078,75 @@ var useCompositionDOM = function useCompositionDOM(editor) {
   return compositionDOM;
 };
 
+var revertMutation = function revertMutation(mutation) {
+  var target = mutation.target;
+  if (mutation.type === 'characterData') {
+    target.nodeValue = mutation.oldValue;
+  } else if (mutation.type === 'attributes' && slateDom.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,
@@ -3472,6 +3541,7 @@ var Editable = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
     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,
@@ -4278,6 +4348,7 @@ var Editable = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
       }
     }, [attributes.onBeforeInput, editor, readOnly]),
     onInput: React.useCallback(function (event) {
+      var _event$nativeEvent$in;
       if (readOnly) {
         isEventHandled(event, attributes.onInput);
         return;
@@ -4293,6 +4364,16 @@ var Editable = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
         androidInputManagerRef.current.handleInput();
         return;
       }
+      if ((_event$nativeEvent$in = event.nativeEvent.inputType) !== null && _event$nativeEvent$in !== void 0 && _event$nativeEvent$in.startsWith('format')) {
+        var domSelection = slateDom.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
@@ -4335,7 +4416,7 @@ var Editable = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
       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);