🐛 fix: ProBuilder Code Highlight

ant-design · Feb 11, 2024 · 8bce246 · 8bce246
1 parent 5686ab3
commit 8bce246
Show file tree

Hide file tree

Showing 10 changed files with 22 additions and 40 deletions.
diff --git a/docs/pro-editor/demos/buttonAssets.tsx b/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' }}
   />
 );
diff --git a/docs/pro-editor/demos/defaultAssets.tsx b/docs/pro-editor/demos/defaultAssets.tsx
@@ -18,6 +18,5 @@ export default () => (
     onCopy={(children) => {
       console.log('代码复制', children);
     }}
-    themeMode={'dark'}
   />
 );
diff --git a/docs/pro-editor/index.zh-CN.md b/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>
diff --git a/src/ErrorBoundary/index.zh-CN.md b/src/ErrorBoundary/index.zh-CN.md
@@ -11,7 +11,7 @@ group:
 
 通用错误提示面板
 
-## 代码示例
+## 代码演示
 
 <code src='./demos/_prod.tsx' title="生产环境"></code>
 

diff --git a/src/FreeCanvas/index.zh-CN.md b/src/FreeCanvas/index.zh-CN.md
@@ -8,7 +8,7 @@ group: 面板模块
 
 基于 `ReactFlow` 的自由画布封装
 
-## 代码示例
+## 代码演示
 
 <code src='./demos/basic.tsx' ></code>
 

diff --git a/src/ProBuilder/components/Code/index.tsx b/src/ProBuilder/components/Code/index.tsx
@@ -61,8 +61,14 @@ export const CodePanel: FC<CodePanelProps> = memo((props) => {
           {/* 右侧按钮区域 */}
         </Flexbox>
       </Flexbox>
-      <Flexbox className={styles.code}>
-        <Highlight theme={isDarkMode ? 'dark' : 'light'} lineNumber language="tsx" onCopy={onCopy}>
+      <Flexbox className={styles.code} style={{ height: `calc(100% - ${HEADER_HEIGHT}px)` }}>
+        <Highlight
+          theme={isDarkMode ? 'dark' : 'light'}
+          lineNumber
+          language="tsx"
+          onCopy={onCopy}
+          style={{ height: '100%' }}
+        >
           {configCode}
         </Highlight>
       </Flexbox>

diff --git a/src/ProBuilder/components/Code/style.ts b/src/ProBuilder/components/Code/style.ts
@@ -29,7 +29,6 @@ export const useStyles = createStyles(({ token, stylish, css }) => {
     `,
     code: css`
       background: ${token.colorFillQuaternary};
-      height: 100%;
       overflow: scroll;
     `,
   };

diff --git a/src/Snippet/index.zh-CN.md b/src/Snippet/index.zh-CN.md
@@ -7,7 +7,7 @@ description: Snippet 组件用于显示带有语法突出显示的代码片段
 
 # Snippet 代码片段
 
-## Default
+## 代码演示
 
 <code src="./demos/index.tsx" nopadding title="基础示例"></code>
 

diff --git a/src/SortableList/index.zh-CN.md b/src/SortableList/index.zh-CN.md
@@ -10,11 +10,9 @@ demo:
 
 # SortableList 可排序列表
 
-## 何时使用
-
 针对可排序列表场景提供基础底层封装，可在其上进行进一步自定义，我们还封装了 `ColumnList` 组件通过 `schema` 自动生成简单的排序列表。
 
-## 使用方式
+## 代码演示
 
 <code src="./demos/Basic.tsx" ></code>
 <code src="./demos/controlled.tsx" ></code>

diff --git a/src/SortableTree/index.zh-CN.md b/src/SortableTree/index.zh-CN.md
@@ -10,20 +10,12 @@ demo:
 
 符合 Ant Design [Tree](https://ant.design/components/tree) 数据结构的可排序树组件。
 
-## 何时使用
-
-需要做树型数据结构的编辑（增删、排序）时可以使用。
-
-## Demo 演示
-
-###
+## 代码演示
 
 <code src="./demos/default.tsx" ></code><code src="./demos/controlled.tsx" ></code><code src="./demos/renderContent.tsx" ></code><code src="./demos/disableDrag.tsx" ></code><code src="./demos/sortableRule.tsx" ></code><code src="./demos/virtual.tsx" ></code>
 
 ## API
 
-### 属性
-
 | 名称                | 类型                                                                                                  | 描述                       |
 | ------------------- | ----------------------------------------------------------------------------------------------------- | -------------------------- |
 | hideAdd             | `boolean`                                                                                             | 隐藏默认的添加按钮         |