fix: input img url fall back image

src/pages/playground/hooks/use-add-image.tsx

@@ -1,5 +1,6 @@
 import DropDownActions from '@/components/drop-down-actions';
 import {
+  DeleteOutlined,
   LinkOutlined,
   PictureOutlined,
   UploadOutlined
@@ -7,9 +8,25 @@ import {
 import { useIntl } from '@umijs/max';
 import { Button, Input, Tooltip } from 'antd';
 import { useRef, useState } from 'react';
+import styled from 'styled-components';
 import UploadImg from '../components/upload-img';
 
-const regex = /(https?:\/\/\S+\.(png|jpg|jpeg))/gi;
+const ImgInputWrapper = styled.div`
+  position: relative;
+  .del-btn {
+    display: none;
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: var(--ant-color-bg-container);
+  }
+  &:hover {
+    .del-btn {
+      display: flex;
+    }
+  }
+`;
 
 const useAddImage = (options: {
   size?: 'small' | 'middle' | 'large';
@@ -31,29 +48,39 @@ const useAddImage = (options: {
     }, 100);
   };
 
-  const handleInputImageUrl = (e: any) => {
-    const url = e.target.value;
-    const isValid = regex.test(url);
-    setOpenImgTips(!isValid);
-    if (isValid) {
+  const handleInputImageUrl = async (e: any) => {
+    const url = e.target.value?.trim();
+
+    if (url) {
       handleUpdateImgList([
         {
           uid: updateUidCount(),
-          dataUrl: e.target.value
+          dataUrl: url
         }
       ]);
-      setIsFromUrl(false);
-    }
-
-    setTimeout(() => {
       setOpenImgTips(false);
-    }, 2000);
+      setIsFromUrl(false);
+    } else {
+      setOpenImgTips(true);
+    }
+    // set openImgTips to false after next frame if is not valid
+    if (!url) {
+      requestAnimationFrame(() => {
+        setTimeout(() => {
+          setOpenImgTips(false);
+        }, 3000);
+      });
+    }
+  };
+
+  const handleClose = () => {
+    setIsFromUrl(false);
+    setOpenImgTips(false);
   };
 
   const handleOnEscape = (e: any) => {
     if (e.key === 'Escape') {
-      setIsFromUrl(false);
-      setOpenImgTips(false);
+      handleClose();
     }
   };
 
@@ -64,17 +91,27 @@ const useAddImage = (options: {
         id: 'playground.uploadImage.url.invalid'
       })}
     >
-      <Input
-        ref={inputImgRef}
-        status={openImgTips ? 'error' : ''}
-        placeholder={intl.formatMessage({
-          id: 'playground.uploadImage.url.holder'
-        })}
-        style={{ width: 360, height: 32 }}
-        onBlur={handleInputImageUrl}
-        onPressEnter={handleInputImageUrl}
-        onKeyDown={handleOnEscape}
-      ></Input>
+      <ImgInputWrapper>
+        <Input
+          ref={inputImgRef}
+          status={openImgTips ? 'error' : ''}
+          placeholder={intl.formatMessage({
+            id: 'playground.uploadImage.url.holder'
+          })}
+          style={{ width: 360, height: 32 }}
+          onBlur={handleInputImageUrl}
+          onPressEnter={handleInputImageUrl}
+          onKeyDown={handleOnEscape}
+        ></Input>
+        <div className="del-btn">
+          <Button
+            onClick={handleClose}
+            icon={<DeleteOutlined />}
+            size="small"
+            type="text"
+          ></Button>
+        </div>
+      </ImgInputWrapper>
     </Tooltip>
   ) : null;