feat: add Theme Config Editor

.dumi/pages/theme-editor/components/JSONEditor.tsx

@@ -0,0 +1,33 @@
+import { JSONEditor as Editor, Mode, type JSONEditorPropsOptional } from 'vanilla-jsoneditor';
+import React from 'react';
+
+const JSONEditor = (props: JSONEditorPropsOptional) => {
+  const refContainer = React.useRef(null);
+  const refEditor = React.useRef(null);
+
+  React.useEffect(() => {
+    refEditor.current = new Editor({
+      target: refContainer.current,
+      props: {
+        mode: Mode.text,
+      },
+    });
+
+    return () => {
+      if (refEditor.current) {
+        refEditor.current.destroy();
+        refEditor.current = null;
+      }
+    };
+  }, []);
+
+  React.useEffect(() => {
+    if (refEditor.current) {
+      refEditor.current.updateProps(props);
+    }
+  }, [props]);
+
+  return <div className="vanilla-jsoneditor-react" ref={refContainer} />;
+};
+
+export default JSONEditor;

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

@@ -1,19 +1,27 @@
-import React, { useEffect } from 'react';
+import { isObject } from 'lodash';
+import React, { useCallback, useEffect, useState } from 'react';
 import { enUS, zhCN, ThemeEditor } from 'antd-token-previewer';
 import { Button, ConfigProvider, message, Modal, Typography } from 'antd';
 import type { ThemeConfig } from 'antd/es/config-provider/context';
 import { Helmet } from 'dumi';
 import { css } from '@emotion/react';
 import CopyToClipboard from 'react-copy-to-clipboard';
-import { CopyOutlined } from '@ant-design/icons';
+import { CopyOutlined, EditOutlined } from '@ant-design/icons';
+import { type TextContent } from 'vanilla-jsoneditor';
 import useLocale from '../../hooks/useLocale';
+import JSONEditor from './components/JSONEditor';
 
 const locales = {
   cn: {
     title: '主题编辑器',
     save: '保存',
     reset: '重置',
     export: '导出',
+    edit: '编辑',
+    editModelTitle: '编辑主题配置',
+    editTitle: '在下方编辑你的主题 JSON 即可',
+    editJsonContentTypeError: '主题 JSON 格式错误',
+    editSuccessfully: '编辑成功',
     exportDesc: '将下面的 JSON 对象复制到 ConfigProvider 的 theme 属性中即可。',
     saveSuccessfully: '保存成功',
   },
@@ -22,6 +30,11 @@ const locales = {
     save: 'Save',
     reset: 'Reset',
     export: 'Export',
+    edit: 'Edit',
+    editModelTitle: 'edit Theme Config',
+    editTitle: 'Edit your theme JSON below',
+    editJsonContentTypeError: 'The theme of the JSON format is incorrect',
+    editSuccessfully: 'Edited successfully',
     exportDesc: 'Copy the following JSON object to the theme prop of ConfigProvider.',
     saveSuccessfully: 'Saved successfully',
   },
@@ -103,6 +116,47 @@ const CustomTheme = () => {
     setTheme({});
   };
 
+  const [editModelOpen, setEditModelOpen] = useState<boolean>(false);
+  const [editThemeFormatRight, setEditThemeFormatRight] = useState<boolean>(true);
+  const [content, setContent] = useState<TextContent>({
+    text: '{}',
+  });
+
+  const handleEditConfig = () => {
+    setEditModelOpen(true);
+  };
+
+  const editModelClose = useCallback(() => {
+    setEditModelOpen(false);
+  }, [content]);
+
+  const handleEditConfigChange = (newcontent, preContent, status) => {
+    setContent(newcontent);
+    if (
+      Array.isArray(status.contentErrors.validationErrors) &&
+      status.contentErrors.validationErrors.length === 0
+    ) {
+      setEditThemeFormatRight(true);
+    } else {
+      setEditThemeFormatRight(false);
+    }
+  };
+
+  const editSave = useCallback(() => {
+    if (!editThemeFormatRight) {
+      message.error(locale.editJsonContentTypeError);
+      return;
+    }
+    const themeConfig = JSON.parse(content.text);
+    if (!isObject(themeConfig)) {
+      message.error(locale.editJsonContentTypeError);
+      return;
+    }
+    setTheme(themeConfig);
+    editModelClose();
+    messageApi.success(locale.editSuccessfully);
+  }, [content]);
+
   return (
     <div>
       <Helmet>
@@ -117,6 +171,26 @@ const CustomTheme = () => {
             {locale.title}
           </Typography.Title>
           <div>
+            <Modal
+              open={editModelOpen}
+              title={locale.editModelTitle}
+              width={600}
+              okText={locale.save}
+              onOk={editSave}
+              onCancel={editModelClose}
+            >
+              <div>
+                <div style={{ color: 'rgba(0,0,0,0.65)' }}>{locale.editTitle}</div>
+                <JSONEditor
+                  content={content}
+                  onChange={handleEditConfigChange}
+                  mainMenuBar={false}
+                />
+              </div>
+            </Modal>
+            <Button onClick={handleEditConfig} icon={<EditOutlined />} style={{ marginRight: 8 }}>
+              {locale.edit}
+            </Button>
             <Button onClick={handleOutput} style={{ marginRight: 8 }}>
               {locale.export}
             </Button>

package.json

@@ -154,7 +154,8 @@
     "rc-util": "^5.25.2",
     "scroll-into-view-if-needed": "^3.0.3",
     "shallowequal": "^1.1.0",
-    "throttle-debounce": "^5.0.0"
+    "throttle-debounce": "^5.0.0",
+    "vanilla-jsoneditor": "^0.11.4"
   },
   "devDependencies": {
     "@ant-design/tools": "^16.1.0-alpha.2",