@pdfme/ui 1.1.5 → 1.1.7

package/dist/types/class.d.ts

@@ -12,7 +12,7 @@ export declare abstract class BaseUIClass {
     protected getFont(): Record<string, {
         fallback?: boolean | undefined;
         subset?: boolean | undefined;
-        data: ArrayBuffer | Uint8Array;
+        data: string | ArrayBuffer | Uint8Array;
     }>;
     getTemplate(): {
         columns?: string[] | undefined;

package/dist/types/components/Designer/index.d.ts

@@ -4,7 +4,7 @@ declare const TemplateEditor: ({ template, size, onSaveTemplate, onChangeTemplat
         font?: Record<string, {
             fallback?: boolean | undefined;
             subset?: boolean | undefined;
-            data: ArrayBuffer | Uint8Array;
+            data: string | ArrayBuffer | Uint8Array;
         }> | undefined;
         lang?: "en" | "ja" | undefined;
     } | undefined;

package/dist/types/contexts.d.ts

@@ -3,5 +3,5 @@ export declare const I18nContext: import("react").Context<(key: "type" | "field"
 export declare const FontContext: import("react").Context<Record<string, {
     fallback?: boolean | undefined;
     subset?: boolean | undefined;
-    data: ArrayBuffer | Uint8Array;
+    data: string | ArrayBuffer | Uint8Array;
 }>>;

package/dist/types/index.d.ts

@@ -1,6 +1,7 @@
 import Designer from './Designer';
 import Form from './Form';
 import Viewer from './Viewer';
-export { Designer, Viewer, Form };
-export type { Lang, Size, Alignment, SchemaType, BarCodeType, TextSchema, ImageSchema, BarcodeSchema, Schema, SchemaForUI, Font, BasePdf, Template, CommonProps, GeneratorOptions, GenerateProps, UIOptions, UIProps, PreviewProps, DesignerProps, } from '@pdfme/common';
-export { BLANK_PDF, isTextSchema, isImageSchema, isBarcodeSchema, checkTemplate, checkUIProps, checkPreviewProps, checkDesignerProps, checkGenerateProps, validateBarcodeInput, } from '@pdfme/common';
+import { BLANK_PDF, HELVETICA, isTextSchema, isImageSchema, isBarcodeSchema, checkTemplate, checkUIProps, checkPreviewProps, checkDesignerProps, checkGenerateProps, validateBarcodeInput } from '@pdfme/common';
+import type { Lang, Size, Alignment, SchemaType, BarCodeType, TextSchema, ImageSchema, BarcodeSchema, Schema, SchemaForUI, Font, BasePdf, Template, CommonProps, GeneratorOptions, GenerateProps, UIOptions, UIProps, PreviewProps, DesignerProps } from '@pdfme/common';
+export { Designer, Viewer, Form, BLANK_PDF, HELVETICA, isTextSchema, isImageSchema, isBarcodeSchema, checkTemplate, checkUIProps, checkPreviewProps, checkDesignerProps, checkGenerateProps, validateBarcodeInput, };
+export type { Lang, Size, Alignment, SchemaType, BarCodeType, TextSchema, ImageSchema, BarcodeSchema, Schema, SchemaForUI, Font, BasePdf, Template, CommonProps, GeneratorOptions, GenerateProps, UIOptions, UIProps, PreviewProps, DesignerProps, };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pdfme/ui",
-  "version": "1.1.5",
+  "version": "1.1.7",
   "sideEffects": false,
   "author": "hand-dot",
   "license": "MIT",

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

@@ -9,6 +9,7 @@ import React, {
 } from 'react';
 import { OnDrag, OnResize, OnClick } from 'react-moveable';
 import { SchemaForUI, Size } from '@pdfme/common';
+import { XMarkIcon } from '@heroicons/react/24/outline';
 import { ZOOM, RULER_HEIGHT } from '../../../constants';
 import { usePrevious } from '../../../hooks';
 import { uuid, round, flatten } from '../../../helper';
@@ -49,16 +50,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>
   );
 };

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

@@ -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/TextPropEditor.tsx

@@ -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/Root.tsx

@@ -9,19 +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) => {
         // @ts-ignore
-        if (document && document.fonts && document.fonts.add) {
-          // @ts-ignore
-          document.fonts.add(loadedFontFace);
-        }
+        document.fonts.add(loadedFontFace);
       });
     });
   }, [font]);

package/src/components/Schemas/ImageSchema.tsx

@@ -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/index.ts

@@ -2,9 +2,21 @@ import Designer from './Designer';
 import Form from './Form';
 import Viewer from './Viewer';
 
-export { Designer, Viewer, Form };
+import {
+  BLANK_PDF,
+  HELVETICA,
+  isTextSchema,
+  isImageSchema,
+  isBarcodeSchema,
+  checkTemplate,
+  checkUIProps,
+  checkPreviewProps,
+  checkDesignerProps,
+  checkGenerateProps,
+  validateBarcodeInput,
+} from '@pdfme/common';
 
-export type {
+import type {
   Lang,
   Size,
   Alignment,
@@ -28,7 +40,11 @@ export type {
 } from '@pdfme/common';
 
 export {
+  Designer,
+  Viewer,
+  Form,
   BLANK_PDF,
+  HELVETICA,
   isTextSchema,
   isImageSchema,
   isBarcodeSchema,
@@ -38,4 +54,27 @@ export {
   checkDesignerProps,
   checkGenerateProps,
   validateBarcodeInput,
-} from '@pdfme/common';
+};
+
+export type {
+  Lang,
+  Size,
+  Alignment,
+  SchemaType,
+  BarCodeType,
+  TextSchema,
+  ImageSchema,
+  BarcodeSchema,
+  Schema,
+  SchemaForUI,
+  Font,
+  BasePdf,
+  Template,
+  CommonProps,
+  GeneratorOptions,
+  GenerateProps,
+  UIOptions,
+  UIProps,
+  PreviewProps,
+  DesignerProps,
+};

package/webpack.config.js

@@ -19,13 +19,8 @@ const config = {
   },
   plugins: [
     // new BundleAnalyzerPlugin(),
-    new webpack.ProvidePlugin({
-      process: 'process/browser',
-    }),
-    new webpack.BannerPlugin({
-      banner: BANNER,
-      entryOnly: true,
-    }),
+    new webpack.ProvidePlugin({ process: 'process/browser' }),
+    new webpack.BannerPlugin({ banner: BANNER, entryOnly: true }),
   ],
   devtool: 'source-map',
   entry: './src/index.ts',
@@ -33,17 +28,8 @@ const config = {
     path: path.resolve(__dirname, 'dist'),
     filename: 'index.js',
     globalObject: 'this',
-    library: {
-      type: 'umd',
-    },
-  },
-  module: {
-    rules: [
-      {
-        test: /\.tsx?$/,
-        use: 'ts-loader',
-      },
-    ],
+    library: { type: 'umd' },
   },
+  module: { rules: [{ test: /\.tsx?$/, use: 'ts-loader' }] },
 };
 module.exports = config;