@pdfme/ui 5.3.8-dev.57 → 5.3.8-dev.58

package/dist/index.es.js

@@ -138842,7 +138842,12 @@ const { Text: Text$4 } = Typography, Item = React.memo(
   return Array.from(p.body.children).forEach((A) => v(A)), /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: u, title: s, dangerouslySetInnerHTML: { __html: p.body.innerHTML } });
 }, PluginIcon = (a) => {
   var g;
-  const { plugin: s, label: c, size: u, styles: d } = a, { token: p } = theme.useToken(), A = ((g = reactExports.useContext(OptionsContext).icons) == null ? void 0 : g[s.propPanel.defaultSchema.type]) ?? s.icon, b = { ...d, color: p.colorText, display: "flex", justifyContent: "center" };
+  const { plugin: s, label: c, size: u, styles: d } = a, { token: p } = theme.useToken(), A = ((g = reactExports.useContext(OptionsContext).icons) == null ? void 0 : g[s.propPanel.defaultSchema.type]) ?? s.icon, b = {
+    ...d,
+    color: p.colorText,
+    display: "flex",
+    justifyContent: "center"
+  };
   return A ? u ? getWithModifiedSize(A, c, u, b) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: b, title: c, dangerouslySetInnerHTML: { __html: A } }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { ...d, overflow: "hidden", fontSize: 10 }, title: c, children: c });
 }, SelectableSortableItem = ({
   isSelected: a,
@@ -138908,7 +138913,15 @@ const { Text: Text$4 } = Typography, Item = React.memo(
     const $ = typeof P == "string" ? c.find((B) => B.id === P) : P, [T, E] = Object.entries(m).find(
       ([B, R]) => (R == null ? void 0 : R.propPanel.defaultSchema.type) === ($ == null ? void 0 : $.type)
     );
-    return E ? /* @__PURE__ */ jsxRuntimeExports.jsx(PluginIcon, { plugin: E, label: T, size: 20, styles: { marginRight: "0.5rem" } }) : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
+    return E ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      PluginIcon,
+      {
+        plugin: E,
+        label: T,
+        size: 20,
+        styles: { marginRight: "0.5rem" }
+      }
+    ) : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     DndContext,
@@ -139036,20 +139049,31 @@ const { Text: Text$4 } = Typography, Item = React.memo(
           onEdit: u
         }
       ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { paddingTop: "0.5rem", display: "flex", alignItems: "center", justifyContent: "flex-end" }, children: x ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, { size: "small", type: "text", onClick: S, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("u", { children: [
-          " ",
-          g("commitBulkUpdateFieldName")
-        ] }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { margin: "0 1rem" }, children: "/" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, { size: "small", type: "text", onClick: () => y(!1), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("u", { children: [
-          " ",
-          g("cancel")
-        ] }) })
-      ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, { size: "small", type: "text", onClick: w, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("u", { children: [
-        " ",
-        g("bulkUpdateFieldName")
-      ] }) }) })
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          style: {
+            paddingTop: "0.5rem",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "flex-end"
+          },
+          children: x ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, { size: "small", type: "text", onClick: S, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("u", { children: [
+              " ",
+              g("commitBulkUpdateFieldName")
+            ] }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: { margin: "0 1rem" }, children: "/" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, { size: "small", type: "text", onClick: () => y(!1), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("u", { children: [
+              " ",
+              g("cancel")
+            ] }) })
+          ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Button$1, { size: "small", type: "text", onClick: w, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("u", { children: [
+            " ",
+            g("bulkUpdateFieldName")
+          ] }) })
+        }
+      )
     ] })
   ] });
 };
@@ -154740,9 +154764,11 @@ const FormRenderComponent = withProvider(FormCore, defaultWidgets), AlignWidget
       }
     }
     R.length && A.validateFields().then(() => d(R)).catch((O) => {
-      O.errorFields.length && (R = R.filter((M) => !O.errorFields.find(
-        (_) => _.name.includes(M.key)
-      ))), R.length && d(R);
+      O.errorFields.length && (R = R.filter(
+        (M) => !O.errorFields.find(
+          (_) => _.name.includes(M.key)
+        )
+      )), R.length && d(R);
     });
   }, 100), w = Object.values(g).find(
     (E) => (E == null ? void 0 : E.propPanel.defaultSchema.type) === v.type
@@ -154769,14 +154795,26 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
         type: "string",
         required: !0,
         span: 12,
-        rules: [{
-          validator: C,
-          message: b("validation.uniqueName")
-        }],
+        rules: [
+          {
+            validator: C,
+            message: b("validation.uniqueName")
+          }
+        ],
         props: { autoComplete: "off" }
       },
-      editable: { title: b("editable"), type: "boolean", span: 8, hidden: ($ == null ? void 0 : $.readOnly) !== void 0 },
-      required: { title: b("required"), type: "boolean", span: 16, hidden: "{{!formData.editable}}" },
+      editable: {
+        title: b("editable"),
+        type: "boolean",
+        span: 8,
+        hidden: ($ == null ? void 0 : $.readOnly) !== void 0
+      },
+      required: {
+        title: b("required"),
+        type: "boolean",
+        span: 16,
+        hidden: "{{!formData.editable}}"
+      },
       "-": { type: "void", widget: "Divider" },
       align: { title: b("align"), type: "void", widget: "AlignWidget" },
       position: {
@@ -154969,14 +155007,20 @@ Check this document: https://pdfme.com/docs/custom-schemas`);
       outline: s
     },
     children: [
-      u.required && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { style: {
-        color: "red",
-        position: "absolute",
-        top: -12,
-        left: -12,
-        fontSize: 18,
-        fontWeight: 700
-      }, children: "*" }),
+      u.required && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "span",
+        {
+          style: {
+            color: "red",
+            position: "absolute",
+            top: -12,
+            left: -12,
+            fontSize: 18,
+            fontWeight: 700
+          },
+          children: "*"
+        }
+      ),
       a
     ]
   }
@@ -155037,7 +155081,11 @@ Check this document: https://pdfme.com/docs/custom-schemas`), /* @__PURE__ */ js
     ) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { visibility: y ? "hidden" : "visible" }, children: a.children })
   ] });
-}, LeftSidebar = ({ height: a, scale: s, basePdf: c }) => {
+}, LeftSidebar = ({
+  height: a,
+  scale: s,
+  basePdf: c
+}) => {
   const { token: u } = theme.useToken(), d = reactExports.useContext(PluginsRegistry), [p, v] = reactExports.useState(!1);
   return reactExports.useEffect(() => {
     const A = () => {
@@ -155060,23 +155108,14 @@ Check this document: https://pdfme.com/docs/custom-schemas`), /* @__PURE__ */ js
         textAlign: "center",
         overflow: p ? "visible" : "auto"
       },
-      children: Object.entries(d).map(([A, b]) => b != null && b.propPanel.defaultSchema ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Draggable$1,
+      children: Object.entries(d).map(([A, b]) => b != null && b.propPanel.defaultSchema ? /* @__PURE__ */ jsxRuntimeExports.jsx(Draggable$1, { scale: s, basePdf: c, plugin: b, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Button$1,
         {
-          scale: s,
-          basePdf: c,
-          plugin: b,
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            Button$1,
-            {
-              onMouseDown: () => v(!0),
-              style: { width: 35, height: 35, marginTop: "0.25rem", padding: "0.25rem" },
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx(PluginIcon, { plugin: b, label: A })
-            }
-          )
-        },
-        A
-      ) : null)
+          onMouseDown: () => v(!0),
+          style: { width: 35, height: 35, marginTop: "0.25rem", padding: "0.25rem" },
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(PluginIcon, { plugin: b, label: A })
+        }
+      ) }, A) : null)
     }
   );
 }, Paper = (a) => {
@@ -164921,7 +164960,13 @@ const guideStyle = (a, s, c, u) => ({
   }
   return u;
 }, Padding = ({ basePdf: a }) => /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: isBlankPdf(a) && a.padding.map((s, c) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: getPaddingStyle(c, s, theme.useToken().token.colorError) }, String(c))) }), StaticSchema = (a) => {
-  const { template: { schemas: s, basePdf: c }, input: u, scale: d, totalPages: p, currentPage: v } = a;
+  const {
+    template: { schemas: s, basePdf: c },
+    input: u,
+    scale: d,
+    totalPages: p,
+    currentPage: v
+  } = a;
   return !isBlankPdf(c) || !c.staticSchema ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: c.staticSchema.map((A) => /* @__PURE__ */ jsxRuntimeExports.jsx(
     Renderer,
     {
@@ -165178,7 +165223,10 @@ const guideStyle = (a, s, c, u) => ({
               let oe = te;
               if (K !== "designer" && ae.readOnly) {
                 const fe = {
-                  ...g.flat().reduce((me, Ee) => (me[Ee.name] = Ee.content || "", me), {}),
+                  ...g.flat().reduce(
+                    (me, Ee) => (me[Ee.name] = Ee.content || "", me),
+                    {}
+                  ),
                   totalPages: g.length,
                   currentPage: V + 1
                 };
@@ -165377,7 +165425,12 @@ const guideStyle = (a, s, c, u) => ({
   onChangeTemplate: u,
   onPageCursorChange: d
 }) => {
-  const p = reactExports.useRef([]), v = reactExports.useRef([]), A = reactExports.useRef(null), b = reactExports.useRef([]), g = reactExports.useContext(I18nContext), x = reactExports.useContext(PluginsRegistry), y = reactExports.useContext(OptionsContext), f = getMaxZoom(), [m, C] = reactExports.useState(null), [S, w] = reactExports.useState([]), [I, P] = reactExports.useState([[]]), [$, T] = reactExports.useState(0), [E, B] = reactExports.useState(1), [R, O] = reactExports.useState(!0), [M, _] = reactExports.useState(null), { backgrounds: D, pageSizes: U, scale: G, error: Q, refresh: L } = useUIPreProcessor({ template: a, size: s, zoomLevel: E, maxZoom: f }), F = (oe) => {
+  const p = reactExports.useRef([]), v = reactExports.useRef([]), A = reactExports.useRef(null), b = reactExports.useRef([]), g = reactExports.useContext(I18nContext), x = reactExports.useContext(PluginsRegistry), y = reactExports.useContext(OptionsContext), f = getMaxZoom(), [m, C] = reactExports.useState(null), [S, w] = reactExports.useState([]), [I, P] = reactExports.useState([[]]), [$, T] = reactExports.useState(0), [E, B] = reactExports.useState(1), [R, O] = reactExports.useState(!0), [M, _] = reactExports.useState(null), { backgrounds: D, pageSizes: U, scale: G, error: Q, refresh: L } = useUIPreProcessor({
+    template: a,
+    size: s,
+    zoomLevel: E,
+    maxZoom: f
+  }), F = (oe) => {
     w(oe), C(null);
   }, j = () => {
     w([]), C(null);
@@ -165447,8 +165500,16 @@ const guideStyle = (a, s, c, u) => ({
       ...oe,
       name: de(g("field")),
       position: {
-        x: se(be, oe.position.x, Ae.width - me - oe.width),
-        y: se(fe, oe.position.y, Ae.height - Ee - oe.height)
+        x: se(
+          be,
+          oe.position.x,
+          Ae.width - me - oe.width
+        ),
+        y: se(
+          fe,
+          oe.position.y,
+          Ae.height - Ee - oe.height
+        )
       },
       required: oe.readOnly ? !1 : y.requiredByDefault || oe.required || !1
     };
@@ -165489,7 +165550,10 @@ const guideStyle = (a, s, c, u) => ({
       onDragEnd: (oe) => {
         var ue, xe;
         if (!oe.active) return;
-        const fe = oe.active, me = b.current[$].getBoundingClientRect(), Ee = ((ue = fe.rect.current.initial) == null ? void 0 : ue.left) || 0, be = ((xe = fe.rect.current.initial) == null ? void 0 : xe.top) || 0, Ae = me.left - Ee + scaleDragPosAdjustment(20, G), de = me.top - be, se = (oe.delta.y - de) / G, ie = (oe.delta.x - Ae) / G, le = { x: round$1(px2mm(Math.max(0, ie)), 2), y: round$1(px2mm(Math.max(0, se)), 2) };
+        const fe = oe.active, me = b.current[$].getBoundingClientRect(), Ee = ((ue = fe.rect.current.initial) == null ? void 0 : ue.left) || 0, be = ((xe = fe.rect.current.initial) == null ? void 0 : xe.top) || 0, Ae = me.left - Ee + scaleDragPosAdjustment(20, G), de = me.top - be, se = (oe.delta.y - de) / G, ie = (oe.delta.x - Ae) / G, le = {
+          x: round$1(px2mm(Math.max(0, ie)), 2),
+          y: round$1(px2mm(Math.max(0, se)), 2)
+        };
         q({ ...fe.data.current, position: le });
       },
       onDragStart: j,
@@ -165750,7 +165814,12 @@ const { Text } = Typography, icons = {
   size: c,
   onChangeInput: u
 }) => {
-  const { token: d } = theme.useToken(), p = reactExports.useContext(FontContext), v = getMaxZoom(), A = reactExports.useRef(null), b = reactExports.useRef([]), [g, x] = reactExports.useState(0), [y, f] = reactExports.useState(0), [m, C] = reactExports.useState(1), [S, w] = reactExports.useState([[]]), { backgrounds: I, pageSizes: P, scale: $, error: T, refresh: E } = useUIPreProcessor({ template: a, size: c, zoomLevel: m, maxZoom: v }), B = !!u, R = s[g], O = (D) => {
+  const { token: d } = theme.useToken(), p = reactExports.useContext(FontContext), v = getMaxZoom(), A = reactExports.useRef(null), b = reactExports.useRef([]), [g, x] = reactExports.useState(0), [y, f] = reactExports.useState(0), [m, C] = reactExports.useState(1), [S, w] = reactExports.useState([[]]), { backgrounds: I, pageSizes: P, scale: $, error: T, refresh: E } = useUIPreProcessor({
+    template: a,
+    size: c,
+    zoomLevel: m,
+    maxZoom: v
+  }), B = !!u, R = s[g], O = (D) => {
     getDynamicTemplate({
       template: D,
       input: R,
@@ -165786,9 +165855,7 @@ const { Text } = Typography, icons = {
         if (F === j) return;
         M({ name: U.name, value: F }), U.type === "table" && (G = !0);
       } else {
-        const F = S[y].find(
-          (j) => j.id === U.id
-        );
+        const F = S[y].find((j) => j.id === U.id);
         if (!F) return;
         F[Q] = L;
       }

package/dist/types/src/components/Designer/LeftSidebar.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { BasePdf } from '@pdfme/common';
-declare const LeftSidebar: ({ height, scale, basePdf }: {
+declare const LeftSidebar: ({ height, scale, basePdf, }: {
     height: number;
     scale: number;
     basePdf: BasePdf;

package/dist/types/src/components/Designer/PluginIcon.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Plugin } from "@pdfme/common";
+import { Plugin } from '@pdfme/common';
 interface PluginIconProps {
     plugin: Plugin<any>;
     label: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "5.3.8-dev.57",
+  "version": "5.3.8-dev.58",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",

package/src/Designer.tsx

@@ -47,9 +47,9 @@ class Designer extends BaseUIClass {
   public onChangeTemplate(cb: (template: Template) => void) {
     this.onChangeTemplateCallback = cb;
   }
-  
+
   public getPageCursor() {
-    return this.pageCursor
+    return this.pageCursor;
   }
 
   protected render() {
@@ -78,12 +78,12 @@ class Designer extends BaseUIClass {
             }
           }}
           onPageCursorChange={(newPageCursor: number) => {
-            this.pageCursor = newPageCursor
+            this.pageCursor = newPageCursor;
           }}
           size={this.size}
         />
       </AppContextProvider>,
-      this.domContainer
+      this.domContainer,
     );
   }
 }

package/src/Form.tsx

@@ -46,8 +46,6 @@ class Form extends PreviewUI {
     });
   }
 
-
-
   protected render() {
     if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
     ReactDOM.render(
@@ -75,7 +73,7 @@ class Form extends PreviewUI {
           }}
         />
       </AppContextProvider>,
-      this.domContainer
+      this.domContainer,
     );
   }
 }

package/src/Viewer.tsx

@@ -22,7 +22,7 @@ class Viewer extends PreviewUI {
       >
         <Preview template={this.template} size={this.size} inputs={this.inputs} />
       </AppContextProvider>,
-      this.domContainer
+      this.domContainer,
     );
   }
 }

package/src/components/AppContextProvider.tsx

@@ -18,7 +18,7 @@ const isObject = (item: any): item is Record<string, any> =>
 
 const deepMerge = <T extends Record<string, any>, U extends Record<string, any>>(
   target: T,
-  source: U
+  source: U,
 ): T & U => {
   let output = { ...target } as T & U;
 

package/src/components/CtlBar.tsx

@@ -7,7 +7,7 @@ import { Plus, Minus, ChevronLeft, ChevronRight, Ellipsis } from 'lucide-react';
 import type { MenuProps } from 'antd';
 import { theme, Typography, Button, Dropdown } from 'antd';
 import { I18nContext } from '../contexts.js';
-import { getMaxZoom } from "../helper.js";
+import { getMaxZoom } from '../helper.js';
 
 const { Text } = Typography;
 

package/src/components/Designer/Canvas/Guides.tsx

@@ -7,7 +7,7 @@ const guideStyle = (
   top: number,
   left: number,
   height: number,
-  width: number
+  width: number,
 ): React.CSSProperties => ({
   position: 'absolute',
   top,

package/src/components/Designer/Canvas/Moveable.tsx

@@ -86,12 +86,12 @@ const _Moveable = (props: Props, ref: Ref<any>) => {
   useEffect(() => {
     const containerElement = document.querySelector(`.${className}`) as HTMLElement | null;
     const containerElement2 = document.querySelectorAll(
-      `.${className} .moveable-line`
+      `.${className} .moveable-line`,
     ) as NodeListOf<HTMLElement>;
     if (containerElement) {
       containerElement.style.setProperty('--moveable-color', token.colorPrimary);
       Array.from(containerElement2).map((e) =>
-        e.style.setProperty('--moveable-color', token.colorPrimary)
+        e.style.setProperty('--moveable-color', token.colorPrimary),
       );
     }
   }, [props.target]);

package/src/components/Designer/Canvas/Padding.tsx

@@ -43,12 +43,14 @@ const getPaddingStyle = (i: number, p: number, color: string): CSS.Properties =>
 };
 
 const Padding = ({ basePdf }: { basePdf: BasePdf }) => {
-  return <>
-    {isBlankPdf(basePdf) &&
-      basePdf.padding.map((p, i) => (
-        <div key={String(i)} style={getPaddingStyle(i, p, theme.useToken().token.colorError)} />
-      ))}
-  </>
-}
+  return (
+    <>
+      {isBlankPdf(basePdf) &&
+        basePdf.padding.map((p, i) => (
+          <div key={String(i)} style={getPaddingStyle(i, p, theme.useToken().token.colorError)} />
+        ))}
+    </>
+  );
+};
 
-export default Padding;
+export default Padding;

package/src/components/Designer/Canvas/index.tsx

@@ -10,7 +10,15 @@ import React, {
   useCallback,
 } from 'react';
 import { theme, Button } from 'antd';
-import { ZOOM, SchemaForUI, Size, ChangeSchemas, BasePdf, isBlankPdf, replacePlaceholders } from '@pdfme/common';
+import {
+  ZOOM,
+  SchemaForUI,
+  Size,
+  ChangeSchemas,
+  BasePdf,
+  isBlankPdf,
+  replacePlaceholders,
+} from '@pdfme/common';
 import { PluginsRegistry } from '../../../contexts.js';
 import { X } from 'lucide-react';
 import { RULER_HEIGHT, RIGHT_SIDEBAR_WIDTH } from '../../../constants.js';
@@ -81,7 +89,6 @@ interface OnClick {
 
 const mm2px = (mm: number) => mm * 3.7795275591;
 
-
 const DELETE_BTN_ID = uuid();
 const fmt4Num = (prop: string) => Number(prop.replace('px', ''));
 const fmt = (prop: string) => round(fmt4Num(prop) / ZOOM, 2);
@@ -373,16 +380,16 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
 
   const rotatable = useMemo(() => {
     const selectedSchemas = (schemasList[pageCursor] || []).filter((s) =>
-      activeElements.map((ae) => ae.id).includes(s.id)
+      activeElements.map((ae) => ae.id).includes(s.id),
     );
     const schemaTypes = selectedSchemas.map((s) => s.type);
     const uniqueSchemaTypes = [...new Set(schemaTypes)];
     const defaultSchemas = Object.values(pluginsRegistry).map(
-      (plugin) => plugin?.propPanel.defaultSchema
+      (plugin) => plugin?.propPanel.defaultSchema,
     );
 
     return uniqueSchemaTypes.every(
-      (type) => defaultSchemas.find((ds) => ds.type === type)?.rotate !== undefined
+      (type) => defaultSchemas.find((ds) => ds.type === type)?.rotate !== undefined,
     );
   }, [activeElements, pageCursor, schemasList, pluginsRegistry]);
 
@@ -452,7 +459,7 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
             <StaticSchema
               template={{ schemas: schemasList, basePdf }}
               input={Object.fromEntries(
-                schemasList.flat().map(({ name, content = '' }) => [name, content])
+                schemasList.flat().map(({ name, content = '' }) => [name, content]),
               )}
               scale={scale}
               totalPages={schemasList.length}
@@ -501,17 +508,20 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
           const mode =
             editing && activeElements.map((ae) => ae.id).includes(schema.id)
               ? 'designer'
-              : 'viewer'
+              : 'viewer';
 
           const content = schema.content || '';
           let value = content;
 
           if (mode !== 'designer' && schema.readOnly) {
             const variables = {
-              ...schemasList.flat().reduce((acc, currSchema) => {
-                acc[currSchema.name] = currSchema.content || '';
-                return acc;
-              }, {} as Record<string, string>),
+              ...schemasList.flat().reduce(
+                (acc, currSchema) => {
+                  acc[currSchema.name] = currSchema.content || '';
+                  return acc;
+                },
+                {} as Record<string, string>,
+              ),
               totalPages: schemasList.length,
               currentPage: index + 1,
             };
@@ -532,11 +542,14 @@ const Canvas = (props: Props, ref: Ref<HTMLDivElement>) => {
                 changeSchemas(args.map(({ key, value }) => ({ key, value, schemaId: schema.id })));
               }}
               stopEditing={() => setEditing(false)}
-              outline={`1px ${hoveringSchemaId === schema.id ? 'solid' : 'dashed'} ${schema.readOnly && hoveringSchemaId !== schema.id ? 'transparent' : token.colorPrimary
-                }`}
+              outline={`1px ${hoveringSchemaId === schema.id ? 'solid' : 'dashed'} ${
+                schema.readOnly && hoveringSchemaId !== schema.id
+                  ? 'transparent'
+                  : token.colorPrimary
+              }`}
               scale={scale}
             />
-          )
+          );
         }}
       />
     </div>