Allow onValueChange and onSelectionChange to trigger on the same frame, fixing a few bugs where one was not being called (#5975)

* changed onContextChange to account for frames with both selection and nonselection operations

* removed old hack

* changeset

Author: nabbydude

.changeset/honest-frogs-grab.md

@@ -0,0 +1,5 @@
+---
+'slate-react': patch
+---
+
+Allow onValueChange and onSelectionChange to trigger on the same frame, fixing a few bugs where one was not being called

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

@@ -693,18 +693,8 @@ export const Editable = forwardRef(
                 exactMatch: false,
                 suppressThrow: false,
               })
-              const flippedRange = {
-                anchor: range.focus,
-                focus: range.anchor,
-              }
 
-              if (
-                !selection ||
-                !(
-                  Range.equals(selection, range) ||
-                  Range.equals(selection, flippedRange)
-                )
-              ) {
+              if (!selection || !Range.equals(selection, range)) {
                 native = false
 
                 const selectionRef =

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

@@ -57,24 +57,25 @@ export const Slate = (props: {
   const { selectorContext, onChange: handleSelectorChange } =
     useSelectorContext()
 
-  const onContextChange = useCallback(
-    (options?: { operation?: Operation }) => {
-      if (onChange) {
-        onChange(editor.children)
-      }
-
-      switch (options?.operation?.type) {
-        case 'set_selection':
-          onSelectionChange?.(editor.selection)
-          break
-        default:
-          onValueChange?.(editor.children)
-      }
+  const onContextChange = useCallback(() => {
+    if (onChange) {
+      onChange(editor.children)
+    }
+    if (
+      onSelectionChange &&
+      editor.operations.find(op => op.type === 'set_selection')
+    ) {
+      onSelectionChange(editor.selection)
+    }
+    if (
+      onValueChange &&
+      editor.operations.find(op => op.type !== 'set_selection')
+    ) {
+      onValueChange(editor.children)
+    }
 
-      handleSelectorChange()
-    },
-    [editor, handleSelectorChange, onChange, onSelectionChange, onValueChange]
-  )
+    handleSelectorChange()
+  }, [editor, handleSelectorChange, onChange, onSelectionChange, onValueChange])
 
   useEffect(() => {
     EDITOR_TO_ON_CHANGE.set(editor, onContextChange)