@pdfme/ui 1.1.4 → 1.1.6

package/src/components/Designer/Main/Selecto.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Selecto, { OnDragStart as _OnDragStart, OnSelect as _OnSelect } from 'react-selecto';
-import { SELECTABLE_CLASSNAME } from '../../../constants.js';
+import { SELECTABLE_CLASSNAME } from '../../../constants';
 
 const _Selecto = ({
   container,

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

@@ -7,26 +7,30 @@ import React, {
   forwardRef,
   useCallback,
 } from 'react';
-import { OnDrag, OnResize, OnClick } from 'react-moveable';
+import { OnDrag, OnResize, OnRotate, OnClick } from 'react-moveable';
 import { SchemaForUI, Size } from '@pdfme/common';
-import { ZOOM, RULER_HEIGHT } from '../../../constants.js';
-import { usePrevious } from '../../../hooks.js';
-import { uuid, round, flatten } from '../../../helper.js';
-import Paper from '../../Paper.js';
-import SchemaUI from '../../Schemas/SchemaUI.js';
-import Selecto from './Selecto.js';
-import Moveable from './Moveable.js';
-import Guides from './Guides.js';
-import Mask from './Mask.js';
+import { XMarkIcon } from '@heroicons/react/24/outline';
+import { ZOOM, RULER_HEIGHT } from '../../../constants';
+import { usePrevious } from '../../../hooks';
+import { uuid, round, flatten } from '../../../helper';
+import Paper from '../../Paper';
+import SchemaUI from '../../Schemas/SchemaUI';
+import Selecto from './Selecto';
+import Moveable from './Moveable';
+import Guides from './Guides';
+import Mask from './Mask';
 
 const DELETE_BTN_ID = uuid();
-const fmt4Num = (prop: string) => Number(prop.replace('px', ''));
-const fmt = (prop: string) => round(fmt4Num(prop) / ZOOM, 2);
+const px2Num = (prop: string) => Number(prop.replace('px', ''));
+const transformRotate2Num = (transform: string) =>
+  Number(transform.match(/rotate\(([^deg)]*)deg\)/)?.[1]) || 0;
+const fmtPx = (prop: string) => round(px2Num(prop) / ZOOM, 2);
+const fmtDeg = (prop: string) => round(transformRotate2Num(prop), 2);
 const isTopLeftResize = (d: string) => d === '-1,-1' || d === '-1,0' || d === '0,-1';
 
 const DeleteButton = ({ activeElements: aes }: { activeElements: HTMLElement[] }) => {
-  const top = Math.min(...aes.map(({ style }) => fmt4Num(style.top)));
-  const left = Math.max(...aes.map(({ style }) => fmt4Num(style.left) + fmt4Num(style.width))) + 10;
+  const top = Math.min(...aes.map(({ style }) => px2Num(style.top)));
+  const left = Math.max(...aes.map(({ style }) => px2Num(style.left) + px2Num(style.width))) + 10;
 
   return (
     <button
@@ -49,16 +53,7 @@ const DeleteButton = ({ activeElements: aes }: { activeElements: HTMLElement[] }
         justifyContent: 'center',
       }}
     >
-      <svg
-        style={{ pointerEvents: 'none' }}
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        strokeWidth="1.5"
-        stroke="currentColor"
-      >
-        <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-      </svg>
+      <XMarkIcon width={10} height={10} />
     </button>
   );
 };
@@ -157,15 +152,15 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
   const onDragEnd = ({ target }: { target: HTMLElement | SVGElement }) => {
     const { top, left } = target.style;
     changeSchemas([
-      { key: 'position.y', value: fmt(top), schemaId: target.id },
-      { key: 'position.x', value: fmt(left), schemaId: target.id },
+      { key: 'position.y', value: fmtPx(top), schemaId: target.id },
+      { key: 'position.x', value: fmtPx(left), schemaId: target.id },
     ]);
   };
 
   const onDragEnds = ({ targets }: { targets: (HTMLElement | SVGElement)[] }) => {
     const arg = targets.map(({ style: { top, left }, id }) => [
-      { key: 'position.y', value: fmt(top), schemaId: id },
-      { key: 'position.x', value: fmt(left), schemaId: id },
+      { key: 'position.y', value: fmtPx(top), schemaId: id },
+      { key: 'position.x', value: fmtPx(left), schemaId: id },
     ]);
     changeSchemas(flatten(arg));
   };
@@ -174,19 +169,19 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
     const { id, style } = target;
     const { width, height, top, left } = style;
     changeSchemas([
-      { key: 'width', value: fmt(width), schemaId: id },
-      { key: 'height', value: fmt(height), schemaId: id },
-      { key: 'position.y', value: fmt(top), schemaId: id },
-      { key: 'position.x', value: fmt(left), schemaId: id },
+      { key: 'width', value: fmtPx(width), schemaId: id },
+      { key: 'height', value: fmtPx(height), schemaId: id },
+      { key: 'position.y', value: fmtPx(top), schemaId: id },
+      { key: 'position.x', value: fmtPx(left), schemaId: id },
     ]);
   };
 
   const onResizeEnds = ({ targets }: { targets: (HTMLElement | SVGElement)[] }) => {
     const arg = targets.map(({ style: { width, height, top, left }, id }) => [
-      { key: 'width', value: fmt(width), schemaId: id },
-      { key: 'height', value: fmt(height), schemaId: id },
-      { key: 'position.y', value: fmt(top), schemaId: id },
-      { key: 'position.x', value: fmt(left), schemaId: id },
+      { key: 'width', value: fmtPx(width), schemaId: id },
+      { key: 'height', value: fmtPx(height), schemaId: id },
+      { key: 'position.y', value: fmtPx(top), schemaId: id },
+      { key: 'position.x', value: fmtPx(left), schemaId: id },
     ]);
     changeSchemas(flatten(arg));
   };
@@ -194,8 +189,8 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
   const onResize = ({ target, width, height, direction }: OnResize) => {
     if (!target) return;
     const s = target.style;
-    const newLeft = fmt4Num(s.left) + (fmt4Num(s.width) - width);
-    const newTop = fmt4Num(s.top) + (fmt4Num(s.height) - height);
+    const newLeft = px2Num(s.left) + (px2Num(s.width) - width);
+    const newTop = px2Num(s.top) + (px2Num(s.height) - height);
     const obj: { top?: string; left?: string; width: string; height: string } = {
       width: `${width}px`,
       height: `${height}px`,
@@ -212,6 +207,25 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
     Object.assign(s, obj);
   };
 
+  const onRotate = ({ target, rotate }: OnRotate) => {
+    if (!target) return;
+    target.style.transform = `rotate(${rotate}deg)`;
+  };
+
+  const onRotateEnd = ({ target }: { target: HTMLElement | SVGElement }) => {
+    const { id, style } = target;
+    const { transform } = style;
+    changeSchemas([{ key: 'rotate', value: fmtDeg(transform), schemaId: id }]);
+  };
+
+  const onRotateEnds = ({ targets }: { targets: (HTMLElement | SVGElement)[] }) => {
+    const arg = targets.map(({ style: { transform }, id }) => [
+      { key: 'rotate', value: fmtDeg(transform), schemaId: id },
+      { key: 'rotate', value: fmtDeg(transform), schemaId: id },
+    ]);
+    changeSchemas(flatten(arg));
+  };
+
   const getGuideLines = (guides: GuidesInterface[], index: number) =>
     guides[index] && guides[index].getGuides().map((g) => g * ZOOM);
 
@@ -308,6 +322,9 @@ const Main = (props: Props, ref: Ref<HTMLDivElement>) => {
                   onResize={onResize}
                   onResizeEnd={onResizeEnd}
                   onResizeGroupEnd={onResizeEnds}
+                  onRotate={onRotate}
+                  onRotateEnd={onRotateEnd}
+                  onRotateGroupEnd={onRotateEnds}
                   onClick={onClickMoveable}
                 />
               )

package/src/components/Designer/Sidebar/DetailView/ExampleInputEditor.tsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import { SchemaForUI } from '@pdfme/common';
-import { readFiles } from '../../../../helper.js';
-import { I18nContext } from '../../../../contexts.js';
+import { readFiles } from '../../../../helper';
+import { I18nContext } from '../../../../contexts';
 import { SidebarProps } from '..';
 import { XMarkIcon } from '@heroicons/react/24/outline';
 
@@ -24,15 +24,15 @@ const ExampleInputEditor = (
                   top: 0,
                   left: 0,
                   display: 'flex',
-                  justifyContent: 'center',
                   alignItems: 'center',
+                  justifyContent: 'center',
                   color: '#333',
                   background: '#f2f2f2',
                   cursor: 'pointer',
                   borderRadius: 2,
                   border: '1px solid #767676',
-                  height: 20,
-                  width: 20,
+                  height: 24,
+                  width: 24,
                 }}
                 aria-label="close"
                 onClick={() =>

package/src/components/Designer/Sidebar/DetailView/PositionAndSizeEditor.tsx

@@ -1,7 +1,7 @@
 import React, { CSSProperties } from 'react';
 import { SchemaForUI } from '@pdfme/common';
-import { round } from '../../../../helper.js';
-import { SidebarProps } from '../index.js';
+import { round } from '../../../../helper';
+import { SidebarProps } from '../index';
 
 const inputSetStyle: CSSProperties = { marginRight: '1rem', display: 'flex', alignItems: 'center' };
 
@@ -258,6 +258,19 @@ const PositionAndSizeEditor = (
           <span style={{ fontSize: '0.6rem' }}>mm</span>
         </div>
       </div>
+      <div style={inputSetStyle}>
+        <label style={{ width: 44 }}>Rotate</label>
+        <input
+          style={inputStyle}
+          type="number"
+          onChange={(e) => {
+            const value = Number(e.target.value || 0);
+            changeSchemas([{ key: 'rotate', value, schemaId: activeSchema.id }]);
+          }}
+          value={activeSchema.rotate || 0}
+        />
+        <span style={{ fontSize: '0.6rem' }}>deg</span>
+      </div>
     </div>
   );
 };

package/src/components/Designer/Sidebar/DetailView/TextPropEditor.tsx

@@ -7,7 +7,7 @@ import {
   DEFAULT_CHARACTER_SPACING,
   DEFAULT_FONT_COLOR,
 } from '@pdfme/common';
-import { FontContext } from '../../../../contexts.js';
+import { FontContext } from '../../../../contexts';
 import { SidebarProps } from '..';
 import { XMarkIcon } from '@heroicons/react/24/outline';
 
@@ -53,8 +53,9 @@ const ColorInputSet = (props: {
           onClick={onClear}
           style={{
             display: 'flex',
-            background: 'none',
             alignItems: 'center',
+            justifyContent: 'center',
+            background: 'none',
             borderRadius: 2,
             border: '1px solid #767676',
             cursor: 'pointer',

package/src/components/Designer/Sidebar/DetailView/TypeAndKeyEditor.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useRef, useCallback } from 'react';
 import { schemaTypes, SchemaForUI } from '@pdfme/common';
-import { SidebarProps } from '../index.js';
-import { I18nContext } from '../../../../contexts.js';
+import { SidebarProps } from '../index';
+import { I18nContext } from '../../../../contexts';
 
 const ErrorLabel = ({ isError, msg }: { isError: boolean; msg: string }) => (
   <span

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

@@ -1,12 +1,12 @@
 import React, { useContext } from 'react';
 import { SchemaForUI } from '@pdfme/common';
-import { I18nContext } from '../../../../contexts.js';
-import Divider from '../../../Divider.js';
-import { SidebarProps } from '../index.js';
-import TextPropEditor from './TextPropEditor.js';
-import ExampleInputEditor from './ExampleInputEditor.js';
-import PositionAndSizeEditor from './PositionAndSizeEditor.js';
-import TypeAndKeyEditor from './TypeAndKeyEditor.js';
+import { I18nContext } from '../../../../contexts';
+import Divider from '../../../Divider';
+import { SidebarProps } from '../index';
+import TextPropEditor from './TextPropEditor';
+import ExampleInputEditor from './ExampleInputEditor';
+import PositionAndSizeEditor from './PositionAndSizeEditor';
+import TypeAndKeyEditor from './TypeAndKeyEditor';
 
 const DetailView = (
   props: Pick<SidebarProps, 'schemas' | 'pageSize' | 'changeSchemas' | 'activeElements'> & {

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useContext } from 'react';
 import { DraggableSyntheticListeners } from '@dnd-kit/core';
-import { I18nContext } from '../../../../contexts.js';
+import { I18nContext } from '../../../../contexts';
 import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
 
 interface Props {

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

@@ -16,9 +16,9 @@ import {
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
 import { SchemaForUI } from '@pdfme/common';
-import Item from './Item.js';
-import SelectableSortableItem from './SelectableSortableItem.js';
-import { SidebarProps } from '../index.js';
+import Item from './Item';
+import SelectableSortableItem from './SelectableSortableItem';
+import { SidebarProps } from '../index';
 
 const SelectableSortableContainer = (
   props: Pick<
@@ -106,55 +106,59 @@ const SelectableSortableContainer = (
         setClonedItems(null);
       }}
     >
-      <div style={{ height, overflowY: 'auto' }}>
-        <SortableContext items={schemas} strategy={verticalListSortingStrategy}>
-          <ul style={{ margin: 0, padding: 0, listStyle: 'none', borderRadius: 5 }}>
-            {schemas.map((schema) => (
-              <SelectableSortableItem
-                key={schema.id}
-                style={{
-                  border: `1px solid ${schema.id === hoveringSchemaId ? '#18a0fb' : 'transparent'}`,
-                }}
-                schema={schema}
-                schemas={schemas}
-                isSelected={isItemSelected(schema.id) || activeId === schema.id}
-                onEdit={onEdit}
-                onSelect={onSelectionChanged}
-                onMouseEnter={() => onChangeHoveringSchemaId(schema.id)}
-                onMouseLeave={() => onChangeHoveringSchemaId(null)}
-              />
-            ))}
-          </ul>
-        </SortableContext>
-      </div>
-      {createPortal(
-        <DragOverlay adjustScale>
-          {activeId ? (
-            <>
-              <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
-                <Item
-                  value={schemas.find((schema) => schema.id === activeId)!.key}
-                  style={{ color: '#fff', background: '#18a0fb' }}
-                  dragOverlay
+      <>
+        <div style={{ height, overflowY: 'auto' }}>
+          <SortableContext items={schemas} strategy={verticalListSortingStrategy}>
+            <ul style={{ margin: 0, padding: 0, listStyle: 'none', borderRadius: 5 }}>
+              {schemas.map((schema) => (
+                <SelectableSortableItem
+                  key={schema.id}
+                  style={{
+                    border: `1px solid ${
+                      schema.id === hoveringSchemaId ? '#18a0fb' : 'transparent'
+                    }`,
+                  }}
+                  schema={schema}
+                  schemas={schemas}
+                  isSelected={isItemSelected(schema.id) || activeId === schema.id}
+                  onEdit={onEdit}
+                  onSelect={onSelectionChanged}
+                  onMouseEnter={() => onChangeHoveringSchemaId(schema.id)}
+                  onMouseLeave={() => onChangeHoveringSchemaId(null)}
                 />
-              </ul>
-              <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
-                {selectedSchemas
-                  .filter((item) => item.id !== activeId)
-                  .map((item) => (
-                    <Item
-                      key={item.id}
-                      value={item.key}
-                      style={{ color: '#fff', background: '#18a0fb' }}
-                      dragOverlay
-                    />
-                  ))}
-              </ul>
-            </>
-          ) : null}
-        </DragOverlay>,
-        document.body
-      )}
+              ))}
+            </ul>
+          </SortableContext>
+        </div>
+        {createPortal(
+          <DragOverlay adjustScale>
+            {activeId ? (
+              <>
+                <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
+                  <Item
+                    value={schemas.find((schema) => schema.id === activeId)!.key}
+                    style={{ color: '#fff', background: '#18a0fb' }}
+                    dragOverlay
+                  />
+                </ul>
+                <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
+                  {selectedSchemas
+                    .filter((item) => item.id !== activeId)
+                    .map((item) => (
+                      <Item
+                        key={item.id}
+                        value={item.key}
+                        style={{ color: '#fff', background: '#18a0fb' }}
+                        dragOverlay
+                      />
+                    ))}
+                </ul>
+              </>
+            ) : null}
+          </DragOverlay>,
+          document.body
+        )}
+      </>
     </DndContext>
   );
 };

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

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { SchemaForUI } from '@pdfme/common';
-import { I18nContext } from '../../../../contexts.js';
-import Item from './Item.js';
-import { useMountStatus } from '../../../../hooks.js';
+import { I18nContext } from '../../../../contexts';
+import Item from './Item';
+import { useMountStatus } from '../../../../hooks';
 
 interface Props {
   isSelected: boolean;

package/src/components/Designer/Sidebar/ListView/index.tsx

@@ -1,9 +1,9 @@
 import React, { useContext, useState } from 'react';
-import { RULER_HEIGHT, SIDEBAR_WIDTH } from '../../../../constants.js';
-import { I18nContext } from '../../../../contexts.js';
-import Divider from '../../../Divider.js';
-import SelectableSortableContainer from './SelectableSortableContainer.js';
-import { SidebarProps } from '../index.js';
+import { RULER_HEIGHT, SIDEBAR_WIDTH } from '../../../../constants';
+import { I18nContext } from '../../../../contexts';
+import Divider from '../../../Divider';
+import SelectableSortableContainer from './SelectableSortableContainer';
+import { SidebarProps } from '../index';
 
 const ListView = (
   props: Pick<

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

@@ -1,10 +1,10 @@
 import React, { useState, useContext } from 'react';
 import { SchemaForUI, Size } from '@pdfme/common';
-import { RULER_HEIGHT, SIDEBAR_WIDTH } from '../../../constants.js';
-import { I18nContext } from '../../../contexts.js';
+import { RULER_HEIGHT, SIDEBAR_WIDTH } from '../../../constants';
+import { I18nContext } from '../../../contexts';
 import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline';
-import ListView from './ListView/index.js';
-import DetailView from './DetailView/index.js';
+import ListView from './ListView/index';
+import DetailView from './DetailView/index';
 
 export type SidebarProps = {
   height: number;

package/src/components/Designer/index.tsx

@@ -1,9 +1,9 @@
 import React, { useRef, useState, useEffect, useContext, useCallback } from 'react';
 import { DesignerReactProps, Template, SchemaForUI } from '@pdfme/common';
-import Sidebar from './Sidebar/index.js';
-import Main from './Main/index.js';
-import { ZOOM, RULER_HEIGHT } from '../../constants.js';
-import { I18nContext } from '../../contexts.js';
+import Sidebar from './Sidebar/index';
+import Main from './Main/index';
+import { ZOOM, RULER_HEIGHT } from '../../constants';
+import { I18nContext } from '../../contexts';
 import {
   uuid,
   set,
@@ -18,11 +18,11 @@ import {
   getUniqSchemaKey,
   moveCommandToChangeSchemasArg,
   getPagesScrollTopByIndex,
-} from '../../helper.js';
-import { useUIPreProcessor, useScrollPageCursor } from '../../hooks.js';
-import Root from '../Root.js';
-import Error from '../Error.js';
-import CtlBar from '../CtlBar/index.js';
+} from '../../helper';
+import { useUIPreProcessor, useScrollPageCursor } from '../../hooks';
+import Root from '../Root';
+import Error from '../Error';
+import CtlBar from '../CtlBar/index';
 
 const TemplateEditor = ({
   template,

package/src/components/Error.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { Size } from '@pdfme/common';
-import { I18nContext } from '../contexts.js';
+import { I18nContext } from '../contexts';
 
 const Error = ({ size, error }: { size: Size; error: Error }) => {
   const i18n = useContext(I18nContext);

package/src/components/Paper.tsx

@@ -1,7 +1,7 @@
 import React, { MutableRefObject, ReactNode, useContext } from 'react';
 import { SchemaForUI, Size, getFallbackFontName } from '@pdfme/common';
-import { FontContext } from '../contexts.js';
-import { ZOOM, RULER_HEIGHT } from '../constants.js';
+import { FontContext } from '../contexts';
+import { ZOOM, RULER_HEIGHT } from '../constants';
 
 const Paper = (porps: {
   paperRefs: MutableRefObject<HTMLDivElement[]>;

package/src/components/Preview.tsx

@@ -1,14 +1,14 @@
 import React, { useCallback, useRef, useState, useEffect } from 'react';
 import { PreviewReactProps, SchemaForUI } from '@pdfme/common';
-import { ZOOM, RULER_HEIGHT } from '../constants.js';
-import UnitPager from './UnitPager.js';
-import Root from './Root.js';
-import Error from './Error.js';
-import CtlBar from './CtlBar/index.js';
-import Paper from './Paper.js';
-import SchemaUI from './Schemas/SchemaUI.js';
-import { useUIPreProcessor, useScrollPageCursor } from '../hooks.js';
-import { templateSchemas2SchemasList, getPagesScrollTopByIndex } from '../helper.js';
+import { ZOOM, RULER_HEIGHT } from '../constants';
+import UnitPager from './UnitPager';
+import Root from './Root';
+import Error from './Error';
+import CtlBar from './CtlBar/index';
+import Paper from './Paper';
+import SchemaUI from './Schemas/SchemaUI';
+import { useUIPreProcessor, useScrollPageCursor } from '../hooks';
+import { templateSchemas2SchemasList, getPagesScrollTopByIndex } from '../helper';
 
 const Preview = ({ template, inputs, size, onChangeInput }: PreviewReactProps) => {
   const rootRef = useRef<HTMLDivElement>(null);

package/src/components/Root.tsx

@@ -1,8 +1,7 @@
-import type {} from 'css-font-loading-module';
 import React, { useContext, forwardRef, ReactNode, Ref, useEffect } from 'react';
 import { Size } from '@pdfme/common';
-import { FontContext } from '../contexts.js';
-import Spinner from './Spinner.js';
+import { FontContext } from '../contexts';
+import Spinner from './Spinner';
 
 type Props = { size: Size; scale: number; children: ReactNode };
 
@@ -10,17 +9,20 @@ const Root = ({ size, scale, children }: Props, ref: Ref<HTMLDivElement>) => {
   const font = useContext(FontContext);
 
   useEffect(() => {
-    const fontFaces = Object.entries(font).map((entry) => {
-      const [key, value] = entry;
-      const fontFace = new FontFace(key, value.data);
+    if (!document || !document.fonts) return;
+    const fontFaces = Object.entries(font).map(
+      ([key, { data }]) =>
+        new FontFace(key, typeof data === 'string' ? `url(${data})` : data, {
+          display: 'swap',
+        })
+    );
+    // @ts-ignore
+    const newFontFaces = fontFaces.filter((fontFace) => !document.fonts.has(fontFace));
 
-      return fontFace.load();
-    });
-    Promise.all(fontFaces).then((loadedFontFaces) => {
+    Promise.all(newFontFaces.map((f) => f.load())).then((loadedFontFaces) => {
       loadedFontFaces.forEach((loadedFontFace) => {
-        if (document && document.fonts && document.fonts.add) {
-          document.fonts.add(loadedFontFace);
-        }
+        // @ts-ignore
+        document.fonts.add(loadedFontFace);
       });
     });
   }, [font]);

package/src/components/Schemas/BarcodeSchema.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, Ref } from 'react';
 import { validateBarcodeInput, BarCodeType, BarcodeSchema } from '@pdfme/common';
-import { ZOOM } from '../../constants.js';
-import { SchemaUIProps } from './SchemaUI.js';
+import { ZOOM } from '../../constants';
+import { SchemaUIProps } from './SchemaUI';
 
 const barcodeExampleImageObj: { [key: string]: string } = {
   qrcode:

package/src/components/Schemas/ImageSchema.tsx

@@ -1,8 +1,8 @@
 import React, { useState, forwardRef, ChangeEvent, Ref } from 'react';
 import { ImageSchema } from '@pdfme/common';
-import { SchemaUIProps } from './SchemaUI.js';
-import { readFiles } from '../../helper.js';
-import { ZOOM } from '../../constants.js';
+import { SchemaUIProps } from './SchemaUI';
+import { readFiles } from '../../helper';
+import { ZOOM } from '../../constants';
 import { XMarkIcon } from '@heroicons/react/24/outline';
 
 type Props = SchemaUIProps & { schema: ImageSchema };
@@ -46,8 +46,8 @@ const ImageSchemaUI = (props: Props, ref: Ref<HTMLInputElement>) => {
               borderRadius: 2,
               border: '1px solid #767676',
               cursor: 'pointer',
-              height: 20,
-              width: 20,
+              height: 24,
+              width: 24,
             }}
             aria-label="close"
             onClick={() => {

package/src/components/Schemas/SchemaUI.tsx

@@ -1,9 +1,9 @@
 import React, { forwardRef, RefObject, Ref, ReactNode } from 'react';
 import { SchemaForUI, isTextSchema, isImageSchema, isBarcodeSchema } from '@pdfme/common';
-import { ZOOM, SELECTABLE_CLASSNAME } from '../../constants.js';
-import TextSchema from './TextSchema.js';
-import ImageSchema from './ImageSchema.js';
-import BarcodeSchema from './BarcodeSchema.js';
+import { ZOOM, SELECTABLE_CLASSNAME } from '../../constants';
+import TextSchema from './TextSchema';
+import ImageSchema from './ImageSchema';
+import BarcodeSchema from './BarcodeSchema';
 
 export interface SchemaUIProps {
   schema: SchemaForUI;
@@ -37,6 +37,7 @@ const Wrapper = ({
       width: schema.width * ZOOM,
       top: schema.position.y * ZOOM,
       left: schema.position.x * ZOOM,
+      transform: `rotate(${schema.rotate || 0}deg)`,
       border,
     }}
   >

package/src/components/Schemas/TextSchema.tsx

@@ -7,8 +7,8 @@ import {
   DEFAULT_FONT_COLOR,
   TextSchema,
 } from '@pdfme/common';
-import { SchemaUIProps } from './SchemaUI.js';
-import { ZOOM } from '../../constants.js';
+import { SchemaUIProps } from './SchemaUI';
+import { ZOOM } from '../../constants';
 
 type Props = SchemaUIProps & { schema: TextSchema };