feat: add Theme Config Editor #39621

BoyYangzai · 2022-12-17T19:09:42Z

🤔 This is a ...

🔗 Related issue link

fix Ant Design Theme Editor theme upload #39620

💡 Background and solution

📝 Changelog

Language	Changelog
🇺🇸 English	add Theme Editor theme upload
🇨🇳 Chinese	添加主题编辑器主题上传功能

☑️ Self-Check before Merge

⚠️ Please check all items below before requesting a reviewing. ⚠️

Doc is updated/provided or not needed
Demo is updated/provided or not needed
TypeScript definition is updated/provided or not needed
Changelog is provided or not needed

github-actions · 2022-12-17T19:09:55Z

codecov · 2022-12-17T19:24:14Z

Codecov Report

Base: 100.00% // Head: 100.00% // No change to project coverage 👍

Coverage data is based on head (bb2cfc0) compared to base (1b03cfd).
Patch has no changes to coverable lines.

Additional details and impacted files

@@            Coverage Diff             @@
##           feature    #39621    +/-   ##
==========================================
  Coverage   100.00%   100.00%            
==========================================
  Files          546       556    +10     
  Lines         9363      9602   +239     
  Branches      2653      2714    +61     
==========================================
+ Hits          9363      9602   +239

Impacted Files	Coverage Δ
components/grid/row.tsx	`100.00% <0.00%> (ø)`
components/menu/index.tsx	`100.00% <0.00%> (ø)`
components/modal/Modal.tsx	`100.00% <0.00%> (ø)`
components/locale/fr_BE.tsx	`100.00% <0.00%> (ø)`
components/locale/fr_CA.tsx	`100.00% <0.00%> (ø)`
components/menu/SubMenu.tsx	`100.00% <0.00%> (ø)`
components/select/index.tsx	`100.00% <0.00%> (ø)`
components/anchor/Anchor.tsx	`100.00% <0.00%> (ø)`
components/menu/MenuItem.tsx	`100.00% <0.00%> (ø)`
components/mentions/index.tsx	`100.00% <0.00%> (ø)`
... and 28 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

rohanbhangui · 2022-12-17T23:14:25Z

can we make this a window that pops up that allows you to add plain text to a text area. Similar to how you copy the text area when exporting

MadCcc · 2022-12-18T06:35:52Z

can we make this a window that pops up that allows you to add plain text to a text area. Similar to how you copy the text area when exporting

That's good idea.

BoyYangzai · 2022-12-18T12:50:05Z

@rohanbhangui @MadCcc
I made the second version, you can experience it

rohanbhangui · 2022-12-18T15:43:50Z

@BoyYangzai works well! Can we also get the theme editor indexed? It is very difficult to google for. or find. I stumbled on it by accident.

BoyYangzai · 2022-12-18T15:50:59Z

@BoyYangzai works well! Can we also get the theme editor indexed? It is very difficult to google for. or find. I stumbled on it by accident.

glad for you approve 😊
I also think It's actually kind of hard to find
but I am not a member of Antd
@li-jia-nan @MadCcc
what do you think？

li-jia-nan · 2022-12-18T16:06:28Z

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

+  const [editModelOpen, setEditModelOpen] = useState<boolean>(false);
+  const [editThemeFormatRight, setEditThemeFormatRight] = useState<boolean>(true);
+  const [content, setContent] = useState<TextContent>({
+    text: '{}',


初始化的时候能不能让默认值是当前的配置，而不是空对象？

初始化的时候能不能让默认值是当前的配置，而不是空对象？

可以

li-jia-nan · 2022-12-18T16:06:51Z

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 里面？

这个是不是可以放进 devDependencies 里面？

应该不可以吧qwq

应该放 devDependencies 里

li-jia-nan · 2022-12-18T16:07:41Z

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

@@ -1,19 +1,27 @@
-import React, { useEffect } from 'react';
+import { isObject } from 'lodash';


这个干掉吧，lodash 太大了，可以自己实现

这个干掉吧，lodash 太大了，可以自己实现

ok

BoyYangzai · 2022-12-18T17:03:45Z

@li-jia-nan
1.同步了 Config，打开即当前 Config
2.替代 Lodash

li-jia-nan · 2022-12-18T17:08:50Z

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

@@ -0,0 +1,4 @@
+/* eslint-disable import/prefer-default-export */
+export function isObject(target: any) {
+  return Object.prototype.toString.call(target) === '[object Object]';


这个好像没办法作为 lodash 的平替吧，lodash 还判断了数组什么的

这里我用错了，只想要纯Object，所以这个就够了，不需要_.isObject

OK，那就更不需要 lodash 了，因为 antd 中用到 lodash 的地方不多，所以后面计划把这个库干掉，体积实在太大了

OK，那就更不需要 lodash 了，因为 antd 中用到 lodash 的地方不多，所以后面计划把这个库干掉，体积实在太大了

哈哈哈，看到你们的pr了

afc163 · 2022-12-19T02:06:43Z

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

@@ -0,0 +1,33 @@
+import { JSONEditor as Editor, Mode, type JSONEditorPropsOptional } from 'vanilla-jsoneditor';


vanilla-jsoneditor 可以加到 https://ant.design/docs/react/recommendation-cn 里来

vanilla-jsoneditor 可以加到 https://ant.design/docs/react/recommendation-cn 里来

收到🫡

MadCcc · 2022-12-19T03:00:39Z

导出功能应该不需要了，可以合并起来叫代码/Code

BoyYangzai · 2022-12-19T06:13:11Z

@MadCcc

这几个文字描述呢，有什么要求吗

BoyYangzai · 2022-12-19T06:59:15Z

@li-jia-nan @afc163
1.编辑器依赖加入dev
2.移除导出功能，整体更改为代码/code
3.加入https://ant.design/docs/react/recommendation-cn 工具包link

MadCcc · 2022-12-21T02:29:57Z

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

+                />
+              </div>
+            </Modal>
+            <Button onClick={handleEditConfig} icon={<EditOutlined />} style={{ marginRight: 8 }}>


Suggested change

<Button onClick={handleEditConfig} icon={<EditOutlined />} style={{ marginRight: 8 }}>

<Button onClick={handleEditConfig} style={{ marginRight: 8 }}>

MadCcc · 2022-12-21T02:32:53Z

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

-    exportDesc: '将下面的 JSON 对象复制到 ConfigProvider 的 theme 属性中即可。',
+    edit: '代码',
+    editModelTitle: '编辑主题配置',
+    editTitle: '在下方编辑你的主题 JSON 即可',


将 JSON 复制到 ConfigProvider 的 theme 属性中套用主题。

MadCcc · 2022-12-27T07:12:01Z

ping

* feat: add Theme Editor theme upload * verision 2 * 移除lodash、同步当前Config * remove export,add into devDependencies,add tool link

feat: add Theme Editor theme upload

2e1cfb9

codeball-ai-writer bot added the codeball:needs-review label Dec 17, 2022

BoyYangzai mentioned this pull request Dec 17, 2022

Ant Design Theme Editor theme upload #39620

Closed

verision 2

5202c97

codeball-ai-writer bot added codeball:needs-careful-review and removed codeball:needs-review labels Dec 18, 2022

BoyYangzai changed the title ~~feat: add Theme Editor theme upload~~ feat: add Theme Config Editor Dec 18, 2022

BoyYangzai changed the base branch from master to feature December 18, 2022 15:57

li-jia-nan reviewed Dec 18, 2022

View reviewed changes

移除lodash、同步当前Config

344f6c5

li-jia-nan reviewed Dec 18, 2022

View reviewed changes

afc163 reviewed Dec 19, 2022

View reviewed changes

remove export,add into devDependencies,add tool link

bb2cfc0

MadCcc reviewed Dec 21, 2022

View reviewed changes

afc163 assigned MadCcc Dec 24, 2022

MadCcc approved these changes Dec 27, 2022

View reviewed changes

MadCcc merged commit 5644c63 into ant-design:feature Dec 27, 2022

MadCcc pushed a commit that referenced this pull request Dec 27, 2022

feat: add Theme Config Editor (#39621)

ec900c9

* feat: add Theme Editor theme upload * verision 2 * 移除lodash、同步当前Config * remove export,add into devDependencies,add tool link

afc163 mentioned this pull request Dec 30, 2022

docs(:sparkles:): release 5.1.2 #39917

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add Theme Config Editor #39621

feat: add Theme Config Editor #39621

BoyYangzai commented Dec 17, 2022

github-actions bot commented Dec 17, 2022 •

edited

codecov bot commented Dec 17, 2022 •

edited

rohanbhangui commented Dec 17, 2022

MadCcc commented Dec 18, 2022 •

edited

BoyYangzai commented Dec 18, 2022

rohanbhangui commented Dec 18, 2022

BoyYangzai commented Dec 18, 2022

li-jia-nan Dec 18, 2022

BoyYangzai Dec 18, 2022

li-jia-nan Dec 18, 2022

BoyYangzai Dec 18, 2022

afc163 Dec 19, 2022

li-jia-nan Dec 18, 2022

BoyYangzai Dec 18, 2022

BoyYangzai commented Dec 18, 2022

li-jia-nan Dec 18, 2022

BoyYangzai Dec 18, 2022

li-jia-nan Dec 18, 2022 •

edited

BoyYangzai Dec 18, 2022

afc163 Dec 19, 2022

BoyYangzai Dec 19, 2022

MadCcc commented Dec 19, 2022

BoyYangzai commented Dec 19, 2022

BoyYangzai commented Dec 19, 2022

MadCcc Dec 21, 2022

MadCcc Dec 21, 2022

MadCcc commented Dec 27, 2022

		@@ -1,19 +1,27 @@
		import React, { useEffect } from 'react';
		import { isObject } from 'lodash';

		@@ -0,0 +1,33 @@
		import { JSONEditor as Editor, Mode, type JSONEditorPropsOptional } from 'vanilla-jsoneditor';

	<Button onClick={handleEditConfig} icon={<EditOutlined />} style={{ marginRight: 8 }}>
	<Button onClick={handleEditConfig} style={{ marginRight: 8 }}>

feat: add Theme Config Editor #39621

feat: add Theme Config Editor #39621

Conversation

BoyYangzai commented Dec 17, 2022

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

📝 Changelog

☑️ Self-Check before Merge

github-actions bot commented Dec 17, 2022 • edited

codecov bot commented Dec 17, 2022 • edited

Codecov Report

rohanbhangui commented Dec 17, 2022

MadCcc commented Dec 18, 2022 • edited

BoyYangzai commented Dec 18, 2022

rohanbhangui commented Dec 18, 2022

BoyYangzai commented Dec 18, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

BoyYangzai commented Dec 18, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

li-jia-nan Dec 18, 2022 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MadCcc commented Dec 19, 2022

BoyYangzai commented Dec 19, 2022

BoyYangzai commented Dec 19, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MadCcc commented Dec 27, 2022

github-actions bot commented Dec 17, 2022 •

edited

codecov bot commented Dec 17, 2022 •

edited

MadCcc commented Dec 18, 2022 •

edited

li-jia-nan Dec 18, 2022 •

edited