Improved base source panel

client/components/Controllers/Base/Panels/Source.tsx

@@ -1,35 +1,44 @@
 import { useTheme } from '@mui/material/styles'
 import Box from '@mui/material/Box'
 import TextEditor from '../../../Editors/Text'
+import * as types from '../../../../types'
 
-export type SourcePanelProps =
-  | {
-      json?: false
-      value?: string
-      onChange?: (text: string) => void
-    }
-  | {
-      json: true
-      value?: any
-      onChange?: (data: any) => void
-    }
+export type SourcePanelProps<T extends string | types.IData> = {
+  value?: T
+  language?: string
+  onChange?: (value: T) => void
+}
+
+export function JsonSourcePanel(props: SourcePanelProps<types.IData>) {
+  const { value, onChange, ...others } = props
+  return (
+    <TextSourcePanel
+      language="json"
+      value={JSON.stringify(value, null, 2)}
+      onChange={
+        onChange
+          ? (text) => {
+              try {
+                const data = JSON.parse(text || '{)')
+                onChange(data)
+              } catch (error) {}
+            }
+          : undefined
+      }
+      {...others}
+    />
+  )
+}
 
-export default function SourcePanel(props: SourcePanelProps) {
+export function TextSourcePanel(props: SourcePanelProps<string>) {
   const theme = useTheme()
   if (props.value === undefined) return null
   return (
     <Box>
       <TextEditor
-        value={props.json ? JSON.stringify(props.value, null, 2) : props.value}
-        onChange={(text) => {
-          if (props.json) {
-            try {
-              text = JSON.parse(text || '{)')
-            } catch (error) {}
-          }
-          if (props.onChange) props.onChange(text || '')
-        }}
-        language={props.json ? 'json' : undefined}
+        value={props.value}
+        onChange={(value) => props.onChange?.(value || '')}
+        language={props.language || 'plaintext'}
         options={{ readOnly: !props.onChange }}
         height={theme.spacing(41)}
       />

client/components/Controllers/Chart/Panels/Source.tsx

@@ -1,12 +1,11 @@
-import SourcePanel from '../../Base/Panels/Source'
+import { JsonSourcePanel } from '../../Base/Panels/Source'
 import { useStore } from '../store'
 
 export default function Source() {
   const modified = useStore((state) => state.modified)
   const updateState = useStore((state) => state.updateState)
   return (
-    <SourcePanel
-      json
+    <JsonSourcePanel
       value={modified}
       onChange={(value) => updateState({ modified: value })}
     />

client/components/Controllers/File/Panels/Source.tsx

@@ -1,8 +1,8 @@
-import SourcePanel from '../../Base/Panels/Source'
+import { TextSourcePanel } from '../../Base/Panels/Source'
 import { useStore } from '../store'
 
 export default function Source() {
   const textSource = useStore((state) => state.textSource)
   if (!textSource) return null
-  return <SourcePanel value={textSource} />
+  return <TextSourcePanel value={textSource} />
 }

client/components/Controllers/Metadata/Panels/Source.tsx

@@ -1,12 +1,11 @@
-import SourcePanel from '../../Base/Panels/Source'
+import { JsonSourcePanel } from '../../Base/Panels/Source'
 import { useStore } from '../store'
 
 export default function Source() {
   const modified = useStore((state) => state.modified)
   const updateState = useStore((state) => state.updateState)
   return (
-    <SourcePanel
-      json
+    <JsonSourcePanel
       value={modified}
       onChange={(value) => updateState({ modified: value })}
     />

client/components/Controllers/Table/Panels/Source.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import SourcePanel from '../../Base/Panels/Source'
+import { TextSourcePanel } from '../../Base/Panels/Source'
 import { useStore } from '../store'
 
 export default function Source() {
@@ -10,5 +10,5 @@ export default function Source() {
     loadSource().catch(console.error)
   }, [record])
   if (!source) return null
-  return <SourcePanel value={source} />
+  return <TextSourcePanel value={source} />
 }

client/components/Controllers/View/Panels/Source.tsx

@@ -1,14 +1,7 @@
-import SourcePanel from '../../Base/Panels/Source'
+import { JsonSourcePanel } from '../../Base/Panels/Source'
 import { useStore } from '../store'
 
 export default function Source() {
   const modified = useStore((state) => state.modified)
-  const updateState = useStore((state) => state.updateState)
-  return (
-    <SourcePanel
-      json
-      value={modified}
-      onChange={(value) => updateState({ modified: value })}
-    />
-  )
+  return <JsonSourcePanel value={modified} />
 }