From c33161707d584c34b0c9f5275ffc8a6b45da9709 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] 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..6f40fa39d 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).
+
 ### 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.