From 3da918ce7f8c7a975d9890ab78e7a381762fbe66 Mon Sep 17 00:00:00 2001
From: Bowen Tan <bowen.tan@smartx.com>
Date: Fri, 10 Jun 2022 14:05:22 +0800
Subject: [PATCH] fix(FontWidget): improve font widget

---
 .../Widgets/StyleWidgets/FontWidget.tsx         | 17 ++++++++++-------
 .../components/StructureTree/StructureTree.tsx  |  2 +-
 packages/shared/src/constants/core.ts           |  1 +
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/editor-sdk/src/components/Widgets/StyleWidgets/FontWidget.tsx b/packages/editor-sdk/src/components/Widgets/StyleWidgets/FontWidget.tsx
index db6b059f..90feb761 100644
--- a/packages/editor-sdk/src/components/Widgets/StyleWidgets/FontWidget.tsx
+++ b/packages/editor-sdk/src/components/Widgets/StyleWidgets/FontWidget.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { HStack, Select, Text, VStack } from '@chakra-ui/react';
 import { CORE_VERSION, StyleWidgetName } from '@sunmao-ui/shared';
 import { WidgetProps } from '../../../types/widget';
-import { implementWidget } from '../../../utils/widget';
-import { ExpressionEditor } from '../../Form';
+import { implementWidget, mergeWidgetOptionsIntoSpec } from '../../../utils/widget';
+import { ExpressionWidget } from '../ExpressionWidget';
 
 type Font = {
   fontSize?: string | number;
@@ -35,10 +35,13 @@ export const FontWidget: React.FC<WidgetProps<{}, Font>> = props => {
     <VStack width="full">
       <HStack width="full">
         <Text>Size</Text>
-        <ExpressionEditor
-          compact={true}
-          defaultCode={value.fontSize === undefined ? '' : String(value.fontSize)}
-          onBlur={v => {
+        <ExpressionWidget
+          {...props}
+          spec={mergeWidgetOptionsIntoSpec(props.spec, {
+            compactOptions: { isHiddenExpand: true, height: '32px' },
+          })}
+          value={value.fontSize === undefined ? '' : String(value.fontSize)}
+          onChange={v => {
             const newFont = {
               ...value,
               fontSize: v,
@@ -97,6 +100,6 @@ export const FontWidget: React.FC<WidgetProps<{}, Font>> = props => {
 export default implementWidget({
   version: CORE_VERSION,
   metadata: {
-    name: StyleWidgetName.Size,
+    name: StyleWidgetName.Font,
   },
 })(FontWidget);
diff --git a/packages/editor/src/components/StructureTree/StructureTree.tsx b/packages/editor/src/components/StructureTree/StructureTree.tsx
index 30a3a006..2ed56882 100644
--- a/packages/editor/src/components/StructureTree/StructureTree.tsx
+++ b/packages/editor/src/components/StructureTree/StructureTree.tsx
@@ -107,7 +107,7 @@ export const StructureTree: React.FC<Props> = props => {
         >
           <AutoCompleteInput
             value={search}
-            placeholder="please input the component id"
+            placeholder="Search component"
             size="md"
             variant="filled"
             marginTop={0}
diff --git a/packages/shared/src/constants/core.ts b/packages/shared/src/constants/core.ts
index 400a9968..d8925f54 100644
--- a/packages/shared/src/constants/core.ts
+++ b/packages/shared/src/constants/core.ts
@@ -42,4 +42,5 @@ export enum CoreWidgetName {
 export enum StyleWidgetName {
   Size = 'size',
   Color = 'color',
+  Font = 'font',
 }