From 4afddfc978b8ae0aef32722ded81e53c4abcd2b5 Mon Sep 17 00:00:00 2001
From: Mathias Oterhals Myklebust <mom@variant.no>
Date: Wed, 18 Sep 2024 14:21:28 +0200
Subject: [PATCH 1/2] fix(CompensationsPreview): clean stega from salaries data
 string

Since salaries data is encoded as a simple string, Sanity assumes it's fine to apply stega to it. But JSON.parse begs to differ...
---
 src/compensations/CompensationsPreview.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/compensations/CompensationsPreview.tsx b/src/compensations/CompensationsPreview.tsx
index 131e2aaeb..7e7fb6a03 100644
--- a/src/compensations/CompensationsPreview.tsx
+++ b/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>
     )
   );

From 1d3dd8880a377bd9055b4885baccc659b2c6f348 Mon Sep 17 00:00:00 2001
From: Mathias Oterhals Myklebust <mom@variant.no>
Date: Wed, 18 Sep 2024 14:34:41 +0200
Subject: [PATCH 2/2] docs(README): steganography in presentation

---
 README.md | 52 ++++++++++++++++++++++++++++------------------------
 1 file changed, 28 insertions(+), 24 deletions(-)

diff --git a/README.md b/README.md
index bde4aad6b..cff16731d 100644
--- a/README.md
+++ b/README.md
@@ -147,34 +147,34 @@ 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;
@@ -182,6 +182,10 @@ 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.