@pdfme/schemas 5.3.8-dev.9 → 5.3.9

package/src/date/helper.ts

@@ -1,7 +1,7 @@
 import type * as CSS from 'csstype';
 
 import AirDatepicker from 'air-datepicker';
-import type { AirDatepickerLocale, AirDatepickerButton } from 'air-datepicker';
+import type { AirDatepickerLocale, AirDatepickerButton, AirDatepickerDate } from 'air-datepicker';
 import localeAr from 'air-datepicker/locale/ar';
 import localeBg from 'air-datepicker/locale/bg';
 import localeCa from 'air-datepicker/locale/ca';
@@ -40,9 +40,9 @@ import * as dateFns from 'date-fns/locale';
 import { format } from 'date-fns';
 
 import { Plugin, getFallbackFontName, DEFAULT_FONT_NAME, PropPanelSchema } from '@pdfme/common';
-import text from '../text';
+import text from '../text/index.js';
 import { DEFAULT_OPACITY, HEX_COLOR_PATTERN } from '../constants.js';
-import { mapVerticalAlignToFlex } from '../text/uiRender';
+import { mapVerticalAlignToFlex } from '../text/uiRender.js';
 import {
   DEFAULT_FONT_SIZE,
   DEFAULT_ALIGNMENT,
@@ -51,9 +51,16 @@ import {
   DEFAULT_CHARACTER_SPACING,
   DEFAULT_FONT_COLOR,
 } from '../text/constants.js';
-import { DateSchema } from './types';
-import { getExtraFormatterSchema, Formatter } from '../text/extraFormatter';
-import { isEditable } from '../utils';
+import { DateSchema } from './types.js';
+import { getExtraFormatterSchema, Formatter } from '../text/extraFormatter.js';
+import { isEditable } from '../utils.js';
+
+interface AirDatepickerInstance {
+  selectedDates: Date[];
+  hide: () => void;
+  destroy: () => void;
+  show: () => void;
+}
 
 type PickerType = 'date' | 'time' | 'dateTime';
 
@@ -162,7 +169,7 @@ const getFmtValue = (
   value: string,
   type: PickerType,
   schema: DateSchema,
-  locale: Locale
+  locale: Locale,
 ): string => {
   return value
     ? format(strDateToDate(value, type), schema.format, {
@@ -259,16 +266,16 @@ export const getPlugin = ({ type, icon }: { type: PickerType; icon: string }) =>
           },
         });
       }
-
       const airDatepicker = new AirDatepicker(input, {
         locale: locale.adLocale,
         selectedDates: [strDateToDate(value, type)],
-        dateFormat: (date) => format(date, schema.format, { locale: locale.formatLocale }),
+        dateFormat: (date: AirDatepickerDate) =>
+          format(date, schema.format, { locale: locale.formatLocale }),
         timepicker: type !== 'date',
         onlyTimepicker: type === 'time',
         isMobile: window.innerWidth < 768,
         buttons: adButtons,
-        onSelect: ({ datepicker }) => {
+        onSelect: ({ datepicker }: { datepicker: AirDatepickerInstance }) => {
           if (type === 'date') {
             commitChange(datepicker.selectedDates.length ? datepicker.selectedDates[0] : null);
             datepicker.hide();
@@ -311,7 +318,7 @@ export const getPlugin = ({ type, icon }: { type: PickerType; icon: string }) =>
         const fallbackFontName = getFallbackFontName(font);
 
         const locale = getAirDatepickerLocale(
-          (activeSchema as any).locale || options.lang || defaultLocale
+          (activeSchema as any).locale || options.lang || defaultLocale,
         );
 
         if (
@@ -326,7 +333,7 @@ export const getPlugin = ({ type, icon }: { type: PickerType; icon: string }) =>
 
         const formatter = getExtraFormatterSchema(i18n);
         formatter.buttons = formatter.buttons.filter(
-          (button) => button.key === Formatter.ALIGNMENT
+          (button) => button.key === Formatter.ALIGNMENT,
         );
 
         const validateDateTimeFormat = (_rule: any, formatString: string): boolean => {
@@ -441,7 +448,7 @@ export const getPlugin = ({ type, icon }: { type: PickerType; icon: string }) =>
         backgroundColor: '',
         locale: undefined,
         opacity: DEFAULT_OPACITY,
-      },
+      } as DateSchema,
     },
     icon,
   };

package/src/date/time.ts

@@ -1,4 +1,4 @@
-import { getPlugin } from './helper';
+import { getPlugin } from './helper.js';
 import { createSvgStr } from '../utils.js';
 import { Clock } from 'lucide';
 

package/src/date/types.ts

@@ -1,5 +1,5 @@
 import { Schema } from '@pdfme/common';
-import { ALIGNMENT } from '../text/types';
+import { ALIGNMENT } from '../text/types.js';
 
 export interface DateSchema extends Schema {
   format: string;
@@ -10,4 +10,10 @@ export interface DateSchema extends Schema {
   fontColor: string;
   backgroundColor: string;
   locale?: string;
+  // Explicitly include these properties from Schema for TypeScript
+  width: number;
+  height: number;
+  name: string;
+  type: string;
+  content?: string;
 }

package/src/graphics/imagehelper.ts

@@ -150,7 +150,7 @@ const imageSize = (imgBuffer: Buffer): { height: number; width: number } => {
   }
 
   throw new TypeError(
-    '[@pdfme/schemas/images] Unsupported file type: ' + (type === undefined ? 'undefined' : type)
+    '[@pdfme/schemas/images] Unsupported file type: ' + (type === undefined ? 'undefined' : type),
   );
 };
 // ----------------------------

package/src/graphics/svg.ts

@@ -1,5 +1,4 @@
 import { Plugin, Schema } from '@pdfme/common';
-import { XMLValidator } from 'fast-xml-parser';
 import {
   convertForPdfLayoutProps,
   isEditable,
@@ -9,7 +8,33 @@ import {
 } from '../utils.js';
 import { Route } from 'lucide';
 
-const isValidSVG = (svgString: string) => XMLValidator.validate(svgString) === true;
+const isValidSVG = (svgString: string): boolean => {
+  try {
+    // Basic validation checks that work in both Node.js and browser
+    if (!svgString || typeof svgString !== 'string') {
+      return false;
+    }
+
+    // Check for basic SVG structure
+    if (!svgString.includes('<svg') || !svgString.includes('</svg>')) {
+      return false;
+    }
+
+    // Additional browser-specific validation if DOMParser is available
+    if (typeof DOMParser !== 'undefined') {
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(svgString, 'image/svg+xml');
+      const parserError = doc.querySelector('parsererror');
+      if (parserError !== null) {
+        return false;
+      }
+    }
+
+    return true;
+  } catch (error) {
+    return false;
+  }
+};
 
 const defaultValue = `<svg viewBox="0 0 488 600" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <g transform="matrix(1,0,0,1,-56,0)" fill="#000000" stroke="none">

package/src/index.ts

@@ -1,17 +1,17 @@
-import multiVariableText from './multiVariableText/index';
-import text from './text/index';
-import image from './graphics/image';
-import svg from './graphics/svg';
-import barcodes from './barcodes/index';
-import line from './shapes/line';
-import table from './tables/index';
-import { rectangle, ellipse } from './shapes/rectAndEllipse';
-import dateTime from './date/dateTime';
-import date from './date/date';
-import time from './date/time';
-import select from './select/index';
-import radioGroup from './radioGroup/index';
-import checkbox from './checkbox/index';
+import multiVariableText from './multiVariableText/index.js';
+import text from './text/index.js';
+import image from './graphics/image.js';
+import svg from './graphics/svg.js';
+import barcodes from './barcodes/index.js';
+import line from './shapes/line.js';
+import table from './tables/index.js';
+import { rectangle, ellipse } from './shapes/rectAndEllipse.js';
+import dateTime from './date/dateTime.js';
+import date from './date/date.js';
+import time from './date/time.js';
+import select from './select/index.js';
+import radioGroup from './radioGroup/index.js';
+import checkbox from './checkbox/index.js';
 
 const builtInPlugins = { Text: text };
 
@@ -34,3 +34,6 @@ export {
   radioGroup,
   checkbox,
 };
+
+// Export utility functions
+export { getDynamicHeightsForTable } from './tables/dynamicTemplate.js';

package/src/multiVariableText/helper.ts

@@ -1,14 +1,18 @@
-import { MultiVariableTextSchema } from "./types";
+import { MultiVariableTextSchema } from './types.js';
 
-export const substituteVariables = (text: string, variablesIn: string | Record<string, string>): string => {
+export const substituteVariables = (
+  text: string,
+  variablesIn: string | Record<string, string>,
+): string => {
   if (!text) {
-    return "";
+    return '';
   }
 
   let substitutedText = text;
 
   if (variablesIn) {
-    const variables: Record<string, string> = (typeof variablesIn === "string") ? JSON.parse(variablesIn) || {} : variablesIn;
+    const variables: Record<string, string> =
+      typeof variablesIn === 'string' ? JSON.parse(variablesIn) || {} : variablesIn;
 
     Object.keys(variables).forEach((variableName) => {
       // handle special characters in variable name
@@ -33,13 +37,17 @@ export const validateVariables = (value: string, schema: MultiVariableTextSchema
   try {
     values = value ? JSON.parse(value) : {};
   } catch (e) {
-    throw new SyntaxError(`[@pdfme/generator] invalid JSON string '${value}' for variables in field ${schema.name}`);
+    throw new SyntaxError(
+      `[@pdfme/generator] invalid JSON string '${value}' for variables in field ${schema.name}`,
+    );
   }
 
   for (const variable of schema.variables) {
     if (!values[variable]) {
       if (schema.required) {
-        throw new Error(`[@pdfme/generator] variable ${variable} is missing for field ${schema.name}`);
+        throw new Error(
+          `[@pdfme/generator] variable ${variable} is missing for field ${schema.name}`,
+        );
       }
       // If not required, then simply don't render this field if an input is missing
       return false;
@@ -47,4 +55,4 @@ export const validateVariables = (value: string, schema: MultiVariableTextSchema
   }
 
   return true;
-}
+};

package/src/multiVariableText/index.ts

@@ -2,7 +2,7 @@ import type { Plugin } from '@pdfme/common';
 import { pdfRender } from './pdfRender.js';
 import { propPanel } from './propPanel.js';
 import { uiRender } from './uiRender.js';
-import type { MultiVariableTextSchema } from './types';
+import type { MultiVariableTextSchema } from './types.js';
 import { Type } from 'lucide';
 import { createSvgStr } from '../utils.js';
 

package/src/multiVariableText/pdfRender.ts

@@ -1,7 +1,7 @@
 import { PDFRenderProps } from '@pdfme/common';
-import { MultiVariableTextSchema } from './types';
-import { pdfRender as parentPdfRender } from '../text/pdfRender';
-import { substituteVariables, validateVariables } from './helper';
+import { MultiVariableTextSchema } from './types.js';
+import { pdfRender as parentPdfRender } from '../text/pdfRender.js';
+import { substituteVariables, validateVariables } from './helper.js';
 
 export const pdfRender = async (arg: PDFRenderProps<MultiVariableTextSchema>) => {
   const { value, schema, ...rest } = arg;

package/src/multiVariableText/propPanel.ts

@@ -1,11 +1,11 @@
-import { propPanel as parentPropPanel } from '../text/propPanel';
+import { propPanel as parentPropPanel } from '../text/propPanel.js';
 import { PropPanel, PropPanelWidgetProps } from '@pdfme/common';
-import { MultiVariableTextSchema } from './types';
+import { MultiVariableTextSchema } from './types.js';
 
 const mapDynamicVariables = (props: PropPanelWidgetProps) => {
   const { rootElement, changeSchemas, activeSchema, i18n, options } = props;
 
-  const mvtSchema = (activeSchema as any);
+  const mvtSchema = activeSchema as any;
   const text = mvtSchema.text || '';
   const variables = JSON.parse(mvtSchema.content) || {};
   const variablesChanged = updateVariablesFromText(text, variables);
@@ -14,11 +14,13 @@ const mapDynamicVariables = (props: PropPanelWidgetProps) => {
   if (variablesChanged) {
     changeSchemas([
       { key: 'content', value: JSON.stringify(variables), schemaId: activeSchema.id },
-      { key: 'variables', value: varNames, schemaId: activeSchema.id }
+      { key: 'variables', value: varNames, schemaId: activeSchema.id },
     ]);
   }
 
-  const placeholderRowEl = document.getElementById('placeholder-dynamic-var')?.closest('.ant-form-item') as HTMLElement;
+  const placeholderRowEl = document
+    .getElementById('placeholder-dynamic-var')
+    ?.closest('.ant-form-item') as HTMLElement;
   if (!placeholderRowEl) {
     throw new Error('Failed to find Ant form placeholder row to create dynamic variables inputs.');
   }
@@ -36,10 +38,12 @@ const mapDynamicVariables = (props: PropPanelWidgetProps) => {
       textarea.value = variables[variableName];
       textarea.addEventListener('change', (e: Event) => {
         variables[variableName] = (e.target as HTMLTextAreaElement).value;
-        changeSchemas([{ key: 'content', value: JSON.stringify(variables), schemaId: activeSchema.id }]);
+        changeSchemas([
+          { key: 'content', value: JSON.stringify(variables), schemaId: activeSchema.id },
+        ]);
       });
 
-      const label = varRow.querySelector('label') as HTMLLabelElement
+      const label = varRow.querySelector('label') as HTMLLabelElement;
       label.innerText = variableName;
 
       varRow.style.display = 'block';
@@ -47,10 +51,11 @@ const mapDynamicVariables = (props: PropPanelWidgetProps) => {
     }
   } else {
     const para = document.createElement('p');
-    para.innerHTML = i18n('schemas.mvt.typingInstructions')
-        + ` <code style="color:${options?.theme?.token?.colorPrimary || "#168fe3"}; font-weight:bold;">{`
-        + i18n('schemas.mvt.sampleField')
-        + '}</code>';
+    para.innerHTML =
+      i18n('schemas.mvt.typingInstructions') +
+      ` <code style="color:${options?.theme?.token?.colorPrimary || '#168fe3'}; font-weight:bold;">{` +
+      i18n('schemas.mvt.sampleField') +
+      '}</code>';
     rootElement.appendChild(para);
   }
 };
@@ -73,7 +78,7 @@ export const propPanel: PropPanel<MultiVariableTextSchema> = {
             type: 'object',
             widget: 'mapDynamicVariables',
             bind: false,
-            span: 24
+            span: 24,
           },
           placeholderDynamicVar: {
             title: 'Placeholder Dynamic Variable',
@@ -88,9 +93,8 @@ export const propPanel: PropPanel<MultiVariableTextSchema> = {
             },
             span: 24,
           },
-        }
+        },
       },
-
     };
   },
   widgets: { ...parentPropPanel.widgets, mapDynamicVariables },
@@ -106,7 +110,6 @@ export const propPanel: PropPanel<MultiVariableTextSchema> = {
   },
 };
 
-
 const updateVariablesFromText = (text: string, variables: any): boolean => {
   const regex = /\{([^{}]+)}/g;
   const matches = text.match(regex);
@@ -138,4 +141,4 @@ const updateVariablesFromText = (text: string, variables: any): boolean => {
   }
 
   return changed;
-}
+};

package/src/multiVariableText/types.ts

@@ -1,4 +1,4 @@
-import type { TextSchema } from '../text/types';
+import type { TextSchema } from '../text/types.js';
 
 export interface MultiVariableTextSchema extends TextSchema {
   text: string;

package/src/multiVariableText/uiRender.ts

@@ -1,13 +1,13 @@
 import { getDefaultFont, UIRenderProps } from '@pdfme/common';
-import { MultiVariableTextSchema } from './types';
+import { MultiVariableTextSchema } from './types.js';
 import {
   uiRender as parentUiRender,
   buildStyledTextContainer,
-  makeElementPlainTextContentEditable
-} from '../text/uiRender';
-import { isEditable } from '../utils';
-import { getFontKitFont } from '../text/helper';
-import { substituteVariables } from './helper';
+  makeElementPlainTextContentEditable,
+} from '../text/uiRender.js';
+import { isEditable } from '../utils.js';
+import { getFontKitFont } from '../text/helper.js';
+import { substituteVariables } from './helper.js';
 
 export const uiRender = async (arg: UIRenderProps<MultiVariableTextSchema>) => {
   const { value, schema, rootElement, mode, onChange, ...rest } = arg;
@@ -25,10 +25,14 @@ export const uiRender = async (arg: UIRenderProps<MultiVariableTextSchema>) => {
     schema,
     mode: mode == 'form' ? 'viewer' : mode, // if no variables for form it's just a viewer
     rootElement,
-    onChange: (arg: { key: string; value: any; } | { key: string; value: any; }[]) => {
+    onChange: (arg: { key: string; value: any } | { key: string; value: any }[]) => {
       if (!Array.isArray(arg)) {
         const numVariables = countUniqueVariableNames(arg.value);
-        onChange && onChange([{key: 'text', value: arg.value}, {key: 'readOnly', value: numVariables == 0}]);
+        onChange &&
+          onChange([
+            { key: 'text', value: arg.value },
+            { key: 'readOnly', value: numVariables == 0 },
+          ]);
       } else {
         throw new Error('onChange is not an array, the parent text plugin has changed...');
       }
@@ -49,7 +53,10 @@ export const uiRender = async (arg: UIRenderProps<MultiVariableTextSchema>) => {
         if (numVariables !== newNumVariables) {
           // If variables were modified during this keypress, we trigger a change
           if (onChange) {
-            onChange([{key: 'text', value: text}, {key: 'readOnly', value: newNumVariables == 0}]);
+            onChange([
+              { key: 'text', value: text },
+              { key: 'readOnly', value: newNumVariables == 0 },
+            ]);
           }
           numVariables = newNumVariables;
         }
@@ -59,16 +66,7 @@ export const uiRender = async (arg: UIRenderProps<MultiVariableTextSchema>) => {
 };
 
 const formUiRender = async (arg: UIRenderProps<MultiVariableTextSchema>) => {
-  const {
-    value,
-    schema,
-    rootElement,
-    onChange,
-    stopEditing,
-    theme,
-    _cache,
-    options,
-  } = arg;
+  const { value, schema, rootElement, onChange, stopEditing, theme, _cache, options } = arg;
   const rawText = schema.text;
 
   if (rootElement.parentElement) {
@@ -92,7 +90,7 @@ const formUiRender = async (arg: UIRenderProps<MultiVariableTextSchema>) => {
       inVarString = true;
       let span = document.createElement('span');
       span.style.outline = `${theme.colorPrimary} dashed 1px`;
-      makeElementPlainTextContentEditable(span)
+      makeElementPlainTextContentEditable(span);
       span.textContent = variables[variableIndices[i]];
       span.addEventListener('blur', (e: Event) => {
         const newValue = (e.target as HTMLSpanElement).textContent || '';
@@ -114,7 +112,7 @@ const formUiRender = async (arg: UIRenderProps<MultiVariableTextSchema>) => {
       textBlock.appendChild(span);
     }
   }
-}
+};
 
 const getVariableIndices = (content: string) => {
   const regex = /\{([^}]+)}/g;
@@ -146,7 +144,12 @@ const countUniqueVariableNames = (content: string) => {
  * Regex would otherwise be performed on every key press (which isn't terrible, but this code helps).
  */
 const keyPressShouldBeChecked = (event: KeyboardEvent) => {
-  if (event.key == "ArrowUp" || event.key == "ArrowDown" || event.key == "ArrowLeft" || event.key == "ArrowRight") {
+  if (
+    event.key == 'ArrowUp' ||
+    event.key == 'ArrowDown' ||
+    event.key == 'ArrowLeft' ||
+    event.key == 'ArrowRight'
+  ) {
     return false;
   }
 
@@ -164,4 +167,4 @@ const keyPressShouldBeChecked = (event: KeyboardEvent) => {
   }
 
   return true;
-}
+};

package/src/radioGroup/index.ts

@@ -1,7 +1,7 @@
 import { Plugin } from '@pdfme/common';
 import { Schema } from '@pdfme/common';
 import { Circle, CircleDot } from 'lucide';
-import svg from '../graphics/svg';
+import svg from '../graphics/svg.js';
 import { isEditable, createSvgStr } from '../utils.js';
 import { HEX_COLOR_PATTERN } from '../constants.js';
 
@@ -65,7 +65,7 @@ const schema: Plugin<RadioGroup> = {
           onChange({ key: 'content', value: 'true' });
           radioButtonStates.set(schema.name, { value: 'true', onChange });
           eventEmitter.dispatchEvent(
-            new CustomEvent(`group-${schema.group}`, { detail: schema.name })
+            new CustomEvent(`group-${schema.group}`, { detail: schema.name }),
           );
         }
       });
@@ -89,7 +89,7 @@ const schema: Plugin<RadioGroup> = {
         type: 'string',
         widget: 'color',
         props: {
-          disabledAlpha: true
+          disabledAlpha: true,
         },
         required: true,
         rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('validation.hexColor') }],

package/src/select/index.ts

@@ -1,8 +1,8 @@
 import type * as CSS from 'csstype';
-import { propPanel as parentPropPanel } from '../text/propPanel';
+import { propPanel as parentPropPanel } from '../text/propPanel.js';
 import { Plugin, PropPanelWidgetProps, SchemaForUI } from '@pdfme/common';
-import text from '../text';
-import { TextSchema } from '../text/types';
+import text from '../text/index.js';
+import { TextSchema } from '../text/types.js';
 import { ChevronDown } from 'lucide';
 import { createSvgStr } from '../utils.js';
 
@@ -157,7 +157,7 @@ const schema: Plugin<Select> = {
       selectElement.innerHTML = schema.options
         .map(
           (option) =>
-            `<option value="${option}" ${option === value ? 'selected' : ''}>${option}</option>`
+            `<option value="${option}" ${option === value ? 'selected' : ''}>${option}</option>`,
         )
         .join('');
       rootElement.appendChild(selectElement);

package/src/shapes/line.ts

@@ -51,7 +51,7 @@ const lineSchema: Plugin<LineSchema> = {
         type: 'string',
         widget: 'color',
         props: {
-          disabledAlpha: true
+          disabledAlpha: true,
         },
         required: true,
         rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('validation.hexColor') }],

package/src/shapes/rectAndEllipse.ts

@@ -58,8 +58,14 @@ const shape: Plugin<ShapeSchema> = {
       });
     } else if (schema.type === 'rectangle') {
       page.drawRectangle({
-        x: position.x + borderWidth * ((1 - Math.sin(toRadians(rotate))) / 2) + Math.tan(toRadians(rotate)) * (Math.PI ** 2),
-        y: position.y + borderWidth * ((1 + Math.sin(toRadians(rotate))) / 2) + Math.tan(toRadians(rotate)) * (Math.PI ** 2),
+        x:
+          position.x +
+          borderWidth * ((1 - Math.sin(toRadians(rotate))) / 2) +
+          Math.tan(toRadians(rotate)) * Math.PI ** 2,
+        y:
+          position.y +
+          borderWidth * ((1 + Math.sin(toRadians(rotate))) / 2) +
+          Math.tan(toRadians(rotate)) * Math.PI ** 2,
         width: width - borderWidth,
         height: height - borderWidth,
         ...drawOptions,
@@ -80,7 +86,7 @@ const shape: Plugin<ShapeSchema> = {
         type: 'string',
         widget: 'color',
         props: {
-          disabledAlpha: true
+          disabledAlpha: true,
         },
         rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('validation.hexColor') }],
       },
@@ -89,7 +95,7 @@ const shape: Plugin<ShapeSchema> = {
         type: 'string',
         widget: 'color',
         props: {
-          disabledAlpha: true
+          disabledAlpha: true,
         },
         rules: [{ pattern: HEX_COLOR_PATTERN, message: i18n('validation.hexColor') }],
       },

package/src/tables/cell.ts

@@ -9,7 +9,7 @@ import { uiRender as textUiRender } from '../text/uiRender.js';
 import { pdfRender as textPdfRender } from '../text/pdfRender.js';
 import line from '../shapes/line.js';
 import { rectangle } from '../shapes/rectAndEllipse.js';
-import type { CellSchema } from './types';
+import type { CellSchema } from './types.js';
 import { getCellPropPanelSchema, getDefaultCellStyles } from './helper.js';
 const linePdfRender = line.pdf;
 const rectanglePdfRender = rectangle.pdf;
@@ -19,7 +19,7 @@ const renderLine = async (
   schema: CellSchema,
   position: { x: number; y: number },
   width: number,
-  height: number
+  height: number,
 ) =>
   linePdfRender({
     ...arg,
@@ -45,7 +45,7 @@ const createLineDiv = (
   right: string | null,
   bottom: string | null,
   left: string | null,
-  borderColor: string
+  borderColor: string,
 ) => {
   const div = document.createElement('div');
   div.style.width = width;
@@ -86,7 +86,7 @@ const cellSchema: Plugin<CellSchema> = {
         schema,
         { x: position.x + width - borderWidth.right, y: position.y },
         borderWidth.right,
-        height
+        height,
       ),
       // BOTTOM
       renderLine(
@@ -94,7 +94,7 @@ const cellSchema: Plugin<CellSchema> = {
         schema,
         { x: position.x, y: position.y + height - borderWidth.bottom },
         width,
-        borderWidth.bottom
+        borderWidth.bottom,
       ),
       // LEFT
       renderLine(arg, schema, { x: position.x, y: position.y }, borderWidth.left, height),