feat: add useComposing hook (#5695)

.changeset/ten-queens-walk.md

@@ -0,0 +1,5 @@
+---
+'slate-react': minor
+---
+
+feat: Add useComposing hook"

docs/libraries/slate-react/hooks.md

@@ -8,6 +8,10 @@
 
 React hooks for Slate editors
 
+#### `useComposing(): boolean`
+
+Get the current `composing` state of the editor. It deals with `compositionstart`, `compositionupdate`, `compositionend` events.
+
 #### `useFocused(): boolean`
 
 Get the current `focused` state of the editor.

packages/slate-react/src/components/editable.tsx

@@ -73,6 +73,7 @@ import {
 } from '../utils/weak-maps'
 import { RestoreDOM } from './restore-dom/restore-dom'
 import { AndroidInputManager } from '../hooks/android-input-manager/android-input-manager'
+import { ComposingContext } from '../hooks/use-composing'
 
 type DeferredOperation = () => void
 
@@ -949,6 +950,7 @@ export const Editable = forwardRef(
 
     return (
       <ReadOnlyContext.Provider value={readOnly}>
+        <ComposingContext.Provider value={isComposing}>
           <DecorateContext.Provider value={decorate}>
             <RestoreDOM node={ref} receivedUserInput={receivedUserInput}>
               <Component
@@ -1092,7 +1094,10 @@ export const Editable = forwardRef(
                       isDOMNode(relatedTarget) &&
                       ReactEditor.hasDOMNode(editor, relatedTarget)
                     ) {
-                    const node = ReactEditor.toSlateNode(editor, relatedTarget)
+                      const node = ReactEditor.toSlateNode(
+                        editor,
+                        relatedTarget
+                      )
 
                       if (Element.isElement(node) && !editor.isVoid(node)) {
                         return
@@ -1191,7 +1196,9 @@ export const Editable = forwardRef(
                         })
                       }
 
-                    androidInputManagerRef.current?.handleCompositionEnd(event)
+                      androidInputManagerRef.current?.handleCompositionEnd(
+                        event
+                      )
 
                       if (
                         isEventHandled(event, attributes.onCompositionEnd) ||
@@ -1310,7 +1317,10 @@ export const Editable = forwardRef(
                         if (Range.isExpanded(selection)) {
                           Editor.deleteFragment(editor)
                         } else {
-                        const node = Node.parent(editor, selection.anchor.path)
+                          const node = Node.parent(
+                            editor,
+                            selection.anchor.path
+                          )
                           if (Editor.isVoid(editor, node)) {
                             Transforms.delete(editor)
                           }
@@ -1585,7 +1595,10 @@ export const Editable = forwardRef(
                           Transforms.collapse(editor, { edge: 'focus' })
                         }
 
-                      Transforms.move(editor, { unit: 'word', reverse: !isRTL })
+                        Transforms.move(editor, {
+                          unit: 'word',
+                          reverse: !isRTL,
+                        })
                         return
                       }
 
@@ -1596,7 +1609,10 @@ export const Editable = forwardRef(
                           Transforms.collapse(editor, { edge: 'focus' })
                         }
 
-                      Transforms.move(editor, { unit: 'word', reverse: isRTL })
+                        Transforms.move(editor, {
+                          unit: 'word',
+                          reverse: isRTL,
+                        })
                         return
                       }
 
@@ -1781,6 +1797,7 @@ export const Editable = forwardRef(
               </Component>
             </RestoreDOM>
           </DecorateContext.Provider>
+        </ComposingContext.Provider>
       </ReadOnlyContext.Provider>
     )
   }

packages/slate-react/src/hooks/use-composing.ts

@@ -0,0 +1,15 @@
+import { createContext, useContext } from 'react'
+
+/**
+ * A React context for sharing the `composing` state of the editor.
+ */
+
+export const ComposingContext = createContext(false)
+
+/**
+ * Get the current `composing` state of the editor.
+ */
+
+export const useComposing = (): boolean => {
+  return useContext(ComposingContext)
+}