v3 - clean stega from salaries data string

README.md

@@ -147,41 +147,45 @@ When building custom components in Sanity Studio that need to fetch data, it's i
 
 **Implementation Example:**
 
-```typescript
+```tsx
 import React, { useEffect, useState } from "react";
 import { fetchWithToken } from "studio/lib/fetchWithToken";
 
 const MyCustomComponent: React.FC = () => {
-const [data, setData] = useState<any>(null);
-const [error, setError] = useState<string | null>(null);
-
-useEffect(() => {
- const fetchData = async () => {
-   try {
-     const query = '*[_type == "myType"]'; // Replace with your GROQ query
-     const result = await fetchWithToken<any>(query);
-     setData(result);
-   } catch (err) {
-     console.error("Error fetching data:", err);
-     setError(err.message);
-   }
- };
-
- fetchData();
-}, []);
-
-if (error) {
- return <div>Error: {error}</div>;
-}
-
-return <div>{JSON.stringify(data)}</div>; // Render your component's UI
+  const [data, setData] = useState<any>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const query = '*[_type == "myType"]'; // Replace with your GROQ query
+        const result = await fetchWithToken<any>(query);
+        setData(result);
+      } catch (err) {
+        console.error("Error fetching data:", err);
+        setError(err.message);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  if (error) {
+    return <div>Error: {error}</div>;
+  }
+
+  return <div>{JSON.stringify(data)}</div>; // Render your component's UI
 };
 
 export default MyCustomComponent;
 ```
 
 By using fetchWithToken, you ensure that all data fetching happens securely, with the server-side API route handling the sensitive token.
 
+### Steganography in Presentation
+
+To enable preview functionality in the Presentation view, Sanity applies [steganography](https://www.sanity.io/docs/stega) to the string data. This manipulates the data to include invisible HTML entities to store various metadata. If the strings are used in business logic, that logic will likely break in the Presentation view. To fix this, Sanity provides the `stegaClean` utility to remove this extra metadata. An example of this in action can be found in [CompensationsPreview.tsx](src/compensations/CompensationsPreview.tsx), where JSON parsing of salary data fails without stega cleaning.
+
 ### OpenGraph image customization
 
 As part of providing the basic metadata for the [OpenGraph Protocol](https://ogp.me), a fallback image is generated if no other is specified. Fonts and background can be customized as shown below.

src/compensations/CompensationsPreview.tsx

@@ -1,4 +1,5 @@
 "use client";
+import { stegaClean } from "@sanity/client/stega";
 import { QueryResponseInitial, useQuery } from "@sanity/react-loader";
 import { Suspense } from "react";
 
@@ -18,7 +19,7 @@ const CompensationsPreview = ({
   initialCompensations,
   initialLocations,
 }: CompensationsPreviewProps) => {
-  const { data } = useQuery<CompensationsPage>(
+  const { data: compensationsData } = useQuery<CompensationsPage>(
     COMPENSATIONS_PAGE_QUERY,
     { slug: initialCompensations.data.slug.current },
     { initial: initialCompensations },
@@ -29,10 +30,17 @@ const CompensationsPreview = ({
     { initial: initialLocations },
   );
 
+  compensationsData.salariesByLocation = stegaClean(
+    compensationsData.salariesByLocation,
+  );
+
   return (
     locationData && (
       <Suspense>
-        <Compensations compensations={data} locations={locationData} />
+        <Compensations
+          compensations={compensationsData}
+          locations={locationData}
+        />
       </Suspense>
     )
   );