slate-react 0.72.4-2022011154352 → 0.72.4-20220121801

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # slate-react
 
-## 0.72.4-2022011154352
+## 0.72.4-20220121801
 
 ### Patch Changes
 
@@ -11,7 +11,10 @@
   - Remove logic to delay handling of text insertion
   - Call Transforms.setSelection before Editor.insertText to adjust position
 
-- [#4755](https://github.com/ianstormtaylor/slate/pull/4755) [`8daa77e9`](https://github.com/ianstormtaylor/slate/commit/8daa77e9fab6b222ad796b420b86f3ec88999a39) Thanks [@jhurwitz](https://github.com/jhurwitz)! - fix useFocused hook
+- [#4786](https://github.com/ianstormtaylor/slate/pull/4786) [`67aa1f10`](https://github.com/ianstormtaylor/slate/commit/67aa1f10106e15486031b4103285c7fae4373056) Thanks [@alessiogaldy](https://github.com/alessiogaldy)! - - Restore logic to delay text insertion on android
+  - Always call Trasform.setSelection before calling Editor.insertText
+
+* [#4755](https://github.com/ianstormtaylor/slate/pull/4755) [`8daa77e9`](https://github.com/ianstormtaylor/slate/commit/8daa77e9fab6b222ad796b420b86f3ec88999a39) Thanks [@jhurwitz](https://github.com/jhurwitz)! - fix useFocused hook
 
 ## 0.72.2
 

package/dist/components/android/android-editable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"android-editable.d.ts","sourceRoot":"","sources":["../../packages/slate-react/src/components/android/android-editable.tsx"],"names":[],"mappings":";AACA,OAAO,EAAU,OAAO,EAAuC,MAAM,OAAO,CAAA;AA2B5E,OAAO,EAAE,aAAa,EAAa,MAAM,aAAa,CAAA;AAqBtD,eAAO,MAAM,eAAe,UAAW,aAAa,KAAG,GAAG,CAAC,OAshB1D,CAAA"}
+{"version":3,"file":"android-editable.d.ts","sourceRoot":"","sources":["../../packages/slate-react/src/components/android/android-editable.tsx"],"names":[],"mappings":";AACA,OAAO,EAAU,OAAO,EAAuC,MAAM,OAAO,CAAA;AA+B5E,OAAO,EAAE,aAAa,EAAa,MAAM,aAAa,CAAA;AAqBtD,eAAO,MAAM,eAAe,UAAW,aAAa,KAAG,GAAG,CAAC,OA6jB1D,CAAA"}

package/dist/components/android/android-input-manager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"android-input-manager.d.ts","sourceRoot":"","sources":["../../packages/slate-react/src/components/android/android-input-manager.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AAmBvD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,qBAAa,mBAAmB;IAClB,OAAO,CAAC,MAAM;IAAe,OAAO,CAAC,UAAU;gBAAvC,MAAM,EAAE,WAAW,EAAU,UAAU,EAAE,MAAM,IAAI;IAKvE;;;;OAIG;IAEH,KAAK,cAAe,cAAc,EAAE,UAYnC;IAED;;;;OAIG;IAEH,OAAO,CAAC,kBAAkB,CAkBzB;IAED;;OAEG;IAEH,OAAO,CAAC,UAAU,CAsBjB;IAED;;OAEG;IAEH,OAAO,CAAC,WAAW,CAoBlB;IAED;;OAEG;IAEH,OAAO,CAAC,wBAAwB,CAY/B;IAED;;OAEG;IAEH,OAAO,CAAC,cAAc,CAOrB;IAED;;OAEG;IACH,OAAO,CAAC,eAAe,CAWtB;CACF;AAED,eAAe,mBAAmB,CAAA"}
+{"version":3,"file":"android-input-manager.d.ts","sourceRoot":"","sources":["../../packages/slate-react/src/components/android/android-input-manager.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAA;AA2BvD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,qBAAa,mBAAmB;IAClB,OAAO,CAAC,MAAM;IAAe,OAAO,CAAC,UAAU;gBAAvC,MAAM,EAAE,WAAW,EAAU,UAAU,EAAE,MAAM,IAAI;IAKvE;;;;OAIG;IAEH,KAAK,cAAe,cAAc,EAAE,UAYnC;IAED;;;;OAIG;IAEH,OAAO,CAAC,kBAAkB,CAkBzB;IAED;;OAEG;IAEH,OAAO,CAAC,UAAU,CAiCjB;IAED;;OAEG;IAEH,OAAO,CAAC,WAAW,CAoBlB;IAED;;OAEG;IAEH,OAAO,CAAC,wBAAwB,CAY/B;IAED;;OAEG;IAEH,OAAO,CAAC,cAAc,CAOrB;IAED;;OAEG;IACH,OAAO,CAAC,eAAe,CAWtB;CACF;AAED,eAAe,mBAAmB,CAAA"}

package/dist/index.es.js

@@ -181,6 +181,13 @@ 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.
  */
@@ -2155,6 +2162,233 @@ var 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,
+    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,
+    removeText
+  };
+}
+function combineInsertedText(insertedText) {
+  return insertedText.reduce((acc, _ref) => {
+    var {
+      text
+    } = _ref;
+    return "".concat(acc).concat(text.insertText);
+  }, '');
+}
+function getTextInsertion(editor, domNode) {
+  var node = ReactEditor.toSlateNode(editor, domNode);
+
+  if (!Text$1.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,
+    text
+  } = _ref2;
+  var insertionRange = {
+    anchor: {
+      path,
+      offset: text.start
+    },
+    focus: {
+      path,
+      offset: text.end
+    }
+  };
+
+  if (!range || !Range.isCollapsed(range)) {
+    return insertionRange;
+  }
+
+  var {
+    insertText,
+    removeText
+  } = text;
+  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 && Path.equals(range.anchor.path, path)) {
+    var [_text] = Array.from(Editor.nodes(editor, {
+      at: range,
+      match: Text$1.isText
+    }));
+
+    if (_text) {
+      var [node] = _text;
+      var {
+        anchor
+      } = range;
+      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,
+            offset: anchor.offset - 1
+          },
+          focus: {
+            path,
+            offset: anchor.offset
+          }
+        };
+      }
+    }
+  }
+
+  return insertionRange;
+}
+
 /**
  * An auto-incrementing identifier for keys.
  */
@@ -2724,233 +2958,6 @@ 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,
-    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,
-    removeText
-  };
-}
-function combineInsertedText(insertedText) {
-  return insertedText.reduce((acc, _ref) => {
-    var {
-      text
-    } = _ref;
-    return "".concat(acc).concat(text.insertText);
-  }, '');
-}
-function getTextInsertion(editor, domNode) {
-  var node = ReactEditor.toSlateNode(editor, domNode);
-
-  if (!Text$1.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,
-    text
-  } = _ref2;
-  var insertionRange = {
-    anchor: {
-      path,
-      offset: text.start
-    },
-    focus: {
-      path,
-      offset: text.end
-    }
-  };
-
-  if (!range || !Range.isCollapsed(range)) {
-    return insertionRange;
-  }
-
-  var {
-    insertText,
-    removeText
-  } = text;
-  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 && Path.equals(range.anchor.path, path)) {
-    var [_text] = Array.from(Editor.nodes(editor, {
-      at: range,
-      match: Text$1.isText
-    }));
-
-    if (_text) {
-      var [node] = _text;
-      var {
-        anchor
-      } = range;
-      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,
-            offset: anchor.offset - 1
-          },
-          focus: {
-            path,
-            offset: anchor.offset
-          }
-        };
-      }
-    }
-  }
-
-  return insertionRange;
-}
-
 function gatherMutationData(editor, mutations) {
   var addedNodes = [];
   var removedNodes = [];
@@ -3172,7 +3179,15 @@ class AndroidInputManager {
       var {
         selection,
         marks
-      } = this.editor; // Insert the batched text diffs
+      } = this.editor; // 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
+
 
       insertedText.forEach(insertion => {
         var text = insertion.text.insertText;
@@ -3799,6 +3814,40 @@ var AndroidEditable = props => {
         setTimeout(() => {
           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,
+            marks
+          } = editor;
+          insertedText.forEach(insertion => {
+            var text = insertion.text.insertText;
+            var at = normalizeTextInsertionRange(editor, selection, insertion);
+
+            if (marks) {
+              var node = _objectSpread({
+                text
+              }, marks);
+
+              Transforms.insertNodes(editor, node, {
+                match: Text$1.isText,
+                at,
+                select: true
+              });
+              editor.marks = null;
+            } else {
+              Transforms.setSelection(editor, at);
+              Editor.insertText(editor, text);
+            }
+          });
         }, RESOLVE_DELAY);
       }
     }, [attributes.onCompositionEnd]),
@@ -3806,12 +3855,14 @@ var 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: useCallback(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: useCallback(event => {