antd-mobile 5.25.1 → 5.27.0

package/2x/es/components/image-uploader/preview-item.d.ts

@@ -1,10 +1,11 @@
-import { FC } from 'react';
+import React, { FC } from 'react';
 import { TaskStatus } from './image-uploader';
 import type { ImageProps } from '../image';
 declare type Props = {
     onClick?: () => void;
     onDelete?: () => void;
     deletable: boolean;
+    deleteIcon: React.ReactNode;
     url?: string;
     file?: File;
     status?: TaskStatus;

package/2x/es/components/image-uploader/preview-item.js

@@ -1,5 +1,4 @@
-import React, { useLayoutEffect, useMemo } from 'react';
-import { CloseOutline } from 'antd-mobile-icons';
+import React, { useEffect, useMemo } from 'react';
 import classNames from 'classnames';
 import Image from '../image';
 import SpinLoading from '../spin-loading';
@@ -13,6 +12,7 @@ const PreviewItem = props => {
     url,
     file,
     deletable,
+    deleteIcon,
     onDelete,
     imageFit
   } = props;
@@ -25,11 +25,11 @@ const PreviewItem = props => {
     }
     return '';
   }, [url, file]);
-  useLayoutEffect(() => {
+  useEffect(() => {
     return () => {
-      URL.revokeObjectURL(src);
+      if (file) URL.revokeObjectURL(src);
     };
-  }, [src]);
+  }, [src, file]);
   function renderLoading() {
     return props.status === 'pending' && React.createElement("div", {
       className: `${classPrefix}-cell-mask`
@@ -45,9 +45,7 @@ const PreviewItem = props => {
     return deletable && React.createElement("span", {
       className: `${classPrefix}-cell-delete`,
       onClick: onDelete
-    }, React.createElement(CloseOutline, {
-      className: `${classPrefix}-cell-delete-icon`
-    }));
+    }, deleteIcon);
   }
   return React.createElement("div", {
     className: classNames(`${classPrefix}-cell`, props.status === 'fail' && `${classPrefix}-cell-fail`)

package/2x/es/components/image-viewer/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './image-viewer.less';
 import { showMultiImageViewer, showImageViewer, clearImageViewer } from './methods';
 export type { ImageViewerProps, MultiImageViewerProps, MultiImageViewerRef, } from './image-viewer';

package/2x/es/components/index-bar/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './index-bar.less';
 export type { IndexBarProps, IndexBarRef } from './index-bar';
 export type { IndexBarPanelProps } from './panel';

package/2x/es/components/jumbo-tabs/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './jumbo-tabs.less';
 export type { JumboTabsProps, JumboTabProps } from './jumbo-tabs';
 declare const _default: import("react").FC<import("./jumbo-tabs").JumboTabsProps> & {

package/2x/es/components/list/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './list.less';
 export type { ListProps, ListRef } from './list';
 export type { ListItemProps } from './list-item';

package/2x/es/components/mask/mask.d.ts

@@ -8,7 +8,7 @@ export declare type MaskProps = {
     destroyOnClose?: boolean;
     forceRender?: boolean;
     disableBodyScroll?: boolean;
-    color?: 'black' | 'white';
+    color?: 'white' | 'black' | (string & {});
     opacity?: 'default' | 'thin' | 'thick' | number;
     getContainer?: GetContainer;
     afterShow?: () => void;

package/2x/es/components/mask/mask.js

@@ -14,6 +14,10 @@ const opacityRecord = {
   thin: 0.35,
   thick: 0.75
 };
+const colorRecord = {
+  black: '0, 0, 0',
+  white: '255, 255, 255'
+};
 const defaultProps = {
   visible: true,
   destroyOnClose: false,
@@ -34,8 +38,8 @@ export const Mask = p => {
   const background = useMemo(() => {
     var _a;
     const opacity = (_a = opacityRecord[props.opacity]) !== null && _a !== void 0 ? _a : props.opacity;
-    const rgb = props.color === 'white' ? '255, 255, 255' : '0, 0, 0';
-    return `rgba(${rgb}, ${opacity})`;
+    const rgb = colorRecord[props.color];
+    return rgb ? `rgba(${rgb}, ${opacity})` : props.color;
   }, [props.color, props.opacity]);
   const [active, setActive] = useState(props.visible);
   const unmountedRef = useUnmountedRef();

package/2x/es/components/modal/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './modal.less';
 import { show } from './show';
 import { alert } from './alert';

package/2x/es/components/notice-bar/notice-bar.css

@@ -4,11 +4,10 @@
   --text-color: var(--adm-color-white);
   --font-size: var(--adm-font-size-7);
   --icon-font-size: var(--adm-font-size-10);
-  --height: 76px;
+  --height: 80px;
   height: var(--height);
   box-sizing: border-box;
   font-size: var(--font-size);
-  line-height: var(--height);
   padding: 0 24px;
   display: flex;
   align-items: center;
@@ -46,7 +45,6 @@
   flex-shrink: 0;
   margin-right: 16px;
   font-size: var(--icon-font-size);
-  line-height: var(--height);
 }
 
 .adm-notice-bar .adm-notice-bar-content {
@@ -61,10 +59,13 @@
 .adm-notice-bar .adm-notice-bar-content .adm-notice-bar-content-inner {
   width: auto;
   transition-timing-function: linear;
-  position: absolute;
   white-space: nowrap;
 }
 
+.adm-notice-bar-wrap.adm-notice-bar .adm-notice-bar-content .adm-notice-bar-content-inner {
+  white-space: normal;
+}
+
 .adm-notice-bar .adm-notice-bar-right {
   flex-shrink: 0;
   margin-left: 24px;
@@ -81,4 +82,12 @@
 
 .adm-notice-bar-close-icon {
   font-size: var(--adm-font-size-10);
+}
+
+.adm-notice-bar-wrap {
+  height: auto;
+  align-items: flex-start;
+  padding-top: 16px;
+  padding-bottom: 16px;
+  line-height: 44px;
 }

package/2x/es/components/notice-bar/notice-bar.d.ts

@@ -1,21 +1,23 @@
 import React from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type NoticeBarProps = {
-    /** 通告栏的类型 */
+    /** The type of the NoticeBar */
     color?: 'default' | 'alert' | 'error' | 'info';
-    /** 开始滚动的延迟，单位 ms */
+    /** TDelay to start scrolling, unit ms */
     delay?: number;
-    /** 滚动速度，单位 px/s */
+    /** Scroll speed, unit px/s */
     speed?: number;
-    /** 公告内容 */
+    /** The content of the NoticeBar */
     content: React.ReactNode;
-    /** 是否可关闭 */
+    /** Whether it can be closed */
     closeable?: boolean;
-    /** 关闭时的回调 */
+    /** Callback when closed */
     onClose?: () => void;
-    /** 额外操作区域，显示在关闭按钮左侧 */
+    /** Additional operating area, displayed to the left of the close button */
     extra?: React.ReactNode;
-    /** 左侧广播图标 */
+    /** Radio icon on the left */
     icon?: React.ReactNode;
+    /** Whether to display multiple lines */
+    wrap?: boolean;
 } & NativeProps<'--background-color' | '--border-color' | '--text-color' | '--font-size' | '--icon-font-size' | '--height'>;
 export declare const NoticeBar: React.NamedExoticComponent<NoticeBarProps>;

package/2x/es/components/notice-bar/notice-bar.js

@@ -11,6 +11,7 @@ const defaultProps = {
   color: 'default',
   delay: 2000,
   speed: 50,
+  wrap: false,
   icon: React.createElement(SoundOutline, null)
 };
 export const NoticeBar = memo(p => {
@@ -22,7 +23,7 @@ export const NoticeBar = memo(p => {
   const delayLockRef = useRef(true);
   const animatingRef = useRef(false);
   function start() {
-    if (delayLockRef.current) return;
+    if (delayLockRef.current || props.wrap) return;
     const container = containerRef.current;
     const text = textRef.current;
     if (!container || !text) return;
@@ -61,7 +62,9 @@ export const NoticeBar = memo(p => {
   });
   if (!visible) return null;
   return withNativeProps(props, React.createElement("div", {
-    className: classNames(classPrefix, `${classPrefix}-${props.color}`)
+    className: classNames(classPrefix, `${classPrefix}-${props.color}`, {
+      [`${classPrefix}-wrap`]: props.wrap
+    })
   }, props.icon && React.createElement("span", {
     className: `${classPrefix}-left`
   }, props.icon), React.createElement("span", {

package/2x/es/components/popover/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './popover.less';
 import './popover-menu.less';
 export type { PopoverProps, PopoverRef } from './popover';

package/2x/es/components/radio/group-context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { RadioValue } from '.';
 export declare const RadioGroupContext: import("react").Context<{
     value: RadioValue[];

package/2x/es/components/radio/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './radio.less';
 export type { RadioProps, RadioValue } from './radio';
 export type { RadioGroupProps } from './group';

package/2x/es/components/result-page/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './result-page.less';
 export type { ResultPageProps } from './result-page';
 declare const _default: import("react").FC<import("./result-page").ResultPageProps> & {

package/2x/es/components/side-bar/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './side-bar.less';
 export type { SideBarProps, SideBarItemProps } from './side-bar';
 declare const _default: import("react").FC<import("./side-bar").SideBarProps> & {

package/2x/es/components/skeleton/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './skeleton.less';
 export type { SkeletonProps, SkeletonTitleProps } from './skeleton';
 declare const _default: import("react").FC<import("./skeleton").SkeletonProps> & {

package/2x/es/components/slider/slider.js

@@ -3,12 +3,12 @@ import { withNativeProps } from '../../utils/native-props';
 import classNames from 'classnames';
 import Ticks from './ticks';
 import Marks from './marks';
+import getMiniDecimal, { toFixed } from '@rc-component/mini-decimal';
 import Thumb from './thumb';
 import { mergeProps } from '../../utils/with-default-props';
 import { nearest } from '../../utils/nearest';
 import { usePropsValue } from '../../utils/use-props-value';
 import { devWarning } from '../../utils/dev-log';
-import Big from 'big.js';
 const classPrefix = `adm-slider`;
 const defaultProps = {
   min: 0,
@@ -38,9 +38,14 @@ export const Slider = p => {
   function convertValue(value) {
     return props.range ? value : [props.min, value];
   }
+  function alignValue(value, decimalLen) {
+    const decimal = getMiniDecimal(value);
+    const fixedStr = toFixed(decimal.toString(), '.', decimalLen);
+    return getMiniDecimal(fixedStr).toNumber();
+  }
   function reverseValue(value) {
     const mergedDecimalLen = Math.max(getDecimalLen(step), getDecimalLen(value[0]), getDecimalLen(value[1]));
-    return props.range ? value.map(v => Big(Big(v).toFixed(mergedDecimalLen)).toNumber()) : Big(Big(value[1]).toFixed(mergedDecimalLen)).toNumber();
+    return props.range ? value.map(v => alignValue(v, mergedDecimalLen)) : alignValue(value[1], mergedDecimalLen);
   }
   function getDecimalLen(n) {
     return (`${n}`.split('.')[1] || '').length;
@@ -75,7 +80,7 @@ export const Slider = p => {
       return Object.keys(marks).map(parseFloat).sort((a, b) => a - b);
     } else {
       const points = [];
-      for (let i = Big(min); i.lte(max); i = i.plus(step)) {
+      for (let i = getMiniDecimal(min); i.lessEquals(getMiniDecimal(max)); i = i.add(step)) {
         points.push(i.toNumber());
       }
       return points;

package/2x/es/components/stepper/stepper.d.ts

@@ -1,25 +1,34 @@
-import { FC } from 'react';
+import React from 'react';
 import { NativeProps } from '../../utils/native-props';
 import { InputProps } from '../input';
-declare type ValueProps = {
+declare type ValueProps<ValueType> = {
     allowEmpty: true;
-    value?: number | null;
-    defaultValue?: number | null;
-    onChange?: (value: number | null) => void;
+    value?: ValueType | null;
+    defaultValue?: ValueType | null;
+    onChange?: (value: ValueType | null) => void;
 };
-declare type ValuePropsWithNull = {
+declare type ValuePropsWithNull<ValueType> = {
     allowEmpty?: false;
-    value?: number;
-    defaultValue?: number;
-    onChange?: (value: number) => void;
+    value?: ValueType;
+    defaultValue?: ValueType;
+    onChange?: (value: ValueType) => void;
 };
-export declare type StepperProps = Pick<InputProps, 'onFocus' | 'onBlur'> & (ValuePropsWithNull | ValueProps) & {
-    min?: number;
-    max?: number;
-    step?: number;
+export declare type BaseStepperProps<ValueType> = Pick<InputProps, 'onFocus' | 'onBlur'> & (ValuePropsWithNull<ValueType> | ValueProps<ValueType>) & {
+    min?: ValueType;
+    max?: ValueType;
+    step?: ValueType;
     digits?: number;
     disabled?: boolean;
     inputReadOnly?: boolean;
+    parser?: (text: string) => ValueType;
+    formatter?: (value?: ValueType) => string;
 } & NativeProps<'--height' | '--input-width' | '--input-font-size' | '--input-background-color' | '--border-radius' | '--border' | '--border-inner' | '--active-border' | '--button-font-size' | '--button-background-color' | '--button-width' | '--input-font-color' | '--button-text-color'>;
-export declare const Stepper: FC<StepperProps>;
+export declare type NumberStepperProps = BaseStepperProps<number> & {
+    stringMode?: false;
+};
+export declare type StringStepperProps = BaseStepperProps<string> & {
+    stringMode: true;
+};
+export declare type StepperProps = NumberStepperProps | StringStepperProps;
+export declare function Stepper<ValueType extends number | string>(p: StepperProps): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export {};

package/2x/es/components/stepper/stepper.js

@@ -1,92 +1,161 @@
 import classNames from 'classnames';
 import React, { useEffect, useState } from 'react';
 import { MinusOutline, AddOutline } from 'antd-mobile-icons';
+import useMergedState from 'rc-util/lib/hooks/useMergedState';
+import getMiniDecimal, { toFixed } from '@rc-component/mini-decimal';
 import { withNativeProps } from '../../utils/native-props';
-import { usePropsValue } from '../../utils/use-props-value';
 import { mergeProps } from '../../utils/with-default-props';
-import { bound } from '../../utils/bound';
 import Input from '../input';
 import Button from '../button';
-import Big from 'big.js';
 import { useConfig } from '../config-provider';
 const classPrefix = `adm-stepper`;
 const defaultProps = {
-  defaultValue: 0,
   step: 1,
   disabled: false,
   allowEmpty: false
 };
-export const Stepper = p => {
+export function Stepper(p) {
   const props = mergeProps(defaultProps, p);
   const {
+    defaultValue = 0,
+    value,
+    onChange,
     disabled,
     step,
     max,
     min,
-    inputReadOnly
+    inputReadOnly,
+    digits,
+    stringMode,
+    formatter,
+    parser
   } = props;
   const {
     locale
   } = useConfig();
-  const [value, setValue] = usePropsValue(props);
-  const [inputValue, setInputValue] = useState(() => convertValueToText(value, props.digits));
-  function setValueWithCheck(v) {
-    if (isNaN(v)) return;
-    let target = bound(v, props.min, props.max);
-    if (props.digits !== undefined) {
-      target = parseFloat(target.toFixed(props.digits));
+  // ========================== Parse / Format ==========================
+  const fixedValue = value => {
+    const fixedValue = digits !== undefined ? toFixed(value.toString(), '.', digits) : value;
+    return fixedValue.toString();
+  };
+  const getValueAsType = value => stringMode ? value.toString() : value.toNumber();
+  const parseValue = text => {
+    if (text === '') return null;
+    if (parser) {
+      return String(parser(text));
     }
-    setValue(target);
-  }
-  const [hasFocus, setHasFocus] = useState(false);
-  useEffect(() => {
-    if (!hasFocus) {
-      setInputValue(convertValueToText(value, props.digits));
+    const decimal = getMiniDecimal(text);
+    return decimal.isInvalidate() ? null : decimal.toString();
+  };
+  const formatValue = value => {
+    if (value === null) return '';
+    if (formatter) {
+      return formatter(value);
+    } else {
+      return fixedValue(value);
     }
-  }, [hasFocus]);
-  useEffect(() => {
-    if (!hasFocus) {
-      setInputValue(convertValueToText(value, props.digits));
+  };
+  // ======================== Value & InputValue ========================
+  const [mergedValue, setMergedValue] = useMergedState(defaultValue, {
+    value,
+    onChange: nextValue => {
+      onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
+    }
+  });
+  const [inputValue, setInputValue] = useState(() => formatValue(mergedValue));
+  // >>>>> Value
+  function setValueWithCheck(nextValue) {
+    if (nextValue.isNaN()) return;
+    let target = nextValue;
+    // Put into range
+    if (min !== undefined) {
+      const minDecimal = getMiniDecimal(min);
+      if (target.lessEquals(minDecimal)) {
+        target = minDecimal;
+      }
+    }
+    if (max !== undefined) {
+      const maxDecimal = getMiniDecimal(max);
+      if (maxDecimal.lessEquals(target)) {
+        target = maxDecimal;
+      }
     }
-  }, [value, props.digits]);
+    // Fix digits
+    if (digits !== undefined) {
+      target = getMiniDecimal(fixedValue(getValueAsType(target)));
+    }
+    setMergedValue(getValueAsType(target));
+  }
+  // >>>>> Input
   const handleInputChange = v => {
     setInputValue(v);
-    const value = convertTextToValue(v);
-    if (value === null) {
+    const valueStr = parseValue(v);
+    if (valueStr === null) {
       if (props.allowEmpty) {
-        setValue(null);
+        setMergedValue(null);
       } else {
-        setValue(props.defaultValue);
+        setMergedValue(defaultValue);
       }
     } else {
-      setValueWithCheck(value);
+      setValueWithCheck(getMiniDecimal(valueStr));
+    }
+  };
+  // ============================== Focus ===============================
+  const [focused, setFocused] = useState(false);
+  const inputRef = React.useRef(null);
+  function triggerFocus(nextFocus) {
+    setFocused(nextFocus);
+    // We will convert value to original text when focus
+    if (nextFocus) {
+      setInputValue(mergedValue !== null && mergedValue !== undefined ? String(mergedValue) : '');
+    }
+  }
+  useEffect(() => {
+    var _a, _b, _c;
+    if (focused) {
+      (_c = (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.select) === null || _c === void 0 ? void 0 : _c.call(_b);
+    }
+  }, [focused]);
+  // Focus change to format value
+  useEffect(() => {
+    if (!focused) {
+      setInputValue(formatValue(mergedValue));
     }
+  }, [focused, mergedValue, digits]);
+  // ============================ Operations ============================
+  const handleOffset = positive => {
+    let stepValue = getMiniDecimal(step);
+    if (!positive) {
+      stepValue = stepValue.negate();
+    }
+    setValueWithCheck(getMiniDecimal(mergedValue !== null && mergedValue !== void 0 ? mergedValue : 0).add(stepValue.toString()));
   };
   const handleMinus = () => {
-    setValueWithCheck(Big(value !== null && value !== void 0 ? value : 0).minus(step).toNumber());
+    handleOffset(false);
   };
   const handlePlus = () => {
-    setValueWithCheck(Big(value !== null && value !== void 0 ? value : 0).add(step).toNumber());
+    handleOffset(true);
   };
   const minusDisabled = () => {
     if (disabled) return true;
-    if (value === null) return false;
+    if (mergedValue === null) return false;
     if (min !== undefined) {
-      return value <= min;
+      return mergedValue <= min;
     }
     return false;
   };
   const plusDisabled = () => {
     if (disabled) return true;
-    if (value === null) return false;
+    if (mergedValue === null) return false;
     if (max !== undefined) {
-      return value >= max;
+      return mergedValue >= max;
     }
     return false;
   };
+  // ============================== Render ==============================
   return withNativeProps(props, React.createElement("div", {
     className: classNames(classPrefix, {
-      [`${classPrefix}-active`]: hasFocus
+      [`${classPrefix}-active`]: focused
     })
   }, React.createElement(Button, {
     className: `${classPrefix}-minus`,
@@ -99,10 +168,11 @@ export const Stepper = p => {
   }, React.createElement(MinusOutline, null)), React.createElement("div", {
     className: `${classPrefix}-middle`
   }, React.createElement(Input, {
+    ref: inputRef,
     className: `${classPrefix}-input`,
     onFocus: e => {
       var _a;
-      setHasFocus(true);
+      triggerFocus(true);
       (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
     },
     value: inputValue,
@@ -112,14 +182,14 @@ export const Stepper = p => {
     disabled: disabled,
     onBlur: e => {
       var _a;
-      setHasFocus(false);
+      triggerFocus(false);
       (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
     },
     readOnly: inputReadOnly,
     role: 'spinbutton',
     "aria-valuenow": Number(inputValue),
-    "aria-valuemax": max,
-    "aria-valuemin": min,
+    "aria-valuemax": Number(max),
+    "aria-valuemin": Number(min),
     inputMode: 'decimal'
   })), React.createElement(Button, {
     className: `${classPrefix}-plus`,
@@ -130,16 +200,4 @@ export const Stepper = p => {
     color: 'primary',
     "aria-label": locale.Stepper.increase
   }, React.createElement(AddOutline, null))));
-};
-function convertValueToText(value, digits) {
-  if (value === null) return '';
-  if (digits !== undefined) {
-    return value.toFixed(digits);
-  } else {
-    return value.toString();
-  }
-}
-function convertTextToValue(text) {
-  if (text === '') return null;
-  return parseFloat(text);
 }

package/2x/es/components/steps/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './steps.less';
 export type { StepsProps } from './steps';
 export type { StepProps } from './step';

package/2x/es/components/swiper/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './swiper.less';
 export type { SwiperProps, SwiperRef } from './swiper';
 declare const _default: import("react").ForwardRefExoticComponent<{

package/2x/es/components/tab-bar/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './tab-bar.less';
 export type { TabBarProps, TabBarItemProps } from './tab-bar';
 declare const _default: import("react").FC<import("./tab-bar").TabBarProps> & {

package/2x/es/components/tabs/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './tabs.less';
 export type { TabsProps, TabProps } from './tabs';
 declare const _default: import("react").FC<import("./tabs").TabsProps> & {

package/2x/es/components/tree-select/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import './tree-select.less';
 export type { TreeSelectProps, TreeSelectOption } from './tree-select';
 export type { MultipleProps } from './multiple';

package/2x/es/components/water-mark/water-mark.d.ts

@@ -10,7 +10,7 @@ export declare type WaterMarkProps = {
     image?: string;
     imageWidth?: number;
     imageHeight?: number;
-    content?: string;
+    content?: string | string[];
     fontColor?: string;
     fontStyle?: 'none' | 'normal' | 'italic' | 'oblique';
     fontFamily?: string;

package/2x/es/components/water-mark/water-mark.js

@@ -58,7 +58,11 @@ export const WaterMark = p => {
         const markSize = Number(fontSize) * ratio;
         ctx.font = `${fontStyle} normal ${fontWeight} ${markSize}px/${markHeight}px ${fontFamily}`;
         ctx.fillStyle = fontColor;
-        ctx.fillText(content, 0, 0);
+        if (Array.isArray(content)) {
+          content.forEach((item, index) => ctx.fillText(item, 0, index * markSize));
+        } else {
+          ctx.fillText(content, 0, 0);
+        }
         ctx.restore();
         setBase64Url(canvas.toDataURL());
       }