ant-design · ONLY-yours · Mar 7, 2024 · Feb 19, 2024 · Feb 26, 2024 · Mar 6, 2024
diff --git a/.dumirc.ts b/.dumirc.ts
@@ -1,84 +1,17 @@
 import { defineConfig } from 'dumi';
 
-const isProd = process.env.NODE_ENV === 'production';
-
 export default defineConfig({
   outputPath: 'docs-dist',
   mfsu: false,
   favicons: ['https://gw.alipayobjects.com/zos/antfincdn/upvrAjAPQX/Logo_Tech%252520UI.svg'],
-  // @ts-ignore
   ssr: false,
   hash: true,
   ignoreMomentLocale: true,
   themeConfig: {
-    hero: {
-      'zh-CN': {
-        title: 'ProEditor',
-        description: '🌟 通用编辑器 UI 框架',
-        actions: [
-          {
-            text: '快速开始 →',
-            link: '/guide/intro',
-          },
-          {
-            text: 'Github',
-            link: 'https://github.com/ant-design/pro-editor',
-          },
-        ],
-      },
-      'en-US': {
-        title: 'ProEditor',
-        description: '🌟 A General Editor UI Framework',
-        actions: [
-          {
-            text: 'Quick Start →',
-            link: '/guide/intro',
-          },
-        ],
-      },
-    },
     socialLinks: {
       github: 'https://github.com/ant-design/pro-editor',
     },
     footer: 'Made with ❤️ by 蚂蚁集团 - AFX & 数字科技',
-    features: [
-      {
-        image:
-          'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/q48YQ5X4ytAAAAAAAAAAAAAAFl94AQBr',
-        title: '简单易用',
-        description: '在 Ant Design 上进行了自己的封装，更加易用',
-      },
-      {
-        image: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
-        title: 'Ant Design',
-        description: '与 Ant Design 设计体系一脉相承，无缝对接 antd 项目',
-      },
-      {
-        image:
-          'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/UKqDTIp55HYAAAAAAAAAAAAAFl94AQBr',
-        title: '通用编辑器组件',
-        description: '提供完备的编辑器组件，方便使用者定制自己的编辑器',
-      },
-
-      {
-        image:
-          'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/Y_NMQKxw7OgAAAAAAAAAAAAAFl94AQBr',
-        title: '预设样式',
-        description: '样式风格与 antd 一脉相承，无需魔改，浑然天成。默认好用的主题系统',
-      },
-      {
-        image:
-          'https://mdn.alipayobjects.com/yuyan_qk0oxh/afts/img/U3XjS5IA1tUAAAAAAAAAAAAAFl94AQBr',
-        title: '预设行为',
-        description: '更少的代码，更少的 Bug，更多的功能',
-      },
-
-      {
-        image: 'https://gw.alipayobjects.com/zos/antfincdn/Eb8IHpb9jE/Typescript_logo_2020.svg',
-        title: 'TypeScript',
-        description: '使用 TypeScript 开发，提供完整的类型定义文件，无需频繁打开官网',
-      },
-    ],
     logo: 'https://gw.alipayobjects.com/zos/antfincdn/upvrAjAPQX/Logo_Tech%252520UI.svg',
     name: '@ant-design/pro-editor',
   },

diff --git a/.i18nrc.js b/.i18nrc.js
@@ -6,7 +6,6 @@ module.exports = {
   markdown: {
     entry: ['docs/**/**.md', 'src/**/**.md'],
     entryLocale: 'zh-CN',
-    exclude: ['docs/index.zh-CN.md'],
     entryExtension: '.zh-CN.md',
     outputLocales: ['en-US'],
   },

diff --git a/docs/guide/demos/ColumnList/data.ts b/docs/guide/demos/ColumnList/data.ts
@@ -2,37 +2,37 @@
  * Column 所有类型
  * */
 export const tableColumnValueOptions = [
-  { label: '序号', value: 'index' },
-  { label: '圆形序号', value: 'indexBorder' },
-  { label: '数字', value: 'digit' },
-  { label: '密码', value: 'password' },
-  { label: '金额', value: 'money' },
-  { label: '文本', value: 'text' },
-  { label: '文本域', value: 'textarea' },
-  { label: '日期', value: 'date' },
-  { label: '操作', value: 'option' },
-  { label: '日期时间', value: 'dateTime' },
-  { label: '周', value: 'dateWeek' },
-  { label: '月', value: 'dateMonth' },
-  { label: '季度', value: 'dateQuarter' },
-  { label: '年份', value: 'dateYear' },
-  { label: '日期区间', value: 'dateRange' },
-  { label: '日期时间区间', value: 'dateTimeRange' },
-  { label: '时间', value: 'time' },
-  { label: '时间区间', value: 'timeRange' },
-  { label: '下拉框', value: 'select' },
-  { label: '多选框', value: 'checkbox' },
-  { label: '星级组件', value: 'rate' },
-  { label: '单选框', value: 'radio' },
-  { label: '按钮单选框', value: 'radioButton' },
-  { label: '进度条', value: 'progress' },
-  { label: '百分比', value: 'percent' },
-  { label: '秒格式化', value: 'second' },
-  { label: '头像', value: 'avatar' },
-  { label: '代码框', value: 'code' },
-  { label: '开关', value: 'switch' },
-  { label: '显示当前时间', value: 'fromNow' },
-  { label: '图片', value: 'image' },
-  { label: 'json 格式化', value: 'jsonCode' },
-  { label: '颜色选择器', value: 'color' },
+  { label: 'index', value: 'index' },
+  { label: 'indexBorder', value: 'indexBorder' },
+  { label: 'digit', value: 'digit' },
+  { label: 'password', value: 'password' },
+  { label: 'money', value: 'money' },
+  { label: 'text', value: 'text' },
+  { label: 'textarea', value: 'textarea' },
+  { label: 'date', value: 'date' },
+  { label: 'option', value: 'option' },
+  { label: 'dateTime', value: 'dateTime' },
+  { label: 'dateWeek', value: 'dateWeek' },
+  { label: 'dateMonth', value: 'dateMonth' },
+  { label: 'dateQuarter', value: 'dateQuarter' },
+  { label: 'dateYear', value: 'dateYear' },
+  { label: 'dateRange', value: 'dateRange' },
+  { label: 'dateTimeRange', value: 'dateTimeRange' },
+  { label: 'time', value: 'time' },
+  { label: 'timeRange', value: 'timeRange' },
+  { label: 'select', value: 'select' },
+  { label: 'checkbox', value: 'checkbox' },
+  { label: 'rate', value: 'rate' },
+  { label: 'radio', value: 'radio' },
+  { label: 'radioButton', value: 'radioButton' },
+  { label: 'progress', value: 'progress' },
+  { label: 'percent', value: 'percent' },
+  { label: 'second', value: 'second' },
+  { label: 'avatar', value: 'avatar' },
+  { label: 'code', value: 'code' },
+  { label: 'switch', value: 'switch' },
+  { label: 'fromNow', value: 'fromNow' },
+  { label: 'image', value: 'image' },
+  { label: 'jsonCode', value: 'jsonCode' },
+  { label: 'color', value: 'color' },
 ];
diff --git a/docs/guide/intro.en-US.md b/docs/guide/intro.en-US.md
@@ -1,10 +1,10 @@
 ---
 title: Quick Start
 group:
-  title: Quick Start
+  title: Getting Started Quickly
   order: 1
 nav:
-  title: Document
+  title: Documentation
   order: 1
 ---
 
@@ -22,54 +22,24 @@ $ npm install @ant-design/pro-editor -S
 
 ### Using Components
 
-ProEditor provides a series of components optimized for the "editing" scenario, including but not limited to "SortableList", "SortableTree", "DraggablePanel", "Highlight", "ContextMenu", etc. For the complete component documentation, please refer to: [Basic Components](/components/action-icon)
+ProEditor provides a series of components optimized for the "editing" scenario, including but not limited to "SortableList", "SortableTree", "DraggablePanel", "Highlight", "ContextMenu", and more. For complete component documentation, please refer to: [Basic Components](/components/action-icon)
 
 Below is a typical array object editing scenario. Our provided ColumnList can help developers quickly implement a high-quality array editing component.
 
 <code src="./demos/ColumnList/index.tsx" ></code>
 
 ### Component Assembler
 
-ProEditor was initially positioned as a visual configuration framework for components. Therefore, ProEditor provides a series of containers and atomic components for visual component assembly, helping developers quickly implement a visual configuration component.
+Initially, ProEditor was positioned as a visual configuration framework for components. Therefore, ProEditor provides a series of containers and atomic components for visual component assembly, helping developers quickly implement a visual configuration component.
 
 See: [ProEditor Assembler Container](/pro-editor)
 
-### 🚧 Using Atomic Capabilities
-
-> Working in Progress
-
-ProEditor will provide various atomic capabilities required for editing scenarios, including but not limited to "undo/redo", "real-time collaboration", "keyboard shortcuts", "selection capabilities", etc.
-
-This part of the capability is still under rapid development, so stay tuned.
-
-## Integration with Frameworks
-
-### Integration with Umi
-
-In the development scenario of the middle and back office, Umi is a very good choice. Integrating ProEditor with Umi is very easy. After installation, you can use it directly.
-
-### Integration with Next.js
-
-[Next.js](https://nextjs.org/) is a very popular development framework in the community. Integrating ProEditor with Next.js is also very easy.
-
-Since Next.js is a CSR/SSR isomorphic React framework, and ProEditor only provides esm modules by default, after installation, you need to add relevant dependencies to `transpilePackages` in `next.config.(m)js`:
-
-```js
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  // Convert pure esm modules to node-compatible modules
-  transpilePackages: ['@ant-design/pro-editor', 'leva', 'zustand'], // leva is a ProEditor dependency module
-};
-```
-
-Then you can use it just like any other component.
-
 ## Engineering Capabilities
 
 ### On-Demand Loading
 
-ProEditor supports tree shaking based on ES modules by default. Simply import `import { ActionIcon } from '@ant-design/pro-editor`; to achieve on-demand loading.
+ProEditor supports tree shaking based on ES modules by default. Directly importing `import { ActionIcon } from '@ant-design/pro-editor';` will achieve on-demand loading.
 
 ### TypeScript
 
-ProEditor is developed using TypeScript, so it provides complete type definitions.
+ProEditor is developed using TypeScript, thus providing complete type definitions.
diff --git a/docs/guide/intro.zh-CN.md b/docs/guide/intro.zh-CN.md
@@ -34,36 +34,6 @@ ProEditor 最初的定位是作为组件的可视化配置框架。因此在 Pro
 
 详见：[ProEditor 装配器容器](/pro-editor)
 
-### 🚧 使用原子化能力
-
-> Working in Progress
-
-ProEditor 将会提供编辑场景需要的各类原子化能力，包括但不限于「撤销重做」、「实时协同」、「键盘快捷键」、「选择能力」等。
-
-当前该部分能力仍处于高速开发中，敬请期待。
-
-## 与框架集成
-
-### 与 Umi 集成
-
-在中后台的研发场景， umi 是一个非常不错的选择。ProEditor 与 umi 的集成非常容易。安装后直接使用即可。
-
-### 与 Next.js 集成
-
-[Next.js](https://nextjs.org/) 是社区中非常流行的研发框架。ProEditor 与 Next.js 的集成也非常容易。
-
-由于 Next.js 是一个 CSR、SSR 同构的 React 框架，而 ProEditor 默认只提供 esm 模块，因此在安装后，需要在 `next.config.(m)js` 中 `transpilePackages` 中加入相关依赖：
-
-```js
-/** @type {import('next').NextConfig} */
-const nextConfig = {
-  // 将纯 esm 模块转为 node 兼容模块
-  transpilePackages: ['@ant-design/pro-editor', 'leva', 'zustand'], // leva 为 ProEditor 依赖模块
-};
-```
-
-接下来和其他组件一样使用即可。
-
 ## 工程化能力
 
 ### 按需加载

diff --git a/docs/guide/nextjs.en-US.md b/docs/guide/nextjs.en-US.md
@@ -1,6 +1,78 @@
 ---
 title: NextJs
 group:
-  title: Work in FrameWork
+  title: Framework Usage
   order: 5
 ---
+
+## Integration with Next.js
+
+[Next.js](https://nextjs.org/) is a very popular development framework in the community, and integrating ProEditor with Next.js is very easy.
+
+```bash
+npx create-next-app@latest
+```
+
+### Dependency Installation
+
+```bash
+npm install @ant-design/pro-editor --save
+or
+pnpm install @ant-design/pro-editor
+```
+
+Since Next.js is a CSR/SSR isomorphic React framework, and ProChat only provides esm modules by default, after installation, you need to add relevant dependencies to `transpilePackages` in `next.config.(m)js`:
+
+> In the latest version of NextJS 14 AppRoute, this configuration is no longer needed
+
+```js
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // Convert pure esm modules to node-compatible modules
+  transpilePackages: ['@ant-design/pro-editor'],
+};
+```
+
+### Usage
+
+Taking the `SortableList` component as an example, if it is a project created by the default scaffolding, you can simply write the following code in `page.js|tsx` to see it in action.
+
+```js
+'use client';
+import type { ColumnItemList } from '@ant-design/pro-editor';
+import { ColumnList } from '@ant-design/pro-editor';
+import { useState } from 'react';
+
+const tableColumnValueOptions = [
+  // ... (omitted for brevity)
+];
+
+type SchemaItem = {
+  title: string,
+  valueType: string,
+  dataIndex: string,
+};
+
+const INIT_VALUES = [
+  // ... (omitted for brevity)
+];
+
+const columns: ColumnItemList<SchemaItem> = [
+  // ... (omitted for brevity)
+];
+
+export default () => {
+  const [value, setValue] = useState(INIT_VALUES);
+
+  return (
+    <ColumnList
+      columns={columns}
+      value={value}
+      onChange={(values) => {
+        setValue(values);
+        console.log('onChange', values);
+      }}
+    />
+  );
+};
+```