fix: handle errors and fix api logic with acl updating

app/routes/_data.acls._index/cm.tsx

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react'
 import Merge from 'react-codemirror-merge'
 import CodeMirror from '@uiw/react-codemirror'
 import { ClientOnly } from 'remix-utils/client-only'
+import { ErrorBoundary } from 'react-error-boundary'
 import { jsonc } from '@shopify/lang-jsonc'
 import { githubDark, githubLight } from '@uiw/codemirror-theme-github'
 import { useState } from 'react'
@@ -11,12 +12,11 @@ import Fallback from './fallback'
 
 interface EditorProps {
 	isDisabled?: boolean
+	value: string
 	onChange: (value: string) => void
-	defaultValue?: string
 }
 
 export function Editor(props: EditorProps) {
-	const [value, setValue] = useState(props.defaultValue ?? '')
 	const [light, setLight] = useState(false)
 	useEffect(() => {
 		const theme = window.matchMedia('(prefers-color-scheme: light)')
@@ -32,17 +32,27 @@ export function Editor(props: EditorProps) {
 			'rounded-b-lg rounded-tr-lg mb-2 z-10 overflow-x-hidden',
 		)}>
 			<div className="overflow-y-scroll h-editor text-sm">
-				<ClientOnly fallback={<Fallback acl={value} />}>
-				{() => (
-					<CodeMirror
-						value={value}
-						height="100%"
-						extensions={[jsonc()]}
-						theme={light ? githubLight : githubDark}
-						onChange={(value) => props.onChange(value)}
-					/>
-				)}
-				</ClientOnly>
+				<ErrorBoundary fallback={
+					<p className={cn(
+						'w-full h-full flex items-center justify-center',
+						'text-gray-400 dark:text-gray-500 text-xl',
+					)}>
+						Failed to load the editor.
+					</p>
+				}>
+					<ClientOnly fallback={<Fallback acl={props.value} />}>
+					{() => (
+						<CodeMirror
+							value={props.value}
+							height="100%"
+							extensions={[jsonc()]}
+							style={{ height: "100%" }}
+							theme={light ? githubLight : githubDark}
+							onChange={(value) => props.onChange(value)}
+						/>
+					)}
+					</ClientOnly>
+				</ErrorBoundary>
 			</div>
 		</div>
 	)
@@ -77,25 +87,34 @@ export function Differ(props: DifferProps) {
 						No changes
 					</p>
 				) : (
-					<ClientOnly fallback={<Fallback acl={props.right} />}>
-					{() => (
-						<Merge
-							orientation="a-b"
-							theme={light ? githubLight : githubDark}
-						>
-							<Merge.Original
-								readOnly
-								value={props.left}
-								extensions={[jsonc()]}
-							/>
-							<Merge.Modified
-								readOnly
-								value={props.right}
-								extensions={[jsonc()]}
-							/>
-						</Merge>
-					)}
-					</ClientOnly>
+					<ErrorBoundary fallback={
+						<p className={cn(
+							'w-full h-full flex items-center justify-center',
+							'text-gray-400 dark:text-gray-500 text-xl',
+						)}>
+							Failed to load the editor.
+						</p>
+					}>
+						<ClientOnly fallback={<Fallback acl={props.right} />}>
+						{() => (
+							<Merge
+								orientation="a-b"
+								theme={light ? githubLight : githubDark}
+							>
+								<Merge.Original
+									readOnly
+									value={props.left}
+									extensions={[jsonc()]}
+								/>
+								<Merge.Modified
+									readOnly
+									value={props.right}
+									extensions={[jsonc()]}
+								/>
+							</Merge>
+						)}
+						</ClientOnly>
+					</ErrorBoundary>
 				)}
 			</div>
 		</div>