fix: Typography.Text delete did not follow state changing (ant-design#53861)

Author: codingories

components/typography/Base/index.tsx

@@ -111,6 +111,16 @@ function wrapperDecorations(
 
 const ELLIPSIS_STR = '...';
 
+const DECORATION_PROPS = [
+  'delete', 
+  'mark', 
+  'code', 
+  'underline', 
+  'strong', 
+  'keyboard', 
+  'italic'
+] as const;
+
 const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
   const {
     prefixCls: customizePrefixCls,
@@ -135,15 +145,7 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
   // ============================ MISC ============================
   const prefixCls = getPrefixCls('typography', customizePrefixCls);
 
-  const textProps = omit(restProps, [
-    'mark',
-    'code',
-    'delete',
-    'underline',
-    'strong',
-    'keyboard',
-    'italic',
-  ]);
+  const textProps = omit(restProps, DECORATION_PROPS);
 
   // ========================== Editable ==========================
   const [enableEdit, editConfig] = useMergedConfig<EditConfig>(editable);
@@ -463,7 +465,15 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
               width={ellipsisWidth}
               onEllipsis={onJsEllipsis}
               expanded={expanded}
-              miscDeps={[copied, expanded, copyLoading, enableEdit, enableCopy, textLocale]}
+              miscDeps={[
+                copied, 
+                expanded, 
+                copyLoading, 
+                enableEdit, 
+                enableCopy, 
+                textLocale, 
+                ...DECORATION_PROPS.map(key => props[key as keyof BlockProps])
+              ]}
             >
               {(node, canEllipsis) =>
                 wrapperDecorations(

components/typography/__tests__/index.test.tsx

@@ -497,4 +497,51 @@ describe('Typography', () => {
     userEvent.keyboard('{enter}');
     await waitFor(() => expect(onEditStart).toHaveBeenCalledTimes(1));
   });
+
+  // https://github.com/ant-design/ant-design/issues/53858
+  describe('decoration props can be changed dynamically', () => {
+    const decorationProps = [
+      { propName: 'delete', tagName: 'del' },
+      { propName: 'mark', tagName: 'mark' },
+      { propName: 'code', tagName: 'code' },
+      { propName: 'underline', tagName: 'u' },
+      { propName: 'strong', tagName: 'strong' },
+      { propName: 'keyboard', tagName: 'kbd' },
+      { propName: 'italic', tagName: 'i' },
+    ];
+
+    decorationProps.forEach(({ propName, tagName }) => {
+      it(`${propName} prop can be changed dynamically`, () => {
+        const DynamicPropsTestCase = () => {
+          const [propState, setPropState] = React.useState(false);
+          const textProps = { [propName]: propState };
+          return (
+            <div>
+              <Text {...textProps}>{`dynamic ${propName} text`}</Text>
+              <button type="button" onClick={() => setPropState(!propState)} data-testid="toggle">
+                Toggle
+              </button>
+            </div>
+          );
+        };
+
+        const { container, getByTestId } = render(<DynamicPropsTestCase />);
+
+        expect(container.querySelector(tagName)).toBeFalsy();
+
+        act(() => {
+          fireEvent.click(getByTestId('toggle'));
+        });
+
+        expect(container.querySelector(tagName)).toBeTruthy();
+        expect(container.querySelector(tagName)?.textContent).toBe(`dynamic ${propName} text`);
+
+        act(() => {
+          fireEvent.click(getByTestId('toggle'));
+        });
+
+        expect(container.querySelector(tagName)).toBeFalsy();
+      });
+    });
+  });
 });