style: upload

components/typography/Base.tsx

@@ -38,7 +38,7 @@ const isTextOverflowSupport = isStyleSupport('textOverflow');
 
 export interface CopyConfig {
   text?: string;
-  onCopy?: () => void;
+  onCopy?: (event?: MouseEvent) => void;
   tooltip?: boolean;
 }
 
@@ -248,7 +248,7 @@ const Base = defineComponent({
       state.copied = true;
       nextTick(() => {
         if (copyConfig.onCopy) {
-          copyConfig.onCopy();
+          copyConfig.onCopy(e);
         }
 
         state.copyId = setTimeout(() => {
@@ -457,6 +457,7 @@ const Base = defineComponent({
           onCancel={onEditCancel}
           onEnd={onEnd}
           direction={direction.value}
+          component={props.component}
           v-slots={{ enterIcon: slots.editableEnterIcon }}
         />
       );
@@ -517,7 +518,6 @@ const Base = defineComponent({
               'keyboard',
               'onUpdate:content',
             ]);
-
             const cssEllipsis = canUseCSSEllipsis.value;
             const cssTextOverflow = rows === 1 && cssEllipsis;
             const cssLineClamp = rows && rows > 1 && cssEllipsis;

components/typography/Editable.tsx

@@ -18,6 +18,7 @@ const editableProps = () => ({
   onChange: Function as PropType<(val: string) => void>,
   originContent: String,
   direction: String as PropType<Direction>,
+  component: String,
 });
 export type EditableProps = Partial<ExtractPropTypes<ReturnType<typeof editableProps>>>;
 const Editable = defineComponent({
@@ -112,6 +113,7 @@ const Editable = defineComponent({
       [`${props.prefixCls}`]: true,
       [`${props.prefixCls}-edit-content`]: true,
       [`${props.prefixCls}-rtl`]: props.direction === 'rtl',
+      [props.component ? `${props.prefixCls}-${props.component}` : '']: true,
     }));
     return () => (
       <div class={textAreaClassName.value}>

components/typography/index.en-US.md

@@ -81,7 +81,7 @@ Basic text writing, including headings, body text, lists, and more.
 ```json
   {
     text: string,
-    onCopy: function,
+    onCopy: function(event),
     tooltip: false,
   }
 ```

components/typography/index.zh-CN.md

@@ -82,7 +82,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg
 ```json
   {
     text: string,
-    onCopy: function,
+    onCopy: function(event),
     tooltip: false,
   }
 ```

components/typography/style/index.less

@@ -24,9 +24,12 @@
     color: @error-color;
 
     a&:active,
-    a&:focus,
+    a&:focus {
+      color: @error-color-active;
+    }
+
     a&:hover {
-      color: ~`colorPalette('@{error-color}', 5) `;
+      color: @error-color-hover;
     }
   }
 
@@ -43,26 +46,36 @@
   }
 
   h1&,
+  div&-h1,
+  div&-h1 > textarea,
   h1 {
     .typography-title-1();
   }
 
   h2&,
+  div&-h2,
+  div&-h2 > textarea,
   h2 {
     .typography-title-2();
   }
 
   h3&,
+  div&-h3,
+  div&-h3 > textarea,
   h3 {
     .typography-title-3();
   }
 
   h4&,
+  div&-h4,
+  div&-h4 > textarea,
   h4 {
     .typography-title-4();
   }
 
   h5&,
+  div&-h5,
+  div&-h5 > textarea,
   h5 {
     .typography-title-5();
   }
@@ -198,11 +211,18 @@
       right: 10px;
       bottom: 8px;
       color: @text-color-secondary;
+      // default style
+      font-weight: normal;
+      font-size: @font-size-base;
+      font-style: normal;
       pointer-events: none;
     }
 
     // Fix Editable Textarea flash in Firefox
     textarea {
+      // https://stackoverflow.com/a/7695964/3040605
+      height: 1em;
+      margin: 0 !important;
       /* stylelint-disable-next-line property-no-vendor-prefix */
       -moz-transition: none;
     }