fix: theme editor edit error (#42452)

* fix: theme editor edit error

* chore: less bundle

* fix: themeEditor

* fix: lint

* fix: themeEditor

* fix: last fix

* chore: update

---------

Co-authored-by: 洋 <hetongyang@bytedance.com>
Co-authored-by: lijianan <574980606@qq.com>

.dumi/pages/theme-editor/index.tsx

@@ -1,9 +1,9 @@
-import React, { useCallback, useEffect, useState, Suspense, useLayoutEffect } from 'react';
-import { enUS, ThemeEditor, zhCN } from 'antd-token-previewer';
-import { Button, ConfigProvider, message, Modal, Spin, Typography } from 'antd';
+import { css } from '@emotion/react';
+import { Button, ConfigProvider, Modal, Spin, Typography, message } from 'antd';
+import { ThemeEditor, enUS, zhCN } from 'antd-token-previewer';
 import type { ThemeConfig } from 'antd/es/config-provider/context';
 import { Helmet } from 'dumi';
-import { css } from '@emotion/react';
+import React, { Suspense, useCallback, useEffect, useState } from 'react';
 import type { JSONContent, TextContent } from 'vanilla-jsoneditor';
 import useLocale from '../../hooks/useLocale';
 
@@ -64,21 +64,19 @@ const CustomTheme = () => {
     json: undefined,
   });
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     const storedConfig = localStorage.getItem(ANT_DESIGN_V5_THEME_EDITOR_THEME);
     if (storedConfig) {
-      setTheme(() => JSON.parse(storedConfig));
+      const themeConfig = JSON.parse(storedConfig);
+      const originThemeConfig = {
+        json: themeConfig,
+        text: undefined,
+      };
+      setThemeConfigContent(originThemeConfig);
+      setTheme(themeConfig);
     }
   }, []);
 
-  useEffect(() => {
-    if (editModelOpen === true) return;
-    setThemeConfigContent({
-      json: theme as any,
-      text: undefined,
-    });
-  }, [theme, editModelOpen]);
-
   const styles = useStyle();
 
   const handleSave = () => {
@@ -96,18 +94,13 @@ const CustomTheme = () => {
 
   const handleEditConfigChange = (newcontent, preContent, status) => {
     setThemeConfigContent(newcontent);
-    if (
-      Array.isArray(status.contentErrors.validationErrors) &&
-      status.contentErrors.validationErrors.length === 0
-    ) {
-      setEditThemeFormatRight(true);
-    } else {
-      setEditThemeFormatRight(false);
-    }
+    setEditThemeFormatRight(!status.contentErrors);
   };
 
   const editSave = useCallback(() => {
-    if (!editThemeFormatRight) {
+    const contentFormatError = !editThemeFormatRight;
+
+    if (contentFormatError) {
       message.error(locale.editJsonContentTypeError);
       return;
     }
@@ -121,7 +114,7 @@ const CustomTheme = () => {
     setTheme(themeConfig);
     editModelClose();
     messageApi.success(locale.editSuccessfully);
-  }, [themeConfigContent]);
+  }, [themeConfigContent, editThemeFormatRight]);
 
   const handleExport = () => {
     const file = new File([JSON.stringify(theme, null, 2)], `Ant Design Theme.json`, {

.dumi/theme/common/JSONEditor/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
-import { JSONEditor, Mode } from 'vanilla-jsoneditor';
 import type { JSONEditorPropsOptional } from 'vanilla-jsoneditor';
+import { JSONEditor, Mode } from 'vanilla-jsoneditor';
 
 const Editor: React.FC<JSONEditorPropsOptional> = (props) => {
   const editorRef = useRef<JSONEditor>(null);
@@ -18,7 +18,7 @@ const Editor: React.FC<JSONEditorPropsOptional> = (props) => {
 
   useEffect(() => {
     editorRef.current?.updateProps(props);
-  }, [props]);
+  }, [props.content]);
 
   return <div ref={container} className="vanilla-jsoneditor-react" />;
 };