refactor: Optimize CodeEditor and Edit CodeEditor components for impr…

…oved performance and data caching
YaoApp · Aug 14, 2024 · 90ea3ec · 90ea3ec
1 parent 0ce334a
commit 90ea3ec
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 17 deletions.
diff --git a/packages/xgen/components/builder/CodeEditor/index.tsx b/packages/xgen/components/builder/CodeEditor/index.tsx
@@ -43,7 +43,10 @@ const Custom = window.$app.memo((props: IProps) => {
 	useEffect(() => setNamespace(props.__namespace), [props.__namespace])
 	useEffect(() => {
 		setShowPlaceholder(!props.value)
-		if (dataCache[key] === props.value) return
+		if (dataCache[key] === props.value) {
+			setValue(props.value)
+			return
+		}
 
 		if (typeof props.value !== 'string' && props.value !== undefined && props.value !== null) {
 			// YAML stringify
@@ -79,8 +82,8 @@ const Custom = window.$app.memo((props: IProps) => {
 
 	const onChange = (v: any) => {
 		if (!props.onChange) return
-		props.onChange(v)
 		dataCache[key] = v
+		props.onChange(v)
 	}
 
 	const editorDidMount: EditorDidMount = (editor, monaco) => {

diff --git a/packages/xgen/components/builder/Input/index.tsx b/packages/xgen/components/builder/Input/index.tsx
@@ -3,7 +3,6 @@ import { Input } from 'antd'
 import Item from '../Item'
 import type { InputProps } from 'antd'
 import type { Component } from '@/types'
-import { useEffect, useState } from 'react'
 
 interface IProps extends InputProps, Component.PropsEditComponent {}
 

diff --git a/packages/xgen/components/builder/WangEditor/index.tsx b/packages/xgen/components/builder/WangEditor/index.tsx
@@ -4,14 +4,13 @@ import { useState, useEffect } from 'react'
 import { Editor, Toolbar } from '@wangeditor/editor-for-react'
 import { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor'
 
-import { Item } from '@/components'
+import Item from '../Item'
 import { getLocale } from '@umijs/max'
 import Upload from './upload'
 
 import type { Component } from '@/types'
 import clsx from 'clsx'
 import styles from './index.less'
-import { Else, If, Then } from 'react-if'
 
 export interface IWangEditor {
 	value: any
@@ -23,7 +22,6 @@ export interface IWangEditor {
 	videoUpload?: string
 	videoUrl?: string
 	placeholder?: string
-	type: 'view' | 'edit'
 	onChange?: (v: any) => void
 }
 
@@ -86,13 +84,7 @@ const WangEditor = window.$app.memo((props: IWangEditor) => {
 	}, [editor])
 
 	return (
-		<div
-			className={clsx([styles._local])}
-			style={{
-				paddingLeft: props.type == 'view' ? 0 : 12,
-				paddingRight: props.type == 'view' ? 0 : 12
-			}}
-		>
+		<div className={clsx([styles._local])} style={{ paddingLeft: 12, paddingRight: 12 }}>
 			<Toolbar
 				className={clsx([styles._toolbar])}
 				editor={editor}
@@ -117,10 +109,10 @@ const WangEditor = window.$app.memo((props: IWangEditor) => {
 })
 
 const Index = (props: IProps) => {
-	const { __bind, __name, __type, itemProps, ...rest_props } = props
+	const { __bind, __name, onChange, ...rest_props } = props
 	return (
-		<Item {...itemProps} {...{ __bind, __name }}>
-			<WangEditor {...rest_props} type={__type}></WangEditor>
+		<Item {...{ __bind, __name }}>
+			<WangEditor {...rest_props}></WangEditor>
 		</Item>
 	)
 }

diff --git a/packages/xgen/components/edit/CodeEditor/index.tsx b/packages/xgen/components/edit/CodeEditor/index.tsx
@@ -41,7 +41,10 @@ const Custom = window.$app.memo((props: ICustom) => {
 	const { dataCache } = global
 
 	useEffect(() => {
-		if (dataCache[key] === props.value) return
+		if (dataCache[key] === props.value) {
+			setValue(props.value)
+			return
+		}
 		if (!props.value) return
 		if (typeof props.value !== 'string' && props.value !== undefined && props.value !== null) {
 			// YAML stringify