chore: pasted multiple lines in env vars

src/components/image-editor/index.tsx

@@ -1,3 +1,4 @@
+import { Spin } from 'antd';
 import classNames from 'classnames';
 import dayjs from 'dayjs';
 import React, {
@@ -9,11 +10,32 @@ import React, {
   useRef,
   useState
 } from 'react';
+import styled from 'styled-components';
 import useDrawing from './hooks/use-drawing';
 import useZoom from './hooks/use-zoom';
 import './index.less';
 import { ImageActionsBar, ToolsBar } from './tools-bar';
 
+const LoadWrapper = styled.div<{ width?: number; height?: number }>`
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: ${(props) => `${props.width}px` || '100%'};
+  z-index: 100;
+`;
+const Loading = (props: { width: number; height: number }) => {
+  const { width, height } = props;
+  return (
+    <LoadWrapper width={width} height={height}>
+      <Spin spinning></Spin>
+    </LoadWrapper>
+  );
+};
+
 type Point = { x: number; y: number; lineWidth: number };
 type Stroke = Point[];
 
@@ -58,6 +80,11 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = forwardRef(
     const negativeMaskRef = useRef<boolean>(false);
     const [invertMask, setInvertMask] = useState<boolean>(false);
     const timer = useRef<any>(null);
+    const [loadingSize, setLoadingSize] = useState({
+      width: 0,
+      height: 0,
+      loading: false
+    });
 
     const {
       canvasRef,
@@ -174,7 +201,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = forwardRef(
       console.log('Resetting strokes', currentStroke.current);
     }, []);
 
-    const loadMaskPixs = (strokes: Stroke[], isInitial?: boolean) => {
+    const loadMaskPixs = async (strokes: Stroke[], isInitial?: boolean) => {
       if (!strokes.length) {
         return;
       }
@@ -458,7 +485,7 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = forwardRef(
 
     useImperativeHandle(ref, () => ({
       clearMask: handleDeleteMask,
-      loadMaskPixs(strokes: Stroke[]) {
+      loadMaskPixs: async function (strokes: Stroke[]) {
         setMaskStrokes(strokes);
         setStrokes([]);
         setTransform();
@@ -514,6 +541,12 @@ const CanvasImageEditor: React.FC<CanvasImageEditorProps> = forwardRef(
             flex: 1
           }}
         >
+          {loadingSize.loading && (
+            <Loading
+              width={loadingSize.width}
+              height={loadingSize.height}
+            ></Loading>
+          )}
           <canvas ref={canvasRef} style={{ position: 'absolute', zIndex: 1 }} />
           <canvas
             ref={overlayCanvasRef}

src/components/label-selector/index.tsx

@@ -1,3 +1,4 @@
+import { useIntl } from '@umijs/max';
 import _ from 'lodash';
 import React, { useCallback, useEffect, useState } from 'react';
 import Inner from './inner';
@@ -17,6 +18,7 @@ const LabelSelector: React.FC<LabelSelectorProps> = ({
   btnText,
   description
 }) => {
+  const intl = useIntl();
   const [labelsData, setLabelsData] = useState({});
   const [labelList, setLabelList] = useState<{ key: string; value: string }[]>(
     []
@@ -46,15 +48,45 @@ const LabelSelector: React.FC<LabelSelectorProps> = ({
     onChange?.(data);
   };
 
+  const handleOnPaste = (
+    e: React.ClipboardEvent<HTMLTextAreaElement>,
+    index: number
+  ) => {
+    e.preventDefault();
+
+    const clipboardText = e.clipboardData.getData('text');
+    if (!clipboardText) return;
+
+    const lines = clipboardText
+      .split(/\r?\n/)
+      .map((line) => line.trim())
+      .filter((line) => line && line.includes('='));
+
+    const parsedData = lines.map((line) => {
+      const [key, value] = line.split('=').map((part) => part.trim());
+      return { key, value };
+    });
+    console.log(lines, parsedData);
+
+    setLabelList((prevPairs) => {
+      const newPairs = [...prevPairs];
+      newPairs.splice(index, 1, ...parsedData);
+      return newPairs;
+    });
+  };
+
   return (
     <Inner
       label={label}
       btnText={btnText}
-      description={description}
+      description={
+        description ?? intl.formatMessage({ id: 'models.form.keyvalue.paste' })
+      }
       labels={labelsData}
       labelList={labelList}
       onChange={handleLabelsChange}
       onLabelListChange={handleLabelListChange}
+      onPaste={handleOnPaste}
     />
   );
 };

src/components/label-selector/inner.tsx

@@ -12,6 +12,7 @@ interface LabelSelectorProps {
   labelList: Array<{ key: string; value: string }>;
   onLabelListChange: (list: { key: string; value: string }[]) => void;
   onChange?: (labels: Record<string, any>) => void;
+  onPaste?: (e: any, index: number) => void;
   description?: React.ReactNode;
 }
 
@@ -20,6 +21,7 @@ const Inner: React.FC<LabelSelectorProps> = ({
   labelList,
   onChange,
   onLabelListChange,
+  onPaste,
   label,
   btnText,
   description
@@ -41,7 +43,7 @@ const Inner: React.FC<LabelSelectorProps> = ({
     );
     onChange?.(newLabels);
   };
-  const handleOnChange = (index: string, label: any) => {
+  const handleOnChange = (index: number, label: any) => {
     const list = _.cloneDeep(labelList);
     list[index] = label;
     onLabelListChange(list);
@@ -60,9 +62,9 @@ const Inner: React.FC<LabelSelectorProps> = ({
     updateLabels(newLabelList);
   };
 
-  const handleOnDelete = (index: string) => {
+  const handleOnDelete = (index: number) => {
     const list = _.cloneDeep(labelList);
-    list.splice(parseInt(index), 1);
+    list.splice(index, 1);
     onLabelListChange(list);
     updateLabels(list);
   };
@@ -70,7 +72,7 @@ const Inner: React.FC<LabelSelectorProps> = ({
   return (
     <Wrapper label={label} description={description}>
       <>
-        {_.map(labelList, (item: any, index: string) => {
+        {labelList?.map((item: any, index: number) => {
           return (
             <LabelItem
               key={index}
@@ -79,6 +81,7 @@ const Inner: React.FC<LabelSelectorProps> = ({
               labelList={labelList}
               onDelete={() => handleOnDelete(index)}
               onChange={(obj) => handleOnChange(index, obj)}
+              onPaste={(e) => onPaste?.(e, index)}
             />
           );
         })}

src/components/label-selector/label-item.tsx

@@ -18,6 +18,7 @@ interface LabelItemProps {
   onDelete?: () => void;
   labelList: { key: string; value: string }[];
   onChange?: (params: { key: string; value: string }) => void;
+  onPaste?: (e: any) => void;
 }
 const LabelItem: React.FC<LabelItemProps> = ({
   label,
@@ -26,7 +27,8 @@ const LabelItem: React.FC<LabelItemProps> = ({
   keyAddon,
   valueAddon,
   onChange,
-  onDelete
+  onDelete,
+  onPaste
 }) => {
   const intl = useIntl();
   const [open, setOpen] = useState(false);
@@ -82,6 +84,7 @@ const LabelItem: React.FC<LabelItemProps> = ({
               value={label.key}
               onChange={handleOnKeyChange}
               onBlur={handleKeyOnBlur}
+              onPaste={onPaste}
             ></SealInput.Input>
           </Tooltip>
         )}