slate-react 0.72.1 → 0.72.2-20211116213954

package/dist/index.es.js

@@ -172,6 +172,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.
  */
@@ -2146,6 +2153,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.
  */
@@ -2715,247 +2949,20 @@ 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 = [];
-  var insertedText = [];
-  var characterDataMutations = [];
-  mutations.forEach(mutation => {
-    switch (mutation.type) {
-      case 'childList':
-        {
-          if (mutation.addedNodes.length) {
-            mutation.addedNodes.forEach(addedNode => {
-              addedNodes.push(addedNode);
-            });
-          }
+function gatherMutationData(editor, mutations) {
+  var addedNodes = [];
+  var removedNodes = [];
+  var insertedText = [];
+  var characterDataMutations = [];
+  mutations.forEach(mutation => {
+    switch (mutation.type) {
+      case 'childList':
+        {
+          if (mutation.addedNodes.length) {
+            mutation.addedNodes.forEach(addedNode => {
+              addedNodes.push(addedNode);
+            });
+          }
 
           mutation.removedNodes.forEach(removedNode => {
             removedNodes.push(removedNode);
@@ -3163,7 +3170,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;
@@ -3420,7 +3435,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 /**
  * Editable.
  */
+// https://github.com/facebook/draft-js/blob/main/src/component/handlers/composition/DraftEditorCompositionHandler.js#L41
+// When using keyboard English association function, conpositionEnd triggered too fast, resulting in after `insertText` still maintain association state.
 
+var RESOLVE_DELAY = 20;
 var AndroidEditable = props => {
   var {
     autoFocus,
@@ -3436,13 +3454,16 @@ var AndroidEditable = props => {
   } = props,
       attributes = _objectWithoutProperties(props, _excluded$1);
 
-  var editor = useSlate();
+  var editor = useSlate(); // Rerender editor when composition status changed
+
+  var [isComposing, setIsComposing] = useState(false);
   var ref = useRef(null);
   var inputManager = useAndroidInputManager(ref); // Update internal state on each render.
 
   IS_READ_ONLY.set(editor, readOnly); // Keep track of some state for the event handler logic.
 
   var state = useMemo(() => ({
+    isComposing: false,
     isUpdatingSelection: false,
     latestElement: null
   }), []);
@@ -3469,7 +3490,7 @@ var AndroidEditable = props => {
       var root = ReactEditor.findDocumentOrShadowRoot(editor);
       var domSelection = root.getSelection();
 
-      if (!domSelection || !ReactEditor.isFocused(editor)) {
+      if (state.isComposing || !domSelection || !ReactEditor.isFocused(editor)) {
         return;
       }
 
@@ -3549,26 +3570,7 @@ var AndroidEditable = props => {
     if (ref.current && autoFocus) {
       ref.current.focus();
     }
-  }, [autoFocus]); // Listen on the native `beforeinput` event to get real "Level 2" events. This
-  // is required because React's `beforeinput` is fake and never really attaches
-  // to the real event sadly. (2019/11/01)
-  // https://github.com/facebook/react/issues/11211
-
-  var onDOMBeforeInput = useCallback(event => {
-    if (!readOnly && hasEditableTarget(editor, event.target) && !isDOMEventHandled(event, propsOnDOMBeforeInput)) {
-      inputManager.onUserInput();
-    }
-  }, [readOnly, propsOnDOMBeforeInput]); // Attach a native DOM event handler for `beforeinput` events, because React's
-  // built-in `onBeforeInput` is actually a leaky polyfill that doesn't expose
-  // real `beforeinput` events sadly... (2019/11/04)
-
-  useIsomorphicLayoutEffect(() => {
-    var node = ref.current; // @ts-ignore The `beforeinput` event isn't recognized.
-
-    node === null || node === void 0 ? void 0 : node.addEventListener('beforeinput', onDOMBeforeInput); // @ts-ignore The `beforeinput` event isn't recognized.
-
-    return () => node === null || node === void 0 ? void 0 : node.removeEventListener('beforeinput', onDOMBeforeInput);
-  }, [contentKey, propsOnDOMBeforeInput]); // Listen on the native `selectionchange` event to be able to update any time
+  }, [autoFocus]); // Listen on the native `selectionchange` event to be able to update any time
   // the selection changes. This is required because React's `onSelect` is leaky
   // and non-standard so it doesn't fire until after a selection has been
   // released. This causes issues in situations where another change happens
@@ -3576,7 +3578,7 @@ var AndroidEditable = props => {
 
   var onDOMSelectionChange = useCallback(throttle(() => {
     try {
-      if (!state.isUpdatingSelection && !inputManager.isReconciling.current) {
+      if (!state.isComposing && !state.isUpdatingSelection && !inputManager.isReconciling.current) {
         var root = ReactEditor.findDocumentOrShadowRoot(editor);
         var {
           activeElement
@@ -3614,7 +3616,31 @@ var AndroidEditable = props => {
       }
     } catch (_unused2) {// Failed to update selection, likely due to reconciliation error
     }
-  }, 100), [readOnly]); // Attach a native DOM event handler for `selectionchange`, because React's
+  }, 100), [readOnly]);
+  var scheduleOnDOMSelectionChange = useMemo(() => debounce(onDOMSelectionChange, 0), [onDOMSelectionChange]); // Listen on the native `beforeinput` event to get real "Level 2" events. This
+  // is required because React's `beforeinput` is fake and never really attaches
+  // to the real event sadly. (2019/11/01)
+  // https://github.com/facebook/react/issues/11211
+
+  var onDOMBeforeInput = useCallback(event => {
+    if (!readOnly && hasEditableTarget(editor, event.target) && !isDOMEventHandled(event, propsOnDOMBeforeInput)) {
+      // Some IMEs/Chrome extensions like e.g. Grammarly set the selection immediately before
+      // triggering a `beforeinput` expecting the change to be applied to the immediately before
+      // set selection.
+      scheduleOnDOMSelectionChange.flush();
+      inputManager.onUserInput();
+    }
+  }, [readOnly, propsOnDOMBeforeInput]); // Attach a native DOM event handler for `beforeinput` events, because React's
+  // built-in `onBeforeInput` is actually a leaky polyfill that doesn't expose
+  // real `beforeinput` events sadly... (2019/11/04)
+
+  useIsomorphicLayoutEffect(() => {
+    var node = ref.current; // @ts-ignore The `beforeinput` event isn't recognized.
+
+    node === null || node === void 0 ? void 0 : node.addEventListener('beforeinput', onDOMBeforeInput); // @ts-ignore The `beforeinput` event isn't recognized.
+
+    return () => node === null || node === void 0 ? void 0 : node.removeEventListener('beforeinput', onDOMBeforeInput);
+  }, [contentKey, propsOnDOMBeforeInput]); // Attach a native DOM event handler for `selectionchange`, because React's
   // built-in `onSelect` handler doesn't fire for all selection changes. It's a
   // leaky polyfill that only fires on keypresses or clicks. Instead, we want to
   // fire for any change to the selection inside the editor. (2019/11/04)
@@ -3622,14 +3648,14 @@ var AndroidEditable = props => {
 
   useIsomorphicLayoutEffect(() => {
     var window = ReactEditor.getWindow(editor);
-    window.document.addEventListener('selectionchange', onDOMSelectionChange);
+    window.document.addEventListener('selectionchange', scheduleOnDOMSelectionChange);
     return () => {
-      window.document.removeEventListener('selectionchange', onDOMSelectionChange);
+      window.document.removeEventListener('selectionchange', scheduleOnDOMSelectionChange);
     };
-  });
+  }, [scheduleOnDOMSelectionChange]);
   var decorations = decorate([editor, []]);
 
-  if (placeholder && editor.children.length === 1 && Array.from(Node.texts(editor)).length === 1 && Node.string(editor) === '') {
+  if (placeholder && editor.children.length === 1 && Array.from(Node.texts(editor)).length === 1 && Node.string(editor) === '' && !isComposing) {
     var start = Editor.start(editor, []);
     decorations.push({
       [PLACEHOLDER_SYMBOL]: true,
@@ -3744,6 +3770,94 @@ var AndroidEditable = props => {
 
       IS_FOCUSED.delete(editor);
     }, [readOnly, attributes.onBlur]),
+    onClick: useCallback(event => {
+      if (!readOnly && hasTarget(editor, event.target) && !isEventHandled(event, attributes.onClick) && isDOMNode(event.target)) {
+        var node = ReactEditor.toSlateNode(editor, event.target);
+        var path = ReactEditor.findPath(editor, node); // At this time, the Slate document may be arbitrarily different,
+        // because onClick handlers can change the document before we get here.
+        // Therefore we must check that this path actually exists,
+        // and that it still refers to the same node.
+
+        if (Editor.hasPath(editor, path)) {
+          var lookupNode = Node.get(editor, path);
+
+          if (lookupNode === node) {
+            var _start = Editor.start(editor, path);
+
+            var end = Editor.end(editor, path);
+            var startVoid = Editor.void(editor, {
+              at: _start
+            });
+            var endVoid = Editor.void(editor, {
+              at: end
+            });
+
+            if (startVoid && endVoid && Path.equals(startVoid[1], endVoid[1])) {
+              var range = Editor.range(editor, _start);
+              Transforms.select(editor, range);
+            }
+          }
+        }
+      }
+    }, [readOnly, attributes.onClick]),
+    onCompositionEnd: useCallback(event => {
+      if (hasEditableTarget(editor, event.target) && !isEventHandled(event, attributes.onCompositionEnd)) {
+        scheduleOnDOMSelectionChange.flush();
+        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.insertText(editor, text, {
+                at
+              });
+            }
+          });
+        }, RESOLVE_DELAY);
+      }
+    }, [attributes.onCompositionEnd]),
+    onCompositionUpdate: useCallback(event => {
+      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 => {
       // this will make application/x-slate-fragment exist when onPaste attributes is passed
       event.clipboardData = getClipboardData(event.clipboardData); // This unfortunately needs to be handled with paste events instead.