slate-react 0.72.2 → 0.72.4-2022011114342

package/dist/index.js

@@ -323,13 +323,6 @@ var EDITOR_TO_KEY_TO_ELEMENT = new WeakMap();
 
 var IS_READ_ONLY = new WeakMap();
 var IS_FOCUSED = new WeakMap();
-var IS_COMPOSING = new WeakMap();
-var IS_ON_COMPOSITION_END = new WeakMap();
-/**
- * Weak maps for saving text on composition stage.
- */
-
-var EDITOR_ON_COMPOSITION_TEXT = new WeakMap();
 /**
  * Weak map for associating the context `onChange` context with the plugin.
  */
@@ -1812,7 +1805,7 @@ var Editable$1 = function Editable(props) {
                 distance: currentTextNode.text.length,
                 reverse: true
               });
-              slate.Transforms.insertText(editor, text);
+              slate.Editor.insertText(editor, text);
             });
           }
         }
@@ -2365,229 +2358,6 @@ var isDOMEventHandled = function isDOMEventHandled(event, handler) {
   return event.defaultPrevented;
 };
 
-/**
- * Returns the number of characters that are the same at the beginning of the
- * String.
- *
- * @param prev  the previous text
- * @param next  the next text
- * @returns the offset of the start of the difference; null if there is no difference
- */
-
-function getDiffStart(prev, next) {
-  var length = Math.min(prev.length, next.length);
-
-  for (var i = 0; i < length; i++) {
-    if (prev.charAt(i) !== next.charAt(i)) return i;
-  }
-
-  if (prev.length !== next.length) return length;
-  return null;
-}
-/**
- * Returns the number of characters that are the same at the end of the String
- * up to `max`. Max prevents double-counting characters when there are
- * multiple duplicate characters around the diff area.
- *
- * @param prev  the previous text
- * @param next  the next text
- * @param max  the max length to test.
- * @returns number of characters that are the same at the end of the string
- */
-
-
-function getDiffEnd(prev, next, max) {
-  var prevLength = prev.length;
-  var nextLength = next.length;
-  var length = Math.min(prevLength, nextLength, max);
-
-  for (var i = 0; i < length; i++) {
-    var prevChar = prev.charAt(prevLength - i - 1);
-    var nextChar = next.charAt(nextLength - i - 1);
-    if (prevChar !== nextChar) return i;
-  }
-
-  if (prev.length !== next.length) return length;
-  return null;
-}
-/**
- * Takes two strings and returns an object representing two offsets. The
- * first, `start` represents the number of characters that are the same at
- * the front of the String. The `end` represents the number of characters
- * that are the same at the end of the String.
- *
- * Returns null if they are identical.
- *
- * @param prev  the previous text
- * @param next  the next text
- * @returns the difference text range; null if there are no differences.
- */
-
-
-function getDiffOffsets(prev, next) {
-  if (prev === next) return null;
-  var start = getDiffStart(prev, next);
-  if (start === null) return null;
-  var maxEnd = Math.min(prev.length - start, next.length - start);
-  var end = getDiffEnd(prev, next, maxEnd);
-  if (end === null) return null;
-  return {
-    start: start,
-    end: end
-  };
-}
-/**
- * Takes a text string and returns a slice from the string at the given text range
- *
- * @param text  the text
- * @param offsets  the text range
- * @returns the text slice at text range
- */
-
-
-function sliceText(text, offsets) {
-  return text.slice(offsets.start, text.length - offsets.end);
-}
-/**
- * Takes two strings and returns a smart diff that can be used to describe the
- * change in a way that can be used as operations like inserting, removing or
- * replacing text.
- *
- * @param prev the previous text
- * @param next the next text
- * @returns the text difference
- */
-
-
-function diffText(prev, next) {
-  if (prev === undefined || next === undefined) return null;
-  var offsets = getDiffOffsets(prev, next);
-  if (offsets == null) return null;
-  var insertText = sliceText(next, offsets);
-  var removeText = sliceText(prev, offsets);
-  return {
-    start: offsets.start,
-    end: prev.length - offsets.end,
-    insertText: insertText,
-    removeText: removeText
-  };
-}
-function combineInsertedText(insertedText) {
-  return insertedText.reduce(function (acc, _ref) {
-    var text = _ref.text;
-    return "".concat(acc).concat(text.insertText);
-  }, '');
-}
-function getTextInsertion(editor, domNode) {
-  var node = ReactEditor.toSlateNode(editor, domNode);
-
-  if (!slate.Text.isText(node)) {
-    return undefined;
-  }
-
-  var prevText = node.text;
-  var nextText = domNode.textContent; // textContent will pad an extra \n when the textContent ends with an \n
-
-  if (nextText.endsWith('\n')) {
-    nextText = nextText.slice(0, nextText.length - 1);
-  } // If the text is no different, there is no diff.
-
-
-  if (nextText !== prevText) {
-    var textDiff = diffText(prevText, nextText);
-
-    if (textDiff !== null) {
-      var textPath = ReactEditor.findPath(editor, node);
-      return {
-        text: textDiff,
-        path: textPath
-      };
-    }
-  }
-
-  return undefined;
-}
-function normalizeTextInsertionRange(editor, range, _ref2) {
-  var path = _ref2.path,
-      text = _ref2.text;
-  var insertionRange = {
-    anchor: {
-      path: path,
-      offset: text.start
-    },
-    focus: {
-      path: path,
-      offset: text.end
-    }
-  };
-
-  if (!range || !slate.Range.isCollapsed(range)) {
-    return insertionRange;
-  }
-
-  var insertText = text.insertText,
-      removeText = text.removeText;
-  var isSingleCharacterInsertion = insertText.length === 1 || removeText.length === 1;
-  /**
-   * This code handles edge cases that arise from text diffing when the
-   * inserted or removed character is a single character, and the character
-   * right before or after the anchor is the same as the one being inserted or
-   * removed.
-   *
-   * Take this example: hello|o
-   *
-   * If another `o` is inserted at the selection's anchor in the example above,
-   * it should be inserted at the anchor, but using text diffing, we actually
-   * detect that the character was inserted after the second `o`:
-   *
-   * helloo[o]|
-   *
-   * Instead, in these very specific edge cases, we assume that the character
-   * needs to be inserted after the anchor rather than where the diff was found:
-   *
-   * hello[o]|o
-   */
-
-  if (isSingleCharacterInsertion && slate.Path.equals(range.anchor.path, path)) {
-    var _Array$from = Array.from(slate.Editor.nodes(editor, {
-      at: range,
-      match: slate.Text.isText
-    })),
-        _Array$from2 = _slicedToArray(_Array$from, 1),
-        _text = _Array$from2[0];
-
-    if (_text) {
-      var _text2 = _slicedToArray(_text, 1),
-          node = _text2[0];
-
-      var anchor = range.anchor;
-      var characterBeforeAnchor = node.text[anchor.offset - 1];
-      var characterAfterAnchor = node.text[anchor.offset];
-
-      if (insertText.length === 1 && insertText === characterAfterAnchor) {
-        // Assume text should be inserted at the anchor
-        return range;
-      }
-
-      if (removeText.length === 1 && removeText === characterBeforeAnchor) {
-        // Assume text should be removed right before the anchor
-        return {
-          anchor: {
-            path: path,
-            offset: anchor.offset - 1
-          },
-          focus: {
-            path: path,
-            offset: anchor.offset
-          }
-        };
-      }
-    }
-  }
-
-  return insertionRange;
-}
-
 var classCallCheck = createCommonjsModule(function (module) {
 function _classCallCheck(instance, Constructor) {
   if (!(instance instanceof Constructor)) {
@@ -3216,6 +2986,229 @@ var ReactEditor = {
   }
 };
 
+/**
+ * Returns the number of characters that are the same at the beginning of the
+ * String.
+ *
+ * @param prev  the previous text
+ * @param next  the next text
+ * @returns the offset of the start of the difference; null if there is no difference
+ */
+
+function getDiffStart(prev, next) {
+  var length = Math.min(prev.length, next.length);
+
+  for (var i = 0; i < length; i++) {
+    if (prev.charAt(i) !== next.charAt(i)) return i;
+  }
+
+  if (prev.length !== next.length) return length;
+  return null;
+}
+/**
+ * Returns the number of characters that are the same at the end of the String
+ * up to `max`. Max prevents double-counting characters when there are
+ * multiple duplicate characters around the diff area.
+ *
+ * @param prev  the previous text
+ * @param next  the next text
+ * @param max  the max length to test.
+ * @returns number of characters that are the same at the end of the string
+ */
+
+
+function getDiffEnd(prev, next, max) {
+  var prevLength = prev.length;
+  var nextLength = next.length;
+  var length = Math.min(prevLength, nextLength, max);
+
+  for (var i = 0; i < length; i++) {
+    var prevChar = prev.charAt(prevLength - i - 1);
+    var nextChar = next.charAt(nextLength - i - 1);
+    if (prevChar !== nextChar) return i;
+  }
+
+  if (prev.length !== next.length) return length;
+  return null;
+}
+/**
+ * Takes two strings and returns an object representing two offsets. The
+ * first, `start` represents the number of characters that are the same at
+ * the front of the String. The `end` represents the number of characters
+ * that are the same at the end of the String.
+ *
+ * Returns null if they are identical.
+ *
+ * @param prev  the previous text
+ * @param next  the next text
+ * @returns the difference text range; null if there are no differences.
+ */
+
+
+function getDiffOffsets(prev, next) {
+  if (prev === next) return null;
+  var start = getDiffStart(prev, next);
+  if (start === null) return null;
+  var maxEnd = Math.min(prev.length - start, next.length - start);
+  var end = getDiffEnd(prev, next, maxEnd);
+  if (end === null) return null;
+  return {
+    start: start,
+    end: end
+  };
+}
+/**
+ * Takes a text string and returns a slice from the string at the given text range
+ *
+ * @param text  the text
+ * @param offsets  the text range
+ * @returns the text slice at text range
+ */
+
+
+function sliceText(text, offsets) {
+  return text.slice(offsets.start, text.length - offsets.end);
+}
+/**
+ * Takes two strings and returns a smart diff that can be used to describe the
+ * change in a way that can be used as operations like inserting, removing or
+ * replacing text.
+ *
+ * @param prev the previous text
+ * @param next the next text
+ * @returns the text difference
+ */
+
+
+function diffText(prev, next) {
+  if (prev === undefined || next === undefined) return null;
+  var offsets = getDiffOffsets(prev, next);
+  if (offsets == null) return null;
+  var insertText = sliceText(next, offsets);
+  var removeText = sliceText(prev, offsets);
+  return {
+    start: offsets.start,
+    end: prev.length - offsets.end,
+    insertText: insertText,
+    removeText: removeText
+  };
+}
+function combineInsertedText(insertedText) {
+  return insertedText.reduce(function (acc, _ref) {
+    var text = _ref.text;
+    return "".concat(acc).concat(text.insertText);
+  }, '');
+}
+function getTextInsertion(editor, domNode) {
+  var node = ReactEditor.toSlateNode(editor, domNode);
+
+  if (!slate.Text.isText(node)) {
+    return undefined;
+  }
+
+  var prevText = node.text;
+  var nextText = domNode.textContent; // textContent will pad an extra \n when the textContent ends with an \n
+
+  if (nextText.endsWith('\n')) {
+    nextText = nextText.slice(0, nextText.length - 1);
+  } // If the text is no different, there is no diff.
+
+
+  if (nextText !== prevText) {
+    var textDiff = diffText(prevText, nextText);
+
+    if (textDiff !== null) {
+      var textPath = ReactEditor.findPath(editor, node);
+      return {
+        text: textDiff,
+        path: textPath
+      };
+    }
+  }
+
+  return undefined;
+}
+function normalizeTextInsertionRange(editor, range, _ref2) {
+  var path = _ref2.path,
+      text = _ref2.text;
+  var insertionRange = {
+    anchor: {
+      path: path,
+      offset: text.start
+    },
+    focus: {
+      path: path,
+      offset: text.end
+    }
+  };
+
+  if (!range || !slate.Range.isCollapsed(range)) {
+    return insertionRange;
+  }
+
+  var insertText = text.insertText,
+      removeText = text.removeText;
+  var isSingleCharacterInsertion = insertText.length === 1 || removeText.length === 1;
+  /**
+   * This code handles edge cases that arise from text diffing when the
+   * inserted or removed character is a single character, and the character
+   * right before or after the anchor is the same as the one being inserted or
+   * removed.
+   *
+   * Take this example: hello|o
+   *
+   * If another `o` is inserted at the selection's anchor in the example above,
+   * it should be inserted at the anchor, but using text diffing, we actually
+   * detect that the character was inserted after the second `o`:
+   *
+   * helloo[o]|
+   *
+   * Instead, in these very specific edge cases, we assume that the character
+   * needs to be inserted after the anchor rather than where the diff was found:
+   *
+   * hello[o]|o
+   */
+
+  if (isSingleCharacterInsertion && slate.Path.equals(range.anchor.path, path)) {
+    var _Array$from = Array.from(slate.Editor.nodes(editor, {
+      at: range,
+      match: slate.Text.isText
+    })),
+        _Array$from2 = _slicedToArray(_Array$from, 1),
+        _text = _Array$from2[0];
+
+    if (_text) {
+      var _text2 = _slicedToArray(_text, 1),
+          node = _text2[0];
+
+      var anchor = range.anchor;
+      var characterBeforeAnchor = node.text[anchor.offset - 1];
+      var characterAfterAnchor = node.text[anchor.offset];
+
+      if (insertText.length === 1 && insertText === characterAfterAnchor) {
+        // Assume text should be inserted at the anchor
+        return range;
+      }
+
+      if (removeText.length === 1 && removeText === characterBeforeAnchor) {
+        // Assume text should be removed right before the anchor
+        return {
+          anchor: {
+            path: path,
+            offset: anchor.offset - 1
+          },
+          focus: {
+            path: path,
+            offset: anchor.offset
+          }
+        };
+      }
+    }
+  }
+
+  return insertionRange;
+}
+
 function gatherMutationData(editor, mutations) {
   var addedNodes = [];
   var removedNodes = [];
@@ -3428,15 +3421,7 @@ var AndroidInputManager = function AndroidInputManager(editor, restoreDOM) {
   this.insertText = function (insertedText) {
     var _this$editor = _this.editor,
         selection = _this$editor.selection,
-        marks = _this$editor.marks; // If it is in composing or after `onCompositionend`, set `EDITOR_ON_COMPOSITION_TEXT` and return.
-    // Text will be inserted on compositionend event.
-
-    if (IS_COMPOSING.get(_this.editor) || IS_ON_COMPOSITION_END.get(_this.editor)) {
-      EDITOR_ON_COMPOSITION_TEXT.set(_this.editor, insertedText);
-      IS_ON_COMPOSITION_END.set(_this.editor, false);
-      return;
-    } // Insert the batched text diffs
-
+        marks = _this$editor.marks; // Insert the batched text diffs
 
     insertedText.forEach(function (insertion) {
       var text = insertion.text.insertText;
@@ -3454,9 +3439,8 @@ var AndroidInputManager = function AndroidInputManager(editor, restoreDOM) {
         });
         _this.editor.marks = null;
       } else {
-        slate.Transforms.insertText(_this.editor, text, {
-          at: at
-        });
+        slate.Transforms.setSelection(_this.editor, at);
+        slate.Editor.insertText(_this.editor, text);
       }
     });
   };
@@ -4085,39 +4069,6 @@ var AndroidEditable = function AndroidEditable(props) {
         setTimeout(function () {
           state.isComposing && setIsComposing(false);
           state.isComposing = false;
-          IS_COMPOSING.set(editor, false);
-          IS_ON_COMPOSITION_END.set(editor, true);
-          var insertedText = EDITOR_ON_COMPOSITION_TEXT.get(editor) || []; // `insertedText` is set in `MutationObserver` constructor.
-          // If open phone keyboard association function, `CompositionEvent` will be triggered.
-
-          if (!insertedText.length) {
-            return;
-          }
-
-          EDITOR_ON_COMPOSITION_TEXT.set(editor, []);
-          var selection = editor.selection,
-              marks = editor.marks;
-          insertedText.forEach(function (insertion) {
-            var text = insertion.text.insertText;
-            var at = normalizeTextInsertionRange(editor, selection, insertion);
-
-            if (marks) {
-              var node = _objectSpread({
-                text: text
-              }, marks);
-
-              slate.Transforms.insertNodes(editor, node, {
-                match: slate.Text.isText,
-                at: at,
-                select: true
-              });
-              editor.marks = null;
-            } else {
-              slate.Transforms.insertText(editor, text, {
-                at: at
-              });
-            }
-          });
         }, RESOLVE_DELAY);
       }
     }, [attributes.onCompositionEnd]),
@@ -4125,14 +4076,12 @@ var AndroidEditable = function AndroidEditable(props) {
       if (hasEditableTarget(editor, event.target) && !isEventHandled(event, attributes.onCompositionUpdate)) {
         !state.isComposing && setIsComposing(true);
         state.isComposing = true;
-        IS_COMPOSING.set(editor, true);
       }
     }, [attributes.onCompositionUpdate]),
     onCompositionStart: React.useCallback(function (event) {
       if (hasEditableTarget(editor, event.target) && !isEventHandled(event, attributes.onCompositionStart)) {
         !state.isComposing && setIsComposing(true);
         state.isComposing = true;
-        IS_COMPOSING.set(editor, true);
       }
     }, [attributes.onCompositionStart]),
     onPaste: React.useCallback(function (event) {
@@ -4218,7 +4167,9 @@ var Slate = function Slate(props) {
   });
   useIsomorphicLayoutEffect(function () {
     var fn = function fn() {
-      return setIsFocused(ReactEditor.isFocused(editor));
+      setTimeout(function () {
+        setIsFocused(ReactEditor.isFocused(editor));
+      }, 0);
     };
 
     document.addEventListener('focus', fn, true);
@@ -4228,7 +4179,9 @@ var Slate = function Slate(props) {
   }, []);
   useIsomorphicLayoutEffect(function () {
     var fn = function fn() {
-      return setIsFocused(ReactEditor.isFocused(editor));
+      setTimeout(function () {
+        setIsFocused(ReactEditor.isFocused(editor));
+      }, 0);
     };
 
     document.addEventListener('blur', fn, true);