formatValue

elbwalker · Dec 12, 2024 · e6920ac · e6920ac
1 parent e75266a
commit e6920ac
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 7 deletions.
diff --git a/website/docs/destinations/google-ga4.mdx b/website/docs/destinations/google-ga4.mdx
@@ -90,8 +90,8 @@ ID</Link>.
 #### Example
 
 <DestinationInit
-  custom={{
-    measurementId: 'G-XXXXXXXXXX',
+  custom={`{
+    measurementId: 'G-XXXXXXXXXX', // Required
     debug: false,
     include: ['globals'],
     pageview: false,
@@ -106,7 +106,7 @@ ID</Link>.
     server_container_url: 'https://server.example.com',
     snakeCase: true,
     transport_url: 'https://www.google-analytics.com/g/collect',
-  }}
+  }`}
 />
 
 ### Custom

diff --git a/website/src/components/preview/codeBox.tsx b/website/src/components/preview/codeBox.tsx
@@ -45,7 +45,7 @@ const CodeBox: React.FC<CodeBoxProps> = ({
         <Editor
           value={value}
           disabled={disabled}
-          onValueChange={onChange}
+          onValueChange={(newCode) => onChange?.(newCode)}
           highlight={highlightCode}
           padding={10}
           style={{

diff --git a/website/src/components/preview/eventMapping.tsx b/website/src/components/preview/eventMapping.tsx
@@ -36,14 +36,20 @@ const EventMapping: React.FC<EventMappingProps> = ({
   labelRight = 'Result',
   showMiddle = true,
 }) => {
-  const [left, setLeft] = useState(JSON.stringify(initLeft, null, 2));
-  const [middle, setMiddle] = useState(JSON.stringify(initMiddle, null, 2));
+  const formatValue = (obj: unknown): string => {
+    return typeof obj === 'string'
+      ? obj // Return string as is
+      : JSON.stringify(obj, null, 2).replace(/"([^"]+)":/g, '$1:'); // Remove quotes from keys
+  };
+
+  const [left, setLeft] = useState(formatValue(initLeft));
+  const [middle, setMiddle] = useState(formatValue(initMiddle));
   const [right, setRight] = useState<string[]>([initRight]);
 
   const log = useCallback(
     (...args: unknown[]) => {
       const params = args.map((arg) => {
-        return isObject(arg) ? JSON.stringify(arg, null, 2) : `"${arg}"`;
+        return isObject(arg) ? formatValue(arg) : `"${arg}"`;
       });
       setRight([`${fnName}(${params.join(', ')})`]);
     },