chore: infer React context providers and prefer use (#11669)

As of [React 19](https://react.dev/blog/2024/12/05/react-19), context
providers no longer require the `<MyContext.Provider>` syntax and can be
rendered as `<MyContext>` directly. This will be deprecated in future
versions of React, which is now being caught by the
[`@eslint-react/no-context-provider`](https://eslint-react.xyz/docs/rules/no-context-provider)
ESLint rule.

Similarly, the [`use`](https://react.dev/reference/react/use) API is now
preferred over `useContext` because it is more flexible, for example
they can be called within loops and conditional statements. See the
[`@eslint-react/no-use-context`](https://eslint-react.xyz/docs/rules/no-use-context)
ESLint rule for more details.

packages/richtext-slate/src/field/providers/ElementButtonProvider.tsx

@@ -25,17 +25,17 @@ export const ElementButtonProvider: React.FC<
   const { children, ...rest } = props
 
   return (
-    <ElementButtonContext.Provider
+    <ElementButtonContext
       value={{
         ...rest,
       }}
     >
       {children}
-    </ElementButtonContext.Provider>
+    </ElementButtonContext>
   )
 }
 
 export const useElementButton = () => {
-  const path = React.useContext(ElementButtonContext)
+  const path = React.use(ElementButtonContext)
   return path
 }

packages/richtext-slate/src/field/providers/ElementProvider.tsx

@@ -33,17 +33,17 @@ export const ElementProvider: React.FC<
   const { childNodes, children, ...rest } = props
 
   return (
-    <ElementContext.Provider
+    <ElementContext
       value={{
         ...rest,
         children: childNodes,
       }}
     >
       {children}
-    </ElementContext.Provider>
+    </ElementContext>
   )
 }
 
 export const useElement = <T,>(): ElementContextType<T> => {
-  return React.useContext(ElementContext) as ElementContextType<T>
+  return React.use(ElementContext) as ElementContextType<T>
 }

packages/richtext-slate/src/field/providers/LeafButtonProvider.tsx

@@ -24,17 +24,17 @@ export const LeafButtonProvider: React.FC<
   const { children, ...rest } = props
 
   return (
-    <LeafButtonContext.Provider
+    <LeafButtonContext
       value={{
         ...rest,
       }}
     >
       {children}
-    </LeafButtonContext.Provider>
+    </LeafButtonContext>
   )
 }
 
 export const useLeafButton = () => {
-  const path = React.useContext(LeafButtonContext)
+  const path = React.use(LeafButtonContext)
   return path
 }

packages/richtext-slate/src/field/providers/LeafProvider.tsx

@@ -32,18 +32,18 @@ export const LeafProvider: React.FC<
   const { children, result, ...rest } = props
 
   return (
-    <LeafContext.Provider
+    <LeafContext
       value={{
         ...rest,
         children: result,
       }}
     >
       {children}
-    </LeafContext.Provider>
+    </LeafContext>
   )
 }
 
 export const useLeaf = () => {
-  const path = React.useContext(LeafContext)
+  const path = React.use(LeafContext)
   return path
 }

packages/richtext-slate/src/utilities/SlatePropsProvider.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { createContext, type ReactNode, useContext } from 'react'
+import React, { createContext, type ReactNode, use } from 'react'
 
 interface SlateProps {
   schemaPath: string
@@ -15,11 +15,11 @@ export function SlatePropsProvider({
   children: ReactNode
   schemaPath: string
 }) {
-  return <SlatePropsContext.Provider value={{ schemaPath }}>{children}</SlatePropsContext.Provider>
+  return <SlatePropsContext value={{ schemaPath }}>{children}</SlatePropsContext>
 }
 
 export function useSlateProps() {
-  const context = useContext(SlatePropsContext)
+  const context = use(SlatePropsContext)
   if (!context) {
     throw new Error('useSlateProps must be used within SlatePropsProvider')
   }