remove trailing commas

apps/studio/components/grid/components/editor/JsonEditor.tsx

@@ -5,7 +5,7 @@ import { IconMaximize, Popover } from 'ui'
 
 import { BlockKeys, MonacoEditor, NullValue } from 'components/grid/components/common'
 import { useTrackedState } from 'components/grid/store'
-import { prettifyJSON, tryParseJson } from 'lib/helpers'
+import { prettifyJSON, tryParseJson, removeJSONTrailingComma } from 'lib/helpers'
 import { isNil } from 'lodash'
 
 interface JsonEditorProps<TRow, TSummaryRow = unknown>
@@ -36,6 +36,9 @@ export const JsonEditor = <TRow, TSummaryRow = unknown>({
   }, [])
 
   const saveChanges = useCallback((newValue: string | null) => {
+    if (newValue) {
+      newValue = removeJSONTrailingComma(newValue)
+    }
     if (newValue !== value) commitChange(newValue)
   }, [])
 

apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/RowEditor/JsonEditor/JsonEditor.tsx

@@ -3,7 +3,7 @@ import { useEffect, useState } from 'react'
 import { Button, IconAlignLeft, SidePanel } from 'ui'
 
 import TwoOptionToggle from 'components/ui/TwoOptionToggle'
-import { minifyJSON, prettifyJSON, tryParseJson } from 'lib/helpers'
+import { minifyJSON, prettifyJSON, tryParseJson, removeJSONTrailingComma } from 'lib/helpers'
 import toast from 'react-hot-toast'
 import ActionBar from '../../ActionBar'
 import DrilldownViewer from './DrilldownViewer'
@@ -42,7 +42,8 @@ const JsonEdit = ({
 
   const validateJSON = async (resolve: () => void) => {
     try {
-      const minifiedJSON = minifyJSON(jsonStr)
+      const newJsonStr = removeJSONTrailingComma(jsonStr)
+      const minifiedJSON = minifyJSON(newJsonStr)
       if (onSaveJSON) onSaveJSON(minifiedJSON, resolve)
     } catch (error: any) {
       resolve()

apps/studio/lib/helpers.ts

@@ -42,6 +42,14 @@ export const prettifyJSON = (minifiedJSON: string) => {
   }
 }
 
+export const removeJSONTrailingComma = (jsonString: string) => {
+  /**
+   * Remove trailing commas: Delete any comma immediately preceding the closing brace '}' or
+   * bracket ']' using a regular expression.
+   */
+  return jsonString.replace(/,\s*(?=[\}\]])/g, '')
+}
+
 export const uuidv4 = () => {
   return _uuidV4()
 }