@pdfme/ui 5.3.11-dev.6 → 5.3.11-dev.8

package/src/components/Designer/RightSidebar/DetailView/AlignWidget.tsx

@@ -23,28 +23,63 @@ const AlignWidget = (props: PropPanelWidgetProps) => {
     const tgtPos = isVertical ? 'x' : 'y';
     const tgtSize = isVertical ? 'width' : 'height';
     const isSingle = ass.length === 1;
-    const root = pageSize[tgtSize];
+    // Access pageSize property safely with proper type assertion
+    const root = pageSize && typeof pageSize === 'object' ? 
+      (tgtSize === 'width' ? 
+        (pageSize as unknown as { width: number }).width : 
+        (pageSize as unknown as { height: number }).height) : 0;
 
-    const min = isSingle ? 0 : Math.min(...ass.map((as) => as.position[tgtPos]));
-    const max = isSingle ? root : Math.max(...ass.map((as) => as.position[tgtPos] + as[tgtSize]));
+    // Access position properties safely with proper type assertion
+    const min = isSingle ? 0 : Math.min(...ass.map((as) => {
+      // Safely access position property with proper type assertion
+      const position = as.position && typeof as.position === 'object' ? 
+        (as.position as unknown as { x: number; y: number }) : 
+        { x: 0, y: 0 };
+      return tgtPos === 'x' ? position.x : position.y;
+    }));
+    const max = isSingle ? root : Math.max(...ass.map((as) => {
+      // Safely access position and size properties with proper type assertion
+      const position = as.position && typeof as.position === 'object' ? 
+        (as.position as unknown as { x: number; y: number }) : 
+        { x: 0, y: 0 };
+      const posValue = tgtPos === 'x' ? position.x : position.y;
+      
+      // Safely access width/height with proper type assertion
+      const asWithSize = as as unknown as { width?: number; height?: number };
+      const sizeValue = tgtSize === 'width' ? 
+        (asWithSize.width || 0) : 
+        (asWithSize.height || 0);
+      
+      return posValue + sizeValue;
+    }));
 
     let basePos = min;
-    let adjust = (_: number) => 0;
+    // Define adjust function with consistent parameter usage
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    let adjust = (_size: number): number => 0;
 
     if (['center', 'middle'].includes(type)) {
       basePos = (min + max) / 2;
-      adjust = (num: number) => num / 2;
+      adjust = (size: number): number => size / 2;
     } else if (['right', 'bottom'].includes(type)) {
       basePos = max;
-      adjust = (num: number) => num;
+      adjust = (size: number): number => size;
     }
 
     changeSchemas(
-      ass.map((as) => ({
-        key: `position.${tgtPos}`,
-        value: round(basePos - adjust(as[tgtSize]), 2),
-        schemaId: as.id,
-      })),
+      ass.map((as) => {
+        // Safely access size property with proper type assertion
+        const asWithSize = as as unknown as { width?: number; height?: number; id: string };
+        const sizeValue = tgtSize === 'width' ? 
+          (asWithSize.width || 0) : 
+          (asWithSize.height || 0);
+        
+        return {
+          key: `position.${tgtPos}`,
+          value: round(basePos - adjust(sizeValue), 2),
+          schemaId: asWithSize.id,
+        };
+      }),
     );
   };
 
@@ -55,23 +90,63 @@ const AlignWidget = (props: PropPanelWidgetProps) => {
     const isVertical = type === 'vertical';
     const tgtPos = isVertical ? 'y' : 'x';
     const tgtSize = isVertical ? 'height' : 'width';
-    const min = Math.min(...ass.map((as) => as.position[tgtPos]));
-    const max = Math.max(...ass.map((as) => as.position[tgtPos] + as[tgtSize]));
+    
+    // Safely access position property with proper type assertion
+    const min = Math.min(...ass.map((as) => {
+      const position = as.position && typeof as.position === 'object' ? 
+        (as.position as unknown as { x: number; y: number }) : 
+        { x: 0, y: 0 };
+      return tgtPos === 'x' ? position.x : position.y;
+    }));
+    
+    // Safely access position and size properties with proper type assertion
+    const max = Math.max(...ass.map((as) => {
+      const position = as.position && typeof as.position === 'object' ? 
+        (as.position as unknown as { x: number; y: number }) : 
+        { x: 0, y: 0 };
+      const posValue = tgtPos === 'x' ? position.x : position.y;
+      
+      // Safely access width/height with proper type assertion
+      const asWithSize = as as unknown as { width?: number; height?: number };
+      const sizeValue = tgtSize === 'width' ? 
+        (asWithSize.width || 0) : 
+        (asWithSize.height || 0);
+      
+      return posValue + sizeValue;
+    }));
 
     if (ass.length < 3) return;
 
     const boxPos = min;
     const boxSize = max - min;
-    const sum = ass.reduce((acc, cur) => acc + cur[tgtSize], 0);
+    // Safely access size property with proper type assertion
+    const sum = ass.reduce((acc, cur) => {
+      const curWithSize = cur as unknown as { width?: number; height?: number };
+      const sizeValue = tgtSize === 'width' ? 
+        (curWithSize.width || 0) : 
+        (curWithSize.height || 0);
+      return acc + sizeValue;
+    }, 0);
     const remain = boxSize - sum;
     const unit = remain / (ass.length - 1);
 
     let prev = 0;
     changeSchemas(
       ass.map((as, index) => {
-        prev += index === 0 ? 0 : ass[index - 1][tgtSize] + unit;
+        // Safely access size property of previous element with proper type assertion
+        const prevSize = index === 0 ? 0 : (() => {
+          const prevAs = ass[index - 1] as unknown as { width?: number; height?: number };
+          return tgtSize === 'width' ? 
+            (prevAs.width || 0) : 
+            (prevAs.height || 0);
+        })();
+        
+        prev += index === 0 ? 0 : prevSize + unit;
         const value = round(boxPos + prev, 2);
-        return { key: `position.${tgtPos}`, value, schemaId: as.id };
+        
+        // Safely access id with proper type assertion
+        const asWithId = as as unknown as { id: string };
+        return { key: `position.${tgtPos}`, value, schemaId: asWithId.id };
       }),
     );
   };

package/src/components/Designer/RightSidebar/DetailView/ButtonGroupWidget.tsx

@@ -16,10 +16,10 @@ const ButtonGroupWidget = (props: PropPanelWidgetProps) => {
     const key = btn.key;
     const type = btn.type;
     const ids = activeElements.map((ae) => ae.id);
-    const ass = schemas.filter((s) => ids.includes(s.id)) as SchemaForUI[];
+    const ass = schemas.filter((s) => ids.includes(s.id));
     changeSchemas(
-      ass.map((s: Record<string, any>) => {
-        const oldValue = s[key] ?? false;
+      ass.map((s: SchemaForUI) => {
+        const oldValue = Boolean((s as Record<string, unknown>)[key] ?? false);
         const newValue = type === 'boolean' ? !oldValue : btn.value;
         return { key, value: newValue, schemaId: s.id };
       }),
@@ -31,9 +31,13 @@ const ButtonGroupWidget = (props: PropPanelWidgetProps) => {
     const type = btn.type;
     let active = false;
     const ids = activeElements.map((ae) => ae.id);
-    const ass = schemas.filter((s) => ids.includes(s.id)) as SchemaForUI[];
-    ass.forEach((s: Record<string, any>) => {
-      active = type === 'boolean' ? (s[key] ?? false) : s[key] === btn.value;
+    const ass = schemas.filter((s) => ids.includes(s.id));
+    ass.forEach((s: SchemaForUI) => {
+      // Cast schema to Record to safely access dynamic properties
+      const schemaRecord = s as Record<string, unknown>;
+      active = type === 'boolean' 
+        ? Boolean(schemaRecord[key] ?? false) 
+        : schemaRecord[key] === btn.value;
     });
     return active;
   };
@@ -45,13 +49,13 @@ const ButtonGroupWidget = (props: PropPanelWidgetProps) => {
     const svgDataUrl = `data:image/svg+xml;utf8,${encodeURIComponent(
       replaceCurrentColor(svgString, token.colorText),
     )}`;
-    return <img width={17} height={17} src={svgDataUrl} />;
+    return <img width={17} height={17} src={svgDataUrl} alt="" />;
   };
 
   return (
     <Form.Item>
       <Button.Group>
-        {schema.buttons.map((btn: ButtonConfig, index: number) => {
+        {(schema.buttons as ButtonConfig[]).map((btn: ButtonConfig, index: number) => {
           const active = isActive(btn);
           return (
             <Button

package/src/components/Designer/RightSidebar/DetailView/index.tsx

@@ -76,8 +76,11 @@ const DetailView = (props: DetailViewProps) => {
   }, [activeSchema, pluginsRegistry, JSON.stringify(options)]);
 
   useEffect(() => {
-    const values: any = { ...activeSchema };
-    values.editable = !values.readOnly;
+    // Create a type-safe copy of the schema with editable property
+    const values: Record<string, unknown> = { ...activeSchema };
+    // Safely access and set properties
+    const readOnly = typeof values.readOnly === 'boolean' ? values.readOnly : false;
+    values.editable = !readOnly;
     form.setValues(values);
   }, [activeSchema, form]);
 
@@ -96,14 +99,26 @@ const DetailView = (props: DetailViewProps) => {
     };
   }, [schemasList, activeSchema]);
 
-  const uniqueSchemaName = useRef((value: string): boolean => true);
+  // Reference to a function that validates schema name uniqueness
+  const uniqueSchemaName = useRef(
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    (_unused: string): boolean => true
+  );
 
-  const validateUniqueSchemaName = (_: any, value: string): boolean =>
-    uniqueSchemaName.current(value);
+  // Use proper type for validator function parameter
+  const validateUniqueSchemaName = (
+    _: unknown, 
+    value: string
+  ): boolean => uniqueSchemaName.current(value);
 
-  const handleWatch = debounce((formSchema: any) => {
-    const formAndSchemaValuesDiffer = (formValue: any, schemaValue: any): boolean => {
-      if (typeof formValue === 'object') {
+  // Use explicit type for debounce function that matches the expected signature
+  const handleWatch = debounce(function(...args: unknown[]) {
+    const formSchema = args[0] as Record<string, unknown>;
+    const formAndSchemaValuesDiffer = (
+      formValue: unknown, 
+      schemaValue: unknown
+    ): boolean => {
+      if (typeof formValue === 'object' && formValue !== null) {
         return JSON.stringify(formValue) !== JSON.stringify(schemaValue);
       }
       return formValue !== schemaValue;
@@ -114,7 +129,7 @@ const DetailView = (props: DetailViewProps) => {
       if (['id', 'content'].includes(key)) continue;
 
       let value = formSchema[key];
-      if (formAndSchemaValuesDiffer(value, (activeSchema as any)[key])) {
+      if (formAndSchemaValuesDiffer(value, (activeSchema as Record<string, unknown>)[key])) {
         // FIXME memo: https://github.com/pdfme/pdfme/pull/367#issuecomment-1857468274
         if (value === null && ['rotate', 'opacity'].includes(key)) {
           value = undefined;
@@ -154,21 +169,47 @@ const DetailView = (props: DetailViewProps) => {
     }
   }, 100);
 
+  // Find the active plugin with proper type safety
   const activePlugin = Object.values(pluginsRegistry).find(
-    (plugin) => plugin?.propPanel.defaultSchema.type === activeSchema.type,
-  )!;
+    (plugin) => {
+      if (!plugin || typeof plugin !== 'object') return false;
+      if (!plugin.propPanel || typeof plugin.propPanel !== 'object') return false;
+      if (!plugin.propPanel.defaultSchema || typeof plugin.propPanel.defaultSchema !== 'object') return false;
+      
+      const defaultSchema = plugin.propPanel.defaultSchema as Record<string, unknown>;
+      return 'type' in defaultSchema && 
+             typeof defaultSchema.type === 'string' && 
+             defaultSchema.type === activeSchema.type;
+    }
+  );
 
-  const activePropPanelSchema = activePlugin?.propPanel.schema;
+  // Safely access the propPanel schema
+  const activePropPanelSchema = activePlugin?.propPanel?.schema;
   if (!activePropPanelSchema) {
     console.error(`[@pdfme/ui] No propPanel.schema for ${activeSchema.type}.
 Check this document: https://pdfme.com/docs/custom-schemas`);
   }
 
-  const typeOptions = Object.entries(pluginsRegistry).map(([label, value]) => ({
-    label,
-    value: value?.propPanel.defaultSchema.type,
-  }));
-  const defaultSchema = activePlugin.propPanel.defaultSchema;
+  // Create type-safe options for the type dropdown
+  const typeOptions = Object.entries(pluginsRegistry).map(([label, value]) => {
+    // Default value if plugin is invalid
+    const defaultValue = { label, value: undefined };
+    
+    // Skip invalid plugins
+    if (!value || typeof value !== 'object') return defaultValue;
+    if (!value.propPanel || typeof value.propPanel !== 'object') return defaultValue;
+    if (!value.propPanel.defaultSchema || typeof value.propPanel.defaultSchema !== 'object') return defaultValue;
+    
+    // Safely extract the type
+    const defaultSchema = value.propPanel.defaultSchema as Record<string, unknown>;
+    const schemaType = 'type' in defaultSchema && typeof defaultSchema.type === 'string' 
+      ? defaultSchema.type 
+      : undefined;
+    
+    return { label, value: schemaType };
+  });
+  // Safely access the default schema with proper null checking
+  const defaultSchema = activePlugin?.propPanel?.defaultSchema || {};
 
   const propPanelSchema: PropPanelSchema = {
     type: 'object',
@@ -199,7 +240,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         title: i18n('editable'),
         type: 'boolean',
         span: 8,
-        hidden: defaultSchema?.readOnly !== undefined,
+        hidden: typeof (defaultSchema as Record<string, unknown>).readOnly !== 'undefined',
       },
       required: {
         title: i18n('required'),
@@ -237,7 +278,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         title: i18n('rotate'),
         type: 'number',
         widget: 'inputNumber',
-        disabled: defaultSchema?.rotate === undefined,
+        disabled: typeof (defaultSchema as Record<string, unknown>).rotate === 'undefined',
         max: 360,
         props: { min: 0 },
         span: 6,
@@ -246,7 +287,7 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         title: i18n('opacity'),
         type: 'number',
         widget: 'inputNumber',
-        disabled: defaultSchema?.opacity === undefined,
+        disabled: typeof (defaultSchema as Record<string, unknown>).opacity === 'undefined',
         props: { step: 0.1, min: 0, max: 1 },
         span: 6,
       },
@@ -254,7 +295,9 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
   };
 
   if (typeof activePropPanelSchema === 'function') {
-    const { schemasList: _, ...propPanelProps } = props;
+    // Create a new object without the schemasList property
+    const { size, schemas, pageSize, changeSchemas, activeElements, deselectSchema, activeSchema } = props;
+    const propPanelProps = { size, schemas, pageSize, changeSchemas, activeElements, deselectSchema, activeSchema };
 
     const apps =
       activePropPanelSchema({

package/src/components/Designer/RightSidebar/ListView/Item.tsx

@@ -6,28 +6,49 @@ import { Button, Typography } from 'antd';
 
 const { Text } = Typography;
 
+// Define prop types for Item component
 interface Props {
+  /** Content to display in the item */
   value: React.ReactNode;
+  /** Optional icon to display */
   icon?: React.ReactNode;
+  /** Custom styles for the item */
   style?: React.CSSProperties;
+  /** Status indicator for the item */
   status?: 'is-warning' | 'is-danger';
+  /** Title attribute for the item */
   title?: string;
+  /** Whether the item is required */
   required?: boolean;
+  /** Whether the item is read-only */
   readOnly?: boolean;
+  /** Whether the item is being dragged as an overlay */
   dragOverlay?: boolean;
+  /** Click handler for the item */
   onClick?: () => void;
+  /** Mouse enter handler */
   onMouseEnter?: () => void;
+  /** Mouse leave handler */
   onMouseLeave?: () => void;
+  /** Whether the item is currently being dragged */
   dragging?: boolean;
+  /** Whether items are being sorted */
   sorting?: boolean;
+  /** CSS transition value */
   transition?: string;
+  /** Transform data for the item */
   transform?: { x: number; y: number; scaleX: number; scaleY: number } | null;
+  /** Whether to fade the item in */
   fadeIn?: boolean;
+  /** Drag listeners from dnd-kit */
   listeners?: DraggableSyntheticListeners;
 }
+// Using React.memo and forwardRef for optimized rendering
+// Using TypeScript interface for prop validation instead of PropTypes
 const Item = React.memo(
+  /* eslint-disable react/prop-types */
   React.forwardRef<HTMLLIElement, Props>(
-    (
+    function Item(
       {
         icon,
         value,
@@ -40,16 +61,20 @@ const Item = React.memo(
         onClick,
         onMouseEnter,
         onMouseLeave,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         dragging,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         fadeIn,
         listeners,
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         sorting,
         transition,
         transform,
         ...props
       },
       ref,
-    ) => {
+    ) {
+    /* eslint-enable react/prop-types */
       const i18n = useContext(I18nContext);
 
       useEffect(() => {
@@ -129,4 +154,7 @@ const Item = React.memo(
   ),
 );
 
+// Set display name for debugging
+Item.displayName = 'Item';
+
 export default Item;

package/src/components/Designer/RightSidebar/ListView/SelectableSortableContainer.tsx

@@ -59,12 +59,31 @@ const SelectableSortableContainer = (
   };
 
   const getPluginIcon = (inSchema: string | SchemaForUI): ReactNode => {
+    // Get schema by ID or use directly
     const thisSchema =
       typeof inSchema === 'string' ? schemas.find((schema) => schema.id === inSchema) : inSchema;
-
-    const [pluginLabel, activePlugin] = Object.entries(pluginsRegistry).find(
-      ([label, plugin]) => plugin?.propPanel.defaultSchema.type === thisSchema?.type,
-    )!;
+    
+    if (!thisSchema) return <></>;
+    
+    // Safely extract schema type
+    const schemaType = typeof thisSchema.type === 'string' ? thisSchema.type : '';
+    
+    // Find matching plugin with type-safe approach
+    const pluginEntry = Object.entries(pluginsRegistry).find(
+      ([, plugin]) => {
+        if (!plugin || typeof plugin !== 'object') return false;
+        if (!plugin.propPanel || typeof plugin.propPanel !== 'object') return false;
+        if (!plugin.propPanel.defaultSchema || typeof plugin.propPanel.defaultSchema !== 'object') return false;
+        
+        // Use Record<string, unknown> to safely access properties
+        const defaultSchema = plugin.propPanel.defaultSchema as Record<string, unknown>;
+        return 'type' in defaultSchema && 
+               typeof defaultSchema.type === 'string' && 
+               defaultSchema.type === schemaType;
+      }
+    );
+    
+    const [pluginLabel, activePlugin] = pluginEntry || ['', undefined];
 
     if (!activePlugin) {
       return <></>;

package/src/components/Designer/RightSidebar/ListView/SelectableSortableItem.tsx

@@ -39,12 +39,28 @@ const SelectableSortableItem = ({
 
   const newListeners = {
     ...listeners,
-    onClick: (event: any) => onSelect(schema.id, event.shiftKey),
+    onClick: (event: React.MouseEvent) => onSelect(schema.id, event.shiftKey),
   };
 
-  const [pluginLabel, thisPlugin] = Object.entries(pluginsRegistry).find(
-    ([label, plugin]) => plugin?.propPanel.defaultSchema.type === schema.type,
-  )!;
+  // Safely extract schema type
+  const schemaType = typeof schema.type === 'string' ? schema.type : '';
+  
+  // Find matching plugin with type-safe approach
+  const pluginEntry = Object.entries(pluginsRegistry).find(
+    ([, plugin]) => {
+      if (!plugin || typeof plugin !== 'object') return false;
+      if (!plugin.propPanel || typeof plugin.propPanel !== 'object') return false;
+      if (!plugin.propPanel.defaultSchema || typeof plugin.propPanel.defaultSchema !== 'object') return false;
+      
+      // Use Record<string, unknown> to safely access properties
+      const defaultSchema = plugin.propPanel.defaultSchema as Record<string, unknown>;
+      return 'type' in defaultSchema && 
+             typeof defaultSchema.type === 'string' && 
+             defaultSchema.type === schemaType;
+    }
+  );
+  
+  const [pluginLabel, thisPlugin] = pluginEntry || ['', undefined];
 
   let status: undefined | 'is-warning' | 'is-danger';
   if (!schema.name) {

package/src/components/Designer/index.tsx

@@ -24,7 +24,7 @@ import {
   template2SchemasList,
   getPagesScrollTopByIndex,
   changeSchemas as _changeSchemas,
-  getMaxZoom,
+  useMaxZoom,
 } from '../../helper.js';
 import { useUIPreProcessor, useScrollPageCursor, useInitEvents } from '../../hooks.js';
 import Root from '../Root.js';
@@ -64,7 +64,7 @@ const TemplateEditor = ({
   const i18n = useContext(I18nContext);
   const pluginsRegistry = useContext(PluginsRegistry);
   const options = useContext(OptionsContext);
-  const maxZoom = getMaxZoom();
+  const maxZoom = useMaxZoom();
 
   const [hoveringSchemaId, setHoveringSchemaId] = useState<string | null>(null);
   const [activeElements, setActiveElements] = useState<HTMLElement[]>([]);
@@ -227,12 +227,13 @@ const TemplateEditor = ({
     onChangeTemplate(newTemplate);
     await updateTemplate(newTemplate);
     void refresh(newTemplate);
-    setTimeout(
-      () =>
-        canvasRef.current &&
-        ((canvasRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, newPageCursor, scale)),
-        0),
-    );
+    
+    // Use setTimeout to update scroll position after render
+    setTimeout(() => {
+      if (canvasRef.current) {
+        canvasRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, newPageCursor, scale);
+      }
+    }, 0);
   };
 
   const handleRemovePage = () => {
@@ -262,6 +263,7 @@ const TemplateEditor = ({
   };
 
   if (error) {
+    // Pass the error directly to ErrorScreen
     return <ErrorScreen size={size} error={error} />;
   }
   const pageManipulation = isBlankPdf(template.basePdf)
@@ -309,6 +311,7 @@ const TemplateEditor = ({
             pageNum={schemasList.length}
             setPageCursor={(p) => {
               if (!canvasRef.current) return;
+              // Update scroll position and state
               canvasRef.current.scrollTop = getPagesScrollTopByIndex(pageSizes, p, scale);
               setPageCursor(p);
               onEditEnd();
@@ -331,7 +334,9 @@ const TemplateEditor = ({
             onSortEnd={onSortEnd}
             onEdit={(id) => {
               const editingElem = document.getElementById(id);
-              editingElem && onEdit([editingElem]);
+              if (editingElem) {
+                onEdit([editingElem]);
+              }
             }}
             onEditEnd={onEditEnd}
             deselectSchema={onEditEnd}

package/src/components/Preview.tsx

@@ -17,7 +17,7 @@ import Paper from './Paper.js';
 import Renderer from './Renderer.js';
 import { useUIPreProcessor, useScrollPageCursor } from '../hooks.js';
 import { FontContext } from '../contexts.js';
-import { template2SchemasList, getPagesScrollTopByIndex, getMaxZoom } from '../helper.js';
+import { template2SchemasList, getPagesScrollTopByIndex, useMaxZoom } from '../helper.js';
 import { theme } from 'antd';
 
 const _cache = new Map();
@@ -34,7 +34,7 @@ const Preview = ({
   const { token } = theme.useToken();
 
   const font = useContext(FontContext);
-  const maxZoom = getMaxZoom();
+  const maxZoom = useMaxZoom();
 
   const containerRef = useRef<HTMLDivElement>(null);
   const paperRefs = useRef<HTMLDivElement[]>([]);
@@ -98,7 +98,7 @@ const Preview = ({
   const handleChangeInput = ({ name, value }: { name: string; value: string }) =>
     onChangeInput && onChangeInput({ index: unitCursor, name, value });
 
-  const handleOnChangeRenderer = (args: { key: string; value: any }[], schema: SchemaForUI) => {
+  const handleOnChangeRenderer = (args: { key: string; value: unknown }[], schema: SchemaForUI) => {
     let isNeedInit = false;
     args.forEach(({ key: _key, value }) => {
       if (_key === 'content') {
@@ -112,7 +112,7 @@ const Preview = ({
         const targetSchema = schemasList[pageCursor].find((s) => s.id === schema.id) as SchemaForUI;
         if (!targetSchema) return;
 
-        // @ts-ignore
+        // @ts-expect-error Dynamic property assignment
         targetSchema[_key] = value as string;
       }
     });