refactor: Update CodeEditor component to handle value changes and fix…

… language-specific stringification issues
YaoApp · Jun 4, 2024 · fe3398b · fe3398b
1 parent f5b38c9
commit fe3398b
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 2 deletions.
diff --git a/packages/xgen/components/builder/CodeEditor/index.tsx b/packages/xgen/components/builder/CodeEditor/index.tsx
@@ -75,6 +75,7 @@ const Custom = window.$app.memo((props: IProps) => {
 	const onChange = (v: any) => {
 		if (!props.onChange) return
 		props.onChange(v)
+		setValue(v)
 	}
 
 	const editorDidMount: EditorDidMount = (editor, monaco) => {
@@ -99,6 +100,13 @@ const Custom = window.$app.memo((props: IProps) => {
 		})
 
 		monaco.editor.setTheme(theme)
+
+		editor.onDidChangeModelContent(() => {
+			const position = editor.getPosition()
+			if (position && editor.getModel()?.getValue() != '') {
+				editor.setPosition(position)
+			}
+		})
 	}
 
 	return (

diff --git a/packages/xgen/components/edit/CodeEditor/index.tsx b/packages/xgen/components/edit/CodeEditor/index.tsx
@@ -9,14 +9,20 @@ import styles from './index.less'
 
 import type { Component } from '@/types'
 
+import yaml from 'js-yaml'
 import type { EditorDidMount, monaco } from 'react-monaco-editor'
+import { message } from 'antd'
+import { getLocale } from '@umijs/max'
 
 interface ICustom {
 	value: string
 	disabled?: boolean
 	language?: 'json' | 'javascript' | 'typescript' | 'yaml' | 'html' | 'css' | 'sql' | 'markdown'
 	hideLineNumbers?: boolean
 	height?: number | string
+
+	__name: string
+	__bind: string
 	onChange?: (v: any) => void
 }
 
@@ -29,14 +35,36 @@ const Custom = window.$app.memo((props: ICustom) => {
 	const { language = 'json', height = 360 } = props
 
 	const theme = useMemo(() => (global.theme === 'dark' ? 'x-dark' : 'x-light'), [global.theme])
+	const is_cn = getLocale() === 'zh-CN'
 
 	useEffect(() => {
 		if (!props.value) return
-		if (typeof props.value !== 'string') {
+		if (typeof props.value !== 'string' && props.value !== undefined && props.value !== null) {
+			// YAML stringify
+			if (language === 'yaml') {
+				try {
+					setValue(yaml.dump(props.value))
+				} catch (e) {
+					console.error(`CodeEditor: ${e}`)
+					message.error(
+						is_cn
+							? `YAML 格式错误 ${props.__name} (${props.__bind})`
+							: `YAML format error ${props.__name} (${props.__bind})`
+					)
+				}
+				return
+			}
+
+			// JSON stringify
 			try {
 				setValue(JSON.stringify(props.value, null, 2))
 			} catch (e) {
 				console.error(`CodeEditor: ${e}`)
+				message.error(
+					is_cn
+						? `JSON 格式错误 ${props.__name} (${props.__bind})`
+						: `JSON format error ${props.__name} (${props.__bind})`
+				)
 			}
 			return
 		}
@@ -71,6 +99,14 @@ const Custom = window.$app.memo((props: ICustom) => {
 		})
 
 		monaco.editor.setTheme(theme)
+
+		// fix select all when the editor is loaded
+		editor.onDidChangeModelContent(() => {
+			const position = editor.getPosition()
+			if (position && editor.getModel()?.getValue() != '') {
+				editor.setPosition(position)
+			}
+		})
 	}
 
 	return (
@@ -105,7 +141,7 @@ const Index = (props: IProps) => {
 
 	return (
 		<Item {...itemProps} {...{ __bind, __name }}>
-			<Custom {...rest_props}></Custom>
+			<Custom {...{ __bind, __name }} {...rest_props}></Custom>
 		</Item>
 	)
 }