fix(core): derive onValueChange and onSelectionChange from onChange (#2700)

Author: SamarthNimangre

packages/core/src/react/hooks/useSlateProps.spec.tsx

@@ -56,30 +56,16 @@ describe('useSlateProps', () => {
     expect(result.current.props.key).toBe(editor.meta.key);
 
     act(() => {
+      editor.children = nextValue as any;
+      editor.selection = nextSelection;
       result.current.props.onChange(nextValue as any);
     });
 
-    expect(result.current.editorVersion).toBe(2);
-    expect(result.current.selectionVersion).toBe(1);
-    expect(result.current.valueVersion).toBe(1);
-    expect(onChange).toHaveBeenCalledWith({ editor, value: nextValue });
-
-    act(() => {
-      result.current.props.onValueChange(nextValue as any);
-    });
-
-    expect(result.current.editorVersion).toBe(2);
-    expect(result.current.selectionVersion).toBe(1);
-    expect(result.current.valueVersion).toBe(2);
-    expect(onValueChange).toHaveBeenCalledWith({ editor, value: nextValue });
-
-    act(() => {
-      result.current.props.onSelectionChange(nextSelection);
-    });
-
     expect(result.current.editorVersion).toBe(2);
     expect(result.current.selectionVersion).toBe(2);
     expect(result.current.valueVersion).toBe(2);
+    expect(onChange).toHaveBeenCalledWith({ editor, value: nextValue });
+    expect(onValueChange).toHaveBeenCalledWith({ editor, value: nextValue });
     expect(onSelectionChange).toHaveBeenCalledWith({
       editor,
       selection: nextSelection,

packages/core/src/react/hooks/useSlateProps.ts

@@ -27,6 +27,9 @@ export const useSlateProps = ({ id }: { id?: string }): PlateSlateProps => {
   const updateVersionSelection = useIncrementVersion('versionSelection', id);
   const updateVersionValue = useIncrementVersion('versionValue', id);
 
+  const prevSelectionRef = React.useRef(editor.selection);
+  const prevValueRef = React.useRef(editor.children);
+
   const onChange = React.useCallback(
     (newValue: SlateComponentProps['initialValue']) => {
       updateVersionEditor();
@@ -35,8 +38,28 @@ export const useSlateProps = ({ id }: { id?: string }): PlateSlateProps => {
       if (!eventIsHandled) {
         onChangeProp?.({ editor, value: newValue as Value });
       }
+
+      if (editor.children !== prevValueRef.current) {
+        prevValueRef.current = editor.children;
+        updateVersionValue();
+        onValueChangeProp?.({ editor, value: newValue as Value });
+      }
+
+      if (editor.selection !== prevSelectionRef.current) {
+        prevSelectionRef.current = editor.selection;
+        updateVersionSelection();
+        onSelectionChangeProp?.({ editor, selection: editor.selection });
+      }
     },
-    [editor, onChangeProp, updateVersionEditor]
+    [
+      editor,
+      onChangeProp,
+      onValueChangeProp,
+      onSelectionChangeProp,
+      updateVersionEditor,
+      updateVersionValue,
+      updateVersionSelection,
+    ]
   );
 
   const onValueChange: SlateComponentProps['onValueChange'] = React.useMemo(