fix: ProBuilder Highlight OverFlow

.i18nrc.js

@@ -1,4 +1,5 @@
 /**
+ * find src -type f -name "*.en-US.md" -exec rm -f {} +
  * @type {import("@lobehub/i18n-cli").Config}
  */
 module.exports = {

docs/guide/demos/ColumnList/index.tsx

@@ -11,29 +11,29 @@ type SchemaItem = {
 };
 
 const INIT_VALUES = [
-  { title: '序号', valueType: 'indexBorder', dataIndex: 'index' },
+  { title: 'Index', valueType: 'indexBorder', dataIndex: 'index' },
   {
-    title: '授权企业名称',
+    title: 'Enterprise',
     valueType: 'text',
     dataIndex: 'name',
   },
-  { title: '被授权企业', valueType: 'text', dataIndex: 'authCompany' },
+  { title: 'Company', valueType: 'text', dataIndex: 'authCompany' },
 ];
 
 const columns: ColumnItemList<SchemaItem> = [
   {
-    title: '列标题',
+    title: 'Title',
     dataIndex: 'title',
     type: 'input',
   },
   {
-    title: '值类型',
+    title: 'ValueType',
     dataIndex: 'valueType',
     type: 'select',
     options: tableColumnValueOptions,
   },
   {
-    title: '字段',
+    title: 'DataIndex',
     dataIndex: 'dataIndex',
     type: 'select',
   },

docs/pro-editor/demos/buttonAsset/codeEmitter.tsx

@@ -0,0 +1,27 @@
+import { generateJSXCode } from '@ant-design/pro-editor';
+import template from 'lodash.template';
+import { prettier } from './format';
+
+const codeTemplate = `
+import { Button } from 'antd';
+
+export default () => <%= component %>;
+`;
+
+interface TemplateParams {
+  iconDeps?: string;
+  component: string;
+}
+
+const emitter: (params: TemplateParams) => string = template(codeTemplate);
+
+const codeEmitter = (config) => {
+  const code = emitter({
+    component: generateJSXCode('Button', {
+      ...config,
+    }),
+  });
+  return prettier(code);
+};
+
+export default codeEmitter;

docs/pro-editor/demos/buttonAsset/format.ts

@@ -0,0 +1,28 @@
+/**
+ * 代码格式化
+ * @param configCode
+ * @returns
+ */
+export const prettier = (configCode: string) => {
+  let prettierCode = '';
+  try {
+    const prettier = require('prettier');
+    const plugins = [require('prettier/parser-typescript')];
+
+    prettierCode = prettier.format(configCode, {
+      parser: 'typescript',
+      plugins,
+      // 以下参考 Bigfish 配置
+      semi: true,
+      singleQuote: true,
+      printWidth: 100,
+      trailingComma: 'all',
+      proseWrap: 'never',
+      endOfLine: 'lf',
+    });
+  } catch (err) {
+    console.error('err', err);
+    prettierCode = `代码格式化失败，格式化前为:\n ${configCode}`;
+  }
+  return prettierCode;
+};

docs/pro-editor/demos/buttonAsset/index.ts

@@ -1,11 +1,9 @@
 import type { ComponentAssetParams } from '@ant-design/pro-editor';
-
 import { ButtonComponent } from './_Component';
 import { ButtonPanel } from './_Panel';
-
-import { createStore } from './store';
-
+import codeEmitter from './codeEmitter';
 import { ButtonConfig, buttonModel } from './models';
+import { createStore } from './store';
 
 export const buttonAssetParams: ComponentAssetParams<ButtonConfig> = {
   id: 'Button',
@@ -27,5 +25,5 @@ export const buttonAssetParams: ComponentAssetParams<ButtonConfig> = {
     devtools: { name: 'ButtonAssetStore' },
   },
 
-  codeEmitter: () => '',
+  codeEmitter,
 };

docs/pro-editor/demos/buttonAssets.tsx

@@ -1,16 +1,12 @@
-/**
- * iframe: 600
- */
 import { ComponentAsset, ProBuilder } from '@ant-design/pro-editor';
-
 import { buttonAssetParams } from './buttonAsset';
 
 const ButtonComponentAsset = new ComponentAsset(buttonAssetParams);
 
 export default () => (
   <ProBuilder
     componentAsset={ButtonComponentAsset}
-    style={{ height: '100vh' }}
+    style={{ height: 600 }}
     __EDITOR_STORE_DEVTOOLS__={{ name: 'ButtonEditor' }}
   />
 );

docs/pro-editor/demos/controlledPresence.tsx

@@ -1,6 +1,3 @@
-/**
- * iframe: 800
- */
 import { demoAssets } from '@/ComponentAsset/demoAssets';
 import { AwarenessEditor, ComponentAsset, ProBuilder } from '@/index';
 import { Highlight } from '@ant-design/pro-editor';

docs/pro-editor/demos/defaultAssets.tsx

@@ -1,6 +1,3 @@
-/**
- * iframe: 600
- */
 import { demoAssets } from '@/ComponentAsset/demoAssets';
 import { ComponentAsset, ProBuilder } from '@ant-design/pro-editor';
 
@@ -14,10 +11,9 @@ export default () => (
         },
       })
     }
-    style={{ height: '100vh' }}
+    style={{ height: 600 }}
     onCopy={(children) => {
       console.log('代码复制', children);
     }}
-    themeMode={'dark'}
   />
 );

docs/pro-editor/demos/empty.tsx

@@ -1,6 +1,3 @@
-/**
- * iframe: 300
- */
 import { ProBuilder } from '@ant-design/pro-editor';
 
-export default () => <ProBuilder style={{ height: '100vh' }} />;
+export default () => <ProBuilder style={{ height: 300 }} />;

docs/pro-editor/index.zh-CN.md

@@ -7,28 +7,20 @@ nav:
   order: 3
 ---
 
-# ProBuilder 装配器容器
+# ProBuilder 装配器
 
-使用 ProBuilder 可以快速构建出组件的配置界面。
+使用 `ProBuilder` 可以快速构建出组件的配置界面。
 
-## 以 Button 示例
+## 代码演示
 
-<code src='./demos/buttonAssets.tsx' ></code>
+<code src='./demos/buttonAssets.tsx' compact="true" title="Button 示例"></code>
 
-## 传入 ComponentAssets
+<code src='./demos/defaultAssets.tsx' title="传入 `ComponentAssets`"></code>
 
-<code src='./demos/defaultAssets.tsx' ></code>
+<code src='./demos/empty.tsx' title="无 `ComponentAssets`"></code>
 
-## 无 ComponentAssets
+<code src="./demos/controlledPresence.tsx" title="视图状态受控" description="将 `editorAwareness` 设为受控状态，可以控制当前的视窗状态。"></code>
 
-<code src='./demos/empty.tsx' ></code>
-
-## 视图状态受控
-
-将 `editorAwareness` 设为受控状态，可以控制当前的视窗状态。
-
-<code src="./demos/controlledPresence.tsx" ></code>
-
-# API
+## API
 
 <API id="ProEditor"></API>

src/ActionGroup/demos/_items.tsx

@@ -0,0 +1,84 @@
+import {
+  CopyOutlined,
+  DeleteOutlined,
+  DragOutlined,
+  FullscreenOutlined,
+  RedoOutlined,
+  UndoOutlined,
+  ZoomInOutlined,
+  ZoomOutOutlined,
+} from '@ant-design/icons';
+import { ActionIconGroupItemType } from '@ant-design/pro-editor';
+import { message } from 'antd';
+
+const defaultItems = [
+  { icon: <FullscreenOutlined />, title: '全屏' },
+  { icon: <UndoOutlined />, title: '撤销' },
+  { icon: <RedoOutlined />, title: '重做' },
+  { icon: <DeleteOutlined />, title: '删除' },
+];
+
+const customItems: ActionIconGroupItemType[] = [
+  {
+    icon: <CopyOutlined />,
+    placement: 'bottom',
+    title: '复制',
+  },
+  {
+    icon: <ZoomInOutlined />,
+    title: '放大！',
+  },
+  {
+    icon: <ZoomOutOutlined />,
+    style: {
+      color: '#1890ff',
+    },
+    title: '缩小！',
+  },
+  {
+    type: 'divider',
+  },
+  {
+    icon: <DragOutlined />,
+    title: '快速定位',
+  },
+];
+
+const dropdownMenuItems: ActionIconGroupItemType[] = [
+  {
+    icon: <CopyOutlined />,
+    onClick: () => {
+      message.info('复制！');
+    },
+    label: '复制',
+  },
+  {
+    icon: <ZoomInOutlined />,
+    onClick: () => {
+      message.success('放大！');
+    },
+    label: '放大！',
+  },
+  {
+    icon: <ZoomOutOutlined />,
+    style: {
+      color: '#1890ff',
+    },
+    onClick: () => {
+      message.success('缩小！');
+    },
+    label: '缩小！',
+  },
+  {
+    type: 'divider',
+  },
+  {
+    icon: <DragOutlined />,
+    onClick: () => {
+      message.loading('快速定位ing');
+    },
+    label: '快速定位',
+  },
+];
+
+export { customItems, defaultItems, dropdownMenuItems };

src/ActionGroup/demos/basic.tsx

@@ -1,5 +1,6 @@
 import { ActionGroup } from '@ant-design/pro-editor';
+import { defaultItems } from './_items';
 
 export default () => {
-  return <ActionGroup />;
+  return <ActionGroup items={defaultItems} />;
 };

src/ActionGroup/demos/config.tsx

@@ -1,52 +1,6 @@
-import { CopyOutlined, DragOutlined, ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons';
 import { ActionGroup } from '@ant-design/pro-editor';
-import { message } from 'antd';
+import { customItems } from './_items';
 
 export default () => {
-  const [messageApi, contextHolder] = message.useMessage();
-
-  return (
-    <>
-      {contextHolder}
-      <ActionGroup
-        items={[
-          {
-            icon: <CopyOutlined />,
-            placement: 'bottom',
-            onClick: () => {
-              messageApi.info('复制！');
-            },
-            label: '复制',
-          },
-          {
-            icon: <ZoomInOutlined />,
-            onClick: () => {
-              messageApi.success('放大！');
-            },
-            label: '放大！',
-          },
-          {
-            icon: <ZoomOutOutlined />,
-            style: {
-              color: '#1890ff',
-            },
-            onClick: () => {
-              messageApi.success('缩小！');
-            },
-            label: '缩小！',
-          },
-          {
-            type: 'divider',
-          },
-          {
-            icon: <DragOutlined />,
-            onClick: () => {
-              messageApi.loading('快速定位ing');
-            },
-            label: '快速定位',
-          },
-        ]}
-      />
-    </>
-  );
+  return <ActionGroup items={customItems} />;
 };

src/ActionGroup/demos/custom.tsx

@@ -1,10 +1,11 @@
-import { ActionGroup, ActionIcon, ActionIconGroupItemType } from '@ant-design/pro-editor';
+import { ActionGroup, ActionIcon } from '@ant-design/pro-editor';
 import { Card, Input, Rate, Switch } from 'antd';
+import { defaultItems } from './_items';
 
 export default () => {
   return (
     <ActionGroup
-      render={(config) => {
+      render={() => {
         return (
           <Card
             title="操作工具箱"
@@ -19,11 +20,10 @@ export default () => {
                 flexDirection: 'row',
               }}
             >
-              {config.map((item: ActionIconGroupItemType, index) => {
+              {defaultItems.map((item, index) => {
                 return (
                   <ActionIcon
                     key={`action-btn-${index}`}
-                    title={item?.label}
                     onClick={() => {
                       alert('触发动作');
                     }}