Update react editor

components/commerce/collection.tsx

@@ -1,5 +1,5 @@
 import { useState, useCallback } from 'react';
-import { useParams } from 'next/navigation';
+import { useRouteHandle } from '@/lib/resolve-route';
 import { ChevronDown, SlidersHorizontal } from 'lucide-react';
 import type { ShopifyCollection } from '@reacteditor/field-shopify';
 import {
@@ -358,10 +358,8 @@ function buildProductFilters(active: ActiveFilters): ProductFilter[] {
 
 export function CollectionView(props: CollectionProps) {
   const { collection: selected, showDescription, showCoverImage, customCoverImage, columns, limit, defaultSort } = props;
-  const params = useParams();
-  const paramHandle =
-    typeof params?.handle === 'string' ? params.handle : undefined;
-  const handle = selected?.handle ?? paramHandle ?? '';
+  const routeHandle = useRouteHandle();
+  const handle = selected?.handle ?? routeHandle ?? '';
 
   const [sort, setSort] = useState<CollectionSortKey>(defaultSort);
   const [reverse, setReverse] = useState(false);
@@ -425,7 +423,7 @@ export function CollectionView(props: CollectionProps) {
   const description = collection?.description ?? (selected as any)?.description;
   const collectionImage = customCoverImage || collection?.image?.url;
 
-  if (!selected && !paramHandle) {
+  if (!selected && !routeHandle) {
     return (
       <section className="bg-background pb-24 pt-12 md:pt-20">
         <Container>
@@ -463,7 +461,7 @@ export function CollectionView(props: CollectionProps) {
             Collection
           </p>
           <Typography variant="h1">
-            {collection?.title ?? (selected as any)?.title ?? paramHandle}
+            {collection?.title ?? (selected as any)?.title ?? routeHandle}
           </Typography>
           {showDescription === 'yes' && description ? (
             <Typography variant="subtitle1" className="mt-4 max-w-2xl">